diff --git a/README.md b/README.md
index 6f9f4c03..a8d235e9 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 <br/>
 
 <h3 align="center">
-  <a href="https://budget.reinisch.io">Ocular</a> - Helps you see your budget more clearly ✨
+  ✨ <a href="https://budget.reinisch.io">Ocular</a> - Helps you see your budget more clearly ✨
 </h3>
 
 <p align="center">
diff --git a/src/app/components/base/button/Button.vue b/src/app/components/base/button/Button.vue
index 2e774c6a..67242243 100644
--- a/src/app/components/base/button/Button.vue
+++ b/src/app/components/base/button/Button.vue
@@ -65,6 +65,8 @@ const classes = computed(() => [
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .button {
   all: unset;
   justify-self: flex-start;
@@ -88,6 +90,11 @@ const classes = computed(() => [
   .icon {
     width: 16px;
     height: 16px;
+
+    @include globals.onMobileDevices {
+      width: 20px;
+      height: 20px;
+    }
   }
 
   .text {
@@ -109,6 +116,11 @@ const classes = computed(() => [
     .icon {
       width: 20px;
       height: 20px;
+
+      @include globals.onMobileDevices {
+        width: 24px;
+        height: 24px;
+      }
     }
 
     .text {
diff --git a/src/app/components/base/context-menu/ContextMenu.vue b/src/app/components/base/context-menu/ContextMenu.vue
index 00cdcf78..82c1988d 100644
--- a/src/app/components/base/context-menu/ContextMenu.vue
+++ b/src/app/components/base/context-menu/ContextMenu.vue
@@ -100,6 +100,8 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .reference {
   display: inline-flex;
 }
@@ -137,6 +139,10 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
   opacity: 0;
   transition: all var(--transition-s);
 
+  @include globals.onMobileDevices {
+    max-height: 100%;
+  }
+
   &.top {
     transform: translateY(6px);
   }
diff --git a/src/app/components/base/context-menu/ContextMenuButton.vue b/src/app/components/base/context-menu/ContextMenuButton.vue
index 5c6edcd5..8d650bb7 100644
--- a/src/app/components/base/context-menu/ContextMenuButton.vue
+++ b/src/app/components/base/context-menu/ContextMenuButton.vue
@@ -51,6 +51,8 @@ const onClick = (evt: MouseEvent) => {
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .item {
   display: flex;
   width: 100%;
@@ -70,6 +72,11 @@ const onClick = (evt: MouseEvent) => {
   color: var(--context-menu-item-color);
   position: relative;
 
+  @include globals.onMobileDevices {
+    font-size: var(--font-size-s);
+    padding: 10px 16px;
+  }
+
   .icon {
     width: 12px;
     height: 12px;
diff --git a/src/app/components/base/link/Link.vue b/src/app/components/base/link/Link.vue
index 78878d8e..c71b5e9c 100644
--- a/src/app/components/base/link/Link.vue
+++ b/src/app/components/base/link/Link.vue
@@ -63,14 +63,16 @@ const classes = computed(() => [
 </script>
 
 <style lang="scss" module>
+@use 'src/styles/globals';
+
 .link {
   background: transparent;
   color: v-bind('theme.pure.base');
   transition: all var(--transition-s);
 
   .icon {
-    width: 20px;
-    height: 20px;
+    width: 16px;
+    height: 16px;
   }
 
   &.custom {
@@ -86,4 +88,11 @@ const classes = computed(() => [
     color: v-bind('theme.pure.hover');
   }
 }
+
+@include globals.onMobileDevices {
+  .link .icon {
+    width: 20px;
+    height: 20px;
+  }
+}
 </style>
diff --git a/src/app/components/base/list/List.vue b/src/app/components/base/list/List.vue
index 37df288e..a05a84c1 100644
--- a/src/app/components/base/list/List.vue
+++ b/src/app/components/base/list/List.vue
@@ -9,6 +9,6 @@
   display: flex;
   flex-direction: column;
   list-style: none outside none;
-  grid-gap: 10px;
+  gap: 10px;
 }
 </style>
diff --git a/src/app/pages/Frame.vue b/src/app/pages/Frame.vue
index 929dd2f6..8c4f1364 100644
--- a/src/app/pages/Frame.vue
+++ b/src/app/pages/Frame.vue
@@ -1,8 +1,10 @@
 <template>
   <div :class="$style.frame">
     <div ref="menu" :class="$style.buttons">
-      <ThemeButton :class="$style.btn" />
-      <div :class="$style.divider" />
+      <template v-if="media !== 'mobile'">
+        <ThemeButton :class="$style.btn" />
+        <div :class="$style.divider" />
+      </template>
 
       <Link
         v-for="button of buttons"
@@ -15,9 +17,12 @@
         :name="button.name"
       />
 
-      <ToolsButton :class="[$style.top, $style.btn]" />
+      <div v-if="media === 'mobile'" :class="$style.mobileDivider" />
+      <div v-else style="flex-grow: 1" />
+
+      <ToolsButton :class="$style.btn" />
       <AdminButton v-if="user?.admin" :class="$style.btn" />
-      <SelectYearButton :class="$style.btn" />
+      <ChangeYearButton :class="$style.btn" />
       <template v-if="media !== 'mobile'">
         <ChangeLanguageButton :class="$style.btn" />
         <ChangeCurrencyButton :class="$style.btn" />
@@ -50,7 +55,7 @@ import ChangeCurrencyButton from './navigation/currency/ChangeCurrencyButton.vue
 import ChangeLanguageButton from './navigation/language/ChangeLanguageButton.vue';
 import ThemeButton from './navigation/theme/ThemeButton.vue';
 import ToolsButton from './navigation/tools/ToolsButton.vue';
-import SelectYearButton from './navigation/year/SelectYearButton.vue';
+import ChangeYearButton from './navigation/year/ChangeYearButton.vue';
 
 const menu = ref<HTMLDivElement>();
 const media = useMediaQuery();
@@ -71,8 +76,8 @@ const buttons = computed((): FrameButton[] => [
 </script>
 
 <style lang="scss" module>
-@use 'sass:math';
 @use 'src/styles/globals';
+@use 'sass:math';
 
 .frame {
   display: flex;
@@ -92,7 +97,7 @@ const buttons = computed((): FrameButton[] => [
   flex-direction: column;
   border-right: 1px solid var(--app-border);
   padding: 15px 10px;
-  grid-gap: 15px;
+  gap: 15px;
 
   .top {
     margin-top: auto;
@@ -104,6 +109,14 @@ const buttons = computed((): FrameButton[] => [
     background: var(--app-border);
   }
 
+  .mobileDivider {
+    display: none;
+    width: 1px;
+    background: var(--app-border);
+    height: 100%;
+    margin: 0 -15px;
+  }
+
   .btn {
     display: flex;
     align-items: center;
@@ -129,10 +142,15 @@ const buttons = computed((): FrameButton[] => [
     justify-content: space-evenly;
     flex-direction: row-reverse;
     height: auto;
+    padding: 14px 4px;
 
     .divider {
       display: none;
     }
+
+    .mobileDivider {
+      display: block;
+    }
   }
 }
 </style>
diff --git a/src/app/pages/dashboard/Dashboard.vue b/src/app/pages/dashboard/Dashboard.vue
index 71cbe982..2f79d2e3 100644
--- a/src/app/pages/dashboard/Dashboard.vue
+++ b/src/app/pages/dashboard/Dashboard.vue
@@ -72,11 +72,17 @@ const rotateYear = (dir: -1 | 1) => {
 
 .viewButtons {
   display: flex;
-  grid-gap: 4px;
+  gap: 4px;
 }
 
 .version {
   color: var(--c-text-dark-muted);
   font-size: var(--font-size-xs);
 }
+
+@include globals.onMobileDevices {
+  .viewButtons {
+    gap: 8px;
+  }
+}
 </style>
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
index 0faebdd7..94982dad 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanel.vue
@@ -66,7 +66,7 @@ const element = computed(() => (props.to ? Link : 'div'));
 .summaryPanel {
   display: flex;
   justify-content: space-between;
-  grid-gap: 2px;
+  gap: 2px;
   padding: 30px;
   width: 100%;
   height: 100%;
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 654584e0..a36f05d3 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
@@ -98,7 +98,7 @@ const remainingBalancePercentage = computed(() => {
   grid-template: 1fr / repeat(var(--panels), 1fr);
   width: 100%;
   height: 150px;
-  grid-gap: 10px;
+  gap: 10px;
 
   @include globals.onMobileDevices {
     grid-template: repeat(var(--panels), 1fr) / 1fr;
diff --git a/src/app/pages/dashboard/summary/Summary.vue b/src/app/pages/dashboard/summary/Summary.vue
index bb2f79b0..ff208eae 100644
--- a/src/app/pages/dashboard/summary/Summary.vue
+++ b/src/app/pages/dashboard/summary/Summary.vue
@@ -34,7 +34,7 @@ const expenses = computed(() => totals(state.expenses));
 .summary {
   display: flex;
   flex-direction: column;
-  grid-gap: 20px;
+  gap: 20px;
   flex-grow: 1;
   padding-bottom: 10px;
 }
diff --git a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
index b75461a2..bfb515ef 100644
--- a/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
+++ b/src/app/pages/navigation/currency/ChangeCurrencyButton.vue
@@ -2,11 +2,10 @@
   <ContextMenu
     :tooltip="t('navigation.currency.change')"
     tooltip-position="right"
-    :class="classes"
     :options="currencies"
     @select="changeCurrency($event.id as AvailableCurrency)"
   >
-    <Button icon="currency-line" textual color="dimmed" />
+    <Button :class="classes" icon="currency-line" textual color="dimmed" />
   </ContextMenu>
 </template>
 
diff --git a/src/app/pages/navigation/language/ChangeLanguageButton.vue b/src/app/pages/navigation/language/ChangeLanguageButton.vue
index eef9812d..47ad9d15 100644
--- a/src/app/pages/navigation/language/ChangeLanguageButton.vue
+++ b/src/app/pages/navigation/language/ChangeLanguageButton.vue
@@ -2,11 +2,10 @@
   <ContextMenu
     :tooltip="t('navigation.language.switch')"
     tooltip-position="right"
-    :class="classes"
     :options="locales"
     @select="changeLocale($event.id as AvailableLocale)"
   >
-    <Button icon="global-line" textual color="dimmed" />
+    <Button :class="classes" icon="global-line" textual color="dimmed" />
   </ContextMenu>
 </template>
 
diff --git a/src/app/pages/navigation/tools/ToolsButton.vue b/src/app/pages/navigation/tools/ToolsButton.vue
index f374e11d..94ae3487 100644
--- a/src/app/pages/navigation/tools/ToolsButton.vue
+++ b/src/app/pages/navigation/tools/ToolsButton.vue
@@ -3,9 +3,8 @@
     :tooltip="t('navigation.tools.tools')"
     :position="media === 'mobile' ? 'top' : 'right-end'"
     tooltip-position="right"
-    :class="classes"
   >
-    <Button icon="settings-4-line" textual color="dimmed"></Button>
+    <Button :class="classes" icon="settings-4-line" textual color="dimmed"></Button>
 
     <template #options>
       <LoadDemoDataButton v-if="status === 'idle'" />
diff --git a/src/app/pages/navigation/tools/import/ImportButton.vue b/src/app/pages/navigation/tools/import/ImportButton.vue
index 1518cecd..91de5980 100644
--- a/src/app/pages/navigation/tools/import/ImportButton.vue
+++ b/src/app/pages/navigation/tools/import/ImportButton.vue
@@ -54,7 +54,7 @@ watch(visible, () => steps.value?.reset());
 .step {
   display: flex;
   flex-direction: column;
-  grid-gap: 15px;
+  gap: 15px;
 
   .title {
     font-size: var(--font-size-s);
diff --git a/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue b/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
index 4f1b3722..bbad3471 100644
--- a/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
+++ b/src/app/pages/navigation/tools/import/screens/BudgetFileScreen.vue
@@ -48,7 +48,7 @@ const load = async () => {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  grid-gap: 10px;
+  gap: 10px;
 }
 
 .input {
diff --git a/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue b/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
index 872944fe..37bb16a8 100644
--- a/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
+++ b/src/app/pages/navigation/tools/import/screens/GoogleAnnualBudgetScreen.vue
@@ -60,7 +60,7 @@ const load = async () => {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  grid-gap: 10px;
+  gap: 10px;
 }
 
 .input {
diff --git a/src/app/pages/navigation/year/SelectYearButton.vue b/src/app/pages/navigation/year/ChangeYearButton.vue
similarity index 85%
rename from src/app/pages/navigation/year/SelectYearButton.vue
rename to src/app/pages/navigation/year/ChangeYearButton.vue
index c1247d0d..96fc1782 100644
--- a/src/app/pages/navigation/year/SelectYearButton.vue
+++ b/src/app/pages/navigation/year/ChangeYearButton.vue
@@ -7,7 +7,7 @@
     :highlight="state.activeYear"
     @select="changeYear($event.id as number)"
   >
-    <Button icon="calendar-line" textual color="dimmed" />
+    <Button :class="classes" icon="calendar-line" textual color="dimmed" />
   </ContextMenu>
 </template>
 
@@ -19,14 +19,20 @@ import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.typ
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { useMediaQuery, useTime } from '@composables';
 import { useDataStore } from '@store/state';
+import { ClassNames } from '@utils';
 
 const PRE_PLANNABLE_YEARS = 1;
 
+const props = defineProps<{
+  class: ClassNames;
+}>();
+
 const { t } = useI18n();
 const { changeYear, state } = useDataStore();
 const media = useMediaQuery();
 const time = useTime();
 
+const classes = computed(() => props.class);
 const options = computed((): ContextMenuOption[] => {
   const yearsStored = state.years.map((v) => v.year);
   const offset = Math.min(...yearsStored);
diff --git a/src/app/pages/shared/ChartPlaceholder.vue b/src/app/pages/shared/ChartPlaceholder.vue
index d4980090..7797cd75 100644
--- a/src/app/pages/shared/ChartPlaceholder.vue
+++ b/src/app/pages/shared/ChartPlaceholder.vue
@@ -30,7 +30,7 @@ const { t } = useI18n();
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  grid-gap: 10px;
+  gap: 10px;
   flex-grow: 1;
 
   &,
@@ -41,7 +41,7 @@ const { t } = useI18n();
   .icons {
     display: grid;
     grid-template-columns: 24px 24px;
-    grid-gap: 10px;
+    gap: 10px;
   }
 }
 </style>
diff --git a/src/app/pages/shared/Pane.vue b/src/app/pages/shared/Pane.vue
index 0996e29a..4d501d82 100644
--- a/src/app/pages/shared/Pane.vue
+++ b/src/app/pages/shared/Pane.vue
@@ -79,8 +79,13 @@ useScrollShadow(header, content, 'var(--app-scroll-box-shadow)');
   }
 
   .header {
-    padding: 20px 10px 15px;
+    padding: 15px 15px 10px;
     align-items: flex-end;
+
+    .title {
+      font-size: var(--font-size-m);
+      font-weight: var(--font-weight-xl);
+    }
   }
 
   .content {
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 07917e40..f5ebdf69 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -21,7 +21,7 @@
         "unknownError": "Etwas ist schiefgelaufen. Bitte versuchen Sie es später erneut."
       },
       "copyPaste": {
-        "copy": "Daten kopieren von {year}",
+        "copy": "Daten von {year} kopieren",
         "paste": "Daten von {from} nach {to} kopieren",
         "confirm": "Sind Sie sicher, dass Sie die Daten von {from} nach {to} kopieren möchten?"
       },
@@ -59,7 +59,7 @@
     },
     "info": {
       "about": "Über Ocular",
-      "github": "Schauen Sie sich dieses Projekt auf {link} an!",
+      "github": "Schauen dir sich dieses Projekt auf {link} an!",
       "madeWithLove": "Entwickelt mit ❤️von Simon",
       "meta": "{version} / {date} / {sha}"
     },
@@ -120,7 +120,7 @@
       "summary": "Zusammenfassung",
       "endingBalance": "Endsaldo",
       "header": "Jährliches Budget für {year}",
-      "remainingBalance": "Verbleibendes Guthaben bis {year}",
+      "remainingBalance": "Verbleibendes Netto bis {year}",
       "netSavings": "Nettoersparnisse",
       "yearInThePast": "Jahr liegt in der Vergangenheit",
       "yearInTheFuture": "Jahr liegt in der Zukunft",