diff --git a/app/src/server.js b/app/src/server.js
index 71e2aa35..9bcceee3 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -39,7 +39,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.49
+ * @version 1.4.50
  *
  */
 
diff --git a/package.json b/package.json
index 1668a026..fabb0bf4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.4.49",
+    "version": "1.4.50",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/js/client.js b/public/js/client.js
index a5059b87..bfa655d8 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.4.49
+ * @version 1.4.50
  *
  */
 
@@ -11036,7 +11036,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: '<strong>WebRTC P2P v1.4.49</strong>',
+        title: '<strong>WebRTC P2P v1.4.50</strong>',
         imageAlt: 'mirotalk-about',
         imageUrl: images.about,
         customClass: { image: 'img-about' },
diff --git a/public/js/common.js b/public/js/common.js
index 974bb912..68ed294d 100644
--- a/public/js/common.js
+++ b/public/js/common.js
@@ -225,7 +225,7 @@ function joinRoom() {
         window.location.href = '/join/' + roomName;
         window.localStorage.lastRoom = roomName;
     } else {
-        alert('Room name empty!\nPlease pick a room name.');
+        popup('warning', 'Room name empty!\nPlease pick a room name.');
     }
 }
 
diff --git a/public/js/login.js b/public/js/login.js
index 407af42e..7683f572 100644
--- a/public/js/login.js
+++ b/public/js/login.js
@@ -24,8 +24,8 @@ loginBtn.onclick = (e) => {
 };
 
 function login() {
-    let username = filterXSS(document.getElementById('username').value);
-    let password = filterXSS(document.getElementById('password').value);
+    const username = filterXSS(document.getElementById('username').value);
+    const password = filterXSS(document.getElementById('password').value);
 
     // http://localhost:3000/join/?room=test
     // http://localhost:3000/join/?room=test&name=mirotalk&audio=0&video=0&screen=0&notify=0
@@ -62,20 +62,20 @@ function login() {
             })
             .catch(function (error) {
                 console.error(error);
-                alert('Unauthorized');
+                popup('warning', 'Invalid credentials. Please try again.');
             });
         return;
     }
     if (!username && !password) {
-        alert('Username and Password required');
+        popup('warning', 'Username and Password required');
         return;
     }
     if (!username) {
-        alert('Username required');
+        popup('warning', 'Username required');
         return;
     }
     if (!password) {
-        alert('Password required');
+        popup('warning', 'Password required');
         return;
     }
 }
diff --git a/public/js/utils.js b/public/js/utils.js
new file mode 100644
index 00000000..7388fbc0
--- /dev/null
+++ b/public/js/utils.js
@@ -0,0 +1,15 @@
+'use strict';
+
+function popup(icon, text, position = 'center') {
+    Swal.fire({
+        background: 'rgba(0, 0, 0, 0.7)',
+        position: position,
+        icon: icon,
+        text: text,
+        color: '#FFFFFF',
+        confirmButtonColor: '#1A84F5',
+        showClass: { popup: 'animate__animated animate__fadeInDown' },
+        hideClass: { popup: 'animate__animated animate__fadeOutUp' },
+    });
+}
+//...
\ No newline at end of file
diff --git a/public/views/landing.html b/public/views/landing.html
index 8816c07d..d7d5ff3d 100755
--- a/public/views/landing.html
+++ b/public/views/landing.html
@@ -47,6 +47,10 @@
         <link rel="stylesheet" href="../css/landing.css" />
         <link rel="stylesheet" href="../css/newcall.css" />
 
+        <!-- https://animate.style 4 using for swal fadeIn-Out -->
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+
         <!-- Snow effects -->
 
         <link rel="stylesheet" href="../css/snow.css" />
@@ -55,6 +59,10 @@
         <!-- JavaScripts -->
 
         <script async src="../js/umami.js"></script>
+
+        <!-- sweetalert -->
+
+        <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
     </head>
     <body class="has-animations">
         <div id="snow-container"></div>
@@ -732,6 +740,7 @@
             </footer>
         </div>
 
+        <script defer src="../js/utils.js"></script>
         <script defer src="../js/brand.js"></script>
         <script defer src="../js/landing.js"></script>
         <script defer src="../js/common.js"></script>
diff --git a/public/views/login.html b/public/views/login.html
index d28b3689..cf8eadae 100644
--- a/public/views/login.html
+++ b/public/views/login.html
@@ -36,6 +36,7 @@
 
         <!-- StyleSheet -->
 
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600" />
         <link rel="stylesheet" href="../css/landing.css" />
 
@@ -47,12 +48,13 @@
         <script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>
 
         <!-- xss -->
-
         <script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
 
         <!-- axios -->
-
         <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
+
+        <!-- sweetalert -->
+        <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
     </head>
     <body class="has-animations">
         <div class="body-wrap">
@@ -232,6 +234,7 @@
             </footer>
         </div>
 
+        <script defer src="../js/utils.js"></script>
         <script defer src="../js/login.js"></script>
         <script defer src="../js/brand.js"></script>
         <script defer src="../js/landing.js"></script>
diff --git a/public/views/newcall.html b/public/views/newcall.html
index 43186ae3..154352e6 100755
--- a/public/views/newcall.html
+++ b/public/views/newcall.html
@@ -39,6 +39,10 @@
         <link rel="stylesheet" href="../css/landing.css" />
         <link rel="stylesheet" href="../css/newcall.css" />
 
+        <!-- https://animate.style 4 using for swal fadeIn-Out -->
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
+
         <!-- https://cdnjs.com/libraries/font-awesome -->
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
@@ -50,6 +54,10 @@
         <!-- xss -->
 
         <script src="https://cdn.jsdelivr.net/npm/xss/dist/xss.min.js"></script>
+
+        <!-- sweetalert -->
+
+        <script defer src="https://cdn.jsdelivr.net/npm/sweetalert2@11.4.8"></script>
     </head>
     <body class="has-animations">
         <div class="body-wrap">
@@ -264,6 +272,7 @@
             </footer>
         </div>
 
+        <script defer src="../js/utils.js"></script>
         <script defer src="../js/brand.js"></script>
         <script defer src="../js/landing.js"></script>
         <script defer src="../js/common.js"></script>