diff --git a/mobile/lib/utils/version_compatibility.dart b/mobile/lib/utils/version_compatibility.dart
index 55dbdc6269..0fbc37a11d 100644
--- a/mobile/lib/utils/version_compatibility.dart
+++ b/mobile/lib/utils/version_compatibility.dart
@@ -1,6 +1,6 @@
 import 'package:immich_mobile/utils/semver.dart';
 
-String? getVersionCompatibilityMessage(SemVer serverVersion, SemVer appVersion) {
+String? getVersionCompatibilityMessage({required SemVer serverVersion, required SemVer appVersion}) {
   // Add latest compat info up top
 
   // ensure mobile app major version is not behind server major version
diff --git a/mobile/lib/widgets/forms/login/login_form.dart b/mobile/lib/widgets/forms/login/login_form.dart
index 9adf15b448..a64daadc49 100644
--- a/mobile/lib/widgets/forms/login/login_form.dart
+++ b/mobile/lib/widgets/forms/login/login_form.dart
@@ -91,7 +91,7 @@ class LoginForm extends HookConsumerWidget {
         final packageInfo = await PackageInfo.fromPlatform();
         final appSemVer = SemVer.fromString(packageInfo.version);
         final serverSemVer = serverInfo.serverVersion;
-        warningMessage.value = getVersionCompatibilityMessage(appSemVer, serverSemVer);
+        warningMessage.value = getVersionCompatibilityMessage(serverVersion: serverSemVer, appVersion: appSemVer);
       } catch (error) {
         warningMessage.value = 'Error checking version compatibility';
       }
@@ -377,11 +377,21 @@ class LoginForm extends HookConsumerWidget {
         child: Container(
           padding: const EdgeInsets.all(16),
           decoration: BoxDecoration(
-            color: context.isDarkTheme ? Colors.red.shade700 : Colors.red.shade100,
-            borderRadius: const BorderRadius.all(Radius.circular(8)),
-            border: Border.all(color: context.isDarkTheme ? Colors.red.shade900 : Colors.red[200]!),
+            color: context.isDarkTheme ? Colors.amber.shade700 : Colors.amber.shade100,
+            borderRadius: const BorderRadius.all(Radius.circular(12)),
+            border: Border.all(color: context.isDarkTheme ? Colors.amber.shade800 : Colors.amber[200]!, width: 2),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Icon(Icons.warning_amber_rounded, color: Colors.amber.shade800),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Padding(padding: const EdgeInsets.only(top: 2), child: Text(warningMessage.value!)),
+              ),
+            ],
           ),
-          child: Text(warningMessage.value!, textAlign: TextAlign.center),
         ),
       );
     }
diff --git a/mobile/test/modules/utils/version_compatibility_test.dart b/mobile/test/modules/utils/version_compatibility_test.dart
index 70f3d9ef8c..c4fcada67d 100644
--- a/mobile/test/modules/utils/version_compatibility_test.dart
+++ b/mobile/test/modules/utils/version_compatibility_test.dart
@@ -9,16 +9,16 @@ void main() {
 
     test('returns message when app major is behind server major', () {
       final result = getVersionCompatibilityMessage(
-        const SemVer(major: 2, minor: 0, patch: 0),
-        const SemVer(major: 1, minor: 200, patch: 0),
+        serverVersion: const SemVer(major: 2, minor: 0, patch: 0),
+        appVersion: const SemVer(major: 1, minor: 200, patch: 0),
       );
       expect(result, message);
     });
 
     test('returns null when app major matches server major', () {
       final result = getVersionCompatibilityMessage(
-        const SemVer(major: 2, minor: 0, patch: 0),
-        const SemVer(major: 2, minor: 0, patch: 0),
+        serverVersion: const SemVer(major: 2, minor: 0, patch: 0),
+        appVersion: const SemVer(major: 2, minor: 0, patch: 0),
       );
       expect(result, null);
     });
@@ -30,16 +30,16 @@ void main() {
 
     test('returns message when app major is more than one ahead of server', () {
       final result = getVersionCompatibilityMessage(
-        const SemVer(major: 1, minor: 200, patch: 0),
-        const SemVer(major: 3, minor: 0, patch: 0),
+        serverVersion: const SemVer(major: 1, minor: 200, patch: 0),
+        appVersion: const SemVer(major: 3, minor: 0, patch: 0),
       );
       expect(result, message);
     });
 
     test('returns null when app major is exactly one ahead of server', () {
       final result = getVersionCompatibilityMessage(
-        const SemVer(major: 1, minor: 200, patch: 0),
-        const SemVer(major: 2, minor: 0, patch: 0),
+        serverVersion: const SemVer(major: 1, minor: 200, patch: 0),
+        appVersion: const SemVer(major: 2, minor: 0, patch: 0),
       );
       expect(result, null);
     });