diff --git a/app/components/molecules/NavMenu.jsx b/app/components/molecules/NavMenu.jsx
index 7b651de..0bf863b 100644
--- a/app/components/molecules/NavMenu.jsx
+++ b/app/components/molecules/NavMenu.jsx
@@ -7,7 +7,7 @@ const NavMenu = () => {
         { label: "Services", href: "#" },
         { label: "Blog", href: "#" },
         { label: "About us", href: "/about" },
-        { label: "Contact us", href: "#" },
+        { label: "Contact us", href: "/contact" },
     ];
 
     return (
diff --git a/app/components/styles/Contact.css b/app/components/styles/Contact.css
new file mode 100644
index 0000000..1bf62d0
--- /dev/null
+++ b/app/components/styles/Contact.css
@@ -0,0 +1,338 @@
+.contact-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 40px 20px;
+    font-family: 'Source Sans 3', sans-serif;
+    background-color: #F5F5F5;
+}
+
+.contact-hero-section {
+    display: grid;
+    grid-template-columns: 1fr 300px;
+    gap: 40px;
+    margin-bottom: 60px;
+    padding-bottom: 40px;
+    background-color: #F5F5F5;
+    position: relative;
+}
+
+.contact-hero-section::after {
+    content: '';
+    position: absolute;
+    bottom: 10px;
+    left: -160px;
+    right: -160px;
+    height: 10px;
+    background: linear-gradient(to bottom, rgba(0,0,0,0.05), transparent);
+    pointer-events: none;
+}
+
+.testimonials-section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 20px;
+}
+
+.testimonial-card {
+    background: white;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+    max-width: 300px;
+    margin-bottom: 16px;
+}
+
+.testimonial-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 8px;
+}
+
+.testimonial-avatar {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    object-fit: cover;
+}
+
+.testimonial-info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.testimonial-name {
+    font-weight: 600;
+    color: #1A1A1A;
+    font-size: 13px;
+    line-height: 1.2;
+}
+
+.testimonial-role {
+    color: #666;
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+.testimonial-rating {
+    color: #FFB800;
+    font-size: 14px;
+    margin-bottom: 6px;
+    letter-spacing: 2px;
+}
+
+.testimonial-text {
+    color: #1A1A1A;
+    font-size: 13px;
+    line-height: 1.5;
+    margin: 0;
+    font-style: italic;
+}
+
+.contact-header {
+    margin-bottom: 0;
+    max-width: 650px;
+}
+
+.contact-form-section {
+    display: flex;
+    gap: 60px;
+    justify-content: space-between;
+    margin-top: 40px;
+    background-color: #F5F5F5;
+}
+
+.lets-contact {
+    display: block;
+    color: #FFB800;
+    font-size: 1rem;
+    font-weight: 550;
+    margin-bottom: 12px;
+    font-family: 'Source Sans 3', sans-serif;
+}
+
+.contact-header h1 {
+    font-size: 4rem;
+    margin-bottom: 36px;
+    font-weight: 600;
+    line-height: 1.1;
+    color: #1A1A1A;
+    font-family: 'Lora', serif;
+    max-width: 600px;
+}
+
+.contact-actions {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 48px;
+}
+
+.action-button {
+    padding: 14px 28px;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 16px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: none;
+}
+
+.schedule-now {
+    background-color: #0197E7;
+    color: white;
+    border: none;
+}
+
+.schedule-now:hover {
+    background-color: #0085CE;
+}
+
+.drop-message {
+    background-color: transparent;
+    color: #0197E7;
+    border: 2px solid #0197E7;
+}
+
+.drop-message:hover {
+    background-color: #0197E7;
+    color: white;
+}
+
+.contact-form-container {
+    display: flex;
+    gap: 60px;
+    margin-top: 40px;
+    justify-content: space-between;
+}
+
+.contact-form {
+    flex: 1;
+    max-width: 500px;
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-group label {
+    display: block;
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: #333;
+}
+
+.form-group label.required::after {
+    content: "*";
+    color: #C13235;
+    margin-left: 4px;
+}
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    background-color: white;
+}
+
+.phone-input-container {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.country-select {
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: white;
+    width: 120px;
+}
+
+.phone-input {
+    flex: 1;
+}
+
+.country-select {
+    width: 120px;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+    background-color: white;
+    color: #333;
+    cursor: pointer;
+}
+
+.country-select:focus {
+    outline: none;
+    border-color: #C13235;
+}
+
+.phone-input {
+    flex: 1;
+}
+
+.business-goals {
+    flex: 1;
+    max-width: 500px;
+}
+
+.business-goals h2 {
+    font-size: 2rem;
+    margin-bottom: 30px;
+    font-weight: 400;
+    line-height: 1.2;
+    font-family: 'Lora', serif;
+    color: #1A1A1A;
+}
+
+.goals-list {
+    list-style: none;
+    padding: 0;
+}
+
+.goal-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding: 15px;
+    background: white;
+    border-radius: 8px;
+    font-size: 1rem;
+    line-height: 1.4;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+    font-family: 'Source Sans 3', sans-serif;
+    transition: all 0.1s ease;
+    cursor: pointer;
+}
+
+.goal-item:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 12px rgba(1, 151, 231, 0.1);
+    background-color: #f8fcff;
+    border-left: 3px solid #0197E7;
+}
+
+.tick-mark {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    margin-right: 15px;
+    background-color: #0197E7;
+    border-radius: 50%;
+    position: relative;
+    flex-shrink: 0;
+    transition: all 0.1s ease;
+}
+
+.goal-item:hover .tick-mark {
+    transform: scale(1.1);
+    background-color: #0085CE;
+    box-shadow: 0 0 8px rgba(1, 151, 231, 0.3);
+}
+
+.tick-mark::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 12px;
+    height: 12px;
+    background-image: url('/assets/images/blue-checkmark.svg');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    filter: brightness(5);
+}
+
+.submit-button {
+    background-color: #0197E7;
+    color: white;
+    padding: 12px 24px;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    font-family: 'Source Sans 3', sans-serif;
+    width: 100%;
+}
+
+.submit-button:hover {
+    background-color: #0085CE;
+}
+
+.recaptcha-container {
+    margin: 20px 0;
+}
diff --git a/app/routes.js b/app/routes.js
index afcabf3..8cb2387 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -4,4 +4,5 @@ export default [
     index("routes/home.jsx"),
     route("appointment", "routes/appointment.jsx"),
     route("about", "routes/about.jsx"),
+    route("contact", "routes/contact.jsx"),
 ];
\ No newline at end of file
diff --git a/app/routes/contact.jsx b/app/routes/contact.jsx
new file mode 100644
index 0000000..98b1d47
--- /dev/null
+++ b/app/routes/contact.jsx
@@ -0,0 +1,170 @@
+import React, { useState } from "react";
+import Footer from "../components/organisms/Footer";
+import Header from "../components/organisms/Header";
+import "../components/styles/Contact.css";
+
+export default function Contact() {
+    const [formData, setFormData] = useState({
+        firstName: "",
+        companyName: "",
+        businessEmail: "",
+        phoneNumber: "",
+        message: "",
+        goals: []
+    });
+
+    const businessGoals = [
+        "Digital Transformation / BPO",
+        "Modernise Legacy Systems & Technology",
+        "Develop Robust Apps & Products",
+        "Scale or Building In-House Tech Tearms",
+        "Unlock Value With Data & Analytics",
+        "Create Stunning Digital Experiences"
+    ];
+
+    const handleInputChange = (e) => {
+        const { name, value } = e.target;
+        setFormData(prev => ({ ...prev, [name]: value }));
+    };
+
+    const handleGoalChange = (goal) => {
+        setFormData(prev => {
+            const newGoals = prev.goals.includes(goal)
+                ? prev.goals.filter(g => g !== goal)
+                : [...prev.goals, goal];
+            return { ...prev, goals: newGoals };
+        });
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        // Form submission
+        console.log(formData);
+    };
+
+    return (
+        <div style={{ backgroundColor: "#F5F5F5" }}>
+            <Header />
+            <div className="contact-container">
+                <div className="contact-hero-section">
+                    <div className="contact-header">
+                        <span className="lets-contact">Let's Contact</span>
+                        <h1>We'll contact you within a couple of hours to schedule a meeting to discuss your goals.</h1>
+                        <div className="contact-actions">
+                            <button className="action-button schedule-now">Schedule Now</button>
+                            <button className="action-button drop-message">Drop A Message</button>
+                        </div>
+                    </div>
+                    <div className="testimonials-section">
+                        <div className="testimonial-card">
+                            <div className="testimonial-header">
+                                <img src="assets/images/home/user1.png" alt="Adrian Barak" className="testimonial-avatar" />
+                                <div className="testimonial-info">
+                                    <span className="testimonial-name">Adrian Barak</span>
+                                    <span className="testimonial-role">Web Developer at Google</span>
+                                </div>
+                            </div>
+                            <div className="testimonial-rating">★★★★☆</div>
+                            <p className="testimonial-text">"It Is A Long Established Fact That A Reader Will Be Distracted By The Readable Content Of A Page When Looking At Its Layout."</p>
+                        </div>
+                        <div className="testimonial-card">
+                            <div className="testimonial-header">
+                                <img src="/assets/images/home/user2.png" alt="Adrian Barak" className="testimonial-avatar" />
+                                <div className="testimonial-info">
+                                    <span className="testimonial-name">Adrian Barak</span>
+                                    <span className="testimonial-role">Manager</span>
+                                </div>
+                            </div>
+                            <div className="testimonial-rating">★★★★☆</div>
+                            <p className="testimonial-text">"It Is A Long Established Fact That A Reader Will Be Distracted By The Readable Content Of A Page When Looking At Its Layout."</p>
+                        </div>
+                    </div>
+                </div>
+                <div className="contact-form-section">
+                    <div className="business-goals">
+                        <h2>What's your immediate business goal</h2>
+                        <ul className="goals-list">
+                            {businessGoals.map((goal, index) => (
+                                <li key={index} className="goal-item">
+                                    <span className="tick-mark"></span>
+                                    {goal}
+                                </li>
+                            ))}
+                        </ul>
+                    </div>
+                    <form className="contact-form" onSubmit={handleSubmit}>
+                        <div className="form-group">
+                            <label className="required">First name</label>
+                            <input
+                                type="text"
+                                name="firstName"
+                                value={formData.firstName}
+                                onChange={handleInputChange}
+                                placeholder="Name"
+                                required
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label className="optional">Company name</label>
+                            <input
+                                type="text"
+                                name="companyName"
+                                value={formData.companyName}
+                                onChange={handleInputChange}
+                                placeholder="Company name"
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label className="required">Business email</label>
+                            <input
+                                type="email"
+                                name="businessEmail"
+                                value={formData.businessEmail}
+                                onChange={handleInputChange}
+                                placeholder="Name"
+                                required
+                                pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label className="required">Phone number</label>
+                            <div className="phone-input-container">
+                                <select className="country-select">
+                                    <option value="+92">Pakistan</option>
+                                    <option value="+971">UAE</option>
+                                    <option value="+1">USA</option>
+                                </select>
+                                <input
+                                    type="tel"
+                                    name="phoneNumber"
+                                    value={formData.phoneNumber}
+                                    onChange={handleInputChange}
+                                    className="phone-input"
+                                    placeholder="+92"
+                                    required
+                                    pattern="[0-9]*"
+                                    inputMode="numeric"
+                                />
+                            </div>
+                        </div>
+                        <div className="form-group">
+                            <label className="required">How can we help</label>
+                            <textarea
+                                name="message"
+                                value={formData.message}
+                                onChange={handleInputChange}
+                                rows="4"
+                                placeholder="Name"
+                                required
+                            />
+                        </div>
+                        {/*Add reCaptcha here*/}
+                        <button type="submit" className="submit-button">Submit</button>
+                    </form>
+
+                </div>
+            </div>
+            <Footer />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/public/assets/images/blue-checkmark.svg b/public/assets/images/blue-checkmark.svg
new file mode 100644
index 0000000..d2f4f91
--- /dev/null
+++ b/public/assets/images/blue-checkmark.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0197E7" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M20 6L9 17l-5-5"/>
+</svg>
\ No newline at end of file