diff --git a/src/components/Email-Form.astro b/src/components/Email-Form.astro
index 527d078..24fd8ce 100644
--- a/src/components/Email-Form.astro
+++ b/src/components/Email-Form.astro
@@ -181,19 +181,23 @@
       })
         .then((response) => response.json())
         .then((data) => {
-          console.log("Success:", data);
-          displayNotification(
-            "Success!",
-            "Thank you for signing up to our newsletter!" + "<br>" + data,
-          );
+          if (data != "true") {
+            throw new Error(data);
+          } else {
+            console.log("Success:", data);
+            displayNotification(
+              "Success!",
+              "Thank you for signing up to our newsletter!",
+            );
+          }
         })
         .catch((error) => {
           // Handle errors
           console.error("Error:", error);
           displayNotification(
             "Error!",
-            "There was an error signing you up to our newsletter. Please try again later." +
-              "<br>" +
+            "There was an error signing you up to our newsletter." +
+              "<br/><br/>" +
               error,
           );
         });
diff --git a/src/components/Notification.astro b/src/components/Notification.astro
index 06b43c1..48f7ecc 100644
--- a/src/components/Notification.astro
+++ b/src/components/Notification.astro
@@ -40,8 +40,8 @@
     }
 
     .progress-bar {
-        background-color: var(--dl-color-gray-black);
-        height: 24px;
+        background-color: var(--dl-color-purple-300);
+        height: 1rem;
         width: 0;
         border-radius: 4px;
     }
@@ -64,7 +64,9 @@
 
 <div class="notification" id="notification">
     <h2 id="notification-title"></h2>
+    <br/>
     <p id="notification-message"></p>
+    <br/>
     <!-- progress bar -->
     <div class="progress" id="notification-progress">
         <div class="progress-bar" id="notification-progress-bar" style="height:24px;width:1%"></div>