diff --git a/public/friendships.png b/public/friendships.png
new file mode 100644
index 0000000..54bf5b9
Binary files /dev/null and b/public/friendships.png differ
diff --git a/public/web_elements_tagline.png b/public/web_elements_tagline.png
new file mode 100644
index 0000000..7121b62
Binary files /dev/null and b/public/web_elements_tagline.png differ
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index 427e1cf..a30f9f4 100644
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -7,13 +7,13 @@ import PublicFooter from '../components/PublicFooter';
 
 const Landing = () => {
   // LOAF brand assets (local)
-  const taglineImage = `${process.env.PUBLIC_URL}/tagline-image.png`;
+  const taglineImage = `${process.env.PUBLIC_URL}/web_elements_tagline.png`;
   const shootingStar = `${process.env.PUBLIC_URL}/shooting_star_2.png`;
   const iconMeetGreet = `${process.env.PUBLIC_URL}/icon-meet-greet.png`;
   const iconSocials = `${process.env.PUBLIC_URL}/icon-socials.png`;
   const iconActive = `${process.env.PUBLIC_URL}/icon-active.png`;
   const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
-
+  const friendships = `${process.env.PUBLIC_URL}/friendships.png`;
   const InfoCard = ({ iconSrc, infoTitle, description }) => (
     <Card className="relative bg-white rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-none lg:max-w-[363px]">
       <div className="absolute -top-20 md:-top-40  flex justify-center w-full">
@@ -75,10 +75,17 @@ const Landing = () => {
       <PublicNavbar />
 
       {/* Hero Section */}
-      <section className="bg-gradient-to-b from-[#48286e] to-[#664fa3] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center">
-        <div className="lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[420px] lg:flex-shrink-0">
+      <section className="relative bg-gradient-to-b from-[#48286e] to-[#664fa3]  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
+        {/* Friendships background image */}
+        <div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem]  lg:-top-32">
+          <img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15  max-w-full max-h-full object-contain" />
+        </div>
+        {/* Blur Overlay */}
+        <div className="absolute inset-0 z-[1] bg-white/5 backdrop-blur-xs"></div>
+        {/* Left column Loaf Image */}
+        <div className="relative z-10 lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[530px] lg:flex-shrink-0">
           <div className="flex flex-col gap-6 items-center">
-            <img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[334px] h-auto object-contain" />
+            <img src={heroLoaf} alt="LOAF" className="w-full max-w-xs md:max-w-[370px] h-auto object-contain" />
           </div>
           <div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
             <Link to="/register" className="w-full">
@@ -91,8 +98,9 @@ const Landing = () => {
             LOAF is supported by the Hollyfield Foundation
           </p>
         </div>
-        <div className="py-8 md:py-12 lg:py-16 flex items-center justify-center w-full lg:w-[594px] h-auto">
-          <img src={taglineImage} alt="LOAF Tagline" className="w-full max-w-[330px] md:max-w-[483px] h-auto object-contain" />
+        {/*  Right Column Loaf Tagline */}
+        <div className="relative z-10 py-8 md:py-12  lg:py-16 flex items-center justify-center w-full lg:max-w-[815px] h-auto">
+          <img src={taglineImage} alt="LOAF Tagline" className="relative z-10 w-full h-auto object-cover" />
         </div>
       </section>