diff --git a/src/app/post-job/page.tsx b/src/app/post-job/page.tsx
index 59848c6..15ac221 100644
--- a/src/app/post-job/page.tsx
+++ b/src/app/post-job/page.tsx
@@ -2,151 +2,47 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
+import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { useState } from "react";
-import { Briefcase, Mail, CheckCircle, AlertCircle } from "lucide-react";
-
-const navItems = [
-  { name: "Search Jobs", id: "/search" },
-  { name: "Post a Job", id: "/post-job" },
-  { name: "Admin", id: "admin-login" },
-  { name: "Browse", id: "/browse" },
-  { name: "Contact", id: "#contact" },
-];
-
-const footerColumns = [
-  {
-    title: "Product",    items: [
-      { label: "Search Jobs", href: "/search" },
-      { label: "Post a Job", href: "/post-job" },
-      { label: "Browse by Province", href: "#provinces" },
-      { label: "For Employers", href: "#" },
-    ],
-  },
-  {
-    title: "Company",    items: [
-      { label: "About Jobee", href: "#about" },
-      { label: "Careers", href: "#" },
-      { label: "Contact Us", href: "#contact" },
-      { label: "Blog", href: "#" },
-    ],
-  },
-  {
-    title: "Resources",    items: [
-      { label: "Privacy Policy", href: "#" },
-      { label: "Terms of Service", href: "#" },
-      { label: "FAQ", href: "#" },
-      { label: "Support", href: "#" },
-    ],
-  },
-];
-
-interface FormErrors {
-  jobTitle?: string;
-  company?: string;
-  location?: string;
-  salary?: string;
-  description?: string;
-  requirements?: string;
-  email?: string;
-}
-
-interface FormData {
-  jobTitle: string;
-  company: string;
-  location: string;
-  salary: string;
-  jobType: string;
-  description: string;
-  requirements: string;
-  email: string;
-  contactPhone?: string;
-}
+import Link from "next/link";
+import { Briefcase, Mail, MapPin, Sparkles } from "lucide-react";
 
 export default function PostJobPage() {
-  const [formData, setFormData] = useState<FormData>({
-    jobTitle: "",    company: "",    location: "",    salary: "",    jobType: "Full-time",    description: "",    requirements: "",    email: "",    contactPhone: ""});
+  const navItems = [
+    { name: "Search Jobs", id: "search" },
+    { name: "Post a Job", id: "post-job" },
+    { name: "Admin", id: "admin-login" },
+    { name: "Browse", id: "browse" },
+    { name: "Contact", id: "contact" },
+  ];
 
-  const [errors, setErrors] = useState<FormErrors>({});
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [submitStatus, setSubmitStatus] = useState<"idle" | "success" | "error">(
-    "idle"
-  );
-
-  const validateForm = (): boolean => {
-    const newErrors: FormErrors = {};
-
-    if (!formData.jobTitle.trim()) {
-      newErrors.jobTitle = "Job title is required";
-    }
-    if (!formData.company.trim()) {
-      newErrors.company = "Company name is required";
-    }
-    if (!formData.location.trim()) {
-      newErrors.location = "Location is required";
-    }
-    if (!formData.salary.trim()) {
-      newErrors.salary = "Salary range is required";
-    }
-    if (formData.description.trim().length < 20) {
-      newErrors.description = "Description must be at least 20 characters";
-    }
-    if (formData.requirements.trim().length < 10) {
-      newErrors.requirements = "Requirements must be at least 10 characters";
-    }
-    if (
-      !formData.email.trim() ||
-      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)
-    ) {
-      newErrors.email = "Valid email is required";
-    }
-
-    setErrors(newErrors);
-    return Object.keys(newErrors).length === 0;
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!validateForm()) {
-      setSubmitStatus("error");
-      return;
-    }
-
-    setIsSubmitting(true);
-    setSubmitStatus("idle");
-
-    try {
-      // Simulate API call
-      await new Promise((resolve) => setTimeout(resolve, 1500));
-      setSubmitStatus("success");
-      setFormData({
-        jobTitle: "",        company: "",        location: "",        salary: "",        jobType: "Full-time",        description: "",        requirements: "",        email: "",        contactPhone: ""});
-      setErrors({});
-
-      // Reset success message after 5 seconds
-      setTimeout(() => setSubmitStatus("idle"), 5000);
-    } catch (error) {
-      setSubmitStatus("error");
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const handleInputChange = (
-    e: React.ChangeEvent<
-      HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-    >
-  ) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-    if (errors[name as keyof FormErrors]) {
-      setErrors((prev) => ({
-        ...prev,
-        [name]: undefined,
-      }));
-    }
-  };
+  const footerColumns = [
+    {
+      title: "Product",      items: [
+        { label: "Search Jobs", href: "/search" },
+        { label: "Post a Job", href: "/post-job" },
+        { label: "Browse by Province", href: "#provinces" },
+        { label: "For Employers", href: "#" },
+      ],
+    },
+    {
+      title: "Company",      items: [
+        { label: "About Jobee", href: "#about" },
+        { label: "Careers", href: "#" },
+        { label: "Contact Us", href: "#contact" },
+        { label: "Blog", href: "#" },
+      ],
+    },
+    {
+      title: "Resources",      items: [
+        { label: "Privacy Policy", href: "#" },
+        { label: "Terms of Service", href: "#" },
+        { label: "FAQ", href: "#" },
+        { label: "Support", href: "#" },
+      ],
+    },
+  ];
 
   return (
     <ThemeProvider
@@ -163,285 +59,65 @@ export default function PostJobPage() {
     >
       <div id="nav" data-section="nav">
         <NavbarStyleCentered
-          brandName="Jobee"
           navItems={navItems}
-          button={{
-            text: "Post a Job",            href: "/post-job"}}
+          button={{ text: "Post a Job", href: "/post-job" }}
+          brandName="Jobee"
         />
       </div>
 
-      <main className="min-h-screen pt-24 pb-20">
-        <div className="max-w-2xl mx-auto px-4">
-          {/* Header */}
-          <div className="mb-12 text-center">
-            <div className="flex items-center justify-center gap-2 mb-4">
-              <Briefcase className="w-8 h-8" />
-              <span className="text-sm font-semibold text-primary-cta uppercase tracking-wider">
-                Post a Job
-              </span>
-            </div>
-            <h1 className="text-4xl md:text-5xl font-bold mb-4">
-              Hire Top Talent in the Netherlands
-            </h1>
-            <p className="text-lg text-foreground/75 max-w-xl mx-auto">
-              Post your job opening and reach qualified candidates across all Dutch
-              provinces
-            </p>
-          </div>
+      <div id="features" data-section="features">
+        <FeatureCardEight
+          features={[
+            {
+              id: 1,
+              title: "Create a Job Posting",              description:
+                "Fill in job details, requirements, and salary information. Our intuitive form guides you through every step to create a compelling job listing.",              imageSrc:
+                "http://img.b2bpic.net/free-vector/professional-recruitment-plan-diversity-general-infographic-template_23-2148947635.jpg?_wi=4",              imageAlt: "Job posting creation interface"},
+            {
+              id: 2,
+              title: "Reach Qualified Candidates",              description:
+                "Your job posting is automatically distributed across our network of active job seekers across all 12 Dutch provinces.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/homepage-concept-with-search-bar_23-2150040187.jpg?_wi=5",              imageAlt: "Candidate reach visualization"},
+            {
+              id: 3,
+              title: "Review Applications",              description:
+                "Manage all incoming applications in one centralized dashboard. Review resumes, cover letters, and candidate profiles easily.",              imageSrc:
+                "http://img.b2bpic.net/free-photo/personal-information-form-identity-concept_53876-137622.jpg?_wi=4",              imageAlt: "Application review dashboard"},
+          ]}
+          title="Post a Job in Three Easy Steps"
+          description="Reach thousands of qualified job seekers across the Netherlands and build your dream team."
+          tag="Simple Process"
+          tagIcon={Sparkles}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          buttons={[{ text: "Start Posting", href: "/post-job" }]}
+          buttonAnimation="slide-up"
+        />
+      </div>
 
-          {/* Status Messages */}
-          {submitStatus === "success" && (
-            <div className="mb-8 p-4 rounded-lg bg-green-50 border border-green-200 flex items-start gap-3">
-              <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0 mt-0.5" />
-              <div>
-                <h3 className="font-semibold text-green-900">Job Posted Successfully!</h3>
-                <p className="text-sm text-green-800 mt-1">
-                  Your job listing is now live and visible to job seekers across the
-                  Netherlands.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {submitStatus === "error" && Object.keys(errors).length > 0 && (
-            <div className="mb-8 p-4 rounded-lg bg-red-50 border border-red-200 flex items-start gap-3">
-              <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
-              <div>
-                <h3 className="font-semibold text-red-900">Validation Errors</h3>
-                <p className="text-sm text-red-800 mt-1">
-                  Please correct the errors below and try again.
-                </p>
-              </div>
-            </div>
-          )}
-
-          {/* Job Form */}
-          <form
-            onSubmit={handleSubmit}
-            className="space-y-6 bg-card p-8 rounded-2xl border border-background-accent/20 shadow-sm"
-          >
-            {/* Job Title */}
-            <div>
-              <label htmlFor="jobTitle" className="block text-sm font-semibold mb-2">
-                Job Title <span className="text-red-500">*</span>
-              </label>
-              <input
-                id="jobTitle"
-                type="text"
-                value={formData.jobTitle}
-                onChange={handleInputChange}
-                name="jobTitle"
-                placeholder="e.g., Senior React Developer"
-                required
-                className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-              />
-              {errors.jobTitle && (
-                <p className="text-red-600 text-sm mt-1">{errors.jobTitle}</p>
-              )}
-            </div>
-
-            {/* Company Name */}
-            <div>
-              <label htmlFor="company" className="block text-sm font-semibold mb-2">
-                Company Name <span className="text-red-500">*</span>
-              </label>
-              <input
-                id="company"
-                type="text"
-                value={formData.company}
-                onChange={handleInputChange}
-                name="company"
-                placeholder="Your company name"
-                required
-                className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-              />
-              {errors.company && (
-                <p className="text-red-600 text-sm mt-1">{errors.company}</p>
-              )}
-            </div>
-
-            {/* Location and Job Type */}
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              <div>
-                <label htmlFor="location" className="block text-sm font-semibold mb-2">
-                  Location <span className="text-red-500">*</span>
-                </label>
-                <input
-                  id="location"
-                  type="text"
-                  value={formData.location}
-                  onChange={handleInputChange}
-                  name="location"
-                  placeholder="e.g., Amsterdam, Remote"
-                  required
-                  className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-                />
-                {errors.location && (
-                  <p className="text-red-600 text-sm mt-1">{errors.location}</p>
-                )}
-              </div>
-              <div>
-                <label htmlFor="jobType" className="block text-sm font-semibold mb-2">
-                  Job Type
-                </label>
-                <select
-                  id="jobType"
-                  name="jobType"
-                  value={formData.jobType}
-                  onChange={handleInputChange}
-                  className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-                >
-                  <option>Full-time</option>
-                  <option>Part-time</option>
-                  <option>Contract</option>
-                  <option>Freelance</option>
-                </select>
-              </div>
-            </div>
-
-            {/* Salary */}
-            <div>
-              <label htmlFor="salary" className="block text-sm font-semibold mb-2">
-                Salary Range <span className="text-red-500">*</span>
-              </label>
-              <input
-                id="salary"
-                type="text"
-                value={formData.salary}
-                onChange={handleInputChange}
-                name="salary"
-                placeholder="e.g., €50,000 - €70,000"
-                required
-                className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-              />
-              {errors.salary && (
-                <p className="text-red-600 text-sm mt-1">{errors.salary}</p>
-              )}
-            </div>
-
-            {/* Description */}
-            <div>
-              <label htmlFor="description" className="block text-sm font-semibold mb-2">
-                Job Description <span className="text-red-500">*</span>
-              </label>
-              <textarea
-                id="description"
-                name="description"
-                value={formData.description}
-                onChange={handleInputChange}
-                placeholder="Describe the role, responsibilities, and what makes this opportunity unique..."
-                rows={6}
-                className="w-full px-4 py-3 rounded-lg bg-secondary-button text-foreground placeholder:opacity-75 border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 resize-vertical"
-                required
-              />
-              {errors.description && (
-                <p className="text-red-600 text-sm mt-1">{errors.description}</p>
-              )}
-            </div>
-
-            {/* Requirements */}
-            <div>
-              <label htmlFor="requirements" className="block text-sm font-semibold mb-2">
-                Requirements <span className="text-red-500">*</span>
-              </label>
-              <textarea
-                id="requirements"
-                name="requirements"
-                value={formData.requirements}
-                onChange={handleInputChange}
-                placeholder="List required skills, experience, and qualifications. One per line recommended."
-                rows={5}
-                className="w-full px-4 py-3 rounded-lg bg-secondary-button text-foreground placeholder:opacity-75 border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50 resize-vertical"
-                required
-              />
-              {errors.requirements && (
-                <p className="text-red-600 text-sm mt-1">{errors.requirements}</p>
-              )}
-            </div>
-
-            {/* Contact Information */}
-            <div className="border-t border-background-accent/20 pt-6">
-              <h3 className="text-lg font-semibold mb-4">Contact Information</h3>
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div>
-                  <label htmlFor="email" className="block text-sm font-semibold mb-2">
-                    Email Address <span className="text-red-500">*</span>
-                  </label>
-                  <input
-                    id="email"
-                    type="email"
-                    value={formData.email}
-                    onChange={handleInputChange}
-                    name="email"
-                    placeholder="recruiter@company.com"
-                    required
-                    className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-                  />
-                  {errors.email && (
-                    <p className="text-red-600 text-sm mt-1">{errors.email}</p>
-                  )}
-                </div>
-                <div>
-                  <label htmlFor="contactPhone" className="block text-sm font-semibold mb-2">
-                    Phone Number (Optional)
-                  </label>
-                  <input
-                    id="contactPhone"
-                    type="tel"
-                    value={formData.contactPhone}
-                    onChange={handleInputChange}
-                    name="contactPhone"
-                    placeholder="+31 (0)6 1234 5678"
-                    className="w-full px-4 py-2 rounded-lg bg-secondary-button text-foreground border border-background-accent/20 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
-                  />
-                </div>
-              </div>
-            </div>
-
-            {/* Submit Button */}
-            <div className="flex gap-4 pt-4">
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="flex-1 px-6 py-3 rounded-lg bg-primary-cta text-white font-semibold disabled:opacity-60 disabled:cursor-not-allowed transition-opacity"
-              >
-                {isSubmitting ? "Posting Job..." : "Post Job"}
-              </button>
-              <button
-                type="button"
-                onClick={() => window.history.back()}
-                className="px-6 py-3 rounded-lg bg-secondary-button text-foreground font-semibold hover:bg-background-accent/20 transition-colors"
-              >
-                Cancel
-              </button>
-            </div>
-          </form>
-
-          {/* Info Section */}
-          <div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div className="text-center">
-              <div className="text-3xl font-bold text-primary-cta mb-2">100%</div>
-              <p className="text-foreground/75">of jobs posted are visible immediately</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-primary-cta mb-2">24/7</div>
-              <p className="text-foreground/75">job listings stay live around the clock</p>
-            </div>
-            <div className="text-center">
-              <div className="text-3xl font-bold text-primary-cta mb-2">All NL</div>
-              <p className="text-foreground/75">reach candidates across Netherlands</p>
-            </div>
-          </div>
-        </div>
-      </main>
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Newsletter"
+          title="Get Notified About Top Talent"
+          description="Subscribe to receive alerts when qualified candidates match your job requirements. Stay ahead of the competition and hire the best talent."
+          tagIcon={Mail}
+          tagAnimation="slide-up"
+          background={{ variant: "animated-grid" }}
+          useInvertedBackground={false}
+          inputPlaceholder="Enter your company email"
+          buttonText="Subscribe"
+          termsText="We respect your privacy. Unsubscribe anytime from our notifications."
+        />
+      </div>
 
       <div id="footer" data-section="footer">
         <FooterBase
+          columns={footerColumns}
           logoText="Jobee"
           copyrightText="© 2025 Jobee | Dutch Job Listing Platform"
-          columns={footerColumns}
         />
       </div>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file