diff --git a/src/pages/AboutPage.css b/src/pages/AboutPage.css
index d6eb235..81fa5ad 100644
--- a/src/pages/AboutPage.css
+++ b/src/pages/AboutPage.css
@@ -39,7 +39,7 @@
 
 /* Story */
 .about-story-text {
-  max-width: 800px;
+  max-width: 1100px;
   margin: 0 auto;
   color: var(--light-grey-100);
   font-size: 1.05rem;
@@ -55,7 +55,7 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -105,7 +105,7 @@
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 1.25rem;
-  max-width: 1100px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -143,7 +143,7 @@
   display: flex;
   gap: 2.5rem;
   align-items: center;
-  max-width: 900px;
+  max-width: 1200px;
   margin: 0 auto;
   background: rgba(255, 255, 255, 0.05);
   backdrop-filter: blur(12px);
@@ -223,7 +223,7 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -283,7 +283,7 @@
   border: 1px solid rgba(255, 91, 4, 0.2);
   border-radius: 20px;
   padding: 3.5rem 2rem;
-  max-width: 700px;
+  max-width: 900px;
   margin: 0 auto;
 }
 
diff --git a/src/pages/PricingPage.css b/src/pages/PricingPage.css
index 59a2bf7..39770fa 100644
--- a/src/pages/PricingPage.css
+++ b/src/pages/PricingPage.css
@@ -39,7 +39,7 @@
 
 /* Implementation Pricing Table */
 .pricing-table-wrap {
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -65,9 +65,28 @@
   border-bottom: none;
 }
 
+.pricing-table-row--popular {
+  background: rgba(255, 91, 4, 0.06);
+}
+
 .pricing-table-service {
   color: var(--light-grey-100);
   font-size: 0.95rem;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+}
+
+.pricing-popular-tag {
+  background: var(--orange-100);
+  color: #fff;
+  padding: 0.15rem 0.6rem;
+  border-radius: 100px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  flex-shrink: 0;
 }
 
 .pricing-table-price {
@@ -82,7 +101,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
-  max-width: 1100px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -210,7 +229,7 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -248,7 +267,7 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1.25rem;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -307,7 +326,7 @@
   border: 1px solid rgba(255, 91, 4, 0.18);
   border-radius: 20px;
   padding: 2.5rem;
-  max-width: 900px;
+  max-width: 1200px;
   margin: 0 auto;
   text-align: center;
 }
@@ -357,7 +376,7 @@
 
 /* Comparison Table */
 .comparison-table-wrap {
-  max-width: 900px;
+  max-width: 1200px;
   margin: 0 auto;
   overflow-x: auto;
 }
@@ -401,7 +420,7 @@
 
 /* FAQ */
 .faq-list {
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -471,7 +490,7 @@
 }
 
 .pricing-quote-form-wrap {
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
   background: rgba(255, 255, 255, 0.04);
   backdrop-filter: blur(12px);
diff --git a/src/pages/PricingPage.tsx b/src/pages/PricingPage.tsx
index 7bba9b5..d6b1f41 100644
--- a/src/pages/PricingPage.tsx
+++ b/src/pages/PricingPage.tsx
@@ -13,6 +13,8 @@ const fadeUp = {
 };
 
 const implementationPricing = [
+  { service: 'AI Chatbots & Virtual Assistants', price: '£3,000 – £10,000', popular: true },
+  { service: 'Custom Website Development', price: '£2,500 – £15,000', popular: true },
   { service: 'Workflow Automation Implementation', price: '£3,500 – £12,000' },
   { service: 'System Integration & Synchronisation', price: '£2,500 – £10,000+' },
   { service: 'CRM Workflow Optimisation', price: '£3,000 – £6,500' },
@@ -174,13 +176,16 @@ const PricingPage = () => {
               {implementationPricing.map((item, i) => (
                 <motion.div
                   key={item.service}
-                  className="pricing-table-row"
+                  className={`pricing-table-row ${'popular' in item && item.popular ? 'pricing-table-row--popular' : ''}`}
                   initial={{ opacity: 0, x: -20 }}
                   whileInView={{ opacity: 1, x: 0 }}
                   viewport={{ once: true }}
                   transition={{ duration: 0.3, delay: i * 0.06 }}
                 >
-                  <span className="pricing-table-service">{item.service}</span>
+                  <span className="pricing-table-service">
+                    {item.service}
+                    {'popular' in item && item.popular && <span className="pricing-popular-tag">Popular</span>}
+                  </span>
                   <span className="pricing-table-price">{item.price}</span>
                 </motion.div>
               ))}
diff --git a/src/pages/ServicesPage.css b/src/pages/ServicesPage.css
index 1bf31df..af8343d 100644
--- a/src/pages/ServicesPage.css
+++ b/src/pages/ServicesPage.css
@@ -42,7 +42,7 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.5rem;
-  max-width: 1100px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -53,7 +53,8 @@
   border-radius: 16px;
   padding: 2rem;
   cursor: pointer;
-  transition: border-color 0.3s, transform 0.2s;
+  transition: border-color 0.3s, transform 0.2s, box-shadow 0.3s;
+  position: relative;
 }
 
 .service-card:hover {
@@ -64,6 +65,31 @@
   border-color: var(--orange-100);
 }
 
+.service-card--popular {
+  border-color: var(--orange-100);
+  background: rgba(255, 91, 4, 0.06);
+  box-shadow: 0 0 30px rgba(255, 91, 4, 0.08);
+}
+
+.service-card--popular:hover {
+  border-color: var(--orange-100);
+  box-shadow: 0 0 40px rgba(255, 91, 4, 0.15);
+}
+
+.service-popular-badge {
+  position: absolute;
+  top: -11px;
+  right: 1.5rem;
+  background: var(--orange-100);
+  color: #fff;
+  padding: 0.25rem 0.9rem;
+  border-radius: 100px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
 .service-card-header {
   display: flex;
   justify-content: space-between;
@@ -153,7 +179,7 @@
   border: 1px solid rgba(255, 91, 4, 0.18);
   border-radius: 20px;
   padding: 2.5rem;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -205,7 +231,7 @@
 
 /* Process Steps */
 .process-steps {
-  max-width: 800px;
+  max-width: 1200px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
@@ -251,7 +277,7 @@
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1rem;
-  max-width: 1000px;
+  max-width: 1200px;
   margin: 0 auto;
 }
 
@@ -290,7 +316,7 @@
   border: 1px solid rgba(255, 91, 4, 0.2);
   border-radius: 20px;
   padding: 3.5rem 2rem;
-  max-width: 700px;
+  max-width: 900px;
   margin: 0 auto;
 }
 
diff --git a/src/pages/ServicesPage.tsx b/src/pages/ServicesPage.tsx
index 67e32c1..377d853 100644
--- a/src/pages/ServicesPage.tsx
+++ b/src/pages/ServicesPage.tsx
@@ -14,6 +14,44 @@ const fadeUp = {
 };
 
 const services = [
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+      </svg>
+    ),
+    title: 'AI Chatbots & Virtual Assistants',
+    price: '£3,000 – £10,000',
+    purpose: 'Deploy intelligent chatbots that handle customer support, qualify leads, and book appointments 24/7 — no human required.',
+    popular: true,
+    includes: [
+      'Custom chatbot design & personality',
+      'Integration with your website, WhatsApp, or Messenger',
+      'Knowledge base training on your business data',
+      'Lead qualification & CRM handoff',
+      'Multi-language support',
+      'Analytics dashboard & conversation insights',
+    ],
+  },
+  {
+    icon: (
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/>
+      </svg>
+    ),
+    title: 'Custom Website Development',
+    price: '£2,500 – £15,000',
+    purpose: 'High-performance, conversion-optimised websites built with modern tech — fast, SEO-ready, and fully yours.',
+    popular: true,
+    includes: [
+      'Custom design & responsive development',
+      'React / Next.js or WordPress build',
+      'SEO optimisation & Core Web Vitals',
+      'CMS integration for easy content updates',
+      'Contact forms, analytics & tracking setup',
+      'Hosting setup on your own infrastructure',
+    ],
+  },
   {
     icon: (
       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
@@ -211,13 +249,14 @@ const ServicesPage = () => {
               return (
                 <motion.div
                   key={s.title}
-                  className={`service-card ${isExpanded ? 'service-card--expanded' : ''}`}
+                  className={`service-card ${isExpanded ? 'service-card--expanded' : ''} ${'popular' in s && s.popular ? 'service-card--popular' : ''}`}
                   initial={{ opacity: 0, y: 40 }}
                   whileInView={{ opacity: 1, y: 0 }}
                   viewport={{ once: true, margin: '-60px' }}
                   transition={{ duration: 0.5, delay: i * 0.08 }}
                   onClick={() => setExpandedCard(isExpanded ? null : i)}
                 >
+                  {'popular' in s && s.popular && <span className="service-popular-badge">Popular</span>}
                   <div className="service-card-header">
                     <div className="service-card-icon">{s.icon}</div>
                     <div className="service-card-price">{s.price}</div>