diff --git a/client/package-lock.json b/client/package-lock.json
index d8833087f0b..d60201572c1 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -26,7 +26,7 @@
                 "@types/luxon": "^3.3.4",
                 "axios": "^1.7.4",
                 "luxon": "^3.4.4",
-                "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#d1ebfc3607f9d31df7a6e6430a6dbceafd9099d5",
+                "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#8f336a55f3244c0db6ddfe14ea1f7d2bbfbb6e19",
                 "qrcode-vue3": "^1.6.8",
                 "uuid": "^9.0.1",
                 "vue": "^3.3.8",
@@ -3468,6 +3468,20 @@
                 "@vue/language-core": "1.8.20"
             }
         },
+        "node_modules/@vuepic/vue-datepicker": {
+            "version": "9.0.3",
+            "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-9.0.3.tgz",
+            "integrity": "sha512-OtCAKG+CkVBpCwnPx7/BGRF+/z+jDzNl2cMBpcr8j2NkAN+13xkUt7sctbOVKbG/jhuXtKoUSedI69e0cDXPXw==",
+            "dependencies": {
+                "date-fns": "^3.6.0"
+            },
+            "engines": {
+                "node": ">=18.12.0"
+            },
+            "peerDependencies": {
+                "vue": ">=3.2.0"
+            }
+        },
         "node_modules/@webassemblyjs/ast": {
             "version": "1.12.1",
             "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.12.1.tgz",
@@ -5534,6 +5548,15 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/date-fns": {
+            "version": "3.6.0",
+            "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+            "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/kossnocorp"
+            }
+        },
         "node_modules/dayjs": {
             "version": "1.11.10",
             "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
@@ -9366,11 +9389,12 @@
         },
         "node_modules/megashark-lib": {
             "version": "0.0.1",
-            "resolved": "git+ssh://git@github.com/Scille/megashark-lib.git#d1ebfc3607f9d31df7a6e6430a6dbceafd9099d5",
-            "integrity": "sha512-W7ic8VEdwUc563NQ6oDiYGUaOljtfLi/uzry1am80GOnJB5U6sS7YZ+v1RYKFi54eAVHV3dyu8/RxaLubXgrnQ==",
+            "resolved": "git+ssh://git@github.com/Scille/megashark-lib.git#8f336a55f3244c0db6ddfe14ea1f7d2bbfbb6e19",
+            "integrity": "sha512-fcTFwujegOcICHLBj8PgewCi9mFCRHG5v+7rStkaoj7/ZgrmX1t75YHmPTN635ztrR3xTmllfx9aWfnIlTFspA==",
             "dependencies": {
                 "@ionic/vue": "^7.0.0",
                 "@stripe/stripe-js": "^4.0.0",
+                "@vuepic/vue-datepicker": "^9.0.3",
                 "axios": "^1.7.2",
                 "ionicons": "^7.0.0",
                 "luxon": "^3.4.4",
diff --git a/client/package.json b/client/package.json
index 06374d8b13c..45cf701bb23 100644
--- a/client/package.json
+++ b/client/package.json
@@ -53,7 +53,7 @@
         "@types/luxon": "^3.3.4",
         "axios": "^1.7.4",
         "luxon": "^3.4.4",
-        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#d1ebfc3607f9d31df7a6e6430a6dbceafd9099d5",
+        "megashark-lib": "git+https://github.com/Scille/megashark-lib.git#8f336a55f3244c0db6ddfe14ea1f7d2bbfbb6e19",
         "qrcode-vue3": "^1.6.8",
         "uuid": "^9.0.1",
         "vue": "^3.3.8",
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
index 9bde809db27..c48cab6b696 100644
--- a/client/src/locales/en-US.json
+++ b/client/src/locales/en-US.json
@@ -118,8 +118,10 @@
             "updateConfirmQuestion": "You will be logged out and the application will close. Make sure to save your work before. Do you want to continue?",
             "updateYes": "Update Parsec",
             "updateNo": "Later",
-            "updateAvailable": "Update available",
-            "newVersionAvailable": "New version available"
+            "changelog": "What's new?",
+            "currentVersion": "Current version: ",
+            "updateAvailable": "New update available",
+            "newVersionAvailable": "New update available"
         },
         "organizationList": {
             "title": "Your organizations",
diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
index 061d98d9d02..24a455f9c5d 100644
--- a/client/src/locales/fr-FR.json
+++ b/client/src/locales/fr-FR.json
@@ -118,7 +118,8 @@
             "updateConfirmQuestion": "Vous serez déconnecté(e) et l'application sera fermée. Assurez vous de ne pas avoir d'opérations en cours. Souhaitez-vous continuer ?",
             "updateYes": "Mettre à jour Parsec",
             "updateNo": "Plus tard",
-            "updateAvailable": "Mise à jour disponible",
+            "currentVersion": "Votre version actuelle: ",
+            "updateAvailable": "Une nouvelle mise à jour disponible",
             "newVersionAvailable": "Nouvelle version disponible"
         },
         "organizationList": {
diff --git a/client/src/theme/components/modals.scss b/client/src/theme/components/modals.scss
index e9ef2370654..ab72cd79fc3 100644
--- a/client/src/theme/components/modals.scss
+++ b/client/src/theme/components/modals.scss
@@ -286,3 +286,13 @@
     max-width: var(--parsec-modal-width-md);
   }
 }
+
+.update-app-modal {
+  &::part(content) {
+    max-width: var(--parsec-modal-width-sm);
+  }
+
+  .ms-modal {
+    padding-top: 1.5rem;
+  }
+}
diff --git a/client/src/views/about/UpdateAppModal.vue b/client/src/views/about/UpdateAppModal.vue
index e67a0f732a7..f1cb8a731ab 100644
--- a/client/src/views/about/UpdateAppModal.vue
+++ b/client/src/views/about/UpdateAppModal.vue
@@ -1,37 +1,60 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
+  <ms-image
+    :image="UpdateRocket"
+    class="update-rocket"
+  />
   <ms-modal
-    title="UPDATE APP"
-    :close-button="{ visible: true }"
+    :close-button="{ visible: false }"
     class="update-app"
   >
-    <ion-text>
-      {{ $msTranslate('NEW UPDATE AVAILABLE') }}
-    </ion-text>
-    <ion-text>
-      {{ currentVersion ?? APP_VERSION }}
-    </ion-text>
-    <ion-text>
-      {{ targetVersion }}
-    </ion-text>
-    <ion-button @click="openChangelog">
-      {{ $msTranslate('SEE CHANGELOG') }}
-    </ion-button>
-    <div>
-      {{ $msTranslate('HomePage.topbar.updateConfirmQuestion') }}
+    <div class="update-content">
+      <ion-text class="update__title title-h2">
+        {{ $msTranslate('HomePage.topbar.updateAvailable') }}
+      </ion-text>
+      <div class="update-main">
+        <div class="update-version">
+          <ion-text class="title-h3 update-version__item">
+            {{ targetVersion }}
+          </ion-text>
+          <ion-button
+            class="update-version__button"
+            @click="openChangelog"
+            fill="clear"
+          >
+            {{ $msTranslate('HomePage.topbar.changelog') }}
+          </ion-button>
+        </div>
+        <div class="update-message body">
+          <ion-text class="update-message__curent-version">
+            {{ $msTranslate('HomePage.topbar.currentVersion') }}<span class="subtitles-sm">{{ currentVersion ?? APP_VERSION }}</span>
+          </ion-text>
+          <ion-text>
+            {{ $msTranslate('HomePage.topbar.updateConfirmQuestion') }}
+          </ion-text>
+        </div>
+      </div>
+      <div class="update-footer">
+        <ion-button
+          @click="dismiss(MsModalResult.Confirm)"
+          class="update-footer__button"
+        >
+          {{ $msTranslate('HomePage.topbar.updateYes') }}
+        </ion-button>
+        <ion-button
+          @click="dismiss(MsModalResult.Cancel)"
+          class="update-footer__button"
+        >
+          {{ $msTranslate('HomePage.topbar.updateNo') }}
+        </ion-button>
+      </div>
     </div>
-    <ion-button @click="dismiss(MsModalResult.Confirm)">
-      {{ $msTranslate('HomePage.topbar.updateYes') }}
-    </ion-button>
-    <ion-button @click="dismiss(MsModalResult.Cancel)">
-      {{ $msTranslate('HomePage.topbar.updateNo') }}
-    </ion-button>
   </ms-modal>
 </template>
 
 <script setup lang="ts">
-import { MsModal, MsModalResult } from 'megashark-lib';
+import { MsModal, MsModalResult, MsImage, UpdateRocket } from 'megashark-lib';
 import { modalController, IonText, IonButton } from '@ionic/vue';
 import { APP_VERSION, Env } from '@/services/environment';
 
@@ -50,7 +73,96 @@ async function dismiss(role: MsModalResult): Promise<void> {
 </script>
 
 <style lang="scss" scoped>
-.update-app {
-  background-color: rgb(255, 0, 212);
+.update-rocket {
+  background: var(--parsec-color-light-primary-30);
+  margin: -0.25rem;
+}
+
+.update-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+
+  .update__title {
+    text-align: center;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: var(--parsec-color-light-gradient-background);
+  }
+
+  .update-main {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    .update-version {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      display: flex;
+      gap: 0.5rem;
+      width: fit-content;
+      margin: auto;
+
+      &__item {
+        background: var(--parsec-color-light-secondary-background);
+        border-radius: var(--parsec-radius-8);
+        color: var(--parsec-color-light-secondary-text);
+        padding: 0.5rem 1.25rem;
+      }
+
+      &__button {
+        --color: var(--parsec-color-light-secondary-text);
+        --background-hover: transparent;
+        --padding-end: 0.5rem;
+        --padding-start: 0.5rem;
+
+        &:hover {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    .update-message {
+      color: var(--parsec-color-light-secondary-hard-grey);
+      display: flex;
+      flex-direction: column;
+
+      &__curent-version span {
+        color: var(--parsec-color-light-secondary-text);
+      }
+    }
+  }
+
+  .update-footer {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+
+    &__button {
+      margin: auto;
+      width: fit-content;
+
+      &:nth-child(1) {
+        --background: var(--parsec-color-light-gradient-background);
+        --padding-end: 2rem;
+        --padding-start: 2rem;
+        --padding-bottom: 0.75rem;
+        --padding-top: 0.75rem;
+      }
+
+      &:nth-child(2) {
+        position: absolute;
+        right: 2.5rem;
+        --background: transparent;
+        --background-hover: var(--parsec-color-light-secondary-premiere);
+        --color: var(--parsec-color-light-secondary-text);
+        --padding-end: 0.5rem;
+        --padding-start: 0.5rem;
+      }
+    }
+  }
 }
 </style>