diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index 2f88cca..b7adda1 100644
--- a/src/pages/About.jsx
+++ b/src/pages/About.jsx
@@ -3,10 +3,10 @@ import { Link } from 'react-router-dom'
 import { ArrowRight, Award, BadgeCheck, CheckCircle2, Compass, Cpu, Handshake, Headphones, Route, ShieldCheck, Users, Wrench } from 'lucide-react'
 
 const proofPoints = [
-  { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award },
-  { label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck },
-  { label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck },
-  { label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users },
+  { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award, accent: 'text-primary-blue', bg: 'bg-sky-50', border: 'border-t-primary-blue' },
+  { label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck, accent: 'text-teal-600', bg: 'bg-teal-50', border: 'border-t-teal-500' },
+  { label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck, accent: 'text-cyan-600', bg: 'bg-cyan-50', border: 'border-t-cyan-400' },
+  { label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users, accent: 'text-amber-600', bg: 'bg-amber-50', border: 'border-t-accent-gold' },
 ]
 
 const operatingPrinciples = [
@@ -14,21 +14,33 @@ const operatingPrinciples = [
     title: 'Own the outcome',
     desc: 'We stay close to implementation details so decisions survive real production conditions.',
     icon: Wrench,
+    accent: 'text-primary-blue',
+    bg: 'bg-sky-50',
+    border: 'border-t-primary-blue',
   },
   {
     title: 'Recommend what fits',
     desc: 'We align platforms, budgets, users, and support realities before anyone signs a contract.',
     icon: Handshake,
+    accent: 'text-teal-600',
+    bg: 'bg-teal-50',
+    border: 'border-t-teal-500',
   },
   {
     title: 'Design for operations',
     desc: 'Documentation, migration planning, training, and escalation paths are part of the work.',
     icon: Route,
+    accent: 'text-cyan-600',
+    bg: 'bg-cyan-50',
+    border: 'border-t-cyan-400',
   },
   {
     title: 'Support after go-live',
     desc: 'Our team remains accountable after deployment, when reliability starts to matter most.',
     icon: Headphones,
+    accent: 'text-amber-600',
+    bg: 'bg-amber-50',
+    border: 'border-t-accent-gold',
   },
 ]
 
@@ -53,7 +65,16 @@ const About = () => {
       />
 
       {/* Page Hero */}
-      <section className="bg-primary-navy py-12 lg:py-20 text-white">
+      <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
+        <div className="absolute inset-0 -z-10">
+          <img
+            src="/assets/about-image.webp"
+            alt="Queue North team member reviewing communications infrastructure"
+            className="h-full w-full object-cover object-center"
+          />
+          <div className="absolute inset-0 bg-primary-navy/88" />
+          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/95 to-primary-navy/60" />
+        </div>
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.75fr] gap-10 lg:gap-14 items-center">
             <div>
@@ -80,11 +101,11 @@ const About = () => {
 
             <div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
               <h2 className="text-lg font-semibold mb-5">At a glance</h2>
-              <div className="space-y-4">
+              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                 {proofPoints.map((point) => {
                   const Icon = point.icon
                   return (
-                    <div key={point.label} className="flex gap-4">
+                    <div key={point.label} className="flex gap-4 rounded-md border border-white/10 bg-white/5 p-3">
                       <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
                         <Icon className="h-5 w-5" aria-hidden="true" />
                       </span>
@@ -102,7 +123,7 @@ const About = () => {
       </section>
 
       {/* Operating Model */}
-      <section className="bg-background py-16 lg:py-20">
+      <section className="bg-background py-16 lg:py-24">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-10 lg:gap-14 items-start">
             <div>
@@ -119,11 +140,13 @@ const About = () => {
               {operatingPrinciples.map((item) => {
                 const Icon = item.icon
                 return (
-                  <div key={item.title} className="rounded-md border border-border bg-white p-6 shadow-sm">
-                    <span className="flex h-11 w-11 items-center justify-center rounded-md bg-section-alt text-primary-navy">
-                      <Icon className="h-5 w-5" aria-hidden="true" />
-                    </span>
-                    <h3 className="mt-5 text-xl font-semibold text-primary-navy">{item.title}</h3>
+                  <div key={item.title} className={`rounded-md border border-border border-t-[3px] bg-white p-6 shadow-sm transition-all hover:shadow-md ${item.border}`}>
+                    <div className="flex items-center gap-4">
+                      <span className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-md ${item.bg} ${item.accent}`}>
+                        <Icon className="h-5 w-5" aria-hidden="true" />
+                      </span>
+                      <h3 className="text-left text-xl font-semibold text-primary-navy">{item.title}</h3>
+                    </div>
                     <p className="mt-3 text-sm leading-relaxed text-soft-text">{item.desc}</p>
                   </div>
                 )
@@ -134,7 +157,7 @@ const About = () => {
       </section>
 
       {/* Meaning */}
-      <section className="bg-white py-16 lg:py-20 border-y border-border">
+      <section className="bg-white py-16 lg:py-24 border-y border-border">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14 items-start">
             <div>
@@ -144,15 +167,19 @@ const About = () => {
               </h2>
             </div>
             <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-              <div className="rounded-md border border-border bg-background p-6">
-                <Cpu className="h-7 w-7 text-primary-blue" aria-hidden="true" />
+              <div className="rounded-md border border-border border-t-[3px] border-t-primary-blue bg-background p-6">
+                <span className="flex h-12 w-12 items-center justify-center rounded-md bg-sky-50 text-primary-blue">
+                  <Cpu className="h-6 w-6" aria-hidden="true" />
+                </span>
                 <h3 className="mt-5 text-xl font-semibold text-primary-navy">Queue</h3>
                 <p className="mt-3 text-sm leading-relaxed text-soft-text">
                   Proven, repeatable technology that behaves predictably when customers, staff, and operations depend on it.
                 </p>
               </div>
-              <div className="rounded-md border border-border bg-background p-6">
-                <Compass className="h-7 w-7 text-primary-blue" aria-hidden="true" />
+              <div className="rounded-md border border-border border-t-[3px] border-t-teal-500 bg-background p-6">
+                <span className="flex h-12 w-12 items-center justify-center rounded-md bg-teal-50 text-teal-600">
+                  <Compass className="h-6 w-6" aria-hidden="true" />
+                </span>
                 <h3 className="mt-5 text-xl font-semibold text-primary-navy">North</h3>
                 <p className="mt-3 text-sm leading-relaxed text-soft-text">
                   A clear direction forward, with security, governance, supportability, and long-term ownership built into the plan.
@@ -164,7 +191,7 @@ const About = () => {
       </section>
 
       {/* Capabilities */}
-      <section className="bg-background py-16 lg:py-20">
+      <section className="bg-background py-16 lg:py-24">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="grid grid-cols-1 lg:grid-cols-[0.75fr_1.25fr] gap-10 lg:gap-14 items-start">
             <div>
@@ -178,9 +205,9 @@ const About = () => {
             </div>
 
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-              {capabilities.map((item) => (
-                <div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4">
-                  <CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
+              {capabilities.map((item, index) => (
+                <div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
+                  <CheckCircle2 className={`h-5 w-5 shrink-0 ${index % 2 === 0 ? 'text-primary-blue' : 'text-teal-600'}`} aria-hidden="true" />
                   <span className="text-sm font-medium text-text">{item}</span>
                 </div>
               ))}
@@ -190,22 +217,30 @@ const About = () => {
       </section>
 
       {/* CTA */}
-      <section className="bg-primary-navy py-14 text-white">
+      <section className="bg-section-alt py-16 lg:py-24">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
+          <div className="rounded-md bg-primary-navy px-6 py-10 text-white shadow-md sm:px-8 lg:flex lg:items-center lg:justify-between lg:gap-10 lg:px-10">
             <div>
               <h2 className="text-3xl md:text-4xl font-bold">Need a cleaner path forward?</h2>
               <p className="mt-3 text-white/70 max-w-2xl">
                 Talk with a team that can help evaluate the current state, recommend the right path, and stay accountable after deployment.
               </p>
             </div>
-            <Link
-              to="/contact"
-              className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
-            >
-              Request Consultation
-              <ArrowRight className="h-4 w-4" aria-hidden="true" />
-            </Link>
+            <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
+              <Link
+                to="/contact"
+                className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
+              >
+                Request Consultation
+                <ArrowRight className="h-4 w-4" aria-hidden="true" />
+              </Link>
+              <a
+                href="tel:+13217308020"
+                className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
+              >
+                Call (321) 730-8020
+              </a>
+            </div>
           </div>
         </div>
       </section>