diff --git a/public/images/hero11.webp b/public/images/hero11.webp
index f7da2aa1..37f97d9a 100644
Binary files a/public/images/hero11.webp and b/public/images/hero11.webp differ
diff --git a/src/components/ui/apple-cards-carousel.tsx b/src/components/ui/apple-cards-carousel.tsx
index 57f8bf63..b1515940 100644
--- a/src/components/ui/apple-cards-carousel.tsx
+++ b/src/components/ui/apple-cards-carousel.tsx
@@ -73,7 +73,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
 
           <div
             className={cn(
-              "flex flex-row justify-start gap-4 pl-4",
+              "flex flex-row justify-start gap-6 pl-4",
               "mx-auto max-w-7xl", // remove max-w-4xl if you want the carousel to span the full width of its container
             )}
           >
@@ -127,41 +127,41 @@ export const Card = ({
   card: Card;
   layout?: boolean;
 }) => {
-  
   return (
     <Link to={card.link}>
       <motion.div
         layoutId={layout ? `card-${card.title}` : undefined}
-        className="relative z-10 flex h-60 w-56 flex-col items-start justify-start overflow-hidden rounded-3xl border border-gray-500/30 md:h-120 md:w-96 hover:scale-105 transition-transform duration-200"
-        style={{
-          backgroundImage: `url(${card.bg})`,
-          backgroundSize: 'cover',
-          backgroundPosition: 'center',
-        }}
+        className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl border border-gray-500/30 bg-[#1C1C1C] transition-transform duration-200 hover:scale-105 md:h-120 md:w-96"
       >
-        <div className="pointer-events-none absolute inset-x-0 top-0 z-30 h-full bg-gradient-to-b from-black/50 via-transparent to-transparent" />
-        <div className="relative z-40 p-8 w-full">
+        <div className="flex h-2/5 flex-col justify-center py-6 px-8">
           <motion.p
             layoutId={layout ? `category-${card.category}` : undefined}
-            className="text-left font-sans text-sm font-medium text-white md:text-base"
+            className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs   md:text-sm"
           >
             {card.category}
           </motion.p>
           <motion.p
             layoutId={layout ? `title-${card.title}` : undefined}
-            className="mt-2 max-w-xs text-left font-sans text-xl font-semibold [text-wrap:balance] text-white md:text-3xl"
+            className="mt-1 max-w-xs text-left font-sans text-xl font-semibold text-white [text-wrap:balance] lg:text-2xl"
           >
             {card.title}
           </motion.p>
-          <div className="flex flex-row justify-between items-center w-full mt-4">
-            <motion.p className="max-w-xs text-left font-sans lg:text-lg text-base  text-neutral-300">
+          <div className="mt-2 flex w-full flex-row items-center justify-between md:mt-4">
+            <motion.p className="max-w-xs text-left font-sans lg:text-xl text-lg text-neutral-300 lg:leading-normal leading-tight">
               {card.description}
             </motion.p>
-            <div className="h-8 w-8 bg-[#212121] rounded-full flex items-center justify-center text-[#858585] shrink-0 hover:bg-[#262626] hover:text-white active:bg-[#262626] active:text-white transition-colors duration-200">
-              <IconChevronRight className="h-6 w-6" />
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-[#212121] text-[#858585] transition-colors duration-200 hover:bg-[#262626] hover:text-white md:h-8 md:w-8">
+              <IconChevronRight className="h-4 w-4 md:h-6 md:w-6" />
             </div>
           </div>
         </div>
+        <div className="relative flex h-3/5 w-full items-end justify-end bg-transparent">
+          <img
+            src={card.src}
+            alt={card.title}
+            className="h-full w-full origin-bottom-right scale-75 object-contain mb-10"
+          />
+        </div>
       </motion.div>
     </Link>
   );
diff --git a/src/pages/home/HomeAurora.tsx b/src/pages/home/HomeAurora.tsx
index eae692cb..ae77980f 100644
--- a/src/pages/home/HomeAurora.tsx
+++ b/src/pages/home/HomeAurora.tsx
@@ -8,7 +8,7 @@ export  function HomeAurora() {
       className="relative bg-cover sm:bg-contain bg-right bg-no-repeat"
       style={{ backgroundImage: "url('/images/hero11.webp')" }}
     >
-      <div className="mx-auto max-w-7xl lg:px-8">
+      <div className="mx-auto max-w-7xl lg:px-4">
         <div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5">
           <div className="mx-auto max-w-3xl lg:mx-0">
             <div className="hidden sm:flex">