diff --git a/frontend/routes/contact/index.tsx b/frontend/routes/contact/index.tsx
index 0d65c78..9ecf25d 100644
--- a/frontend/routes/contact/index.tsx
+++ b/frontend/routes/contact/index.tsx
@@ -11,6 +11,7 @@ interface FormState {
     message?: string;
   };
   submitted?: boolean;
+  failed?: boolean;
 }
 
 export const handler: Handlers = {
@@ -51,11 +52,19 @@ export const handler: Handlers = {
       });
     }
 
-    // TODO: Implement actual form submission logic here
-    // For example, send email, save to database, etc.
-    console.log("Form submitted:", state);
+    const res = await fetch(`${Deno.env.get("EMAIL_FORM")}`, {
+      method: "POST",
+      body: formData,
+    });
+    console.log(res);
+
+    if (!res.ok || res.status !== 200) {
+      return ctx.render({
+        ...state,
+        failed: true,
+      });
+    }
 
-    // Return successful submission
     return ctx.render({
       ...state,
       submitted: true,
@@ -66,16 +75,13 @@ export const handler: Handlers = {
 export default function Contact({ data }: PageProps<FormState>) {
   return (
     <div class="bg-[#313244] min-h-screen">
-      <div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] shadow-md min-h-screen w-full md:max-w-md">
+      <div class="px-4 py-8 mx-auto p-6 flex flex-col bg-[#313244] min-h-screen w-full md:max-w-md">
         <Head>
           <title>Contact</title>
         </Head>
-
         <h1 class="text-3xl text-white font-bold uppercase text-center">
           Contact
         </h1>
-
-        {/* Check if form was successfully submitted */}
         {data?.submitted && (
           <div
             class="bg-[#a6e3a1] text-[#313244] px-4 py-3 rounded relative"
@@ -84,9 +90,16 @@ export default function Contact({ data }: PageProps<FormState>) {
             Your message has been sent successfully!
           </div>
         )}
-
+        {data?.failed && (
+          <div
+            class="bg-[#f38ba8] text-[#313245] px-4 py-3 rounded relative"
+            role="alert"
+          >
+            There has been a error in sending your message. Please try again
+            later.
+          </div>
+        )}
         <form method="POST" class="space-y-4">
-          {/* Name Input */}
           <div>
             <label
               htmlFor="name"
@@ -110,8 +123,6 @@ export default function Contact({ data }: PageProps<FormState>) {
               </p>
             )}
           </div>
-
-          {/* Email Input */}
           <div>
             <label
               htmlFor="email"
@@ -135,8 +146,6 @@ export default function Contact({ data }: PageProps<FormState>) {
               </p>
             )}
           </div>
-
-          {/* Message Textarea */}
           <div>
             <label
               htmlFor="message"
@@ -161,8 +170,7 @@ export default function Contact({ data }: PageProps<FormState>) {
               </p>
             )}
           </div>
-
-          {/* Submit Button */}
+          <input type="hidden" name="_gotcha" style="display:none !important" />
           <div>
             <button
               type="submit"
