diff --git a/frontend/src/pages/help/HelpComprehensive.tsx b/frontend/src/pages/help/HelpComprehensive.tsx
index 3d232fd..66c826b 100644
--- a/frontend/src/pages/help/HelpComprehensive.tsx
+++ b/frontend/src/pages/help/HelpComprehensive.tsx
@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { useNavigate, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import {
   ArrowLeft, BookOpen, LayoutDashboard, Calendar, Briefcase, Users, UserCog,
   ClipboardList, Settings, ChevronRight, HelpCircle, CheckCircle, AlertCircle,
@@ -30,43 +31,44 @@ interface TocItem {
 
 const HelpComprehensive: React.FC = () => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const [expandedItems, setExpandedItems] = React.useState<string[]>(['getting-started', 'settings']);
 
   // Table of contents items with sub-items
   const tocItems: TocItem[] = [
     {
       id: 'getting-started',
-      label: 'Getting Started',
+      label: t('helpComprehensive.toc.gettingStarted'),
       icon: <Zap size={16} />,
       subItems: [
-        { label: 'Services Setup', href: '/help/services' },
-        { label: 'Resources Setup', href: '/help/resources' },
-        { label: 'Branding', href: '/help/settings/appearance' },
-        { label: 'Booking URL', href: '/help/settings/booking' },
-        { label: 'Scheduler', href: '/help/scheduler' },
+        { label: t('helpComprehensive.toc.servicesSetup'), href: '/help/services' },
+        { label: t('helpComprehensive.toc.resourcesSetup'), href: '/help/resources' },
+        { label: t('helpComprehensive.toc.branding'), href: '/help/settings/appearance' },
+        { label: t('helpComprehensive.toc.bookingUrl'), href: '/help/settings/booking' },
+        { label: t('helpComprehensive.toc.scheduler'), href: '/help/scheduler' },
       ],
     },
-    { id: 'dashboard', label: 'Dashboard', icon: <LayoutDashboard size={16} /> },
-    { id: 'scheduler', label: 'Scheduler', icon: <Calendar size={16} /> },
-    { id: 'services', label: 'Services', icon: <Briefcase size={16} /> },
-    { id: 'resources', label: 'Resources', icon: <ClipboardList size={16} /> },
-    { id: 'customers', label: 'Customers', icon: <Users size={16} /> },
-    { id: 'staff', label: 'Staff', icon: <UserCog size={16} /> },
-    { id: 'time-blocks', label: 'Time Blocks', icon: <CalendarOff size={16} /> },
-    { id: 'plugins', label: 'Plugins', icon: <Puzzle size={16} /> },
-    { id: 'contracts', label: 'Contracts', icon: <FileSignature size={16} /> },
+    { id: 'dashboard', label: t('helpComprehensive.toc.dashboard'), icon: <LayoutDashboard size={16} /> },
+    { id: 'scheduler', label: t('helpComprehensive.toc.scheduler'), icon: <Calendar size={16} /> },
+    { id: 'services', label: t('helpComprehensive.toc.services'), icon: <Briefcase size={16} /> },
+    { id: 'resources', label: t('helpComprehensive.toc.resources'), icon: <ClipboardList size={16} /> },
+    { id: 'customers', label: t('helpComprehensive.toc.customers'), icon: <Users size={16} /> },
+    { id: 'staff', label: t('helpComprehensive.toc.staff'), icon: <UserCog size={16} /> },
+    { id: 'time-blocks', label: t('helpComprehensive.toc.timeBlocks'), icon: <CalendarOff size={16} /> },
+    { id: 'plugins', label: t('helpComprehensive.toc.plugins'), icon: <Puzzle size={16} /> },
+    { id: 'contracts', label: t('helpComprehensive.toc.contracts'), icon: <FileSignature size={16} /> },
     {
       id: 'settings',
-      label: 'Settings',
+      label: t('helpComprehensive.toc.settings'),
       icon: <Settings size={16} />,
       subItems: [
-        { label: 'Resource Types', href: '/help/settings/resource-types' },
-        { label: 'Email Settings', href: '/help/settings/email' },
-        { label: 'Custom Domains', href: '/help/settings/domains' },
-        { label: 'Billing', href: '/help/settings/billing' },
-        { label: 'API Settings', href: '/help/settings/api' },
-        { label: 'Authentication', href: '/help/settings/auth' },
-        { label: 'Usage & Quota', href: '/help/settings/quota' },
+        { label: t('helpComprehensive.toc.resourceTypes'), href: '/help/settings/resource-types' },
+        { label: t('helpComprehensive.toc.emailSettings'), href: '/help/settings/email' },
+        { label: t('helpComprehensive.toc.customDomains'), href: '/help/settings/domains' },
+        { label: t('helpComprehensive.toc.billing'), href: '/help/settings/billing' },
+        { label: t('helpComprehensive.toc.apiSettings'), href: '/help/settings/api' },
+        { label: t('helpComprehensive.toc.authentication'), href: '/help/settings/auth' },
+        { label: t('helpComprehensive.toc.usageQuota'), href: '/help/settings/quota' },
       ],
     },
   ];
@@ -95,15 +97,15 @@ const HelpComprehensive: React.FC = () => {
         <div className="max-w-6xl mx-auto px-4 py-4 flex items-center justify-between">
           <div className="flex items-center gap-4">
             <button onClick={() => navigate(-1)} className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400">
-              <ArrowLeft size={20} /> Back
+              <ArrowLeft size={20} /> {t('helpComprehensive.header.back')}
             </button>
             <div className="flex items-center gap-2">
               <BookOpen size={24} className="text-brand-600 dark:text-brand-400" />
-              <h1 className="text-xl font-bold text-gray-900 dark:text-white">SmoothSchedule Complete Guide</h1>
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.header.title')}</h1>
             </div>
           </div>
           <Link to="/tickets" className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400">
-            Contact Support
+            {t('helpComprehensive.header.contactSupport')}
           </Link>
         </div>
       </div>
@@ -112,7 +114,7 @@ const HelpComprehensive: React.FC = () => {
         {/* Sidebar Table of Contents */}
         <nav className="hidden lg:block w-64 shrink-0">
           <div className="sticky top-24">
-            <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">Contents</h2>
+            <h2 className="text-sm font-semibold text-gray-900 dark:text-white mb-4">{t('helpComprehensive.toc.contents')}</h2>
             <ul className="space-y-1">
               {tocItems.map((item) => (
                 <li key={item.id}>
@@ -162,14 +164,12 @@ const HelpComprehensive: React.FC = () => {
           {/* Introduction */}
           <section className="mb-12">
             <div className="bg-gradient-to-r from-brand-50 to-blue-50 dark:from-brand-900/20 dark:to-blue-900/20 rounded-xl border border-brand-200 dark:border-brand-800 p-6">
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Welcome to SmoothSchedule</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">{t('helpComprehensive.introduction.welcome')}</h2>
               <p className="text-gray-700 dark:text-gray-300 mb-4">
-                SmoothSchedule is a complete scheduling platform designed to help businesses manage appointments,
-                customers, staff, and services. This comprehensive guide covers everything you need to know to
-                get the most out of the platform.
+                {t('helpComprehensive.introduction.description')}
               </p>
               <p className="text-gray-600 dark:text-gray-400 text-sm">
-                Use the table of contents on the left to jump to specific sections, or scroll through the entire guide.
+                {t('helpComprehensive.introduction.tocHint')}
               </p>
             </div>
           </section>
@@ -182,63 +182,63 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-yellow-100 dark:bg-yellow-900/30 flex items-center justify-center">
                 <Zap size={20} className="text-yellow-600 dark:text-yellow-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Getting Started</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.gettingStarted.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Setup Checklist</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">{t('helpComprehensive.gettingStarted.checklistTitle')}</h3>
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                Follow these steps to get your scheduling system up and running:
+                {t('helpComprehensive.gettingStarted.checklistDescription')}
               </p>
               <ol className="space-y-4">
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">1</span>
                   <div>
                     <Link to="/help/services" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
-                      Set up your Services
+                      {t('helpComprehensive.gettingStarted.step1Title')}
                       <ChevronRight size={14} className="text-brand-500" />
                     </Link>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Define what you offer - consultations, appointments, classes, etc. Include names, durations, and prices.</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step1Description')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">2</span>
                   <div>
                     <Link to="/help/resources" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
-                      Add your Resources
+                      {t('helpComprehensive.gettingStarted.step2Title')}
                       <ChevronRight size={14} className="text-brand-500" />
                     </Link>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Create staff members, rooms, or equipment that can be booked. Set their availability schedules.</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step2Description')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">3</span>
                   <div>
                     <Link to="/help/settings/appearance" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
-                      Configure your Branding
+                      {t('helpComprehensive.gettingStarted.step3Title')}
                       <ChevronRight size={14} className="text-brand-500" />
                     </Link>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Upload your logo and set your brand colors so customers recognize your business.</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step3Description')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">4</span>
                   <div>
                     <Link to="/help/settings/booking" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
-                      Share your Booking URL
+                      {t('helpComprehensive.gettingStarted.step4Title')}
                       <ChevronRight size={14} className="text-brand-500" />
                     </Link>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Copy your booking URL from Settings → Booking and share it with customers.</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step4Description')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-7 h-7 rounded-full bg-brand-600 text-white text-sm flex items-center justify-center font-medium">5</span>
                   <div>
                     <Link to="/help/scheduler" onClick={scrollToTop} className="font-medium text-gray-900 dark:text-white hover:text-brand-600 dark:hover:text-brand-400 flex items-center gap-1">
-                      Start Managing Appointments
+                      {t('helpComprehensive.gettingStarted.step5Title')}
                       <ChevronRight size={14} className="text-brand-500" />
                     </Link>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">Use the Scheduler to view, create, and manage bookings as they come in.</p>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.gettingStarted.step5Description')}</p>
                   </div>
                 </li>
               </ol>
@@ -253,44 +253,43 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center">
                 <LayoutDashboard size={20} className="text-blue-600 dark:text-blue-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Dashboard</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.dashboard.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                The Dashboard provides an at-a-glance overview of your business performance. It displays key metrics
-                and charts to help you understand how your scheduling business is doing.
+                {t('helpComprehensive.dashboard.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Metrics</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.dashboard.keyMetrics')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Total Appointments</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Number of bookings in the system</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.totalAppointments')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.totalAppointmentsDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Active Customers</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Customers with Active status</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.activeCustomers')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.activeCustomersDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Services</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Total number of services offered</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.servicesMetric')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.servicesMetricDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Resources</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Staff, rooms, and equipment available</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.dashboard.resourcesMetric')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.dashboard.resourcesMetricDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Charts</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.dashboard.charts')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Revenue Chart:</strong> Bar chart showing daily revenue by day of week</span>
+                  <span><strong>{t('helpComprehensive.dashboard.revenueChart')}</strong> {t('helpComprehensive.dashboard.revenueChartDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Appointments Chart:</strong> Line chart showing appointment volume by day</span>
+                  <span><strong>{t('helpComprehensive.dashboard.appointmentsChart')}</strong> {t('helpComprehensive.dashboard.appointmentsChartDesc')}</span>
                 </li>
               </ul>
             </div>
@@ -304,80 +303,79 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-green-100 dark:bg-green-900/30 flex items-center justify-center">
                 <Calendar size={20} className="text-green-600 dark:text-green-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Scheduler</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.scheduler.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                The Scheduler is the heart of SmoothSchedule. It provides a visual calendar interface for managing
-                all your appointments with full drag-and-drop support.
+                {t('helpComprehensive.scheduler.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Interface Layout</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.scheduler.interfaceLayout')}</h3>
               <div className="space-y-3 mb-6">
                 <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                   <Clock size={18} className="text-brand-500 mt-0.5" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">Left Sidebar - Pending Appointments</h4>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Unscheduled appointments waiting to be placed on the calendar. Drag them onto available time slots.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.scheduler.pendingSidebarTitle')}</h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.scheduler.pendingSidebarDesc')}</p>
                   </div>
                 </div>
                 <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                   <Calendar size={18} className="text-brand-500 mt-0.5" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">Center - Calendar View</h4>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Main calendar showing appointments organized by resource in columns. Switch between day, 3-day, week, and month views.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.scheduler.calendarViewTitle')}</h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.scheduler.calendarViewDesc')}</p>
                   </div>
                 </div>
                 <div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
                   <Edit size={18} className="text-brand-500 mt-0.5" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">Right Sidebar - Appointment Details</h4>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Click any appointment to view/edit details, add notes, change status, or send reminders.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.scheduler.detailsSidebarTitle')}</h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.scheduler.detailsSidebarDesc')}</p>
                   </div>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.scheduler.keyFeatures')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
-                  <span><strong>Drag & Drop:</strong> Move appointments between time slots and resources</span>
+                  <span><strong>{t('helpComprehensive.scheduler.dragDropFeature')}</strong> {t('helpComprehensive.scheduler.dragDropDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
-                  <span><strong>Resize:</strong> Drag appointment edges to change duration</span>
+                  <span><strong>{t('helpComprehensive.scheduler.resizeFeature')}</strong> {t('helpComprehensive.scheduler.resizeDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
-                  <span><strong>Quick Create:</strong> Double-click any empty slot to create a new appointment</span>
+                  <span><strong>{t('helpComprehensive.scheduler.quickCreateFeature')}</strong> {t('helpComprehensive.scheduler.quickCreateDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
-                  <span><strong>Resource Filtering:</strong> Toggle which resources are visible in the calendar</span>
+                  <span><strong>{t('helpComprehensive.scheduler.resourceFilterFeature')}</strong> {t('helpComprehensive.scheduler.resourceFilterDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500 flex-shrink-0" />
-                  <span><strong>Status Colors:</strong> Appointments are color-coded by status (confirmed, pending, cancelled)</span>
+                  <span><strong>{t('helpComprehensive.scheduler.statusColorsFeature')}</strong> {t('helpComprehensive.scheduler.statusColorsDesc')}</span>
                 </li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Appointment Statuses</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.scheduler.appointmentStatuses')}</h3>
               <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                 <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-blue-700 dark:text-blue-300">Pending</span>
+                  <span className="text-sm font-medium text-blue-700 dark:text-blue-300">{t('helpComprehensive.scheduler.statusPending')}</span>
                 </div>
                 <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-green-700 dark:text-green-300">Confirmed</span>
+                  <span className="text-sm font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.scheduler.statusConfirmed')}</span>
                 </div>
                 <div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-red-700 dark:text-red-300">Cancelled</span>
+                  <span className="text-sm font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.scheduler.statusCancelled')}</span>
                 </div>
                 <div className="p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Completed</span>
+                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('helpComprehensive.scheduler.statusCompleted')}</span>
                 </div>
                 <div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">No-Show</span>
+                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">{t('helpComprehensive.scheduler.statusNoShow')}</span>
                 </div>
               </div>
             </div>
@@ -391,53 +389,51 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center">
                 <Briefcase size={20} className="text-purple-600 dark:text-purple-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Services</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.services.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                Services define what customers can book with you. Each service has a name, duration, price, and
-                description. The Services page uses a two-column layout: an editable list on the left and a
-                customer preview on the right.
+                {t('helpComprehensive.services.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Service Properties</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.services.serviceProperties')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Name</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">The service title shown to customers</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.nameProp')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.namePropDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Duration</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">How long the appointment takes (in minutes)</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.durationProp')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.durationPropDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Price</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Cost of the service (displayed to customers)</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.priceProp')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.pricePropDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Description</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Details about what the service includes</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.services.descriptionProp')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.services.descriptionPropDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.services.keyFeatures')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                 <li className="flex items-center gap-2">
                   <GripVertical size={16} className="text-brand-500" />
-                  <span><strong>Drag to Reorder:</strong> Change the display order by dragging services up/down</span>
+                  <span><strong>{t('helpComprehensive.services.dragReorderFeature')}</strong> {t('helpComprehensive.services.dragReorderDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Image size={16} className="text-brand-500" />
-                  <span><strong>Photo Gallery:</strong> Add, reorder, and remove images for each service</span>
+                  <span><strong>{t('helpComprehensive.services.photoGalleryFeature')}</strong> {t('helpComprehensive.services.photoGalleryDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Eye size={16} className="text-brand-500" />
-                  <span><strong>Live Preview:</strong> See how customers will view your service in real-time</span>
+                  <span><strong>{t('helpComprehensive.services.livePreviewFeature')}</strong> {t('helpComprehensive.services.livePreviewDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Plus size={16} className="text-brand-500" />
-                  <span><strong>Quick Add:</strong> Create new services with the Add Service button</span>
+                  <span><strong>{t('helpComprehensive.services.quickAddFeature')}</strong> {t('helpComprehensive.services.quickAddDesc')}</span>
                 </li>
               </ul>
             </div>
@@ -451,51 +447,50 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center">
                 <ClipboardList size={20} className="text-orange-600 dark:text-orange-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Resources</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.resources.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                Resources are the things that get booked - staff members, rooms, equipment, or any other bookable
-                entity. Each resource appears as a column in the scheduler calendar.
+                {t('helpComprehensive.resources.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Resource Types</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.resources.resourceTypes')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                 <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                   <UserCog size={24} className="text-blue-600 dark:text-blue-400 mb-2" />
-                  <h4 className="font-medium text-gray-900 dark:text-white">Staff</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">People who provide services (employees, contractors, etc.)</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.resources.staffType')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.resources.staffTypeDesc')}</p>
                 </div>
                 <div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                   <Layers size={24} className="text-green-600 dark:text-green-400 mb-2" />
-                  <h4 className="font-medium text-gray-900 dark:text-white">Room</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Physical spaces (meeting rooms, studios, treatment rooms)</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.resources.roomType')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.resources.roomTypeDesc')}</p>
                 </div>
                 <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                   <ClipboardList size={24} className="text-purple-600 dark:text-purple-400 mb-2" />
-                  <h4 className="font-medium text-gray-900 dark:text-white">Equipment</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Physical items (cameras, projectors, vehicles)</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.resources.equipmentType')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.resources.equipmentTypeDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.resources.keyFeatures')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Staff Autocomplete:</strong> When creating staff resources, link to existing staff members</span>
+                  <span><strong>{t('helpComprehensive.resources.staffAutocompleteFeature')}</strong> {t('helpComprehensive.resources.staffAutocompleteDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Multilane Mode:</strong> Enable for resources that can handle multiple concurrent bookings</span>
+                  <span><strong>{t('helpComprehensive.resources.multilaneModeFeature')}</strong> {t('helpComprehensive.resources.multilaneModeDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>View Calendar:</strong> Click the calendar icon to see a resource's schedule</span>
+                  <span><strong>{t('helpComprehensive.resources.viewCalendarFeature')}</strong> {t('helpComprehensive.resources.viewCalendarDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Table Actions:</strong> Edit or delete resources from the actions column</span>
+                  <span><strong>{t('helpComprehensive.resources.tableActionsFeature')}</strong> {t('helpComprehensive.resources.tableActionsDesc')}</span>
                 </li>
               </ul>
             </div>
@@ -509,59 +504,56 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-pink-100 dark:bg-pink-900/30 flex items-center justify-center">
                 <Users size={20} className="text-pink-600 dark:text-pink-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Customers</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.customers.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                The Customers page lets you manage all the people who book appointments with your business.
-                Track their information, booking history, and status.
+                {t('helpComprehensive.customers.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Customer Statuses</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.customers.customerStatuses')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                 <div className="p-3 bg-green-50 dark:bg-green-900/20 rounded-lg">
-                  <h4 className="font-medium text-green-700 dark:text-green-300 text-sm">Active</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Customer can book appointments normally</p>
+                  <h4 className="font-medium text-green-700 dark:text-green-300 text-sm">{t('helpComprehensive.customers.activeStatus')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.customers.activeStatusDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-100 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-700 dark:text-gray-300 text-sm">Inactive</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Customer record is dormant</p>
+                  <h4 className="font-medium text-gray-700 dark:text-gray-300 text-sm">{t('helpComprehensive.customers.inactiveStatus')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.customers.inactiveStatusDesc')}</p>
                 </div>
                 <div className="p-3 bg-red-50 dark:bg-red-900/20 rounded-lg">
-                  <h4 className="font-medium text-red-700 dark:text-red-300 text-sm">Blocked</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Customer cannot make new bookings</p>
+                  <h4 className="font-medium text-red-700 dark:text-red-300 text-sm">{t('helpComprehensive.customers.blockedStatus')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.customers.blockedStatusDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.customers.keyFeatures')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                 <li className="flex items-center gap-2">
                   <Search size={16} className="text-brand-500" />
-                  <span><strong>Search:</strong> Find customers by name, email, or phone</span>
+                  <span><strong>{t('helpComprehensive.customers.searchFeature')}</strong> {t('helpComprehensive.customers.searchDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Filter size={16} className="text-brand-500" />
-                  <span><strong>Filter:</strong> Filter by status (Active, Inactive, Blocked)</span>
+                  <span><strong>{t('helpComprehensive.customers.filterFeature')}</strong> {t('helpComprehensive.customers.filterDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Tag size={16} className="text-brand-500" />
-                  <span><strong>Tags:</strong> Organize customers with custom tags (VIP, New, etc.)</span>
+                  <span><strong>{t('helpComprehensive.customers.tagsFeature')}</strong> {t('helpComprehensive.customers.tagsDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <ArrowUpDown size={16} className="text-brand-500" />
-                  <span><strong>Sorting:</strong> Click column headers to sort the table</span>
+                  <span><strong>{t('helpComprehensive.customers.sortingFeature')}</strong> {t('helpComprehensive.customers.sortingDesc')}</span>
                 </li>
               </ul>
 
               <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
                 <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                  <Eye size={18} className="text-purple-500" /> Masquerading
+                  <Eye size={18} className="text-purple-500" /> {t('helpComprehensive.customers.masqueradingTitle')}
                 </h4>
                 <p className="text-sm text-gray-600 dark:text-gray-300">
-                  Use the Masquerade feature to see exactly what a customer sees when they log in. This is helpful
-                  for walking customers through tasks or troubleshooting issues. Click the eye icon in a customer's
-                  row to start masquerading.
+                  {t('helpComprehensive.customers.masqueradingDesc')}
                 </p>
               </div>
             </div>
@@ -575,53 +567,51 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-teal-100 dark:bg-teal-900/30 flex items-center justify-center">
                 <UserCog size={20} className="text-teal-600 dark:text-teal-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Staff</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.staff.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                The Staff page lets you manage team members who help run your business. Invite new staff,
-                assign roles, and control what each person can access.
+                {t('helpComprehensive.staff.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Staff Roles</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.staffRoles')}</h3>
               <div className="space-y-3 mb-6">
                 <div className="flex items-start gap-3 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
                   <Shield size={18} className="text-yellow-600 mt-0.5" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">Owner</h4>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Full access to everything including billing and settings. Cannot be removed.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.ownerRole')}</h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.ownerRoleDesc')}</p>
                   </div>
                 </div>
                 <div className="flex items-start gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
                   <Shield size={18} className="text-blue-600 mt-0.5" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">Manager</h4>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Can manage staff, customers, services, and appointments. No billing access.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.managerRole')}</h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.managerRoleDesc')}</p>
                   </div>
                 </div>
                 <div className="flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg border border-green-200 dark:border-green-800">
                   <Shield size={18} className="text-green-600 mt-0.5" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">Staff</h4>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Basic access. Can view scheduler and manage own appointments if bookable.</p>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.staff.staffRole')}</h4>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.staff.staffRoleDesc')}</p>
                   </div>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Inviting Staff</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.invitingStaff')}</h3>
               <ol className="space-y-2 text-sm text-gray-600 dark:text-gray-300 list-decimal list-inside mb-6">
-                <li>Click the <strong>Invite Staff</strong> button</li>
-                <li>Enter their email address</li>
-                <li>Select a role (Manager or Staff)</li>
-                <li>Click <strong>Send Invitation</strong></li>
-                <li>They'll receive an email with a link to join</li>
+                <li>{t('helpComprehensive.staff.inviteStep1')}</li>
+                <li>{t('helpComprehensive.staff.inviteStep2')}</li>
+                <li>{t('helpComprehensive.staff.inviteStep3')}</li>
+                <li>{t('helpComprehensive.staff.inviteStep4')}</li>
+                <li>{t('helpComprehensive.staff.inviteStep5')}</li>
               </ol>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Make Bookable</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.staff.makeBookable')}</h3>
               <p className="text-sm text-gray-600 dark:text-gray-300">
-                The "Make Bookable" option creates a bookable resource for a staff member. When enabled, they
-                appear as a column in the scheduler and customers can book appointments with them directly.
+                {t('helpComprehensive.staff.makeBookableDesc')}
               </p>
             </div>
           </section>
@@ -634,86 +624,83 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-rose-100 dark:bg-rose-900/30 flex items-center justify-center">
                 <CalendarOff size={20} className="text-rose-600 dark:text-rose-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Time Blocks</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.timeBlocks.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                Time Blocks let you block off time when appointments cannot be booked. Use them for holidays,
-                closures, lunch breaks, or any time you need to prevent bookings.
+                {t('helpComprehensive.timeBlocks.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Block Levels</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.blockLevels')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg border border-red-200 dark:border-red-800">
-                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">Business Level</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Affects the entire business - all resources. Use for holidays and company-wide closures.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.timeBlocks.businessLevel')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.businessLevelDesc')}</p>
                 </div>
                 <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
-                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">Resource Level</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Affects a specific resource only. Use for individual staff schedules or equipment maintenance.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.timeBlocks.resourceLevel')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.resourceLevelDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Block Types</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.blockTypes')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Hard Block</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Prevents all bookings during this time. Customers cannot book and staff cannot override.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.timeBlocks.hardBlock')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.hardBlockDesc')}</p>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Soft Block</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Shows a warning but allows booking with confirmation. Use for preferred-off times.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.timeBlocks.softBlock')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.softBlockDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Recurrence Patterns</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.recurrencePatterns')}</h3>
               <div className="grid grid-cols-2 md:grid-cols-5 gap-3 mb-6">
                 <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300">One-time</span>
+                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300">{t('helpComprehensive.timeBlocks.oneTimePattern')}</span>
                 </div>
                 <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-green-700 dark:text-green-300">Weekly</span>
+                  <span className="text-xs font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.timeBlocks.weeklyPattern')}</span>
                 </div>
                 <div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-orange-700 dark:text-orange-300">Monthly</span>
+                  <span className="text-xs font-medium text-orange-700 dark:text-orange-300">{t('helpComprehensive.timeBlocks.monthlyPattern')}</span>
                 </div>
                 <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-purple-700 dark:text-purple-300">Yearly</span>
+                  <span className="text-xs font-medium text-purple-700 dark:text-purple-300">{t('helpComprehensive.timeBlocks.yearlyPattern')}</span>
                 </div>
                 <div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-red-700 dark:text-red-300">Holiday</span>
+                  <span className="text-xs font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.timeBlocks.holidayPattern')}</span>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.timeBlocks.keyFeatures')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Scheduler Overlay:</strong> Blocked times appear directly on the scheduler calendar with visual indicators</span>
+                  <span><strong>{t('helpComprehensive.timeBlocks.schedulerOverlayFeature')}</strong> {t('helpComprehensive.timeBlocks.schedulerOverlayDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Color Coding:</strong> Business blocks use red/yellow, resource blocks use purple/cyan</span>
+                  <span><strong>{t('helpComprehensive.timeBlocks.colorCodingFeature')}</strong> {t('helpComprehensive.timeBlocks.colorCodingDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Month View:</strong> Blocked dates show with colored backgrounds and badge indicators</span>
+                  <span><strong>{t('helpComprehensive.timeBlocks.monthViewFeature')}</strong> {t('helpComprehensive.timeBlocks.monthViewDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>List View:</strong> Manage all time blocks in a tabular format with filtering options</span>
+                  <span><strong>{t('helpComprehensive.timeBlocks.listViewFeature')}</strong> {t('helpComprehensive.timeBlocks.listViewDesc')}</span>
                 </li>
               </ul>
 
               <div className="p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg border border-teal-200 dark:border-teal-800">
                 <h4 className="font-medium text-gray-900 dark:text-white mb-2 flex items-center gap-2">
-                  <UserCog size={18} className="text-teal-500" /> Staff Availability
+                  <UserCog size={18} className="text-teal-500" /> {t('helpComprehensive.timeBlocks.staffAvailability')}
                 </h4>
                 <p className="text-sm text-gray-600 dark:text-gray-300">
-                  Staff members can manage their own time blocks through the "My Availability" page. This allows
-                  them to block off time for personal appointments, vacations, or other commitments without
-                  needing admin access.
+                  {t('helpComprehensive.timeBlocks.staffAvailabilityDesc')}
                 </p>
               </div>
             </div>
@@ -721,8 +708,8 @@ const HelpComprehensive: React.FC = () => {
             <Link to="/help/time-blocks" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
               <CalendarOff size={24} className="text-rose-500" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Time Blocks Documentation</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Complete guide to creating, managing, and visualizing time blocks</p>
+                <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.timeBlocks.timeBlocksDocumentation')}</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.timeBlocks.timeBlocksDocumentationDesc')}</p>
               </div>
               <ChevronRight size={20} className="text-gray-400 ml-auto" />
             </Link>
@@ -736,72 +723,71 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center">
                 <Puzzle size={20} className="text-indigo-600 dark:text-indigo-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Plugins</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.plugins.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                Plugins extend SmoothSchedule with custom automation and integrations. Browse the marketplace
-                for pre-built plugins or create your own using our scripting language.
+                {t('helpComprehensive.plugins.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">What Plugins Can Do</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.whatPluginsCanDo')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300 mb-6">
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Send Emails:</strong> Automated reminders, confirmations, and follow-ups</span>
+                  <span><strong>{t('helpComprehensive.plugins.sendEmailsCapability')}</strong> {t('helpComprehensive.plugins.sendEmailsDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Webhooks:</strong> Integrate with external services when events occur</span>
+                  <span><strong>{t('helpComprehensive.plugins.webhooksCapability')}</strong> {t('helpComprehensive.plugins.webhooksDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Reports:</strong> Generate and email business reports on a schedule</span>
+                  <span><strong>{t('helpComprehensive.plugins.reportsCapability')}</strong> {t('helpComprehensive.plugins.reportsDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <CheckCircle size={16} className="text-green-500" />
-                  <span><strong>Cleanup:</strong> Automatically archive old data or manage records</span>
+                  <span><strong>{t('helpComprehensive.plugins.cleanupCapability')}</strong> {t('helpComprehensive.plugins.cleanupDesc')}</span>
                 </li>
               </ul>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Plugin Types</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.pluginTypes')}</h3>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div className="p-4 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg border border-indigo-200 dark:border-indigo-800">
-                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">Marketplace Plugins</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Pre-built plugins available to install immediately. Browse, install, and configure with a few clicks.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.plugins.marketplacePlugins')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.plugins.marketplacePluginsDesc')}</p>
                 </div>
                 <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
-                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">Custom Plugins</h4>
-                  <p className="text-xs text-gray-500 dark:text-gray-400">Create your own plugins using our scripting language. Full control over logic and triggers.</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white mb-1">{t('helpComprehensive.plugins.customPlugins')}</h4>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.plugins.customPluginsDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Triggers</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.triggers')}</h3>
               <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-                Plugins can be triggered in various ways:
+                {t('helpComprehensive.plugins.triggersDesc')}
               </p>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                 <div className="p-2 bg-blue-50 dark:bg-blue-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300">Before Event</span>
+                  <span className="text-xs font-medium text-blue-700 dark:text-blue-300">{t('helpComprehensive.plugins.beforeEventTrigger')}</span>
                 </div>
                 <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-green-700 dark:text-green-300">At Start</span>
+                  <span className="text-xs font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.plugins.atStartTrigger')}</span>
                 </div>
                 <div className="p-2 bg-orange-50 dark:bg-orange-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-orange-700 dark:text-orange-300">After End</span>
+                  <span className="text-xs font-medium text-orange-700 dark:text-orange-300">{t('helpComprehensive.plugins.afterEndTrigger')}</span>
                 </div>
                 <div className="p-2 bg-purple-50 dark:bg-purple-900/20 rounded-lg text-center">
-                  <span className="text-xs font-medium text-purple-700 dark:text-purple-300">On Status Change</span>
+                  <span className="text-xs font-medium text-purple-700 dark:text-purple-300">{t('helpComprehensive.plugins.onStatusChangeTrigger')}</span>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Learn More</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.plugins.learnMore')}</h3>
               <Link to="/help/plugins/docs" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
                 <Puzzle size={24} className="text-indigo-500" />
                 <div>
-                  <h4 className="font-medium text-gray-900 dark:text-white">Plugin Documentation</h4>
-                  <p className="text-sm text-gray-500 dark:text-gray-400">Complete guide to creating and using plugins, including API reference and examples</p>
+                  <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.plugins.pluginDocumentation')}</h4>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.plugins.pluginDocumentationDesc')}</p>
                 </div>
                 <ChevronRight size={20} className="text-gray-400 ml-auto" />
               </Link>
@@ -816,32 +802,30 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
                 <FileSignature size={20} className="text-emerald-600 dark:text-emerald-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Contracts</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.contracts.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                The Contracts feature enables electronic document signing for your business. Create reusable
-                templates, send contracts to customers, and maintain legally compliant audit trails with automatic
-                PDF generation.
+                {t('helpComprehensive.contracts.description')}
               </p>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Contract Templates</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractTemplates')}</h3>
               <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-                Templates are reusable contract documents with placeholder variables that get filled in when sent:
+                {t('helpComprehensive.contracts.templatesDesc')}
               </p>
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Template Properties</h4>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.templateProperties')}</h4>
                   <ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
-                    <li>• <strong>Name:</strong> Internal template identifier</li>
-                    <li>• <strong>Content:</strong> HTML document with variables</li>
-                    <li>• <strong>Scope:</strong> Customer-level or per-appointment</li>
-                    <li>• <strong>Expiration:</strong> Days until contract expires</li>
+                    <li>• <strong>{t('helpComprehensive.contracts.templateNameProp')}</strong> {t('helpComprehensive.contracts.templateNamePropDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.contracts.templateContentProp')}</strong> {t('helpComprehensive.contracts.templateContentPropDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.contracts.templateScopeProp')}</strong> {t('helpComprehensive.contracts.templateScopePropDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.contracts.templateExpirationProp')}</strong> {t('helpComprehensive.contracts.templateExpirationPropDesc')}</li>
                   </ul>
                 </div>
                 <div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">Available Variables</h4>
+                  <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.availableVariables')}</h4>
                   <ul className="text-xs text-gray-500 dark:text-gray-400 mt-2 space-y-1">
                     <li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_NAME}}'}</code></li>
                     <li>• <code className="bg-gray-200 dark:bg-gray-600 px-1 rounded">{'{{CUSTOMER_EMAIL}}'}</code></li>
@@ -851,89 +835,88 @@ const HelpComprehensive: React.FC = () => {
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Contract Workflow</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractWorkflow')}</h3>
               <ol className="space-y-3 mb-6">
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">1</span>
                   <div>
-                    <span className="font-medium text-gray-900 dark:text-white text-sm">Create Contract</span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Select a template and customer. Variables are automatically filled in.</p>
+                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep1Title')}</span>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep1Desc')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">2</span>
                   <div>
-                    <span className="font-medium text-gray-900 dark:text-white text-sm">Send for Signing</span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Customer receives an email with a secure signing link.</p>
+                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep2Title')}</span>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep2Desc')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">3</span>
                   <div>
-                    <span className="font-medium text-gray-900 dark:text-white text-sm">Customer Signs</span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Customer agrees via checkbox consent with full audit trail capture.</p>
+                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep3Title')}</span>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep3Desc')}</p>
                   </div>
                 </li>
                 <li className="flex items-start gap-3">
                   <span className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-600 text-white text-xs flex items-center justify-center font-medium">4</span>
                   <div>
-                    <span className="font-medium text-gray-900 dark:text-white text-sm">PDF Generated</span>
-                    <p className="text-xs text-gray-500 dark:text-gray-400">Signed PDF with audit trail is generated and stored automatically.</p>
+                    <span className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.contracts.workflowStep4Title')}</span>
+                    <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.workflowStep4Desc')}</p>
                   </div>
                 </li>
               </ol>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Contract Statuses</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.contractStatuses')}</h3>
               <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
                 <div className="p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">Pending</span>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Awaiting signature</p>
+                  <span className="text-sm font-medium text-yellow-700 dark:text-yellow-300">{t('helpComprehensive.contracts.pendingStatus')}</span>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.pendingStatusDesc')}</p>
                 </div>
                 <div className="p-2 bg-green-50 dark:bg-green-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-green-700 dark:text-green-300">Signed</span>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Successfully completed</p>
+                  <span className="text-sm font-medium text-green-700 dark:text-green-300">{t('helpComprehensive.contracts.signedStatus')}</span>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.signedStatusDesc')}</p>
                 </div>
                 <div className="p-2 bg-red-50 dark:bg-red-900/20 rounded-lg text-center">
-                  <span className="text-sm font-medium text-red-700 dark:text-red-300">Expired</span>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Past expiration date</p>
+                  <span className="text-sm font-medium text-red-700 dark:text-red-300">{t('helpComprehensive.contracts.expiredStatus')}</span>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.expiredStatusDesc')}</p>
                 </div>
                 <div className="p-2 bg-gray-50 dark:bg-gray-700/50 rounded-lg text-center">
-                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Voided</span>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">Manually cancelled</p>
+                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('helpComprehensive.contracts.voidedStatus')}</span>
+                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{t('helpComprehensive.contracts.voidedStatusDesc')}</p>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Legal Compliance</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.legalCompliance')}</h3>
               <div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 dark:border-emerald-800 rounded-lg p-4 mb-6">
                 <div className="flex items-start gap-3">
                   <Shield size={20} className="text-emerald-600 mt-0.5 flex-shrink-0" />
                   <div>
-                    <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">ESIGN & UETA Compliant</h4>
+                    <h4 className="font-medium text-gray-900 dark:text-white text-sm mb-1">{t('helpComprehensive.contracts.complianceTitle')}</h4>
                     <p className="text-xs text-gray-600 dark:text-gray-300">
-                      All signatures capture: timestamp, IP address, user agent, document hash, consent checkbox states,
-                      and exact consent language. This creates a legally defensible audit trail.
+                      {t('helpComprehensive.contracts.complianceDesc')}
                     </p>
                   </div>
                 </div>
               </div>
 
-              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">Key Features</h3>
+              <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">{t('helpComprehensive.contracts.keyFeatures')}</h3>
               <ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
                 <li className="flex items-center gap-2">
                   <Send size={16} className="text-emerald-500" />
-                  <span><strong>Email Delivery:</strong> Contracts are sent directly to customer email with signing link</span>
+                  <span><strong>{t('helpComprehensive.contracts.emailDeliveryFeature')}</strong> {t('helpComprehensive.contracts.emailDeliveryDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <LinkIcon size={16} className="text-emerald-500" />
-                  <span><strong>Shareable Links:</strong> Copy signing link to share via other channels</span>
+                  <span><strong>{t('helpComprehensive.contracts.shareableLinksFeature')}</strong> {t('helpComprehensive.contracts.shareableLinksDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Download size={16} className="text-emerald-500" />
-                  <span><strong>PDF Download:</strong> Download signed contracts with full audit trail</span>
+                  <span><strong>{t('helpComprehensive.contracts.pdfDownloadFeature')}</strong> {t('helpComprehensive.contracts.pdfDownloadDesc')}</span>
                 </li>
                 <li className="flex items-center gap-2">
                   <Eye size={16} className="text-emerald-500" />
-                  <span><strong>Status Tracking:</strong> Monitor which contracts are pending, signed, or expired</span>
+                  <span><strong>{t('helpComprehensive.contracts.statusTrackingFeature')}</strong> {t('helpComprehensive.contracts.statusTrackingDesc')}</span>
                 </li>
               </ul>
             </div>
@@ -941,8 +924,8 @@ const HelpComprehensive: React.FC = () => {
             <Link to="/help/contracts" onClick={scrollToTop} className="flex items-center gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
               <FileSignature size={24} className="text-emerald-500" />
               <div>
-                <h4 className="font-medium text-gray-900 dark:text-white">Contracts Documentation</h4>
-                <p className="text-sm text-gray-500 dark:text-gray-400">Complete guide to templates, signing, and compliance features</p>
+                <h4 className="font-medium text-gray-900 dark:text-white">{t('helpComprehensive.contracts.contractsDocumentation')}</h4>
+                <p className="text-sm text-gray-500 dark:text-gray-400">{t('helpComprehensive.contracts.contractsDocumentationDesc')}</p>
               </div>
               <ChevronRight size={20} className="text-gray-400 ml-auto" />
             </Link>
@@ -956,20 +939,19 @@ const HelpComprehensive: React.FC = () => {
               <div className="w-10 h-10 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
                 <Settings size={20} className="text-gray-600 dark:text-gray-400" />
               </div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">Settings</h2>
+              <h2 className="text-2xl font-bold text-gray-900 dark:text-white">{t('helpComprehensive.settings.title')}</h2>
             </div>
 
             <div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
               <p className="text-gray-600 dark:text-gray-300 mb-4">
-                Settings is where business owners configure their scheduling platform. Most settings are
-                owner-only and affect how your business operates.
+                {t('helpComprehensive.settings.description')}
               </p>
 
               <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-6">
                 <div className="flex items-start gap-3">
                   <AlertCircle size={20} className="text-blue-500 mt-0.5 flex-shrink-0" />
                   <p className="text-sm text-blue-700 dark:text-blue-300">
-                    <strong>Owner Access Required:</strong> Only business owners can access most settings pages.
+                    <strong>{t('helpComprehensive.settings.ownerAccessNote')}</strong> {t('helpComprehensive.settings.ownerAccessDesc')}
                   </p>
                 </div>
               </div>
@@ -977,73 +959,73 @@ const HelpComprehensive: React.FC = () => {
               <div className="space-y-6">
                 {/* General Settings */}
                 <div className="border-b border-gray-200 dark:border-gray-700 pb-4">
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">General Settings</h3>
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.generalSettings')}</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-                    Configure your business name, timezone, and contact information.
+                    {t('helpComprehensive.settings.generalSettingsDesc')}
                   </p>
                   <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-                    <li>• <strong>Business Name:</strong> Your company name displayed throughout the app</li>
-                    <li>• <strong>Subdomain:</strong> Your booking URL (read-only after creation)</li>
-                    <li>• <strong>Timezone:</strong> Business operating timezone</li>
-                    <li>• <strong>Time Display Mode:</strong> Show times in business timezone or viewer's timezone</li>
-                    <li>• <strong>Contact Email/Phone:</strong> How customers can reach you</li>
+                    <li>• <strong>{t('helpComprehensive.settings.businessNameSetting')}</strong> {t('helpComprehensive.settings.businessNameSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.subdomainSetting')}</strong> {t('helpComprehensive.settings.subdomainSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.timezoneSetting')}</strong> {t('helpComprehensive.settings.timezoneSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.timeDisplaySetting')}</strong> {t('helpComprehensive.settings.timeDisplaySettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.contactSetting')}</strong> {t('helpComprehensive.settings.contactSettingDesc')}</li>
                   </ul>
                 </div>
 
                 {/* Booking Settings */}
                 <div className="border-b border-gray-200 dark:border-gray-700 pb-4">
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Booking Settings</h3>
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.bookingSettings')}</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-                    Your booking URL and post-booking redirect configuration.
+                    {t('helpComprehensive.settings.bookingSettingsDesc')}
                   </p>
                   <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-                    <li>• <strong>Booking URL:</strong> The link customers use to book (copy/share it)</li>
-                    <li>• <strong>Return URL:</strong> Where to redirect customers after booking (optional)</li>
+                    <li>• <strong>{t('helpComprehensive.settings.bookingUrlSetting')}</strong> {t('helpComprehensive.settings.bookingUrlSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.returnUrlSetting')}</strong> {t('helpComprehensive.settings.returnUrlSettingDesc')}</li>
                   </ul>
                 </div>
 
                 {/* Branding Settings */}
                 <div className="border-b border-gray-200 dark:border-gray-700 pb-4">
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Branding (Appearance)</h3>
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.brandingSettings')}</h3>
                   <p className="text-sm text-gray-600 dark:text-gray-300 mb-3">
-                    Customize your business appearance with logos and colors.
+                    {t('helpComprehensive.settings.brandingSettingsDesc')}
                   </p>
                   <ul className="text-sm text-gray-500 dark:text-gray-400 space-y-1">
-                    <li>• <strong>Website Logo:</strong> Appears in sidebar and booking pages (500×500px recommended)</li>
-                    <li>• <strong>Email Logo:</strong> Appears in email notifications (600×200px recommended)</li>
-                    <li>• <strong>Display Mode:</strong> Text Only, Logo Only, or Logo and Text</li>
-                    <li>• <strong>Color Palettes:</strong> 10 preset palettes to choose from</li>
-                    <li>• <strong>Custom Colors:</strong> Set your own primary and secondary colors</li>
+                    <li>• <strong>{t('helpComprehensive.settings.websiteLogoSetting')}</strong> {t('helpComprehensive.settings.websiteLogoSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.emailLogoSetting')}</strong> {t('helpComprehensive.settings.emailLogoSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.displayModeSetting')}</strong> {t('helpComprehensive.settings.displayModeSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.colorPalettesSetting')}</strong> {t('helpComprehensive.settings.colorPalettesSettingDesc')}</li>
+                    <li>• <strong>{t('helpComprehensive.settings.customColorsSetting')}</strong> {t('helpComprehensive.settings.customColorsSettingDesc')}</li>
                   </ul>
                 </div>
 
                 {/* Other Settings */}
                 <div>
-                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Other Settings</h3>
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.settings.otherSettings')}</h3>
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
                     <Link to="/help/settings/resource-types" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">Resource Types</h4>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">Configure staff, room, equipment types</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.resourceTypesLink')}</h4>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.resourceTypesLinkDesc')}</p>
                     </Link>
                     <Link to="/help/settings/email" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">Email Templates</h4>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">Customize email notifications</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.emailTemplatesLink')}</h4>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.emailTemplatesLinkDesc')}</p>
                     </Link>
                     <Link to="/help/settings/domains" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">Custom Domains</h4>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">Use your own domain for booking</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.customDomainsLink')}</h4>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.customDomainsLinkDesc')}</p>
                     </Link>
                     <Link to="/help/settings/billing" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">Billing</h4>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">Manage subscription and payments</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.billingLink')}</h4>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.billingLinkDesc')}</p>
                     </Link>
                     <Link to="/help/settings/api" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">API Settings</h4>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">API keys and webhooks</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.apiSettingsLink')}</h4>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.apiSettingsLinkDesc')}</p>
                     </Link>
                     <Link to="/help/settings/quota" onClick={scrollToTop} className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
-                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">Usage & Quota</h4>
-                      <p className="text-xs text-gray-500 dark:text-gray-400">Track usage and limits</p>
+                      <h4 className="font-medium text-gray-900 dark:text-white text-sm">{t('helpComprehensive.settings.usageQuotaLink')}</h4>
+                      <p className="text-xs text-gray-500 dark:text-gray-400">{t('helpComprehensive.settings.usageQuotaLinkDesc')}</p>
                     </Link>
                   </div>
                 </div>
@@ -1054,15 +1036,15 @@ const HelpComprehensive: React.FC = () => {
           {/* Help Footer */}
           <section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
             <HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
-            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">Need More Help?</h3>
+            <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">{t('helpComprehensive.footer.title')}</h3>
             <p className="text-gray-600 dark:text-gray-300 mb-4">
-              Can't find what you're looking for? Our support team is ready to help.
+              {t('helpComprehensive.footer.description')}
             </p>
             <button
               onClick={() => navigate('/tickets')}
               className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
             >
-              Contact Support
+              {t('helpComprehensive.footer.contactSupport')}
             </button>
           </section>
         </main>