diff --git a/api/blueprints/mail/oauth_callback.py b/api/blueprints/mail/oauth_callback.py
index 1d8f23b..f78279c 100644
--- a/api/blueprints/mail/oauth_callback.py
+++ b/api/blueprints/mail/oauth_callback.py
@@ -150,6 +150,12 @@ async def mail_callback(
 
     if mail_client == "gmail":
 
+        # In case the user cancelled halfway through (on Google's screen):
+        if inbound_data.get("error") == "access_denied": return await render_template(
+            "/mail/oauth/oauth_cancelled_v2.html",
+            mail_client = mail_client.title()
+        )
+
         # Generate the tokens from the callback:
         tokens = await current_app.gmail_client.get_authorization_tokens(
             redirect_url = request.url,
@@ -188,7 +194,7 @@ async def mail_callback(
 
     # Return an HTML response:
     return await render_template(
-        "/mail/oauth/oauth_success.html" if tokens_saved else "/mail/oauth/oauth_failure.html",
+        "/mail/oauth/oauth_success_v2.html" if tokens_saved else "/mail/oauth/oauth_failure_v2.html",
         mail_client = mail_client.title()
     )
 
diff --git a/views/mail/oauth/oauth_cancelled_v2.html b/views/mail/oauth/oauth_cancelled_v2.html
new file mode 100644
index 0000000..368e9a2
--- /dev/null
+++ b/views/mail/oauth/oauth_cancelled_v2.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Authorization Cancelled</title>
+    <!-- Include Bootstrap CSS (make sure you have an internet connection) -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* General reset and basic styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: rgba(244, 241, 253, 1); /* Light purple */
+            background-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px; /* Controls the size of the halftone dots */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            padding: 20px;
+        }
+
+        .message-container {
+            background-color: #fff; /* White background */
+            border-radius: 16px;
+            padding: 60px 35px 35px; /* Increased top padding to make space for the circle */
+            max-width: 400px;
+            text-align: center;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            color: #333; /* Dark text color */
+            position: relative; /* To position the circle above it */
+        }
+
+        h1 {
+            font-size: 24px;
+            color: #FF9800; /* Orange color for cancellation */
+            margin-bottom: 10px;
+        }
+
+        p {
+            font-size: 16px;
+            color: #132F41; /* Dark blue text */
+            margin-top: 20px; /* Space between the circle and paragraph */
+        }
+
+        /* Circle for exclamation icon */
+        .cancellation-circle {
+            width: 90px; /* Increased size by 50% */
+            height: 90px; /* Increased size by 50% */
+            border-radius: 50%; /* Makes it a circle */
+            background-color: #FF9800; /* Orange color for cancellation */
+            color: white;
+            font-size: 54px; /* Increased font size to fit inside the bigger circle */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            top: -45px; /* Position the circle 45px above the container */
+            left: 50%;
+            transform: translateX(-50%); /* Center it horizontally */
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+            margin-bottom: 20px; /* Added margin to prevent overlap with the text */
+        }
+
+        /* Close button */
+        .btn-secondary {
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for the button */
+            margin-top: 10px;
+        }
+
+        /* Responsive styles */
+        @media (max-width: 600px) {
+            .message-container {
+                padding: 45px 20px 35px; /* Adjust padding for small screens */
+            }
+
+            h1 {
+                font-size: 20px;
+            }
+
+            p {
+                font-size: 14px;
+            }
+
+            .cancellation-circle {
+                width: 75px;
+                height: 75px;
+                font-size: 45px;
+                top: -40px; /* Adjust top position for smaller screens */
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="message-container">
+        <div class="cancellation-circle"><b>!</b></div> <!-- Exclamation mark icon inside the circle -->
+        <h1><b>Authorization Cancelled</b></h1>
+        <p>It seems that the authorization for your <b>{{ mail_client }}</b> account was cancelled unexpectedly.
+            Please feel free to try again whenever you feel like it. You can close this tab at any time.</p>
+
+        <!-- Close button -->
+        <button class="btn btn-secondary" onclick="window.close();">Close</button>
+    </div>
+
+    <!-- Include Bootstrap JS (Optional for added interactivity, not needed for close functionality) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/views/mail/oauth/oauth_failure_v2.html b/views/mail/oauth/oauth_failure_v2.html
new file mode 100644
index 0000000..4443581
--- /dev/null
+++ b/views/mail/oauth/oauth_failure_v2.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Authorization Failed</title>
+    <!-- Include Bootstrap CSS (make sure you have an internet connection) -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* General reset and basic styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: rgba(244, 241, 253, 1); /* Light purple */
+            background-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px; /* Controls the size of the halftone dots */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            padding: 20px;
+        }
+
+        .message-container {
+            background-color: #fff; /* White background */
+            border-radius: 16px;
+            padding: 60px 35px 35px; /* Increased top padding to make space for the circle */
+            max-width: 400px;
+            text-align: center;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            color: #333; /* Dark text color */
+            position: relative; /* To position the circle above it */
+        }
+
+        h1 {
+            font-size: 24px;
+            color: #F44336; /* Red color for failure */
+            margin-bottom: 10px;
+        }
+
+        p {
+            font-size: 16px;
+            color: #132F41; /* Dark blue text */
+            margin-top: 20px; /* Space between the circle and paragraph */
+        }
+
+        /* Circle for failure icon */
+        .failure-circle {
+            width: 90px; /* Increased size by 50% */
+            height: 90px; /* Increased size by 50% */
+            border-radius: 50%; /* Makes it a circle */
+            background-color: #F44336; /* Red color */
+            color: white;
+            font-size: 54px; /* Increased font size to fit inside the bigger circle */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            top: -45px; /* Position the circle 45px above the container */
+            left: 50%;
+            transform: translateX(-50%); /* Center it horizontally */
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+            margin-bottom: 20px; /* Added margin to prevent overlap with the text */
+        }
+
+        /* Close button */
+        .btn-secondary {
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for the button */
+            margin-top: 10px;
+        }
+
+        /* Responsive styles */
+        @media (max-width: 600px) {
+            .message-container {
+                padding: 45px 20px 35px; /* Adjust padding for small screens */
+            }
+
+            h1 {
+                font-size: 20px;
+            }
+
+            p {
+                font-size: 14px;
+            }
+
+            .failure-circle {
+                width: 75px;
+                height: 75px;
+                font-size: 45px;
+                top: -40px; /* Adjust top position for smaller screens */
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="message-container">
+        <div class="failure-circle">✘</div> <!-- Red circle with failure icon -->
+        <h1><b>Authorization Failed</b></h1>
+        <p>Something went wrong in getting authorization from your <b>{{ mail_client }}</b> account.
+            Please feel free to try the same steps again. You can close this tab at any time.</p>
+
+        <!-- Close button -->
+        <button class="btn btn-secondary" onclick="window.close();">Close</button>
+    </div>
+
+    <!-- Include Bootstrap JS (Optional for added interactivity, not needed for close functionality) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
diff --git a/views/mail/oauth/oauth_success_v2.html b/views/mail/oauth/oauth_success_v2.html
new file mode 100644
index 0000000..929f50c
--- /dev/null
+++ b/views/mail/oauth/oauth_success_v2.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Authorization Successful</title>
+    <!-- Include Bootstrap CSS (make sure you have an internet connection) -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        /* General reset and basic styles */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: rgba(244, 241, 253, 1); /* Light purple */
+            background-image: radial-gradient(circle closest-side, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
+            background-size: 20px 20px; /* Controls the size of the halftone dots */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            padding: 20px;
+        }
+
+        .message-container {
+            background-color: #fff; /* White background */
+            border-radius: 16px;
+            padding: 60px 35px 35px; /* Increased top padding to make space for the circle */
+            max-width: 400px;
+            text-align: center;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+            color: #333; /* Dark text color */
+            position: relative; /* To position the circle above it */
+        }
+
+        h1 {
+            font-size: 24px;
+            color: #4CAF50; /* Green color for failure */
+            margin-bottom: 10px;
+        }
+
+        p {
+            font-size: 16px;
+            color: #132F41; /* Dark blue text */
+            margin-top: 20px; /* Space between the circle and paragraph */
+        }
+
+        /* Circle for failure icon */
+        .success-circle {
+            width: 90px; /* Increased size by 50% */
+            height: 90px; /* Increased size by 50% */
+            border-radius: 50%; /* Makes it a circle */
+            background-color: #4CAF50; /* Green color */
+            color: white;
+            font-size: 54px; /* Increased font size to fit inside the bigger circle */
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            top: -45px; /* Position the circle 45px above the container */
+            left: 50%;
+            transform: translateX(-50%); /* Center it horizontally */
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
+            margin-bottom: 20px; /* Added margin to prevent overlap with the text */
+        }
+
+        /* Close button */
+        .btn-secondary {
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for the button */
+            margin-top: 10px;
+        }
+
+        /* Responsive styles */
+        @media (max-width: 600px) {
+            .message-container {
+                padding: 45px 20px 35px; /* Adjust padding for small screens */
+            }
+
+            h1 {
+                font-size: 20px;
+            }
+
+            p {
+                font-size: 14px;
+            }
+
+            .failure-circle {
+                width: 75px;
+                height: 75px;
+                font-size: 45px;
+                top: -40px; /* Adjust top position for smaller screens */
+            }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="message-container">
+        <div class="success-circle">✔</div> <!-- Red circle with failure icon -->
+        <h1><b>Authorization Successful</b></h1>
+        <p>We have received authorization from your <b>{{ mail_client }}</b> account. You can close this tab at any time.</p>
+
+        <!-- Close button -->
+        <button class="btn btn-secondary" onclick="window.close();">Close</button>
+    </div>
+
+    <!-- Include Bootstrap JS (Optional for added interactivity, not needed for close functionality) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
