diff --git a/src/app/profile/components/CustomerSupportPanel.tsx b/src/app/profile/components/CustomerSupportPanel.tsx
new file mode 100644
index 00000000..a812d3cd
--- /dev/null
+++ b/src/app/profile/components/CustomerSupportPanel.tsx
@@ -0,0 +1,214 @@
+'use client';
+
+import { memo, useCallback, useState } from 'react';
+import { ChevronDown, ChevronUp, Mail, MessageCircle, Phone } from 'lucide-react';
+import { supportFaqs, supportContactOptions } from '../profile-data';
+
+// ── FAQ Accordion Item ────────────────────────────────────────────────────────
+
+interface FaqItemProps {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+function FaqItem({ id, question, answer }: FaqItemProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const headingId = `faq-heading-${id}`;
+  const panelId = `faq-panel-${id}`;
+
+  const toggle = useCallback(() => setIsOpen((prev) => !prev), []);
+
+  return (
+    <div className="border border-gray-200 rounded-lg overflow-hidden">
+      <h3>
+        <button
+          type="button"
+          id={headingId}
+          aria-expanded={isOpen}
+          aria-controls={panelId}
+          onClick={toggle}
+          className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-gray-900 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500 transition-colors"
+        >
+          <span>{question}</span>
+          {isOpen ? (
+            <ChevronUp size={18} className="shrink-0 text-gray-500" aria-hidden="true" />
+          ) : (
+            <ChevronDown size={18} className="shrink-0 text-gray-500" aria-hidden="true" />
+          )}
+        </button>
+      </h3>
+
+      <div
+        id={panelId}
+        role="region"
+        aria-labelledby={headingId}
+        hidden={!isOpen}
+        className="px-4 pb-4 text-sm text-gray-600 leading-relaxed"
+      >
+        {answer}
+      </div>
+    </div>
+  );
+}
+
+// ── Contact Form ──────────────────────────────────────────────────────────────
+
+type SubmitState = 'idle' | 'submitting' | 'success' | 'error';
+
+function ContactForm() {
+  const [submitState, setSubmitState] = useState<SubmitState>('idle');
+  const [subject, setSubject] = useState('');
+  const [message, setMessage] = useState('');
+
+  const handleSubmit = useCallback(
+    async (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+      setSubmitState('submitting');
+
+      // Simulated async submission — replace with real API call
+      await new Promise<void>((resolve) => setTimeout(resolve, 1200));
+
+      setSubmitState('success');
+      setSubject('');
+      setMessage('');
+    },
+    [],
+  );
+
+  if (submitState === 'success') {
+    return (
+      <div
+        role="status"
+        aria-live="polite"
+        className="rounded-lg bg-green-50 border border-green-200 p-6 text-center"
+      >
+        <p className="text-green-800 font-medium">
+          ✅ Your message has been sent. We&apos;ll get back to you within 24 hours.
+        </p>
+        <button
+          type="button"
+          onClick={() => setSubmitState('idle')}
+          className="mt-4 text-sm text-green-700 underline hover:text-green-900 focus:outline-none focus:ring-2 focus:ring-green-500 rounded"
+        >
+          Send another message
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form onSubmit={handleSubmit} noValidate className="space-y-4">
+      <div>
+        <label htmlFor="support-subject" className="mb-1 block text-sm font-medium text-gray-700">
+          Subject
+        </label>
+        <input
+          id="support-subject"
+          type="text"
+          required
+          value={subject}
+          onChange={(e) => setSubject(e.target.value)}
+          placeholder="Briefly describe your issue"
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div>
+        <label htmlFor="support-message" className="mb-1 block text-sm font-medium text-gray-700">
+          Message
+        </label>
+        <textarea
+          id="support-message"
+          required
+          rows={5}
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          placeholder="Describe your issue in detail…"
+          className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm focus:border-transparent focus:ring-2 focus:ring-blue-500 resize-none"
+        />
+      </div>
+
+      {submitState === 'error' && (
+        <p role="alert" className="text-sm text-red-600">
+          Something went wrong. Please try again.
+        </p>
+      )}
+
+      <button
+        type="submit"
+        disabled={submitState === 'submitting' || !subject.trim() || !message.trim()}
+        className="rounded-lg bg-blue-500 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        {submitState === 'submitting' ? 'Sending…' : 'Send Message'}
+      </button>
+    </form>
+  );
+}
+
+// ── Contact Option Icons ──────────────────────────────────────────────────────
+
+const contactIcons = {
+  email: Mail,
+  chat: MessageCircle,
+  phone: Phone,
+} as const;
+
+// ── Main Panel ────────────────────────────────────────────────────────────────
+
+function CustomerSupportPanel() {
+  return (
+    <section
+      id="support-panel"
+      role="tabpanel"
+      aria-labelledby="support-tab"
+      className="space-y-8"
+    >
+      {/* Contact Options */}
+      <div className="rounded-lg bg-white p-6 shadow">
+        <h2 className="mb-6 text-xl font-semibold text-gray-900">Contact Us</h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+          {supportContactOptions.map((option) => {
+            const Icon = contactIcons[option.icon as keyof typeof contactIcons] ?? Mail;
+            return (
+              <a
+                key={option.id}
+                href={option.href}
+                target={option.href.startsWith('http') ? '_blank' : undefined}
+                rel={option.href.startsWith('http') ? 'noopener noreferrer' : undefined}
+                className="flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4 text-center transition-colors hover:border-blue-300 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                aria-label={option.ariaLabel}
+              >
+                <Icon size={24} className="text-blue-500" aria-hidden="true" />
+                <span className="font-medium text-gray-900">{option.label}</span>
+                <span className="text-xs text-gray-500">{option.description}</span>
+              </a>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* FAQ */}
+      <div className="rounded-lg bg-white p-6 shadow">
+        <h2 className="mb-6 text-xl font-semibold text-gray-900">Frequently Asked Questions</h2>
+        <div className="space-y-3">
+          {supportFaqs.map((faq) => (
+            <FaqItem key={faq.id} id={faq.id} question={faq.question} answer={faq.answer} />
+          ))}
+        </div>
+      </div>
+
+      {/* Contact Form */}
+      <div className="rounded-lg bg-white p-6 shadow">
+        <h2 className="mb-2 text-xl font-semibold text-gray-900">Send Us a Message</h2>
+        <p className="mb-6 text-sm text-gray-500">
+          Can&apos;t find what you&apos;re looking for? Fill out the form below and our support
+          team will respond within 24 hours.
+        </p>
+        <ContactForm />
+      </div>
+    </section>
+  );
+}
+
+export default memo(CustomerSupportPanel);
diff --git a/src/app/profile/components/ProfileTabs.tsx b/src/app/profile/components/ProfileTabs.tsx
index 8904ffc5..711c88a7 100644
--- a/src/app/profile/components/ProfileTabs.tsx
+++ b/src/app/profile/components/ProfileTabs.tsx
@@ -15,6 +15,10 @@ const AchievementsPanel = dynamic(() => import('./AchievementsPanel'), {
   loading: () => <ProfilePanelSkeleton label="achievements" />,
 });
 
+const CustomerSupportPanel = dynamic(() => import('./CustomerSupportPanel'), {
+  loading: () => <ProfilePanelSkeleton label="support" />,
+});
+
 interface ProfileTabButtonProps {
   tab: { id: ProfileTabId; label: string };
   isActive: boolean;
@@ -40,7 +44,9 @@ const ProfileTabButton = memo(function ProfileTabButton({
       tabIndex={isActive ? 0 : -1}
       onClick={handleClick}
       className={`rounded-lg px-4 py-2 font-medium focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
-        isActive ? 'bg-blue-500 text-white' : 'bg-white text-gray-700 hover:bg-gray-100'
+        isActive
+          ? 'bg-blue-500 text-white'
+          : 'bg-white text-gray-700 hover:bg-gray-100'
       }`}
     >
       {tab.label}
@@ -57,7 +63,11 @@ export default function ProfileTabs() {
 
   return (
     <>
-      <div className="mb-8 flex flex-wrap gap-3" role="tablist" aria-label="Profile sections">
+      <div
+        className="mb-8 flex flex-wrap gap-3"
+        role="tablist"
+        aria-label="Profile sections"
+      >
         {profileTabs.map((tab) => (
           <ProfileTabButton
             key={tab.id}
@@ -71,6 +81,7 @@ export default function ProfileTabs() {
       {activeTab === 'profile' && <ProfileInfoPanel />}
       {activeTab === 'settings' && <SettingsPanel />}
       {activeTab === 'achievements' && <AchievementsPanel />}
+      {activeTab === 'support' && <CustomerSupportPanel />}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/app/profile/profile-data.ts b/src/app/profile/profile-data.ts
index 2b6c3655..2eee5776 100644
--- a/src/app/profile/profile-data.ts
+++ b/src/app/profile/profile-data.ts
@@ -1,4 +1,4 @@
-export type ProfileTabId = 'profile' | 'settings' | 'achievements';
+export type ProfileTabId = 'profile' | 'settings' | 'achievements' | 'support';
 
 export interface ProfileUser {
   initials: string;
@@ -42,6 +42,84 @@ export const profileTabs: Array<{ id: ProfileTabId; label: string }> = [
   { id: 'profile', label: 'Profile' },
   { id: 'settings', label: 'Settings' },
   { id: 'achievements', label: 'Achievements' },
+  { id: 'support', label: 'Customer Support' },
+];
+
+// ── Customer Support ──────────────────────────────────────────────────────────
+
+export interface SupportFaq {
+  id: string;
+  question: string;
+  answer: string;
+}
+
+export interface SupportContactOption {
+  id: string;
+  label: string;
+  description: string;
+  href: string;
+  icon: string;
+  ariaLabel: string;
+}
+
+export const supportFaqs: SupportFaq[] = [
+  {
+    id: 'reset-password',
+    question: 'How do I reset my password?',
+    answer:
+      'Go to the login page and click "Forgot password". Enter your registered email address and we will send you a reset link within a few minutes. Check your spam folder if you do not see it.',
+  },
+  {
+    id: 'offline-access',
+    question: 'How does offline learning work?',
+    answer:
+      'Enable Offline Mode in your Settings tab, then open any course and click the download icon. Downloaded content is available in the app even without an internet connection. Your progress syncs automatically when you reconnect.',
+  },
+  {
+    id: 'certificate',
+    question: 'How do I get my course certificate?',
+    answer:
+      'Certificates are issued automatically once you complete all lessons and pass the final assessment with a score of 70% or higher. You can download your certificate from the Achievements tab.',
+  },
+  {
+    id: 'billing',
+    question: 'How do I update my billing information?',
+    answer:
+      'Navigate to Settings → Billing (available for paid plans). You can update your payment method, view invoices, and manage your subscription from there.',
+  },
+  {
+    id: 'progress-sync',
+    question: 'My learning progress is not syncing. What should I do?',
+    answer:
+      'First, ensure you have a stable internet connection. Then try refreshing the page. If the issue persists, sign out and sign back in. Your progress is saved locally and will sync once connectivity is restored.',
+  },
+];
+
+export const supportContactOptions: SupportContactOption[] = [
+  {
+    id: 'email',
+    label: 'Email Support',
+    description: 'Response within 24 hours',
+    href: 'mailto:support@teachlink.com',
+    icon: 'email',
+    ariaLabel: 'Email our support team at support@teachlink.com',
+  },
+  {
+    id: 'chat',
+    label: 'Live Chat',
+    description: 'Mon–Fri, 9 am–6 pm UTC',
+    href: 'https://teachlink.com/chat',
+    icon: 'chat',
+    ariaLabel: 'Open live chat with support',
+  },
+  {
+    id: 'phone',
+    label: 'Phone Support',
+    description: '+1 (800) 123-4567',
+    href: 'tel:+18001234567',
+    icon: 'phone',
+    ariaLabel: 'Call our support line at +1 800 123 4567',
+  },
 ];
 
 export const learningGoalOptions: SelectOption[] = [