diff --git a/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx b/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx
index c3b144e..83ccb20 100644
--- a/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx
@@ -2,52 +2,137 @@ import React from "react";
 import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps";
 import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools";
 import { buttonIcon as ButtonIcon } from "../../../../styles/icons/icons";
+import Link from "next/link";
 
+interface ClientItem {
+  name: string;
+  link?: string;
+  inactiveLogo?: any;
+  activeLogo?: any;
+}
 
-export default function DefaultVariant(props: StandardComponentProps) { 
+interface CdclientsDefaultVariantProps extends StandardComponentProps {
+  matchingData: {
+    title?: string;
+    subtitle?: string;
+    clientsList?: ClientItem[];
+    buttonText?: string;
+    buttonUrl?: string;
+  };
+}
+
+const CdclientsDefaultVariant: React.FC<CdclientsDefaultVariantProps> = (props) => {
   const { matchingData } = props;
   const title = matchingData?.title?.toUpperCase() || "OUR CLIENTS";
-  const clients = matchingData?.clientsList || [];
-  const buttonText = matchingData?.buttonText || "View All Clients";
-  const buttonLink = matchingData?.buttonLink || "#";
+  const subtitle = matchingData?.subtitle;
+  const clientsList = matchingData?.clientsList || [];
+  const buttonText = matchingData?.buttonText;
+  const buttonUrl = matchingData?.buttonUrl;
 
   return (
-    <section
-      id="cdclients-default"
-      className="bg-white text-[#0D0E47] py-20 px-4 md:px-8"
-    >
-      <div className="max-w-7xl mx-auto">
+    <section className="py-16 bg-white">
+      <div className="max-w-7xl mx-auto px-6">
         <div className="mb-16">
-          <h2 className="text-[#0C093F] font-extrabold text-2xl !important md:text-3xl !important mb-4">{title}</h2>
+          {title && (
+            <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">
+              {title}
+            </h2>
+          )}
+          {subtitle && (
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
           <div className="w-full h-0.5 bg-gray-300"></div>
         </div>
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 md:gap-12">
-          {Array.isArray(clients) &&
-            clients.map((client: any, index: number) => {
-              const logoUrl = client?.logo?.asset?.url;
-              return (
-                <div key={index} className="flex items-center justify-center h-24 md:h-32 p-4">
-                  {logoUrl && (
-                    <img
-                      src={logoUrl}
-                      alt={client?.name || "Client"}
-                      className="object-contain max-h-16 md:max-h-20 hover:opacity-80 transition"
-                    />
-                  )}
-                </div>
-              );
-            })}
-        </div>
-        <div className="flex justify-center mt-12">
-          <a
-            href={buttonLink}
-            className="bg-[#800928] text-[#FFF6EC] font-semibold text-lg md:text-xl px-10 py-4 rounded-full hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]"
-          >
-            {buttonText}
-            <ButtonIcon/>
-          </a>
-        </div>
+      
+
+        {clientsList.length > 0 && (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-12">
+            {clientsList.map((client, index) => (
+              <div
+                key={index}
+                className="group flex items-center justify-center p-4"
+              >
+                {client.link ? (
+                  <a
+                    href={client.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block w-full h-full"
+                  >
+                    <div className="relative w-full h-16 flex items-center justify-center">
+                      {client.inactiveLogo && (
+                        <img
+                          src={client.inactiveLogo.asset?.url || client.inactiveLogo}
+                          alt={`${client.name} logo`}
+                          className="absolute inset-0 w-full h-16 object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300 ease-in-out"
+                        />
+                      )}
+                      
+                      {client.activeLogo && (
+                        <img
+                          src={client.activeLogo.asset?.url || client.activeLogo}
+                          alt={`${client.name} logo`}
+                          className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
+                        />
+                      )}
+                      
+                      {client.inactiveLogo && !client.activeLogo && (
+                        <img
+                          src={client.inactiveLogo.asset?.url || client.inactiveLogo}
+                          alt={`${client.name} logo`}
+                          className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
+                        />
+                      )}
+                    </div>
+                  </a>
+                ) : (
+                  <div className="relative w-full h-16 flex items-center justify-center">
+                    {client.inactiveLogo && (
+                      <img
+                        src={client.inactiveLogo.asset?.url || client.inactiveLogo}
+                        alt={`${client.name} logo`}
+                        className="absolute inset-0 w-full h-16 object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300 ease-in-out"
+                      />
+                    )}
+                    
+                    {client.activeLogo && (
+                      <img
+                        src={client.activeLogo.asset?.url || client.activeLogo}
+                        alt={`${client.name} logo`}
+                        className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
+                      />
+                    )}
+                  
+                    {client.inactiveLogo && !client.activeLogo && (
+                      <img
+                        src={client.inactiveLogo.asset?.url || client.inactiveLogo}
+                        alt={`${client.name} logo`}
+                        className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {buttonText && buttonUrl && (
+          <div className="text-center">
+            <Link
+              href={buttonUrl}
+              className="bg-[#800928] text-[#FFF6EC] font-semibold text-lg md:text-xl px-10 py-4 rounded-full hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]"
+            >
+              {buttonText}
+              <ButtonIcon/>
+            </Link>
+          </div>
+        )}
       </div>
     </section>
   );
 };
+
+export default CdclientsDefaultVariant;
diff --git a/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx b/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx
index 7d4a20b..f54e3fb 100644
--- a/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx
+++ b/src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx
@@ -17,15 +17,38 @@ const DemoVariant: React.FC<StandardComponentProps> = ({
         {clientsList.map((client: any, index: number) => (
           <div
             key={index}
-            className="bg-white rounded-md shadow-md w-[140px] p-4 flex items-center justify-center"
+            className="bg-white rounded-md shadow-md w-[140px] p-4 flex items-center justify-center group"
           >
-            {client.logo && (
+            {(client.inactiveLogo || client.activeLogo) && (
               <a href={client.link || "#"} target="_blank" rel="noopener noreferrer">
-                <img
-                  src={client.logo}
-                  alt={client.name || "Client"}
-                  className="object-contain max-h-12 hover:opacity-80 transition"
-                />
+                <div className="relative w-full h-12 flex items-center justify-center">
+                  {/* Inactive Logo */}
+                  {client.inactiveLogo && (
+                    <img
+                      src={client.inactiveLogo.asset?.url || client.inactiveLogo}
+                      alt={client.name || "Client"}
+                      className="max-w-full max-h-full object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300"
+                    />
+                  )}
+                  
+                  {/* Active Logo */}
+                  {client.activeLogo && (
+                    <img
+                      src={client.activeLogo.asset?.url || client.activeLogo}
+                      alt={client.name || "Client"}
+                      className="absolute inset-0 max-w-full max-h-full object-contain opacity-0 group-hover:opacity-100 transition-all duration-300"
+                    />
+                  )}
+                  
+                  {/* Fallback if only inactive logo exists */}
+                  {client.inactiveLogo && !client.activeLogo && (
+                    <img
+                      src={client.inactiveLogo.asset?.url || client.inactiveLogo}
+                      alt={client.name || "Client"}
+                      className="absolute inset-0 max-w-full max-h-full object-contain opacity-0 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-300"
+                    />
+                  )}
+                </div>
               </a>
             )}
           </div>
diff --git a/src/theme/conversion/components/cdclients/sanity-query.ts b/src/theme/conversion/components/cdclients/sanity-query.ts
index dd36d5f..329e360 100644
--- a/src/theme/conversion/components/cdclients/sanity-query.ts
+++ b/src/theme/conversion/components/cdclients/sanity-query.ts
@@ -17,7 +17,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
             clientsList {
               name
               link
-              logo {
+              inactiveLogo {
+                asset {
+                  url
+                }
+              }
+              activeLogo {
                 asset {
                   url
                 }
@@ -35,7 +40,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
               clientsList {
                 name
                 link
-                logo {
+                inactiveLogo {
+                  asset {
+                    url
+                  }
+                }
+                activeLogo {
                   asset {
                     url
                   }
@@ -59,7 +69,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
             clientsList {
               name
               link
-              logo {
+              inactiveLogo {
+                asset {
+                  url
+                }
+              }
+              activeLogo {
                 asset {
                   url
                 }
@@ -77,7 +92,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
               clientsList {
                 name
                 link
-                logo {
+                inactiveLogo {
+                  asset {
+                    url
+                  }
+                }
+                activeLogo {
                   asset {
                     url
                   }
diff --git a/src/theme/conversion/components/cdclients/sanity-schema.ts b/src/theme/conversion/components/cdclients/sanity-schema.ts
index f0c0fc3..0f3eb48 100644
--- a/src/theme/conversion/components/cdclients/sanity-schema.ts
+++ b/src/theme/conversion/components/cdclients/sanity-schema.ts
@@ -18,9 +18,16 @@ export const clientItem = defineType({
       type: 'url'
     }),
     defineField({
-      name: 'logo',
-      title: 'Client Logo',
-      type: 'image'
+      name: 'inactiveLogo',
+      title: 'Inactive Logo',
+      type: 'image',
+      description: 'Logo shown by default (grayscale or muted version)'
+    }),
+    defineField({
+      name: 'activeLogo',
+      title: 'Active Logo',
+      type: 'image',
+      description: 'Logo shown on hover (colored or highlighted version)'
     })
   ]
 });
diff --git a/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx b/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx
index 1b8d558..f743a72 100644
--- a/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx
@@ -13,14 +13,24 @@ const DefaultVariant: React.FC<StandardComponentProps> = ({
   const buttonUrl = matchingData?.buttonUrl || "#";
 
   return (
-    <section className="bg-[#86002F] py-32 text-center text-[#FFF3EA]">
-      <h2 className="text-5xl md:text-6xl font-extrabold tracking-tight uppercase mb-10">
-        {title}
-      </h2>
-      <a href={buttonUrl} className="bg-[#FFF3EA] text-[#0C093F] font-semibold text-lg md:text-xl px-10 py-4 rounded-full shadow-md hover:shadow-lg hover:scale-105 hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]">
-        {buttonLabel}
-      <ButtonIcon/>
-      </a>
+    <section className="bg-[#86002F] py-8 sm:py-12 md:py-16 lg:py-20 xl:py-32 text-center text-[#FFF3EA] px-4 sm:px-6 md:px-8 lg:px-12">
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight uppercase mb-6 sm:mb-8 md:mb-10 leading-tight">
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="text-base sm:text-lg md:text-xl lg:text-2xl mb-6 sm:mb-8 md:mb-10 text-[#FFF3EA] opacity-90">
+            {subtitle}
+          </p>
+        )}
+        <a 
+          href={buttonUrl} 
+          className="bg-[#FFF3EA] text-[#0C093F] font-semibold text-base sm:text-lg md:text-xl px-6 sm:px-8 md:px-10 py-3 sm:py-4 rounded-full shadow-md hover:shadow-lg hover:scale-105 hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-4 sm:gap-[44px] transition-all duration-300"
+        >
+          {buttonLabel}
+          <ButtonIcon/>
+        </a>
+      </div>
     </section>
   );
 };
diff --git a/src/theme/conversion/components/cdfooter/sanity-mapping.ts b/src/theme/conversion/components/cdfooter/sanity-mapping.ts
index 522b1bd..64afa32 100644
--- a/src/theme/conversion/components/cdfooter/sanity-mapping.ts
+++ b/src/theme/conversion/components/cdfooter/sanity-mapping.ts
@@ -14,7 +14,7 @@ export async function mapIdentifierData(pageAndComponentCombo: PageAndSingleComp
   log.trace(`${logPrefix()} thisComponentsOrder: ${thisComponentsOrder}`);
 
 
-  const matchingData = extractComponentsFromSanityData(content, "cdfooter", log, true, '', thisComponentsOrder);
+  const matchingData = extractComponentsFromSanityData(content, "cdfooter", log);
 
   return matchingData
 }
\ No newline at end of file
diff --git a/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx b/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx
index 7f72ce9..8cd8100 100644
--- a/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdinsights/components/variants/cdinsightsDefaultVariant.tsx
@@ -11,25 +11,25 @@ export default function DefaultVariant(props: StandardComponentProps) {
   const buttonText = matchingData?.buttonText || "View all insights";
 
   return (
-    <section className="bg-[#FFF3EA] px-6 md:px-12 lg:px-20 py-24">
+    <section className="bg-[#FFF3EA] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 py-8 sm:py-12 md:py-16 lg:py-20 xl:py-24">
       <div className="max-w-screen-xl mx-auto">
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-12">
-          <h2 className="text-[#0C093F] font-extrabold text-2xl md:text-3xl mb-4">
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-8 sm:mb-10 md:mb-12 text-center lg:text-left">
+          <h2 className="text-[#0C093F] font-extrabold text-xl sm:text-2xl md:text-3xl lg:text-4xl mb-4 lg:mb-0">
             {heading}
           </h2>
-          <p className=" mt-4 md:mt-0 max-w-xl text-2xl text-[#0D0E47]">
+          <p className="max-w-xl text-base sm:text-lg md:text-xl lg:text-2xl text-[#0D0E47] leading-relaxed">
             {tagline}
           </p>
         </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
           {Array.isArray(items) && items.map((item: any, index: number) => {
             const { hasImage, imageLocation } = getCmsImage(item);
             const url = hasImage ? imageLocation : item?.imageUrl;
             return (
-              <div key={index} className="bg-white rounded-xl shadow-sm hover:shadow-md transition flex flex-col">
+              <div key={index} className="bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300 flex flex-col h-full">
                 {url && (
-                  <div className="h-52 bg-gray-100 rounded-md overflow-hidden mb-6 flex items-center justify-center">
+                  <div className="h-40 sm:h-48 md:h-52 bg-gray-100 rounded-t-xl overflow-hidden flex items-center justify-center">
                     <img
                       src={url}
                       alt={item?.title || ""}
@@ -38,42 +38,42 @@ export default function DefaultVariant(props: StandardComponentProps) {
                   </div>
                 )}
 
-              <div className="p-6">
-                {item.topics && item.topics.length > 0 && (
-                  <div className="uppercase text-xs font-semibold tracking-wide text-[#0C093F] mb-2 ">
-                    {item.topics.map((topic: any, i: number) => (
-                      <React.Fragment key={i}>
-                        {i > 0 && ", "}
-                        <a href={topic.url} className="hover:text-[#86002F]">
-                          {topic.name}
-                        </a>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                )}
+                <div className="p-4 sm:p-6 flex flex-col flex-grow">
+                  {item.topics && item.topics.length > 0 && (
+                    <div className="uppercase text-xs font-semibold tracking-wide text-[#0C093F] mb-2">
+                      {item.topics.map((topic: any, i: number) => (
+                        <React.Fragment key={i}>
+                          {i > 0 && ", "}
+                          <a href={topic.url} className="hover:text-[#86002F] transition-colors duration-300">
+                            {topic.name}
+                          </a>
+                        </React.Fragment>
+                      ))}
+                    </div>
+                  )}
 
-                <h3 className="font-extrabold text-[#0C093F] text-base leading-snug mb-4">
-                  {item?.title?.toUpperCase()}
-                </h3>
-                {item.buttonText && item.buttonUrl && (
-                  <a
-                    href={item.buttonUrl}
-                    className="text-sm font-semibold text-[#0C093F] mt-auto inline-flex items-center gap-[22px] hover:underline"
-                  >
-                    {item.buttonText} 
-                    <ButtonIcon />
-                  </a>
-                )}
-              </div>
+                  <h3 className="font-extrabold text-[#0C093F] text-sm sm:text-base md:text-lg leading-snug mb-3 sm:mb-4 flex-grow">
+                    {item?.title?.toUpperCase()}
+                  </h3>
+                  {item.buttonText && item.buttonUrl && (
+                    <a
+                      href={item.buttonUrl}
+                      className="text-xs sm:text-sm font-semibold text-[#0C093F] mt-auto inline-flex items-center gap-2 sm:gap-[22px] hover:underline transition-all duration-300"
+                    >
+                      {item.buttonText} 
+                      <ButtonIcon />
+                    </a>
+                  )}
+                </div>
               </div>
             );
           })}
         </div>
 
-        <div className="mt-16 text-center">
+        <div className="mt-8 sm:mt-12 md:mt-16 text-center">
           <a
             href="/insights"
-            className="bg-[#800928] text-[#FFF6EC] font-semibold text-lg md:text-xl px-10 py-4 rounded-full shadow-md hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]"
+            className="bg-[#800928] text-[#FFF6EC] font-semibold text-base sm:text-lg md:text-xl px-6 sm:px-8 md:px-10 py-3 sm:py-4 rounded-full shadow-md hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-4 sm:gap-[44px] transition-all duration-300"
           >
             {buttonText}
             <ButtonIcon />
diff --git a/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx b/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx
index e7ae22a..7c626f7 100644
--- a/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdmission/components/variants/cdmissionDefaultVariant.tsx
@@ -1,3 +1,4 @@
+'use client'
 import React from "react";
 import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps";
 import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools";
@@ -15,26 +16,26 @@ export default function CdmissionDefaultVariant(props: StandardComponentProps) {
   const { hasImage, imageLocation, altText } = getCmsImage(matchingData);
 
   return (
-    <section className="bg-white text-[#0C093F] px-6 md:px-12 lg:px-20 py-16">
-      <div className="max-w-screen-xl mx-auto grid md:grid-cols-2 gap-10">
+    <section className="bg-white text-[#0C093F] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20 py-8 sm:py-12 md:py-16">
+      <div className="max-w-screen-xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10">
         {/* Left Column */}
-        <div>
-          <h3 className="text-2xl font-bold text-[#0C093F] mb-4">
+        <div className="text-center lg:text-left">
+          <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-[#0C093F] mb-4">
             {title}
           </h3>
-          <p className="text-[#0C093F] text-base leading-relaxed text-2xl">
+          <p className="text-[#0C093F] text-base sm:text-lg md:text-xl lg:text-2xl leading-relaxed">
             {description}
           </p>
         </div>
 
         {/* Right Column - Icon List */}
-        <div className="grid sm:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
           {keyPoints.map((point: any, i: number) => (
             <div key={i} className="flex items-start gap-3">
-              <div className="w-6 h-6 mt-1 bg-[#86002F] rounded-full flex items-center justify-center text-white text-2xl font-bold">
-              <TickIcon/>
+              <div className="w-5 h-5 sm:w-6 sm:h-6 mt-1 bg-[#86002F] rounded-full flex items-center justify-center text-white text-lg sm:text-2xl font-bold flex-shrink-0">
+                <TickIcon/>
               </div>
-              <p className="text-[#0C093F] text-2xl">{point.description}</p>
+              <p className="text-[#0C093F] text-sm sm:text-base md:text-lg lg:text-xl lg:text-2xl leading-relaxed">{point.description}</p>
             </div>
           ))}
         </div>
@@ -42,37 +43,39 @@ export default function CdmissionDefaultVariant(props: StandardComponentProps) {
 
       {/* Promises Section */}
       <section id="cdmission-default" 
-      className="bg-white text-[#0D0E47] py-20 px-4 md:px-8">
-        <div className="max-w-7xl mx-auto">
-          <div className="mb-16">
-          <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">{promiseTitle}</h2>
-          <div className="w-full h-0.5 bg-gray-300"></div>
-        </div>
-          <div className="flex flex-col md:flex-row items-center md:items-start gap-10">
-            <div className="flex-shrink-0 flex items-center gap-4">
+      className="bg-white text-[#0D0E47] py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8 lg:px-12">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="mb-8 sm:mb-12 md:mb-16">
+            <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">{promiseTitle}</h2>
+            <div className="w-full h-0.5 bg-gray-300 mx-auto"></div>
+          </div>
+          <div className="flex flex-col lg:flex-row items-center gap-6 sm:gap-8 md:gap-10 text-center lg:text-left">
+            <div className="flex-shrink-0 flex items-center gap-3 sm:gap-4">
               {promises[0]?.icon?.asset?.url && (
                 <img
                   src={promises[0].icon.asset.url}
                   alt={promises[0].title}
-                  className="h-20 w-auto"
+                  className="h-12 w-auto sm:h-16 md:h-20"
                 />
               )}
-              <h5 className="text-2xl font-bold text-[#27B195]">
+              <h5 className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-[#27B195]">
                 {promises[0]?.title}
               </h5>
             </div>
             {hasImage && (
-              <div className="flex-1">
+              <div className="flex-shrink-0 lg:max-w-none">
                 <img 
                   src={imageLocation} 
                   alt={altText || "Mission Image"} 
-                  className="w-full h-auto rounded-lg shadow-lg"
+                  className="w-full max-w-[428px] h-auto max-h-[93px] object-cover mx-auto lg:mx-0"
                 />
               </div>
             )}
-            <p className="text-[#0C093F] text-2xl flex-1">
-              {promiseSubtitle}
-            </p>
+            <div className="w-full lg:w-auto">
+              <p className="text-base sm:text-lg md:text-xl text-gray-700 leading-relaxed">
+                {promiseSubtitle}
+              </p>
+            </div>
           </div>
         </div>
       </section>
diff --git a/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx b/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx
index 8f23166..78b376e 100644
--- a/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdnav/components/variants/cdnavDefaultVariant.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+'use client'
+import React, { useState } from "react";
 import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps";
 import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools";
 
@@ -15,79 +16,177 @@ export default function cdnavDefaultVariant(props: StandardComponentProps) {
   const { hasImage: hasMobile, imageLocation: mobileSrc } = getCmsImage({ image: matchingData?.mobileImage });
   const { hasImage: hasDesktop, imageLocation: desktopSrc } = getCmsImage({ image: matchingData?.desktopImage });
 
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [openDropdowns, setOpenDropdowns] = useState<number[]>([]);
+
+  const toggleDropdown = (index: number) => {
+    setOpenDropdowns(prev => 
+      prev.includes(index) 
+        ? prev.filter(i => i !== index)
+        : [...prev, index]
+    );
+  };
+
   return (
-    <nav className={`${isTransparent ? "bg-transparent" : "bg-[#FFFFFF]"} text-[#000] p-4 sticky top-0 z-50`}>
-      <div className="container mx-auto flex items-center justify-between">
-        <div>
-          {logo ? (
-            <div>
-              <img src={logo} alt="Nav Logo" className="w-[179px] h-[71px] object-contain" />
+    <nav className={`${isTransparent ? "bg-transparent" : "bg-[#FFFFFF]"} text-[#000] p-4 sticky top-0 z-50 text-xl`}>
+      <div className="container mx-auto">
+        {/* Desktop Navigation */}
+        <div className="hidden lg:flex items-center justify-between">
+          <div>
+            {logo ? (
+              <div>
+                <img src={logo} alt="Nav Logo" className="w-[179px] h-[71px] object-contain" />
+              </div>
+            ) : (
+              <p>No Logo</p>
+            )}
+            {subtitle && <p className="text-sm">{subtitle}</p>}
+          </div>
+          <div className="flex items-center gap-14">
+            <div className="inline-flex justify-end items-center gap-14">
+              {/* Render first dropdown menu with nested second dropdown */}
+              {dropdownMenus.length > 0 && (
+                <div className="relative group">
+                  <button className="text-center tracking-wide hover:underline hover:decoration-[#800928] hover:underline-offset-8 pt-[6px] pb-[5px] flex items-center gap-1">
+                    {dropdownMenus[0].label}
+                    <div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-gray-400 group-hover:border-t-[#0D0E47] transition-transform duration-300 group-hover:-rotate-180" />
+                  </button>
+                  <div className="w-2 bg-Color-Navy rounded-[0.40px] " />
+                  <ul className="absolute hidden group-hover:block top-full left-0 bg-white shadow-md rounded-md p-2 min-w-[200px] z-10">
+                    {dropdownMenus[0].dropdownLinks?.map((link: any, linkIdx: number) => (
+                      <li key={linkIdx} className="py-1">
+                        <a href={link.url ?? "#"} className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 block">
+                          {link.label ?? "Dropdown Link"}
+                        </a>
+                      </li>
+                    ))}
+                    {/* Nested second dropdown menu */}
+                    {dropdownMenus.length > 1 && (
+                      <li className="py-1 relative group/nested">
+                        <div className="flex items-center justify-between hover:underline hover:decoration-[#800928] hover:underline-offset-8">
+                          <span>{dropdownMenus[1].label}</span>
+                          <div className="w-0 h-0 border-t-[4px] border-t-transparent border-b-[4px] border-b-transparent border-l-[4px] border-l-gray-400 group-hover/nested:border-l-[#0D0E47]" />
+                        </div>
+                        <ul className="absolute hidden group-hover/nested:block left-full top-0 bg-white shadow-md rounded-md p-2 min-w-[180px] z-20 ml-1">
+                          {dropdownMenus[1].dropdownLinks?.map((link: any, linkIdx: number) => (
+                            <li key={linkIdx} className="py-1">
+                              <a href={link.url ?? "#"} className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 block">
+                                {link.label ?? "Nested Dropdown Link"}
+                              </a>
+                            </li>
+                          ))}
+                        </ul>
+                      </li>
+                    )}
+                  </ul>
+                </div>
+              )}
+              {links.map((linkItem: any, idx: number) => (
+                <div key={idx} className="text-center justify-start tracking-wide">
+                  <a href={linkItem.url ?? "#"} className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 pt-[6px] pb-[5px]">
+                    {linkItem.label ?? "Nav Link"}
+                  </a>
+                </div>
+              ))}
             </div>
-          ) : (
-            <p>No Logo</p>
-          )}
-          {subtitle && <p className="text-sm">{subtitle}</p>}
+            <a 
+              href={buttonUrl}
+              className="bg-[#800928] hover:bg-blue-950 font-semibold text-white px-10 py-4 rounded-full hover:bg-opacity-80 transition-colors inline-flex justify-center items-center gap-2.5"
+            >
+              {buttonText}
+            </a>
+          </div>
         </div>
-        <div className="flex items-center gap-14">
-          <div className="inline-flex justify-end items-center gap-14">
-            {dropdownMenus.length > 0 && (
-              <div className="relative group">
-                <button className="text-centertext-Color-Navy text-xltracking-wide hover:underline hover:decoration-[#800928] hover:underline-offset-8 pt-[6px] pb-[5px] flex items-center gap-1">
-                  {dropdownMenus[0].label}
-                  <div className="w-0 h-0 border-l-[6px] border-l-transparent border-r-[6px] border-r-transparent border-t-[6px] border-t-gray-400 group-hover:border-t-[#0D0E47] transition-transform duration-300 group-hover:rotate-180" />
-                </button>
-                <div className="w-2 bg-Color-Navy rounded-[0.40px] " />
-                <ul className="absolute hidden group-hover:block top-full left-0 bg-white shadow-md rounded-md p-2 min-w-[200px] z-10 before:content-[''] before:absolute before:-top-2 before:left-1 before:-translate-x-1/2 before:border-8 before:border-transparent before:border-b-white">
-                  {dropdownMenus[0].dropdownLinks?.map((link: any, linkIdx: number) => (
-                    <li key={linkIdx} className="py-1">
-                      <a href={link.url ?? "#"} className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 block">
-                        {link.label ?? "Dropdown Link"}
-                      </a>
-                    </li>
-                  ))}
-                  {dropdownMenus.length > 1 && (
-                    <li className="relative group/nested py-1">
-                      <button className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 block w-full text-left flex items-center justify-between">
-                        {dropdownMenus[1].label}
-                        <div className="w-0 h-0 border-t-[6px] border-t-transparent border-b-[6px] border-b-transparent border-l-[6px] border-l-gray-400 group-hover/nested:border-l-[#0D0E47]" />
-                      </button>
-                      <ul className="absolute hidden group-hover/nested:block left-full top-0 bg-white shadow-md rounded-md p-2 min-w-[200px] z-20 before:content-[''] before:absolute before:top-3 before:-left-2 before:border-8 before:border-transparent before:border-r-white before:rotate-180">
-                        {dropdownMenus[1].dropdownLinks?.map((link: any, linkIdx: number) => (
-                          <li key={linkIdx} className="py-1">
-                            <a href={link.url ?? "#"} className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 block">
-                              {link.label ?? "Dropdown Link"}
-                            </a>
-                          </li>
-                        ))}
-                      </ul>
-                    </li>
-                  )}
-                </ul>
+
+        {/* Mobile Navigation */}
+        <div className="lg:hidden flex justify-between items-center">
+          <div>
+            {logo ? (
+              <div>
+                <img src={logo} alt="Nav Logo" className="w-[120px] h-[48px] object-contain" />
               </div>
+            ) : (
+              <p>No Logo</p>
             )}
+          </div>
+          <button 
+            onClick={() => setIsMenuOpen(!isMenuOpen)}
+            className="relative w-8 h-8 flex flex-col justify-center items-center focus:outline-none group"
+            aria-label="Toggle mobile menu"
+            aria-expanded={isMenuOpen}
+          >
+            <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 ${isMenuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
+            <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 mt-1 ${isMenuOpen ? 'opacity-0' : ''}`}></span>
+            <span className={`block w-6 h-0.5 bg-gray-700 transition-all duration-300 mt-1 ${isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
+          </button>
+        </div>
+
+        {/* Mobile Menu */}
+        <div className={`lg:hidden overflow-hidden transition-all duration-300 ease-in-out ${isMenuOpen ? 'max-h-screen opacity-100' : 'max-h-0 opacity-0'}`}>
+          <div className="bg-white shadow-lg rounded-lg mt-4 border border-gray-200">
             {links.map((linkItem: any, idx: number) => (
-              <div key={idx} className="text-center justify-start text-Color-Navy tracking-wide">
-                <a href={linkItem.url ?? "#"} className="hover:underline hover:decoration-[#800928] hover:underline-offset-8 pt-[6px] pb-[5px]">
-                  {linkItem.label ?? "Nav Link"}
-                </a>
+              <a 
+                key={idx}
+                href={linkItem.url ?? "#"} 
+                className="block py-3 px-4 hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-b-0"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {linkItem.label ?? "Nav Link"}
+              </a>
+            ))}
+            {dropdownMenus.map((menu: any, idx: number) => (
+              <div key={idx} className="border-b border-gray-100 last:border-b-0">
+                <button 
+                  onClick={() => toggleDropdown(idx)}
+                  className="w-full text-left py-3 px-4 font-semibold hover:bg-gray-50 transition-colors flex justify-between items-center"
+                  aria-expanded={openDropdowns.includes(idx)}
+                >
+                  {menu.label}
+                  <span className={`transition-transform duration-200 ${openDropdowns.includes(idx) ? 'rotate-180' : ''}`}>
+                    ▼
+                  </span>
+                </button>
+                <div className={`overflow-hidden transition-all duration-300 ease-in-out ${openDropdowns.includes(idx) ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'}`}>
+                  {menu.dropdownLinks?.map((link: any, linkIdx: number) => (
+                    <a 
+                      key={linkIdx}
+                      href={link.url ?? "#"} 
+                      className="block py-2 pl-8 pr-4 hover:bg-gray-50 transition-colors text-gray-600"
+                      onClick={() => setIsMenuOpen(false)}
+                    >
+                      {link.label ?? "Dropdown Link"}
+                    </a>
+                  ))}
+                </div>
               </div>
             ))}
+            <div className="p-4">
+              <a 
+                href={buttonUrl}
+                className="block w-full text-center bg-[#800928] hover:bg-blue-950 font-semibold text-white px-6 py-3 rounded-full hover:bg-opacity-80 transition-colors"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {buttonText}
+              </a>
+            </div>
           </div>
-          <a 
-            href={buttonUrl}
-            className="bg-[#800928] hover:bg-blue-950 font-semibold text-xl text-white px-6 py-2 rounded-full hover:bg-opacity-80 transition-colors px-10 py-4 rounded-[50px] inline-flex justify-center items-center gap-2.5"
-          >
-            {buttonText}
-          </a>
         </div>
+
+        {/* Mobile Menu Backdrop */}
+        {isMenuOpen && (
+          <div 
+            className="fixed inset-0 bg-black bg-opacity-25 z-[-1] lg:hidden"
+            onClick={() => setIsMenuOpen(false)}
+          />
+        )}
       </div>
 
       <div className="mt-4 flex flex-col gap-2">
         {hasMobile && (
-          <img src={mobileSrc} alt="Mobile Nav" className="w-auto h-16 object-cover" />
+          <img src={mobileSrc} alt="Mobile Nav" className="block lg:hidden w-auto h-16 object-cover" />
         )}
         {hasDesktop && (
-          <img src={desktopSrc} alt="Desktop Nav" className="w-auto h-16 object-cover" />
+          <img src={desktopSrc} alt="Desktop Nav" className="hidden lg:block w-auto h-16 object-cover" />
         )}
       </div>
     </nav>
diff --git a/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx b/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx
index 3dbb38c..99b0149 100644
--- a/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdpartners/components/variants/cdpartnersDefaultVariant.tsx
@@ -1,41 +1,119 @@
 import React from "react";
 import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps";
-import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools";
 
-export default function DefaultVariant(props: StandardComponentProps) { const { matchingData } = props;
-  // Basic fields
+interface PartnerItem {
+  name: string;
+  url?: string;
+  inactiveLogo?: any;
+  activeLogo?: any;
+}
+
+interface CdpartnersDefaultVariantProps extends StandardComponentProps {
+  matchingData: {
+    title?: string;
+    subtitle?: string;
+    partnerLogos?: PartnerItem[];
+  };
+}
+
+const CdpartnersDefaultVariant: React.FC<CdpartnersDefaultVariantProps> = (props) => {
+  const { matchingData } = props;
   const title = matchingData?.title?.toUpperCase() || "OUR PARTNERS";
-  const subtitle = matchingData?.subtitle || "We work with leading technology providers.";
-  const partners = matchingData?.partnerLogos || [];
+  const subtitle = matchingData?.subtitle;
+  const partnerLogos = matchingData?.partnerLogos || [];
 
   return (
-    <section
-      id="cdpartners-default"
-      className="bg-white text-[#0D0E47] py-20 px-4 md:px-8"
-    >
-      <div className="max-w-7xl mx-auto">
+    <section className="py-16 bg-white">
+      <div className="max-w-7xl mx-auto px-6">
         <div className="mb-16">
-          <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">{title}</h2>
+          {title && (
+            <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">
+              {title}
+            </h2>
+          )}
+          {subtitle && (
+            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+              {subtitle}
+            </p>
+          )}
           <div className="w-full h-0.5 bg-gray-300"></div>
         </div>
-        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 md:gap-12">
-          {Array.isArray(partners) &&
-            partners.map((partner: any, index: number) => {
-              const logoUrl = partner?.logo?.asset?.url;
-              return (
-                <div key={index} className="flex items-center justify-center h-24 md:h-32 p-4">
-                  {logoUrl && (
-                    <img
-                      src={logoUrl}
-                      alt={partner?.name || "Partner"}
-                      className="object-contain max-h-16 md:max-h-20 hover:opacity-80 transition"
-                    />
-                  )}
-                </div>
-              );
-            })}
-        </div>
+
+        {partnerLogos.length > 0 && (
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 mb-12">
+            {partnerLogos.map((partner: PartnerItem, index: number) => (
+              <div
+                key={index}
+                className="group flex items-center justify-center p-4"
+              >
+                {partner.url ? (
+                  <a
+                    href={partner.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="block w-full h-full"
+                  >
+                    <div className="relative w-full h-16 flex items-center justify-center">
+                      {partner.inactiveLogo && (
+                        <img
+                          src={partner.inactiveLogo.asset?.url || partner.inactiveLogo}
+                          alt={`${partner.name} logo`}
+                          className="absolute inset-0 w-full h-16 object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-opacity duration-300 ease-in-out"
+                        />
+                      )}
+                      
+                      {partner.activeLogo && (
+                        <img
+                          src={partner.activeLogo.asset?.url || partner.activeLogo}
+                          alt={`${partner.name} logo`}
+                          className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"
+                        />
+                      )}
+                      
+                      {partner.inactiveLogo && !partner.activeLogo && (
+                        <img
+                          src={partner.inactiveLogo.asset?.url || partner.inactiveLogo}
+                          alt={`${partner.name} logo`}
+                          className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"
+                        />
+                      )}
+                    </div>
+                  </a>
+                ) : (
+                  <div className="relative w-full h-16 flex items-center justify-center">
+                    {partner.inactiveLogo && (
+                      <img
+                        src={partner.inactiveLogo.asset?.url || partner.inactiveLogo}
+                        alt={`${partner.name} logo`}
+                        className="absolute inset-0 w-full h-16 object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-opacity duration-300 ease-in-out"
+                      />
+                    )}
+                    
+                    {partner.activeLogo && (
+                      <img
+                        src={partner.activeLogo.asset?.url || partner.activeLogo}
+                        alt={`${partner.name} logo`}
+                        className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"
+                      />
+                    )}
+                    
+                    {partner.inactiveLogo && !partner.activeLogo && (
+                      <img
+                        src={partner.inactiveLogo.asset?.url || partner.inactiveLogo}
+                        alt={`${partner.name} logo`}
+                        className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out"
+                      />
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
       </div>
     </section>
   );
-}
\ No newline at end of file
+};
+
+export default CdpartnersDefaultVariant;
\ No newline at end of file
diff --git a/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx b/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx
index b934003..c434a86 100644
--- a/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx
+++ b/src/theme/conversion/components/cdpartners/components/variants/demoVariant.tsx
@@ -5,22 +5,45 @@ import { demoVariantData } from "./data/demoVariantData";
 const DemoVariant: React.FC<StandardComponentProps> = ({ matchingData }) => {
   const title = matchingData?.title || demoVariantData.title;
   const subtitle = matchingData?.subtitle || demoVariantData.subtitle;
-  const logos = matchingData?.partnerLogos || demoVariantData.partnerLogos;
+  const partnerLogos = matchingData?.partnerLogos || demoVariantData.partnerLogos;
 
   return (
     <section id="cdpartners-demo" className="p-5 bg-[#F9F9FA] text-center">
       <h2 className="text-2xl font-bold mb-3">{title}</h2>
       <p className="mb-5 text-sm text-gray-600">{subtitle}</p>
       <div className="flex flex-wrap justify-center gap-5">
-        {logos.map((partner: any, index: number) => (
-          <div key={index} className="bg-white rounded-md shadow-md w-[140px] p-4 flex items-center justify-center">
-            {partner.imageUrl && (
-              <a href={partner.link || "#"} target="_blank" rel="noopener noreferrer">
-                <img 
-                  src={partner.imageUrl} 
-                  alt={partner.partnerName || "Partner"} 
-                  className="object-contain max-h-12 hover:opacity-80 transition"
-                />
+        {partnerLogos.map((partner: any, index: number) => (
+          <div key={index} className="bg-white rounded-md shadow-md w-[140px] p-4 flex items-center justify-center group">
+            {(partner.inactiveLogo || partner.activeLogo) && (
+              <a href={partner.url || "#"} target="_blank" rel="noopener noreferrer">
+                <div className="relative w-full h-12 flex items-center justify-center">
+                  {/* Inactive Logo */}
+                  {partner.inactiveLogo && (
+                    <img
+                      src={partner.inactiveLogo.asset?.url || partner.inactiveLogo}
+                      alt={partner.name || "Partner"}
+                      className="max-w-full max-h-full object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300"
+                    />
+                  )}
+                  
+                  {/* Active Logo */}
+                  {partner.activeLogo && (
+                    <img
+                      src={partner.activeLogo.asset?.url || partner.activeLogo}
+                      alt={partner.name || "Partner"}
+                      className="absolute inset-0 max-w-full max-h-full object-contain opacity-0 group-hover:opacity-100 transition-all duration-300"
+                    />
+                  )}
+                  
+                  {/* Fallback if only inactive logo exists */}
+                  {partner.inactiveLogo && !partner.activeLogo && (
+                    <img
+                      src={partner.inactiveLogo.asset?.url || partner.inactiveLogo}
+                      alt={partner.name || "Partner"}
+                      className="absolute inset-0 max-w-full max-h-full object-contain opacity-0 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-300"
+                    />
+                  )}
+                </div>
               </a>
             )}
           </div>
diff --git a/src/theme/conversion/components/cdpartners/sanity-query.ts b/src/theme/conversion/components/cdpartners/sanity-query.ts
index e023cc0..502bfa5 100644
--- a/src/theme/conversion/components/cdpartners/sanity-query.ts
+++ b/src/theme/conversion/components/cdpartners/sanity-query.ts
@@ -15,7 +15,13 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
             subtitle
             partnerLogos {
               name
-              logo {
+              url
+              inactiveLogo {
+                asset {
+                  url
+                }
+              }
+              activeLogo {
                 asset {
                   url
                 }
@@ -26,11 +32,18 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
               __typename
               _key
               _type
+              selectableVariant
               title
               subtitle
               partnerLogos {
                 name
-                logo {
+                url
+                inactiveLogo {
+                  asset {
+                    url
+                  }
+                }
+                activeLogo {
                   asset {
                     url
                   }
@@ -52,7 +65,13 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
             subtitle
             partnerLogos {
               name
-              logo {
+              url
+              inactiveLogo {
+                asset {
+                  url
+                }
+              }
+              activeLogo {
                 asset {
                   url
                 }
@@ -63,11 +82,18 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
               __typename
               _key
               _type
+              selectableVariant
               title
               subtitle
               partnerLogos {
                 name
-                logo {
+                url
+                inactiveLogo {
+                  asset {
+                    url
+                  }
+                }
+                activeLogo {
                   asset {
                     url
                   }
diff --git a/src/theme/conversion/components/cdpartners/sanity-schema.ts b/src/theme/conversion/components/cdpartners/sanity-schema.ts
index c424f1f..a576aef 100644
--- a/src/theme/conversion/components/cdpartners/sanity-schema.ts
+++ b/src/theme/conversion/components/cdpartners/sanity-schema.ts
@@ -17,9 +17,16 @@ export const partnerItem = defineType({
       type: 'url'
     }),
     defineField({
-      name: 'logo',
-      title: 'Partner Logo',
-      type: 'image'
+      name: 'inactiveLogo',
+      title: 'Inactive Logo',
+      type: 'image',
+      description: 'Logo shown by default (grayscale or muted version)'
+    }),
+    defineField({
+      name: 'activeLogo',
+      title: 'Active Logo',
+      type: 'image',
+      description: 'Logo shown on hover (colored or highlighted version)'
     })
   ]
 })
diff --git a/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx b/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx
index fbe922e..ce70ad1 100644
--- a/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdservices/components/variants/cdservicesDefaultVariant.tsx
@@ -13,38 +13,38 @@ export default function DefaultVariant(props: StandardComponentProps) {
   const subtitle = matchingData?.subtitle || "How we help businesses thrive";
 
   return (
-    <section className="bg-[#0D0E47] py-20 px-4 md:px-8">
+    <section className="bg-[#0D0E47] py-8 sm:py-12 md:py-16 lg:py-20 px-4 sm:px-6 md:px-8 lg:px-12">
       <div className="max-w-7xl mx-auto">
-        <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-16">
-          <h2 className="text-3xl md:text-3xl font-bold text-white mb-6 md:mb-0">{title}</h2>
-          <div className="max-w-xl">
-            <p className="text-white text-2xl">{subtitle}</p>
+        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-8 sm:mb-12 md:mb-16 text-center lg:text-left">
+          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-4 lg:mb-0">{title}</h2>
+          <div className="max-w-xl mx-auto lg:mx-0">
+            <p className="text-white text-lg sm:text-xl md:text-2xl">{subtitle}</p>
           </div>
         </div>
 
         {/* Optional image */}
         {hasImage && (
-          <div className="my-8 flex justify-center">
+          <div className="my-6 sm:my-8 flex justify-center">
             <img
               src={imageLocation}
               alt={altText}
-              className="w-auto h-48 object-cover rounded-md"
+              className="w-full max-w-2xl h-32 sm:h-40 md:h-48 object-cover rounded-md"
             />
           </div>
         )}
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 md:gap-10 lg:gap-12">
           {servicesList.map((serviceItem: any, index: number) => (
-            <div key={index} className="flex flex-col p-4 rounded-lg transition-colors duration-300 hover:bg-[#FFF6EC] group">
+            <div key={index} className="flex flex-col p-4 sm:p-6 rounded-lg transition-all duration-300 hover:bg-[#FFF6EC] group hover:shadow-lg">
               {serviceItem?.image?.asset?.url && (
                 <img
                   src={serviceItem.image.asset.url}
                   alt={serviceItem.title}
-                  className="w-12 h-12 object-contain mb-4 group-hover:brightness-0 group-hover:invert-[0.4] group-hover:text-[#0D0E47] group-hover:saturate-[2000%] group-hover:hue-rotate-[180deg]"
+                  className="w-10 h-10 sm:w-12 sm:h-12 object-contain mb-3 sm:mb-4 group-hover:brightness-0 group-hover:invert-[0.4] group-hover:text-[#0D0E47] group-hover:saturate-[2000%] group-hover:hue-rotate-[180deg] transition-all duration-300"
                 />
               )}
-              <h3 className="text-xl font-bold text-white group-hover:text-[#0D0E47] mb-2">{serviceItem.title?.toUpperCase()}</h3>
-              <p className="text-white text-sm md:text-base group-hover:text-[#0D0E47]">{serviceItem.description}</p>
+              <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-white group-hover:text-[#0D0E47] mb-2 sm:mb-3">{serviceItem.title?.toUpperCase()}</h3>
+              <p className="text-white text-sm sm:text-base md:text-lg group-hover:text-[#0D0E47] leading-relaxed">{serviceItem.description}</p>
             </div>
           ))}
         </div>
diff --git a/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx b/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx
index d7b3578..97ee22f 100644
--- a/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx
+++ b/src/theme/conversion/components/cdtestimonials/components/variants/cdtestimonialsDefaultVariant.tsx
@@ -20,28 +20,28 @@ export default function DefaultVariant(props: StandardComponentProps) {
 
   return (
     <section id="cdtestimonials-default-variant">
-      <div className="py-20 bg-white">
+      <div className="py-8 sm:py-12 md:py-16 lg:py-20 bg-white">
         <div className="max-w-7xl mx-auto px-6">
           <div className="mb-16">
             <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">{title}</h2>
             <div className="w-full h-0.5 bg-gray-300"></div>
           </div>
 
-          <div className="grid md:grid-cols-2 gap-12 mb-12">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 md:gap-10 lg:gap-12 mb-8 sm:mb-12">
             {Array.isArray(testimonials) &&
               testimonials.map((item: any, index: number) => {
                 const imageUrl = item?.image?.asset?.url;
                 return (
-                  <div key={index} className="bg-white rounded-xl p-10 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 relative">
-                    <div className="absolute top-6 left-8 text-6xl text-gray-200 font-serif leading-none">"</div>
-                    <div className="absolute bottom-6 right-8 text-6xl text-gray-200 font-serif leading-none">"</div>
+                  <div key={index} className="bg-white rounded-xl p-6 sm:p-8 md:p-10 shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 hover:-translate-y-1 relative">
+                    <div className="absolute top-4 sm:top-6 left-4 sm:left-8 text-4xl sm:text-6xl text-gray-200 font-serif leading-none">"</div>
+                    <div className="absolute bottom-4 sm:bottom-6 right-4 sm:right-8 text-4xl sm:text-6xl text-gray-200 font-serif leading-none">"</div>
                     
                     <div className="relative z-10">
-                      <p className="text-lg text-gray-700 leading-relaxed mb-8">{item?.testimonial || "Client testimonial"}</p>
+                      <p className="text-base sm:text-lg md:text-xl text-gray-700 leading-relaxed mb-6 sm:mb-8">{item?.testimonial || "Client testimonial"}</p>
                       
-                      <div className="border-t-2 border-gray-100 pt-6">
-                        <h4 className="text-xl font-semibold text-blue-900 mb-1">{item?.name || "Client Name"}</h4>
-                        <p className="text-sm text-gray-500 uppercase tracking-wide">{item?.position || "Position"}</p>
+                      <div className="border-t-2 border-gray-100 pt-4 sm:pt-6">
+                        <h4 className="text-lg sm:text-xl md:text-2xl font-semibold text-blue-900 mb-1">{item?.name || "Client Name"}</h4>
+                        <p className="text-xs sm:text-sm text-gray-500 uppercase tracking-wide">{item?.position || "Position"}</p>
                       </div>
                     </div>
                   </div>
@@ -52,25 +52,25 @@ export default function DefaultVariant(props: StandardComponentProps) {
       </div>
 
       {videoTestimonials.length > 0 && (
-        <div className="py-20 bg-gray-50">
-          <div className="max-w-7xl mx-auto px-6">
-            <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-16">
-              <h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-6 md:mb-0">{videoTitle}</h2>
-              <div className="max-w-xl">
-                <p className="text-2xl text-[#0D0E47]">{videoSubtitle}</p>
+        <div className="py-8 sm:py-12 md:py-16 lg:py-20 bg-gray-50">
+          <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 mb-8 sm:mb-12 md:mb-16 text-center lg:text-left">
+              <h2 className="text-[#0C093F] font-extrabold text-2xl md:text-3xl mb-6 md:mb-0">{videoTitle}</h2>
+              <div className="max-w-xl mx-auto lg:mx-0">
+                <p className="text-xl sm:text-xl md:text-2xl text-[#0D0E47]">{videoSubtitle}</p>
               </div>
             </div>
 
             {/* Spotlight Video */}
             {videoTestimonials[0] && (
-              <div className="mb-16">
-                <div className="flex flex-col md:flex-row gap-8 items-start">
-                  <div className="md:w-1/2">
-                    <h3 className="text-2xl font-semibold text-[#0D0E47] mb-3">{videoTestimonials[0].name?.toUpperCase()}</h3>
-                    <p className="mb-4 text-2xl font-semibold text-[#0D0E47]">{videoTestimonials[0].position?.toUpperCase()}</p>
-                    <p className="text-[#0D0E47]">{videoTestimonials[0].testimonial}</p>
+              <div className="mb-8 sm:mb-12 md:mb-16">
+                <div className="flex flex-col lg:flex-row gap-6 sm:gap-8 items-start">
+                  <div className="w-full lg:w-1/2">
+                    <h3 className="text-2xl sm:text-2xl md:text-3xl font-semibold text-[#0D0E47] mb-2 sm:mb-3">{videoTestimonials[0].name?.toUpperCase()}</h3>
+                    <p className="mb-3 sm:mb-4 text-lg sm:text-xl md:text-2xl font-semibold text-[#0D0E47]">{videoTestimonials[0].position?.toUpperCase()}</p>
+                    <p className="text-base sm:text-lg text-[#0D0E47] leading-relaxed">{videoTestimonials[0].testimonial}</p>
                   </div>
-                  <div className="md:w-1/2">
+                  <div className="w-full lg:w-1/2">
                     <VideoPlayer 
                       url={videoTestimonials[0].videoUrl} 
                       title={`${videoTestimonials[0].name}'s Testimonial`}
@@ -83,19 +83,19 @@ export default function DefaultVariant(props: StandardComponentProps) {
             {/* More Videos */}
             {videoTestimonials.length > 1 && (
               <>
-                <h3 className="text-2xl font-semibold text-[#0D0E47] mb-8">More Videos</h3>
-                <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <h3 className="text-xl sm:text-2xl md:text-3xl font-semibold text-[#0D0E47] mb-6 sm:mb-8 text-center lg:text-left">More Videos</h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
                   {videoTestimonials.slice(1).map((testimonial: VideoTestimonial, index: number) => ( 
-                    <div key={index} className="bg-white rounded-lg overflow-hidden shadow-md">
+                    <div key={index} className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300">
                       {testimonial?.videoUrl && (
                         <VideoPlayer 
                           url={testimonial.videoUrl} 
                           title={`${testimonial.name}'s Testimonial`}
                         />
                       )}
-                      <div className="p-6">
-                        <h4 className="text-xl font-semibold text-[#0D0E47] mb-2">{testimonial?.name}</h4>
-                        <p className="text-gray-600 text-sm">{testimonial?.position}</p>
+                      <div className="p-4 sm:p-6">
+                        <h4 className="text-lg sm:text-xl md:text-2xl font-semibold text-[#0D0E47] mb-2">{testimonial?.name}</h4>
+                        <p className="text-sm sm:text-base text-gray-600">{testimonial?.position}</p>
                       </div>
                     </div>
                   ))}
diff --git a/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx b/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx
index 6529e86..f246d94 100644
--- a/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx
+++ b/src/theme/conversion/components/herobanner/components/variants/defaultVariant.tsx
@@ -11,19 +11,19 @@ export default function DefaultVariant(props: StandardComponentProps) {
   const buttonLabel = matchingData?.button?.label
   const buttonLink = matchingData?.button?.link
   return (
-    <div id="herobanner-default" className="bg-[#FFF6EC] h-[648px] flex flex-col md:flex-row items-center justify-between px-6 md:px-16 py-20 hero-cover container-stretch pt-300px pb-300px d-flex flex-wrap justify-content-between">
-      <div className="max-w-xl flex flex-col justify-center">
-        <h2 className="text-5xl md:text-6xl font-extrabold text-[#0D0E47] leading-tight">
+    <div id="herobanner-default" className="bg-[#FFF6EC] min-h-screen sm:min-h-[648px] flex flex-col lg:flex-row items-center justify-between px-4 sm:px-6 md:px-8 lg:px-16 py-8 sm:py-12 md:py-16 lg:py-20 hero-cover container-stretch">
+      <div className="w-full lg:w-1/2 max-w-xl flex flex-col justify-center text-center lg:text-left mb-8 lg:mb-0">
+        <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-[#0D0E47] leading-tight mb-4 sm:mb-6">
           {(matchingData?.title || "Default HeroBanner Title").toUpperCase()}
         </h2>
-        <p className="mt-6 text-lg md:text-xl text-[#0D0E47] mb-[54px]">
+        <p className="text-base sm:text-lg md:text-xl text-[#0D0E47] mb-6 sm:mb-8 md:mb-[54px] max-w-lg mx-auto lg:mx-0">
           {matchingData?.subtitle || "Default HeroBanner Subtitle"}
         </p>
         {buttonLabel && buttonLink && (
-          <div className="flex items-center gap-8">
+          <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8">
             <Link
               href={buttonLink}
-              className="bg-[#800928] hover:bg-blue-950 text-white font-semibold py-3 px-6 rounded-full text-xl w-[409px] h-[59px] flex items-center justify-center tracking-wide gap-[44px]"
+              className="bg-[#800928] hover:bg-blue-950 text-white font-semibold py-3 px-6 rounded-full text-lg sm:text-xl w-full sm:w-auto min-w-[280px] h-[50px] sm:h-[59px] flex items-center justify-center tracking-wide gap-4 sm:gap-[44px] transition-colors duration-300"
             >
               {buttonLabel}
               <ButtonIcon />
@@ -32,11 +32,11 @@ export default function DefaultVariant(props: StandardComponentProps) {
         )}
       </div>
       {imageUrl && (
-        <div className="w-full md:w-1/2 flex items-center justify-center">
+        <div className="w-full lg:w-1/2 flex items-center justify-center">
           <img 
             src={imageUrl}
             alt={altText}
-            className="w-48 md:w-64 lg:w-80 mt-[293px]"
+            className="w-48 sm:w-56 md:w-64 lg:w-80 xl:w-96 max-w-full h-auto object-contain"
           />
         </div>
       )}
diff --git a/src/theme/conversion/components/herobanner/sanity-mapping.ts b/src/theme/conversion/components/herobanner/sanity-mapping.ts
index f3c1273..33380fd 100644
--- a/src/theme/conversion/components/herobanner/sanity-mapping.ts
+++ b/src/theme/conversion/components/herobanner/sanity-mapping.ts
@@ -11,6 +11,6 @@ export async function mapIdentifierData(pageAndComponentCombo: PageAndSingleComp
   const content = pageAndComponentCombo?.component?.data;  
   const thisComponentsOrder = pageAndComponentCombo?.component?.sortOrder ?? 0;
     log.trace(`${logPrefix()} thisComponentsOrder: ${thisComponentsOrder}`);
-  const matchingData = extractComponentsFromSanityData(content, "herobanner", log, true, '', thisComponentsOrder);
+  const matchingData = extractComponentsFromSanityData(content, "herobanner", log);
   return matchingData;
 }
\ No newline at end of file