diff --git a/public/images/placeHolder.png b/public/images/doctor.png
similarity index 100%
rename from public/images/placeHolder.png
rename to public/images/doctor.png
diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index 66cc464..20ce57c 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -33,7 +33,7 @@ export default function Dropdown(props: Props) {
         <>
             <div className="relative">
                 <Button
-                    className="hover:text-britton-light font-semibold text-lg uppercase"
+                    className="hover:text-britton-light font-semibold text-lg"
                     onClick={toggle}
                 >{item.title}</Button>
                 <div className={`absolute top-8 z-30 w-[150px] flex flex-col bg-stone-300 text-sm rounded-md ${transClass}`}>
@@ -42,14 +42,14 @@ export default function Dropdown(props: Props) {
                             <>
                                 <Link
                                     key={item.route}
-                                    className="hover:bg-britton-dark hover:text-britton-neutral text-center px-2 py-1"
+                                    className="hover:bg-britton-medium hover:text-britton-neutral text-center px-2 py-1"
                                     href={item?.route || ''}
                                     onClick={toggle}
                                 >
                                     {item.title}
                                 </Link>
                                 <div className={classnames(
-                                        "h-px bg-britton-accent",
+                                        "h-px bg-britton-accent mx-2",
                                         {"hidden" : isLastItem(item)}
                                     )}
                                 />
diff --git a/src/components/InfoCard.tsx b/src/components/InfoCard.tsx
index fd9edda..8f8db0f 100644
--- a/src/components/InfoCard.tsx
+++ b/src/components/InfoCard.tsx
@@ -1,10 +1,11 @@
 "use client";
 
 import Link from 'next/link';
+import Image from 'next/image';
 import classnames from 'classnames';
 
-type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
-type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
+export type textColor = "text-britton-dark" | "text-britton-medium" | "text-britton-light" | "text-britton-neutral" | "text-britton-accent" | "text-britton-accent2";
+export type bgColor = "bg-britton-dark" | "bg-britton-medium" | "bg-britton-light" | "bg-britton-neutral" | "bg-britton-accent" | "bg-britton-accent2";
 
 
 
@@ -15,6 +16,7 @@ interface InfoCardProps {
     sectionBgColor: bgColor;
     title: string;
     imageUrl: string;
+    learnMoreUrl?: string;
     invert?: boolean;
     children: React.ReactNode;
 }
@@ -26,6 +28,7 @@ const InfoCard: React.FC<InfoCardProps> = (
         sectionBgColor,
         title,
         imageUrl,
+        learnMoreUrl,
         invert,
         children
      }
@@ -74,7 +77,7 @@ const InfoCard: React.FC<InfoCardProps> = (
                     "rounded-l-3xl rounded-tr-3xl" : invert
                 }
             )}>
-                <div className={`h-full w-full rounded-3xl bg-cover bg-[url(${imageUrl})]`} />
+                <div style={{ backgroundImage: `url(${imageUrl})` }} className="w-full h-full bg-cover bg-center rounded-3xl" />
             </div>
         </div>
 
@@ -91,7 +94,7 @@ const InfoCard: React.FC<InfoCardProps> = (
             </div>
             <div className={classnames("w-3/9 rounded-b-4xl", sectionBgColor)}>
                 <div className={classnames("w-full p-6 text-xl text-center text-britton-accent2 rounded-b-3xl", cardBGColor)}>
-                    <Link href="/services" className="hover:text-britton-accent">
+                    <Link href={learnMoreUrl ? learnMoreUrl : '/'} className="hover:text-britton-accent">
                         Learn More
                     </Link>
                 </div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 458b57f..395d65f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -8,6 +8,7 @@ import Image from 'next/image';
 import Dropdown from "./Dropdown";
 
 export interface MenuItem {
+  id: string;
   title: string;
   route?: string;
   children?: MenuItem[];
@@ -15,49 +16,60 @@ export interface MenuItem {
 
 const menuItems: MenuItem[] = [
   {
+    id: "employers",
     title: "Employers",
     children: [
       {
+        id: "employerServices",
         title: "Employer Services",
         route: "",
       },
       {
+        id: "selfFundedPlans",
         title: "Self-Funded Plans",
         route: "",
       },
       {
+        id: "controlHealthCareCosts",
         title: "Control Health Care Costs",
         route: "",
       },
     ],
   },
   {
+    id: "members",
     title: "Members",
     children: [
       {
+        id: "findMedicalProvider",
         title: "Find a Medical Provider",
         route: "",
       },
       {
+        id: "obtainRxInformation",
         title: "Obtain Rx Information",
         route: "",
       },
     ],
   },
   {
+    id: "providers",
     title: "Providers",
     children: [
       {
+        id: "eligibilityLookup",
         title: "Eligibility Lookup",
         route: "",
       },
       {
+        id: "contactBbs",
         title: "Contact BBS",
         route: "",
       },
     ],
   },
   {
+    id: "brokers",
     title: "Brokers",
     route: "",
     },
@@ -98,8 +110,8 @@ const Navbar = () => {
                     <Image
                         src="/images/bbstpa-forsite.png"
                         alt="Britton Logo"
-                        width={273}
-                        height={80}
+                        width={205}
+                        height={60}
                     />
                 </div>
                 <div className={classnames('rounded-b-3xl py-2 bg-britton-dark font-semibold text-britton-neutral text-center text-lg uppercase w-72', {"hidden" : !isScrolled})}>
@@ -134,7 +146,7 @@ const Navbar = () => {
                         </Link>
                     </li>
                 </ul> */}
-                <div className={classnames("flex space-x-4 font-semibold text-lg uppercase", {"pl-2" : isScrolled})}>
+                <div className={classnames("flex space-x-4 font-semibold text-lg", {"pl-2" : isScrolled})}>
                     {menuItems.map((item) => {
                     return item.hasOwnProperty("children") ? 
                     (
diff --git a/src/components/Tagline.tsx b/src/components/Tagline.tsx
new file mode 100644
index 0000000..7ed744d
--- /dev/null
+++ b/src/components/Tagline.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { bgColor, textColor } from './InfoCard'
+
+interface TaglineProps {
+    className?: string;
+    bgColor: bgColor;
+    textColor: textColor;
+    textTop: string;
+    textBottom: string;
+}
+
+const Tagline: React.FC<TaglineProps> = (
+    {   className,
+        bgColor,
+        textColor,
+        textTop,
+        textBottom
+     }
+) => {
+
+    return (
+        <>
+            <div className="flex flex-col justify-center items-center py-20">
+                <div className="w-11/12 flex justify-start">
+                    <div className="w-7/12 bg-britton-light text-center text-britton-dark text-7xl rounded-l-3xl rounded-t-3xl py-3 px-4 ml-30">
+                        {textTop}
+                    </div>
+                    {/* <div className="w-5/12 bg-britton-light rounded-4xl">
+                        <div>
+                            
+                        </div>
+                    </div> */}
+                </div>
+                <div className="w-11/12 flex justify-end">
+                    <div className="w-7/12 bg-britton-light text-center text-britton-dark text-7xl rounded-r-3xl rounded-b-3xl py-3 px-4 mr-30">
+                        {textBottom}
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Tagline;
\ No newline at end of file
diff --git a/src/pages/index-testing.tsx b/src/pages/index-testing.tsx
new file mode 100644
index 0000000..d82c36b
--- /dev/null
+++ b/src/pages/index-testing.tsx
@@ -0,0 +1,31 @@
+import classNames from "classnames";
+import { Playfair_Display, Fraunces } from "next/font/google"
+import Tagline from "../components/Tagline";
+
+const playfair = Playfair_Display({ weight: "500",subsets: ["latin"] })
+const fraunces = Fraunces({ subsets: ["latin"] })
+
+export default function Home() {
+  return (
+    <>
+      <Tagline 
+        bgColor="bg-britton-light"
+        textColor="text-britton-dark"
+        textTop="Healthcare that's"
+        textBottom="truly affordable"
+      />
+      <div className="flex justify-center p-5">
+            <div className="w-11/12 h-4 bg-britton-medium text-center text-britton-dark text-7xl rounded-3xl p-4">
+            </div>
+      </div>
+      <div className="flex justify-center p-5">
+            <div className="w-11/12 h-4 bg-britton-neutral text-center text-britton-dark text-7xl rounded-3xl p-4">
+            </div>
+      </div>
+      <div className="flex justify-center p-5">
+            <div className="w-11/12 h-4 bg-britton-accent text-center text-britton-dark text-7xl rounded-3xl p-4">
+            </div>
+      </div>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 5775d75..3eec785 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,28 +1,33 @@
 import InfoCard from '../components/InfoCard';
+import Tagline from "../components/Tagline";
 
 export default function Home() {
   return (
     <>
-      <div className="flex justify-center py-20">
-        <div className="w-11/12 bg-britton-light text-center text-britton-dark text-7xl rounded-3xl p-4">
-          Healthcare that's truly affordable
-        </div>
+      <div className="pb-5">
+        <Tagline 
+          bgColor="bg-britton-light"
+          textColor="text-britton-dark"
+          textTop="Healthcare that's"
+          textBottom="truly affordable"
+        />
       </div>
       <div>
         <div className='bg-britton-medium rounded-3xl'>
           <InfoCard
             title="Self-Funded Plans"
-            imageUrl="/images/placeHolder.png"
+            imageUrl='/images/doctor.png'
             sectionBgColor="bg-britton-medium"
             cardBGColor="bg-britton-neutral"
             bodyTextColor="text-britton-dark"
+            learnMoreUrl="https://github.com/orgs/Britton-Benefits/repositories"
           >
             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="Health & Risk Management"
-          imageUrl="/images/placeHolder.png"
+          imageUrl="/images/doctor.png"
           sectionBgColor="bg-britton-dark"
           cardBGColor="bg-britton-medium"
           bodyTextColor="text-britton-light"
@@ -35,7 +40,7 @@ export default function Home() {
         <div className='bg-britton-neutral rounded-3xl'>
           <InfoCard
             title="Regulatory Compliance"
-            imageUrl="/images/placeHolder.png"
+            imageUrl="/images/doctor.png"
             sectionBgColor="bg-britton-neutral"
             cardBGColor="bg-britton-dark"
             bodyTextColor="text-britton-light"
@@ -45,7 +50,7 @@ export default function Home() {
         </div>
         <InfoCard
           title="Benefit Access & Online Support"
-          imageUrl="/images/placeHolder.png"
+          imageUrl="/images/doctor.png"
           sectionBgColor="bg-britton-dark"
           cardBGColor="bg-britton-light"
           bodyTextColor="text-britton-medium"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ea19d1e..17b448f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,6 +9,8 @@
   --color-britton-dark: #04153E;
   --color-britton-medium: #2A4B6F;
   --color-britton-light: #6AC8F1;
+  --color-britton-electric: #00F0FF;
+  --color-britton-electric2: #7DF9FF;
   --color-britton-neutral: #E0E0E0;
   --color-britton-accent2: #B06E30;
   --color-britton-accent: #D38F4A;