diff --git a/src/App.vue b/src/App.vue
index 0f93046..65befbc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,9 +27,9 @@
       ©
       <a href="https://td2.info.pl/profile/?u=20777" target="_blank">Spythere</a>
       {{ new Date().getUTCFullYear() }} |
-      <a :href="store.appUpdate?.releaseURL" target="_blank"
-        >v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}</a
-      >
+      <button class="btn--text" @click="() => (updateModalOpen = true)">
+        v{{ VERSION }}{{ isOnProductionHost ? '' : 'dev' }}
+      </button>
 
       <br />
       <a href="https://discord.gg/x2mpNN3svk">
@@ -243,10 +243,15 @@ export default defineComponent({
 }
 
 // FOOTER
-footer.app_footer {
+.app_footer {
   max-width: 100%;
   padding: 0.5em;
 
+  button {
+    display: inline-block;
+    padding: 0.1em;
+  }
+
   img {
     width: 1.1em;
     vertical-align: text-bottom;
diff --git a/src/components/App/UpdateModal.vue b/src/components/App/UpdateModal.vue
index f3a282f..4844347 100644
--- a/src/components/App/UpdateModal.vue
+++ b/src/components/App/UpdateModal.vue
@@ -1,29 +1,19 @@
 <template>
   <AnimatedModal :is-open="updateModalOpen" @toggle-modal="toggleModal">
-    <div class="modal_content">
-      <div>
-        <h1 style="margin-bottom: 0.5em">{{ $t('update.title') }}</h1>
-      </div>
+    <div class="modal-content">
+      <h1 style="margin-bottom: 0.5em">🚀 {{ $t('update.title') }}</h1>
 
       <div class="features-body" v-html="htmlChangelog"></div>
 
-      <div class="modal_actions">
-        <button class="btn--action" @click="toggleModal">Przyjąłem!</button>
+      <button class="btn btn--action" ref="confirm-btn" @click="toggleModal">
+        {{ $t('update.confirm') }}
+      </button>
 
-        <p>Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony!</p>
-
-        <!-- <div class="actions-checkboxes">
-          <label>
-            <input type="checkbox" />
-            <span>nie pokazuj dla przyszłych aktualizacji</span>
-          </label>
-
-          <label>
-            <input type="checkbox" />
-            <span>nie pokazuj dla przyszłych aktualizacji</span>
-          </label>
-        </div> -->
-      </div>
+      <p class="bottom-info">
+        {{ $t('update.info-1') }}
+        <br />
+        <span v-html="$t('update.info-2')"></span>
+      </p>
     </div>
   </AnimatedModal>
 </template>
@@ -57,6 +47,14 @@ export default defineComponent({
     };
   },
 
+  watch: {
+    updateModalOpen(val: boolean) {
+      this.$nextTick(() => {
+        if (val) (this.$refs['confirm-btn'] as HTMLElement).focus();
+      });
+    }
+  },
+
   computed: {
     htmlChangelog() {
       if (this.mainStore.appUpdate == null) return '';
@@ -91,14 +89,13 @@ export default defineComponent({
   line-height: 1.5em;
 }
 
-.modal_content {
-  padding: 2em;
-  height: 80vh;
-  min-height: 550px;
-
+.modal-content {
   display: grid;
   grid-template-rows: auto 1fr auto;
   gap: 0.5em;
+  padding: 1em 2em;
+  min-height: 700px;
+  overflow: auto;
 }
 
 hr.separator {
@@ -108,9 +105,18 @@ hr.separator {
   background-color: #fff;
 }
 
-.modal_actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5em;
+button {
+  margin: 0 auto;
+  padding: 0.5em 0.75em;
+  font-size: 1.1em;
+}
+
+p.bottom-info {
+  text-align: center;
+  color: #ccc;
+}
+
+a {
+  text-decoration: underline;
 }
 </style>
diff --git a/src/components/Global/AnimatedModal.vue b/src/components/Global/AnimatedModal.vue
index fec439c..e97ebc1 100644
--- a/src/components/Global/AnimatedModal.vue
+++ b/src/components/Global/AnimatedModal.vue
@@ -1,8 +1,8 @@
 <template>
-  <transition name="modal-anim" tag="div" class="modal">
-    <div class="body" v-if="isOpen">
-      <div class="background" @click="toggleModal(false)"></div>
-      <div class="wrapper" ref="wrapper" tabindex="0">
+  <transition name="modal-anim" tag="div">
+    <div class="modal" v-if="isOpen">
+      <div class="modal-background" @click="toggleModal(false)"></div>
+      <div class="modal-wrapper" ref="wrapper" tabindex="0">
         <slot></slot>
       </div>
       <div class="tab-exit" ref="exit" tabindex="0" @focus="toggleModal(false)"></div>
@@ -30,8 +30,7 @@ export default defineComponent({
   watch: {
     isOpen(v) {
       this.$nextTick(() => {
-        if (v) (this.$refs['wrapper'] as HTMLElement).focus();
-        else (this.store.modalLastClickedTarget as HTMLElement)?.focus();
+        if (v == false) (this.store.modalLastClickedTarget as HTMLElement)?.focus();
       });
     }
   },
@@ -47,17 +46,21 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '../../styles/responsive.scss';
 
-.body {
+.modal {
   position: fixed;
   top: 0;
   left: 0;
+
+  width: 100%;
+  height: 100vh;
   z-index: 200;
 
-  width: 100vw;
-  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.background {
+.modal-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -69,28 +72,24 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.wrapper {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+.modal-wrapper {
+  position: relative;
+  z-index: 210;
 
-  background-color: #1a1a1a;
-  box-shadow: 0 0 15px 10px #333333;
-
-  width: 95%;
-  max-width: 800px;
-  max-height: 95vh;
+  margin-top: 1em;
 
   & > :slotted(div) {
+    background-color: #1a1a1a;
+    box-shadow: 0 0 15px 10px #0e0e0e;
+
+    width: 95vw;
+    max-width: 850px;
     max-height: 95vh;
   }
 }
 
 @include smallScreen {
-  .wrapper {
-    top: 0;
-    transform: translate(-50%, 1em);
+  .modal-wrapper {
     max-height: 90vh;
 
     & > :slotted(div) {
diff --git a/src/components/Global/Donation.vue b/src/components/Global/DonationModal.vue
similarity index 96%
rename from src/components/Global/Donation.vue
rename to src/components/Global/DonationModal.vue
index 87b3fa9..f2b90b0 100644
--- a/src/components/Global/Donation.vue
+++ b/src/components/Global/DonationModal.vue
@@ -66,6 +66,7 @@
           class="modal-action a-button btn--image coffee"
           href="https://buycoffee.to/spythere"
           target="_blank"
+          ref="action"
         >
           <img src="/images/icon-coffee.png" width="20" alt="buycoffee.to donation" />
           {{ $t('donations.action-buycoffee') }}
@@ -103,9 +104,13 @@ export default defineComponent({
   emits: ['toggleModal'],
 
   watch: {
-    isModalOpen(b: boolean) {
-      this.running = b;
+    isModalOpen(val: boolean) {
+      this.running = val;
       this.lastUpdate = Date.now();
+
+      this.$nextTick(() => {
+        if (val) (this.$refs['action'] as HTMLElement).focus();
+      });
     }
   },
 
diff --git a/src/components/TrainsView/TrainModal.vue b/src/components/TrainsView/TrainModal.vue
index bb5c45e..daee8f1 100644
--- a/src/components/TrainsView/TrainModal.vue
+++ b/src/components/TrainsView/TrainModal.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="train-modal" v-if="chosenTrain" @keydown.esc="closeModal">
-    <div class="modal_background" @click="closeModal"></div>
-    <div class="modal_content" ref="content" tabindex="0">
+    <div class="modal-background" @click="closeModal"></div>
+    <div class="modal-content" ref="content" tabindex="0">
       <TrainInfo :train="chosenTrain" :extended="true" ref="trainInfo" />
       <TrainSchedule :train="chosenTrain" tabindex="0" />
     </div>
@@ -71,7 +71,7 @@ export default defineComponent({
   text-align: left;
 }
 
-.modal_background {
+.modal-background {
   position: absolute;
   top: 0;
   left: 0;
@@ -83,14 +83,14 @@ export default defineComponent({
   background-color: rgba(0, 0, 0, 0.55);
 }
 
-.modal_content {
+.modal-content {
   position: relative;
   overflow-y: scroll;
 
   margin-top: 1em;
 
   width: 95vw;
-  max-height: 96vh;
+  max-height: 95vh;
 
   background-color: #1a1a1a;
   box-shadow: 0 0 15px 10px #0e0e0e;
diff --git a/src/locales/en.json b/src/locales/en.json
index 8efb088..c8efe91 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -27,11 +27,10 @@
     "SKR": "Train with exceeded gauge"
   },
   "update": {
-    "title": "Stacjownik app update!",
-    "version": "Version {0}",
-    "confirm-button": "UPDATE NOW",
-    "later-button": "LATER",
-    "content": "context tooltips when hovering over project sponsors and timetable comment warnings\nvehicle image preview when hovering over its thumbnail in the active timetable card view and timetable journal\nlink to the driver's timetable history in the active timetable card view\nlink to the driver's active timetable card view in the timetable journal (available for online trains only)\nnew update card with version changelog"
+    "title": "Stacjownik update!",
+    "confirm": "ROGER THAT!",
+    "info-1": "This changelog will be available to see once again after clicking the version number in the footer",
+    "info-2": "The full app changelog available on <a href='https://github.com/Spythere/stacjownik' target='_blank'>the project's GitHub</a>"
   },
   "app": {
     "sceneries": "SCENERIES",
diff --git a/src/locales/pl.json b/src/locales/pl.json
index 396d119..9c5ee85 100644
--- a/src/locales/pl.json
+++ b/src/locales/pl.json
@@ -28,10 +28,9 @@
   },
   "update": {
     "title": "Aktualizacja Stacjownika!",
-    "version": "Wersja {0}",
-    "confirm-button": "UPDATE NOW",
-    "later-button": "LATER",
-    "content": "dymki kontekstowe po najechaniu kursorem na m.in. sponsorów projektu i uwagi eksploatacyjne\npodgląd pojazdu po najechaniu kursorem na jego miniaturkę w karcie aktywnego rozkładu jazdy oraz dzienniku RJ\nodnośnik do historii RJ maszynisty w widoku karty aktywnego rozkładu jazdy\nodnośnik do karty aktywnego rozkładu jazdy maszynisty w dzienniku (dostępny tylko dla pociągów online)\nnowa karta ze zmianami w aktualizacji"
+    "confirm": "PRZYJĄŁEM!",
+    "info-1": "Ten changelog będzie zawsze dostępny po kliknięciu numeru wersji w stopce strony",
+    "info-2": "Pełny changelog dostępny na <a href='https://github.com/Spythere/stacjownik' target='_blank'>GitHubie projektu</a>"
   },
   "app": {
     "sceneries": "SCENERIE",
diff --git a/src/styles/global.scss b/src/styles/global.scss
index feab088..c6ce8e6 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -213,6 +213,7 @@ a.a-button {
   &.btn--action {
     background-color: #424242;
     border-radius: 0.25em;
+    font-weight: bold;
 
     &:hover {
       background-color: #555;
diff --git a/src/views/StationsView.vue b/src/views/StationsView.vue
index 3bc5c9d..d67209a 100644
--- a/src/views/StationsView.vue
+++ b/src/views/StationsView.vue
@@ -19,7 +19,7 @@
         </button>
       </div>
 
-      <Donation :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
+      <DonationModal :isModalOpen="isDonationModalOpen" @toggleModal="toggleDonationModal" />
       <StationTable @toggleDonationModal="toggleDonationModal" />
       <StationStats />
     </div>
@@ -32,7 +32,7 @@ import StationTable from '../components/StationsView/StationTable.vue';
 import StationFilterCard from '../components/StationsView/StationFilterCard.vue';
 import { useStationFiltersStore } from '../store/stationFiltersStore';
 import { useMainStore } from '../store/mainStore';
-import Donation from '../components/Global/Donation.vue';
+import DonationModal from '../components/Global/DonationModal.vue';
 import StationStats from '../components/StationsView/StationStats.vue';
 
 export default defineComponent({
@@ -40,7 +40,7 @@ export default defineComponent({
     StationTable,
     StationFilterCard,
     StationStats,
-    Donation
+    DonationModal
   },
 
   data: () => ({