diff --git a/apps/web/src/components/hero/index.tsx b/apps/web/src/components/hero/index.tsx
index bb4cc14b..7fca0013 100644
--- a/apps/web/src/components/hero/index.tsx
+++ b/apps/web/src/components/hero/index.tsx
@@ -20,13 +20,29 @@ function Hero(): React.JSX.Element {
 
     if (!result.success) {
       toast.custom(() => (
-        <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-[#852b2c] p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
+        <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-errorRed p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
           <p className="text-sm">Please enter a valid email address </p>
         </div>
       ))
       return
     }
 
+    const dataInStorage: string | null = localStorage.getItem('waitlistData')
+    const emailsInWaitlist: string[] = dataInStorage ? (JSON.parse(dataInStorage) as string[]) : []
+  
+    // actual logic where we are checking if this email is already in waitlisted users or not
+    if (emailsInWaitlist.includes(email)) {
+      toast.custom(() => (
+        <div className="text-brandBlue border-brandBlue/20 w-[90vw] rounded-lg border bg-errorRed p-2 shadow-2xl backdrop-blur-3xl md:w-[20vw]">
+          <p className="text-sm">
+            You have been already added to the waitlist. We will notify you once
+            we launch.
+          </p>
+        </div>
+      ))
+      return
+    }
+
     const url =
       'https://xyz.us18.list-manage.com/subscribe/post?u=2e44b940cafe6e54d8b9e0790&amp;id=bd382dd7c5&amp;f_id=00e5c2e1f0'
 
@@ -44,8 +60,13 @@ function Hero(): React.JSX.Element {
               launch
             </p>
           </div>
-        ))
+
+        ))    
+
+        emailsInWaitlist.push(email)
+        localStorage.setItem('waitlistData', JSON.stringify(emailsInWaitlist))
         setEmail('')
+
       } catch (error) {
         // eslint-disable-next-line no-console -- chill
         console.error(error)
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index b61c2997..3574d153 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -11,7 +11,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        brandBlue: '#CAECF1'
+        brandBlue: '#CAECF1',
+        errorRed: '#852b2c',
       }
     }
   },