diff --git a/pages/index.js b/pages/index.js
index bdd05c3..7ff5afc 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -7,17 +7,20 @@ import { toast } from "react-toastify"
 const Page = () => {
     const [mail, setMail] = useState()
     const handle = async () => {
-        const data = await fetch("https://api.picass.co/v1/early/mail", {
+        if(!mail) return toast.error("Please enter the email",{
+            className: "toast-error toast",
+        })
+        const data = await fetch("http://localhost:3001/v1/early/mail", {
             method: "POST",
-            body: { mail },
+            body: new URLSearchParams({mail}),
         })
-        const { message } = await data.json()
         if (data.status > 199 && data.status < 299) {
             toast.success(`Successfully ${mail} Joined`, {
                 className: "toast toast-success",
             })
-        } else {
-            toast.error(message, {
+        }else {
+            const { message } = await data.json()
+            toast.error(message,{
                 className: "toast-error toast",
             })
         }
@@ -30,13 +33,15 @@ const Page = () => {
             <h2 className="font-medium text-xl mb-6 text-center">
                 All of your things, in one place
             </h2>
-            <Input
-                placeholder="Enter email to join"
-                onChange={(e) => setMail(e.target.value)}
-                value={mail}
-            >
-                <Button label="Join" onClick={handle} />
-            </Input>
+            <div className="px-6">
+                <Input
+                    placeholder="Enter email to join"
+                    onChange={(e) => setMail(e.target.value)}
+                    value={mail}
+                >
+                    <Button label="Join" onClick={handle} />
+                </Input>
+            </div>
         </>
     )
 }
diff --git a/styles/app.css b/styles/app.css
index 30f5b00..318b9e3 100644
--- a/styles/app.css
+++ b/styles/app.css
@@ -1,12 +1,12 @@
 .toast {
-    font-family: Inter,'sans-serif' !important;
-    @apply rounded-lg p-5 !important
+    font-family: Inter, "sans-serif" !important;
+    @apply rounded-lg p-5 mx-2 my-3 !important;
 }
 
 .toast-error {
-    @apply bg-primary-300 text-white !important
+    @apply bg-primary-300 text-white !important;
 }
 
 .toast-success {
-    @apply bg-green-400 text-white !important
-}
\ No newline at end of file
+    @apply bg-green-400 text-white !important;
+}