diff --git a/src/app/try-free/page.tsx b/src/app/try-free/page.tsx
new file mode 100644
index 0000000..7d9705e
--- /dev/null
+++ b/src/app/try-free/page.tsx
@@ -0,0 +1,222 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { Mail, Sparkles, ArrowRight } from 'lucide-react';
+import { useState, useRef, useEffect } from 'react';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export default function TryFreePage() {
+  const [credits, setCredits] = useState(5);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!input.trim()) return;
+    if (credits <= 0) {
+      setError('No credits remaining. Upgrade to continue.');
+      return;
+    }
+
+    const userMessage = input.trim();
+    setInput('');
+    setError('');
+    setLoading(true);
+
+    setMessages(prev => [...prev, { role: 'user', content: userMessage }]);
+
+    try {
+      const response = await fetch('/api/claude', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ message: userMessage })
+      });
+
+      if (!response.ok) {
+        throw new Error('Failed to generate email');
+      }
+
+      const data = await response.json();
+      setMessages(prev => [...prev, { role: 'assistant', content: data.email }]);
+      setCredits(prev => Math.max(0, prev - 1));
+    } catch (err) {
+      setError('Error generating email. Please try again.');
+      setMessages(prev => prev.slice(0, -1));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="layered"
+      headingFontWeight="semibold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Pricing", id: "/pricing" },
+            { name: "Try Free", id: "/try-free" }
+          ]}
+          brandName="AISync"
+          bottomLeftText="Global AI Innovation"
+          bottomRightText="hello@aisync.ai"
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard
+          title="Try AISync Cold Email Writer"
+          description="Generate compelling cold emails powered by Claude AI. You have 5 free credits to get started."
+          tag="Free Trial"
+          tagIcon={Sparkles}
+          background={{ variant: "plain" }}
+          mediaAnimation="none"
+        />
+      </div>
+
+      <div id="try-free-form" data-section="try-free-form" className="w-full px-4 py-20 md:py-32 bg-background">
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-card border border-accent/20 rounded-lg p-8 shadow-lg">
+            <div className="mb-6">
+              <div className="flex items-center justify-between mb-2">
+                <h2 className="text-2xl font-bold text-foreground">Cold Email Writer</h2>
+                <div className="bg-primary-cta text-white px-4 py-2 rounded-full font-semibold">
+                  {credits} Credits Left
+                </div>
+              </div>
+              <p className="text-foreground/70">Describe the recipient or company, and we'll generate a professional cold email.</p>
+            </div>
+
+            <form onSubmit={handleSubmit} className="space-y-4">
+              <div className="min-h-96 bg-background border border-accent/10 rounded-lg p-4 overflow-y-auto space-y-4">
+                {messages.length === 0 ? (
+                  <div className="text-center text-foreground/50 py-12">
+                    <p>Your generated emails will appear here</p>
+                  </div>
+                ) : (
+                  messages.map((msg, idx) => (
+                    <div key={idx} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
+                      <div className={`max-w-xs lg:max-w-md xl:max-w-lg px-4 py-2 rounded-lg ${
+                        msg.role === 'user'
+                          ? 'bg-primary-cta text-white'
+                          : 'bg-accent/10 text-foreground border border-accent/20'
+                      }`}>
+                        <p className="text-sm whitespace-pre-wrap">{msg.content}</p>
+                      </div>
+                    </div>
+                  ))
+                )}
+                {loading && (
+                  <div className="flex justify-start">
+                    <div className="bg-accent/10 text-foreground border border-accent/20 px-4 py-2 rounded-lg">
+                      <p className="text-sm">Generating email...</p>
+                    </div>
+                  </div>
+                )}
+                <div ref={messagesEndRef} />
+              </div>
+
+              {error && (
+                <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                  {error}
+                </div>
+              )}
+
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="e.g., 'SaaS startup, B2B sales, target CFOs'"
+                  disabled={credits === 0 || loading}
+                  className="flex-1 px-4 py-2 bg-background border border-accent/20 rounded-lg text-foreground placeholder-foreground/50 focus:outline-none focus:border-primary-cta disabled:opacity-50"
+                />
+                <button
+                  type="submit"
+                  disabled={credits === 0 || loading || !input.trim()}
+                  className="bg-primary-cta text-white px-6 py-2 rounded-lg font-semibold hover:opacity-90 disabled:opacity-50 transition-opacity flex items-center gap-2"
+                >
+                  {loading ? 'Generating...' : 'Generate'}
+                  <ArrowRight size={16} />
+                </button>
+              </div>
+            </form>
+
+            <div className="mt-6 pt-6 border-t border-accent/10">
+              <p className="text-sm text-foreground/70 mb-2">Out of credits?</p>
+              <button className="w-full bg-secondary-cta text-foreground px-4 py-2 rounded-lg font-semibold hover:opacity-90 transition-opacity">
+                Upgrade to Pro
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterBaseCard
+          logoText="AISync"
+          copyrightText="© 2024 AISync. All rights reserved."
+          columns={[
+            {
+              title: "Product",              items: [
+                { label: "Features", href: "/#features-bento" },
+                { label: "Pricing", href: "/pricing" },
+                { label: "Documentation", href: "#" },
+                { label: "API Reference", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "/#about" },
+                { label: "Blog", href: "#" },
+                { label: "Careers", href: "#" },
+                { label: "Contact", href: "/#contact" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Community", href: "#" },
+                { label: "Guides", href: "#" },
+                { label: "Tutorials", href: "#" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Legal",              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Security", href: "#" },
+                { label: "Compliance", href: "#" }
+              ]
+            }
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
\ No newline at end of file