diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index b44e96b..5ce14cf 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -73,9 +73,10 @@ jobs:
           echo "API Gateway URL: ${API_GATEWAY_URL}"
           echo "API Key: ${API_KEY}"
 
-          echo "API_GATEWAY_URL=${API_GATEWAY_URL}" > ../.env.production
-          echo "API_KEY=${API_KEY}" >> ../.env.production
-          cat ../.env.production
+          echo "NEXT_PUBLIC_API_GATEWAY_URL=${API_GATEWAY_URL}" > ../.env.production
+          echo "NEXT_PUBLIC_API_KEY=${API_KEY}" >> ../.env.production
+
+
 
       # 5. Build and Package Next.js
       - name: Build and Package Next.js
diff --git a/src/components/Contact/index.tsx b/src/components/Contact/index.tsx
index 7f61259..2ebfe4c 100644
--- a/src/components/Contact/index.tsx
+++ b/src/components/Contact/index.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-// Test: 
+// Test:
 //      curl -X POST -H "Content-Type: application/json" \
 //      -d '{"name": "Test", "email": "test@example.com", "message": "Hello"}' \
 //      https://mkz66v3npa.execute-api.ap-southeast-2.amazonaws.com/prod/contact
@@ -21,17 +21,27 @@ export default function ContactPage() {
   const [submitStatus, setSubmitStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
   const [errorMessage, setErrorMessage] = useState('')
 
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setSubmitStatus('loading')
     console.log('Form submitted with data:', formData)
 
     try {
-      const response = await fetch('/api/contact', {
+      // Use environment variables if available, otherwise use /api/contact
+      const endpoint = process.env.NEXT_PUBLIC_API_GATEWAY_URL || '/api/contact'
+      const headers: Record<string, string> = {
+        'Content-Type': 'application/json',
+      }
+
+      // Add API key if available
+      if (process.env.NEXT_PUBLIC_API_KEY) {
+        headers['x-api-key'] = process.env.NEXT_PUBLIC_API_KEY
+      }
+
+      const response = await fetch(endpoint, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
+        headers,
         body: JSON.stringify(formData)
       })
 
@@ -65,7 +75,7 @@ export default function ContactPage() {
           {/* Left Column - Header & Contact Info */}
           <div>
             {/* Hero Text */}
-            <motion.div 
+            <motion.div
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8 }}
@@ -83,14 +93,14 @@ export default function ContactPage() {
             <div className="space-y-8">
               <h2 className="text-2xl font-normal">Get in Touch</h2>
               <div className="space-y-6">
-                <Link 
+                <Link
                   href="tel:+61261761580"
                   className="flex items-center gap-4 text-lg hover:opacity-60 transition-opacity duration-300"
                 >
                   <Phone size={24} className="opacity-60" />
                   <span>+61 2 6176 1580</span>
                 </Link>
-                <Link 
+                <Link
                   href="mailto:hello@cipherprojects.com"
                   className="flex items-center gap-4 text-lg hover:opacity-60 transition-opacity duration-300"
                 >
@@ -176,10 +186,10 @@ export default function ContactPage() {
               <button
                 type="submit"
                 disabled={submitStatus === 'loading'}
-                className={`w-full mt-8 px-8 py-4 border border-current 
-                  ${submitStatus === 'loading' 
-                    ? 'opacity-50 cursor-not-allowed' 
-                    : 'hover:bg-black hover:text-white transition-all duration-300'} 
+                className={`w-full mt-8 px-8 py-4 border border-current
+                  ${submitStatus === 'loading'
+                    ? 'opacity-50 cursor-not-allowed'
+                    : 'hover:bg-black hover:text-white transition-all duration-300'}
                   text-lg`}
               >
                 {submitStatus === 'loading' ? 'Sending...' : 'Send Message'}
@@ -187,7 +197,7 @@ export default function ContactPage() {
 
               {/* Status Messages */}
               {submitStatus === 'success' && (
-                <motion.div 
+                <motion.div
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   className="text-green-600 mt-4 p-4 bg-green-50 rounded-md"
@@ -197,7 +207,7 @@ export default function ContactPage() {
               )}
 
               {submitStatus === 'error' && (
-                <motion.div 
+                <motion.div
                   initial={{ opacity: 0, y: 10 }}
                   animate={{ opacity: 1, y: 0 }}
                   className="text-red-600 mt-4 p-4 bg-red-50 rounded-md"