diff --git a/public/images/brittonLogoMask.png b/public/images/brittonLogoMask.png
deleted file mode 100644
index 061b21e..0000000
Binary files a/public/images/brittonLogoMask.png and /dev/null differ
diff --git a/public/images/brittonLogoMask2.png b/public/images/brittonLogoMask2.png
deleted file mode 100644
index 0c6b0b1..0000000
Binary files a/public/images/brittonLogoMask2.png and /dev/null differ
diff --git a/public/images/brittonRoundedOctogon.png b/public/images/brittonRoundedOctogon.png
deleted file mode 100644
index 8096fe1..0000000
Binary files a/public/images/brittonRoundedOctogon.png and /dev/null differ
diff --git a/public/images/brokers-stock.jpg b/public/images/brokers-stock.jpg
new file mode 100644
index 0000000..23dd2ae
Binary files /dev/null and b/public/images/brokers-stock.jpg differ
diff --git a/public/images/doctor.png b/public/images/doctor.png
deleted file mode 100644
index bb3b10a..0000000
Binary files a/public/images/doctor.png and /dev/null differ
diff --git a/public/images/employers-stock.jpg b/public/images/employers-stock.jpg
new file mode 100644
index 0000000..4d8c62d
Binary files /dev/null and b/public/images/employers-stock.jpg differ
diff --git a/public/images/members-stock.jpg b/public/images/members-stock.jpg
new file mode 100644
index 0000000..352752d
Binary files /dev/null and b/public/images/members-stock.jpg differ
diff --git a/public/images/providers-stock.jpg b/public/images/providers-stock.jpg
new file mode 100644
index 0000000..db6ac27
Binary files /dev/null and b/public/images/providers-stock.jpg differ
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 5003ae4..b6a0767 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,14 +5,13 @@ import { BsLinkedin } from "react-icons/bs";
 import { Schibsted_Grotesk, Fraunces } from 'next/font/google'
 import classnames from 'classnames';
 
-//  (san serif grotesque)(public sans, Schibsted grotesque, source sans 3)
 const font = Schibsted_Grotesk({ subsets: ['latin'] })
 const headerFont = Fraunces({ subsets: ['latin'] })
 
 const Footer = () => {
   return (
     <>
-        <footer className="h-[135vh] bg-britton-dark flex justify-center pt-20 pb-30">
+        <footer className="m-h-[135vh] bg-britton-dark flex justify-center py-30">
             <div className={classnames("w-11/12 md:flex md:items-center md:justify-evenly text-britton-neutral", font.className)}>
                 <div className='w-1/2 h-full flex flex-col justify-between'>
                     <div className='w-full flex justify-start'>
@@ -23,23 +22,22 @@ const Footer = () => {
                             height={120}
                         />
                     </div>
-                    <div className='w-full flex flex-col justify-start  ml-[22px]'>
-                        <div className='hover:text-britton-light pb-1'>
+                    <div className='w-full flex flex-col justify-start ml-[22px]'>
+                        <div className='flex'>
                             <Link href="https://www.linkedin.com/company/discovery-insurance">
-                                <BsLinkedin size={32} />
+                                <BsLinkedin size={32} className='hover:text-britton-newblue' />
                             </Link>
                         </div>
-                        <ul className="flex flex-col mt-3 text-md font-medium sm:mt-0">
+                        <ul className="flex flex-col pt-2 text-md font-semibold">
                             <li className='pt-1'>
-                                <a href="#" className="hover:text-britton-light">Terms of Service</a>
+                                <a href="#" className="hover:text-britton-newblue">Terms of Service</a>
                             </li>
                             <li className='pt-1'>
-                                <a href="#" className="hover:text-britton-light">Website Privacy Statement</a>
+                                <a href="#" className="hover:text-britton-newblue">Website Privacy Statement</a>
                             </li>
                             <li className='pt-3 font-normal text-xs'>
                                 © Copyright 2025 Britton Benefit Services, LLC All Rights Reserved
-                            </li>
-                            <li className='font-normal text-xs'>
+                                <br />
                                 604 North Queen St., Kinston, NC 28502
                             </li>
                         </ul>
@@ -50,10 +48,10 @@ const Footer = () => {
                         <div className="pb-6">
                             <a href="#" className="hover:text-britton-accent">Log In?</a>
                         </div>
-                        <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-15">Resources</div>
+                        <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Resources</div>
                     </div>
-                    <ul className="flex flex-col pt-3 text-md font-medium sm:mt-0">
-                        <li className="text-britton-accent mb-4">
+                    <ul className="pt-3 text-md font-medium">
+                        <li className="text-britton-accent pb-4">
                             Members
                         </li>
                         <li className='pt-2'>
@@ -66,8 +64,8 @@ const Footer = () => {
                             <a href="#" className='hover:text-britton-light'>Obtain Rx Information</a>
                         </li>
                     </ul>
-                    <ul className="flex flex-col pt-7 text-md font-medium sm:mt-0">
-                        <li className="text-britton-accent mb-4">
+                    <ul className="pt-7 text-md font-medium">
+                        <li className="text-britton-accent pb-4">
                             Employers
                         </li>
                         <li className='pt-2'>
@@ -83,7 +81,7 @@ const Footer = () => {
                             <a href="#" className='hover:text-britton-light'>Control Health Care Costs</a>
                         </li>
                     </ul>
-                    <ul className="flex flex-col pt-7 text-md font-medium sm:mt-0">
+                    <ul className="pt-7 text-md font-medium">
                         <li className="text-britton-accent mb-4">
                             Providers
                         </li>
@@ -97,7 +95,7 @@ const Footer = () => {
                             <a href="#" className='hover:text-britton-light'>Contact BBS</a>
                         </li>
                     </ul>
-                    <ul className="flex flex-col pt-7 text-md font-medium sm:mt-0">
+                    <ul className="pt-7 text-md font-medium">
                         <li className="text-britton-accent mb-4">
                             Brokers
                         </li>
@@ -111,50 +109,20 @@ const Footer = () => {
                         <div className="pb-6">
                             <a href="#" className="hover:text-britton-accent">Get a Quote</a>
                         </div>
-                        <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-15">Company</div>
+                        <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Company</div>
                     </div>
-                    <ul className="flex flex-col mt-3 text-md font-medium sm:mt-0">
-                        <li className='pt-3 hover:text-britton-light'>
+                    <ul className="pt-3 text-md font-medium">
+                        <li className='pt-3'>
                             <a href="#" className='hover:text-britton-light' >About</a>
                         </li>
-                        <li className='pt-6 hover:text-britton-light'>
+                        <li className='pt-6'>
                             <a href="#" className='hover:text-britton-light' >Careers</a>
                         </li>
-                        <li className='pt-6 hover:text-britton-light'>
+                        <li className='pt-6'>
                             <a href="#" className='hover:text-britton-light' >Contact Us</a>
                         </li>
                     </ul>
                 </div>
-                {/* <div className='flex flex-col'>
-                    <div className="text-md sm:text-left my-1 mx-2">
-                        Britton Benefit Services, LLC 604 North Queen St., Kinston, NC 28502
-                    </div>
-                    <div className="text-md sm:text-left my-1 mx-2">
-                        © Copyright 2025 Britton Benefit Services, LLC All Rights Reserved.
-                    </div>
-                </div>
-                <div className='flex flex-col'>
-                    <ul className="flex flex-wrap items-center mt-3 text-lg font-medium sm:mt-0">
-                        <li>
-                            <a href="#" className="hover:underline me-4 md:me-6">About</a>
-                        </li>
-                        <li className='me-4 md:me-6'>
-                            |
-                        </li>
-                        <li>
-                            <a href="#" className="hover:underline me-4 md:me-6">Careers</a>
-                        </li>
-                        <li className='me-4 md:me-6'>
-                            |
-                        </li>
-                        <li>
-                            <a href="#" className="hover:underline">Contact</a>
-                        </li>
-                    </ul>
-                    <div className="text-md sm:text-center my-1 mx-2">
-                        1-800-676-1182
-                    </div>
-                </div> */}
             </div>
         </footer>
     </>
diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx
index b25afd1..25e7542 100644
--- a/src/components/InfoCard.tsx
+++ b/src/components/InfoCard.tsx
@@ -1,19 +1,13 @@
 "use client";
-import { useEffect, useState } from 'react';
+
 import Link from 'next/link';
-import { Public_Sans, Schibsted_Grotesk, Source_Sans_3 } from 'next/font/google'
+import { Schibsted_Grotesk } from 'next/font/google'
 import classnames from 'classnames';
 
-import { brittonRGB, textColor, bgColor } from '@/interfaces/common'
 
-//  (san serif grotesque)(public sans, Schibsted grotesque, source sans 3)
 const font = Schibsted_Grotesk({ subsets: ['latin'] })
 
 interface InfoCardProps {
-    className?: string;
-    bodyTextColor: textColor;
-    cardBGColor: bgColor;
-    parentBgColor: bgColor;
     title: string;
     imageUrl: string;
     learnMoreUrl?: string;
@@ -21,22 +15,8 @@ interface InfoCardProps {
     children: React.ReactNode;
 }
 
-const brittonColorsRBG: brittonRGB = {
-    'britton-dark': '4,21,62',
-    'britton-medium': '42,75,111',
-    'britton-light': '106,200,241',
-    'britton-electric': '_0,240,255',
-    'britton-electric2': '125,249,255',
-    'britton-neutral': '224,224,224',
-    'britton-accent2': '176,110,48',
-    'britton-accent': '211,143,74',
-}
-
 const InfoCard: React.FC<InfoCardProps> = (
-    {   className,
-        bodyTextColor,
-        cardBGColor,
-        parentBgColor,
+    {
         title,
         imageUrl,
         learnMoreUrl,
@@ -45,138 +25,107 @@ const InfoCard: React.FC<InfoCardProps> = (
      }
 ) => {
 
-    const imageShadowColor: string = (cardBGColor == 'bg-britton-dark' ? "shadow-britton-accent2/90" : "shadow-black/50");
-    const cardVhadowColor: string = (parentBgColor == 'bg-britton-dark' ? "shadow-britton-accent2/90" : "shadow-black/50");
-    
-    
-    // const imageShadowColor = () => {
-    //     if (cardBGColor == 'bg-britton-dark') {
-    //         return 'shadow-britton-accent2/90'
-    //     } else {
-    //         return 'shadow-black/50'
-    //     }
-    // }
+    let cardBGColor;
+    let imageShadowColor;
 
-    // const cardVhadowColor = () => {
-    //     if (parentBgColor == 'bg-britton-dark') {
-    //         return 'shadow-britton-accent2/90'
-    //     } else {
-    //         return 'shadow-black/50'
-    //     }
-    // }
-
-    // const rgbColor = ({ tailWindColor }: string) => {
-    //   return brittonColorsRBG[tailWindColor];
-    // };
-
-    // const rgbColor: string = ({ name }) => {
-    //   return <div>Hello, {name}</div>;
-    // };
-
-    
+    if (invert) {
+        cardBGColor = "bg-britton-dark";
+        imageShadowColor = "shadow-britton-neutral/70";
+      } else {
+        cardBGColor = "bg-britton-medium";
+        imageShadowColor = "shadow-black/50";
+      }
 
   return (
     <div className='flex m-h-150 justify-center py-10'>
         <div className='flex flex-col w-11/12'>
-            <div className='flex flex-col w-full z-30 items-center'>
-                <div className={classnames('flex rounded-2xl', 
+            <div className='flex flex-col w-full items-center'>
+                <div className={classnames('flex rounded-2xl shadow-britton-accent2/90',
                     {
-                        "flex-row-reverse" : invert,
-                        "shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert,
-                        [`${cardVhadowColor}`] : !invert
+                        "flex-row-reverse relative" : invert,
+                        "shadow-[8px_8px_6px,2px_2px_2px_-1px]" : !invert
                     })}>
-                    <div className={classnames("flex flex-col w-7/12 z-40")}>
+                    <div className={classnames({
+                        "hidden" : !invert,
+                        "after:absolute after:bottom-0 after:right-0 after:w-full after:h-114 after:rounded-2xl after:shadow-[8px_8px_6px,2px_2px_2px_-1px] after:shadow-britton-accent2/90" : invert,
+                    })}/>
+                    <div className={classnames("flex flex-col w-7/12")}>
                         <div className={classnames(
-                            'h-30 flex', parentBgColor,
+                            'h-30 flex',
                             {
                                 "flex-row-reverse" : invert,
                             }
                         )}> 
+                            {/* <div className="text-xl border-b border-britton-accent mt-4 pb-2 mr-20">Company</div> */}
                             <div className={classnames(
-                                "w-29/30 text-4xl text-left pl-8 pt-10 text-britton-accent rounded-l-2xl", 
-                                parentBgColor
-                            )}>
-                                {title}
-                            </div>
-                            <div className={classnames(
-                                'w-1/30 relative', cardBGColor,
+                                "relative w-full pt-8 mb-2 ml-8 border-b-3", 
                                 {
-                                    "rounded-tr-2xl rounded-out-br-2xl" : invert,
-                                    "rounded-tl-2xl rounded-out-bl-2xl" : !invert,
+                                    "border-britton-newblue rounded-br-2xl" : !invert,
+                                    "border-britton-accent mr-100" : invert
                                 }
-                                )} />
+                            )}>
+                            {/* <div className={classnames(
+                                "w-full text-5xl text-left pt-8 pl-8 rounded-l-2xl underline underline-offset-8 decoration-2", 
+                                {
+                                    "text-britton-accent decoration-britton-newblue" : !invert,
+                                    "text-britton-dark font-semibold decoration-britton-accent" : invert
+                                }
+                            )}> */}
+                                <div className={classnames(
+                                    'absolute bottom-0 left-0 mb-[2px] text-5xl text-left',
+                                    {
+                                        "text-britton-accent" : !invert,
+                                        "text-britton-dark font-semibold" : invert
+                                    }
+                                )}>
+                                    {title}
+                                </div>
+                            </div>
                         </div>
                         <div className={classnames(
-                            "text-2xl text-left font-medium p-8 h-full", 
-                            cardBGColor, bodyTextColor, font.className,
+                            "relative text-2xl text-left text-britton-neutral font-medium p-8 h-full", 
+                            cardBGColor, font.className,
                             {
-                                "rounded-l-2xl" : !invert,
-                                "rounded-r-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px]" : invert,
-                                [`${cardVhadowColor}`] : invert
+                                "rounded-l-2xl rounded-out-rt-2xl" : !invert,
+                                "rounded-r-2xl rounded-out-lt-2xl" : invert,
                             }
                         )}>
                             {children}
                         </div>
                     </div>
                     <div className={classnames(
-                        'w-5/12 p-4 z-40 justify-center', 
+                        'w-5/12 p-4 justify-center rounded-t-2xl', 
                         cardBGColor,
                         {
                             "rounded-r-2xl" : !invert,
-                            "rounded-l-2xl" : invert
+                            "rounded-l-2xl" : invert,
                         }
                     )}>
                         <div className={classnames(
-                            "relative shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-xl z-40",
+                            "relative shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-xl",
                             imageShadowColor
                         )}>
-                            <img src={imageUrl} alt="Description" className="grayscale rounded-xl w-full h-full bg-cover bg-center" />
+                            <img src={imageUrl} alt="Description" className="grayscale rounded-xl bg-cover bg-center" />
                             <div className="after:absolute after:inset-0 after:bg-britton-medium after:mix-blend-color after:rounded-xl" />
                         </div>
-                        {/* <div style={{ backgroundImage: `url(${imageUrl})` }} className="relative w-full h-full bg-cover bg-center rounded-xl shadow shadow-britton-dark">
-                            <div className="absolute inset-0 bg-britton-light/30" />
-                        </div> */}
                     </div>
                 </div>
             </div>
-            <div className={classnames("w-2/9 relative z-45 flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px]",
-                cardBGColor, cardVhadowColor,
+            <div className={classnames(
+                "w-2/9 relative flex justify-center pb-4 text-center rounded-b-3xl rounded-out-t-2xl shadow-[8px_8px_6px,2px_2px_2px_-1px] shadow-britton-accent2/90",
+                cardBGColor,
                 {
                     "ml-[calc(2/9*100%)]" : !invert,
                     "ml-[calc(5/9*100%)]" : invert
                 }
-                )}>
-                <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="py-1 px-4 rounded text-xl text-britton-accent2 hover:text-britton-accent border-1 border-britton-accent2 hover:border-britton-accent">
-                        Learn More
+            )}>
+                <Link href={learnMoreUrl ? learnMoreUrl : '/'} 
+                    className={classnames(
+                        "py-1 px-4 rounded text-xl text-semibold border-2 text-britton-accent hover:text-britton-accent2 border-britton-accent hover:border-britton-accent2",
+                    )}
+                >
+                    Learn More
                 </Link>
-                {/* <div className={classnames(
-                    "rounded-b-4xl z-40", 
-                    cardBGColor,
-                    {
-                        "w-1/9" : !invert,
-                        "w-6/9" : invert
-                    }
-                )}>
-                    <div className={classnames('w-full h-full rounded-tr-2xl', parentBgColor)} />
-                </div> */}
-                {/* <div className={classnames("w-2/9 z-45 flex flex-col justify-start pb-4 text-center shadow-[8px_8px_6px,2px_2px_2px_-1px] rounded-b-3xl rounded-out-t-3xl", cardBGColor, cardVhadowColor)}>
-                    <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="py-1 px-4 rounded text-xl text-britton-accent2 hover:text-britton-accent border-1 border-britton-accent2 hover:border-britton-accent">
-                        Learn More
-                    </Link>
-                </div> */}
-                {/* <div className={classnames("w-2/9 z-45 rounded-b-4xl", parentBgColor)}>
-                </div>
-                <div className={classnames(
-                    "rounded-b-4xl", 
-                    cardBGColor,
-                    {
-                        "w-6/9" : !invert,
-                        "w-1/9" : invert,
-                    }
-                )}>
-                    <div className={classnames(
-                        'w-full h-full rounded-tl-2xl', parentBgColor)} />
-                </div> */}
             </div>
         </div>
     </div>
diff --git a/src/components/InlineLink.tsx b/src/components/InlineLink.tsx
new file mode 100644
index 0000000..cbf4397
--- /dev/null
+++ b/src/components/InlineLink.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+interface InlineLinkProps {
+  children: React.ReactNode;
+}
+
+const InlineLink: React.FC<InlineLinkProps> = ({ children }) => {
+  return (
+    <a href="#" className='text-britton-light hover:text-britton-newblue' >{children}</a>
+  );
+};
+
+export default InlineLink;
\ No newline at end of file
diff --git a/src/interfaces/common.d.ts b/src/interfaces/common.d.ts
index 087cec3..2d80407 100644
--- a/src/interfaces/common.d.ts
+++ b/src/interfaces/common.d.ts
@@ -1,6 +1,6 @@
-export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
+export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-newblue" | "text-britton-newblue2" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2" | "text-britton-electric2";
 
-export type bgColor = "bg-britton-medium-rgb" | "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
+export type bgColor = "bg-britton-medium-rgb" | "bg-britton-dark" | "bg-britton-medium" | "bg-britton-newblue" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
 
 export interface brittonRGB {
     [key: string]: string;
diff --git a/src/pages/index-services.tsx b/src/pages/index-services.tsx
new file mode 100644
index 0000000..1bbd8e8
--- /dev/null
+++ b/src/pages/index-services.tsx
@@ -0,0 +1,77 @@
+import InfoCard from '../components/InfoCard';
+import Tagline from "../components/Tagline";
+
+export default function Home() {
+  return (
+    <>
+        <Tagline 
+          bgColor="bg-britton-light"
+          textColor="text-britton-dark"
+          textTop="Healthcare that's"
+          textBottom="truly affordable"
+        />
+        <InfoCard
+          title="Health & Risk Management"
+          imageUrl="/images/doctor.png"
+          parentBgColor="bg-britton-dark"
+          cardBGColor="bg-britton-medium"
+          bodyTextColor="text-britton-neutral"
+        >
+          Traditional insurance plans require a lot of upfront costs for coverage that you and your employees may never use. Your insurance provider will collect your monthly premium based on the number of enrolled employees, and your premium only changes if you add or remove enrolled employees.
+          <br />
+          While there are still fixed costs with self-funded plans, such as administrative fees, stop-loss premiums and any other set fees charged per employee, your employee premiums are billed on a per-claim basis.
+        </InfoCard>
+        <div className='z-10 bg-britton-newblue w-full h-full rounded-3xl'>
+          <InfoCard
+            title="Self-Funded Plans"
+            imageUrl='/images/pwn-webi-square.png'
+            parentBgColor="bg-britton-newblue"
+            cardBGColor="bg-britton-dark"
+            bodyTextColor="text-britton-neutral"
+            learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
+            invert
+          >
+            Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike traditional insurance plans that charge a fixed annual rate for claims, self-funded plans are billed monthly, and only for the services used. This saves you from the extra cost of paying for something your company might not use and lets you continuously evaluate your company’s plan, maximizing flexibility and mitigating risk to your company's bottom line.
+          </InfoCard>
+        </div>
+        <InfoCard
+          title="Benefit Access & Online Support"
+          imageUrl="/images/doctor.png"
+          parentBgColor="bg-britton-dark"
+          cardBGColor="bg-britton-medium"
+          bodyTextColor="text-britton-neutral"
+        >
+          We offer a wide range of online services to help streamline and automate the benefit process for you and your employees. This means easier access to the benefit information you need and faster action on individual claims. By logging in to any of the services we provide, you can look up in-network providers through our list of PPOs, file insurance claims and review a claim's status, research which type of plan is best for you, and control your health care costs by selecting a PPO that's actively competing for your business.
+        </InfoCard>
+        <div className='bg-britton-neutral rounded-3xl'>
+          <InfoCard
+            title="Regulatory Compliance"
+            imageUrl="/images/pwn-webi-square.png"
+            parentBgColor="bg-britton-neutral"
+            cardBGColor="bg-britton-dark"
+            bodyTextColor="text-britton-neutral"
+            invert
+          >
+            At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make employee benefits more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.
+          </InfoCard>
+        </div>
+
+
+
+
+
+
+
+
+
+
+
+
+        {/* <div className="flex w-full h-70 justify-between items-center pt-30">
+          <div className="bg-britton-neutral h-full w-3/12 rounded-3xl"></div>
+          <div className="bg-britton-medium h-full w-3/12 rounded-3xl"></div>
+          <div className="bg-britton-light h-full w-3/12 rounded-3xl"></div>
+        </div> */}
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4a49204..115a484 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,6 @@
 import InfoCard from '../components/InfoCard';
 import Tagline from "../components/Tagline";
+import InlineLink from "../components/InlineLink";
 
 export default function Home() {
   return (
@@ -11,48 +12,36 @@ export default function Home() {
           textBottom="truly affordable"
         />
         <InfoCard
-          title="Health & Risk Management"
-          imageUrl="/images/doctor.png"
-          parentBgColor="bg-britton-dark"
-          cardBGColor="bg-britton-medium"
-          bodyTextColor="text-britton-light"
+          title="Members"
+          imageUrl="/images/members-stock.jpg"
         >
-          Traditional insurance plans require a lot of upfront costs for coverage that you and your employees may never use. Your insurance provider will collect your monthly premium based on the number of enrolled employees, and your premium only changes if you add or remove enrolled employees.
+          Traditional insurance plans require a lot of upfront costs for coverage that you and your employees may never use. Your <InlineLink>insurance provider</InlineLink> will collect your monthly premium based on the number of enrolled employees, and your premium only changes if you add or remove enrolled employees.
           <br />
-          While there are still fixed costs with self-funded plans, such as administrative fees, stop-loss premiums and any other set fees charged per employee, your employee premiums are billed on a per-claim basis.
+          While there are still fixed costs with <InlineLink>self-funded plans</InlineLink>, such as administrative fees, stop-loss premiums and any other set fees charged per employee, your employee premiums are billed on a per-claim basis.
         </InfoCard>
-        <div className='z-10 bg-britton-medium w-full h-full rounded-3xl'>
+        <div className='z-10 bg-britton-newblue w-full h-full rounded-3xl'>
           <InfoCard
-            title="Self-Funded Plans"
-            imageUrl='/images/doctor.png'
-            parentBgColor="bg-britton-medium"
-            cardBGColor="bg-britton-neutral"
-            bodyTextColor="text-britton-dark"
+            title="Employers"
+            imageUrl='/images/employers-stock.jpg'
             learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
             invert
           >
-            Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike traditional insurance plans that charge a fixed annual rate for claims, self-funded plans are billed monthly, and only for the services used. This saves you from the extra cost of paying for something your company might not use and lets you continuously evaluate your company’s plan, maximizing flexibility and mitigating risk to your company's bottom line.
+            Self-funding gives you the flexibility to design a plan that is best suited to meet your company's needs. And unlike <InlineLink>traditional insurance plans</InlineLink> that charge a fixed annual rate for claims, self-funded plans are billed monthly, and only for the services used. This saves you from the extra cost of paying for something your company might not use and lets you continuously evaluate your company’s plan, maximizing flexibility and mitigating risk to your company's bottom line.
           </InfoCard>
         </div>
         <InfoCard
-          title="Benefit Access & Online Support"
-          imageUrl="/images/doctor.png"
-          parentBgColor="bg-britton-dark"
-          cardBGColor="bg-britton-light"
-          bodyTextColor="text-britton-medium"
+          title="Providers"
+          imageUrl="/images/providers-stock.jpg"
         >
-          We offer a wide range of online services to help streamline and automate the benefit process for you and your employees. This means easier access to the benefit information you need and faster action on individual claims. By logging in to any of the services we provide, you can look up in-network providers through our list of PPOs, file insurance claims and review a claim's status, research which type of plan is best for you, and control your health care costs by selecting a PPO that's actively competing for your business.
+          We offer a wide range of <InlineLink>online services</InlineLink> to help streamline and automate the benefit process for you and your employees. This means easier access to the benefit information you need and faster action on individual claims. By logging in to any of the services we provide, you can look up <InlineLink>in-network providers</InlineLink> through our list of PPOs, file insurance claims and review a claim's status, research which type of plan is best for you, and control your health care costs by selecting a PPO that's actively competing for your business.
         </InfoCard>
         <div className='bg-britton-neutral rounded-3xl'>
           <InfoCard
-            title="Regulatory Compliance"
-            imageUrl="/images/doctor.png"
-            parentBgColor="bg-britton-neutral"
-            cardBGColor="bg-britton-dark"
-            bodyTextColor="text-britton-light"
+            title="Brokers"
+            imageUrl="/images/brokers-stock.jpg"
             invert
           >
-            At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make employee benefits more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.
+            At Britton Benefit Services, LLC we are leading the third-party benefits industry by working hard to make <InlineLink>employee benefits</InlineLink> more affordable for you and your employees. As a third-party administrator, we negotiate with leading PPOs and other organizations to help you find the best program for your employees without sacrificing the bottom line. This creates a major cost savings that you can pass on to your employees.
           </InfoCard>
         </div>
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8e17af8..a036b44 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,6 +9,8 @@
 @theme {
   --color-britton-dark: #04153E;
   --color-britton-medium: #2A4B6F;
+  --color-britton-newblue: #0096E0;
+  --color-britton-newblue2: #0094de;
   --color-britton-light: #6AC8F1;
   --color-britton-electric: #00F0FF;
   --color-britton-electric2: #7DF9FF;