diff --git a/autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx b/autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx
index 630743d3b7..b1a6571138 100644
--- a/autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/FeaturedAgentCard.tsx
@@ -27,33 +27,35 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
       data-testid="featured-store-card"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      className={backgroundColor}
+      className={`flex h-full flex-col ${backgroundColor}`}
     >
       <CardHeader>
-        <CardTitle>{agent.agent_name}</CardTitle>
-        <CardDescription>{agent.description}</CardDescription>
+        <CardTitle className="line-clamp-2 text-base sm:text-xl">
+          {agent.agent_name}
+        </CardTitle>
+        <CardDescription className="text-sm">
+          By {agent.creator}
+        </CardDescription>
       </CardHeader>
-      <CardContent>
-        <div className="relative h-[397px] w-full overflow-hidden rounded-xl">
+      <CardContent className="flex-1 p-4">
+        <div className="relative aspect-[4/3] w-full overflow-hidden rounded-xl">
+          <Image
+            src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
+            alt={`${agent.agent_name} preview`}
+            fill
+            sizes="100%"
+            className={`object-cover transition-opacity duration-200 ${
+              isHovered ? "opacity-0" : "opacity-100"
+            }`}
+          />
           <div
-            className={`transition-opacity duration-200 ${isHovered ? "opacity-0" : "opacity-100"}`}
-          >
-            <Image
-              src={agent.agent_image || "/AUTOgpt_Logo_dark.png"}
-              alt={`${agent.agent_name} preview`}
-              fill
-              sizes="100%"
-              className="rounded-xl object-cover"
-            />
-          </div>
-          <div
-            className={`absolute inset-0 overflow-y-auto transition-opacity duration-200 ${
+            className={`absolute inset-0 overflow-y-auto p-4 transition-opacity duration-200 ${
               isHovered ? "opacity-100" : "opacity-0"
-            } rounded-xl dark:bg-neutral-700`}
+            }`}
           >
-            <p className="text-base text-neutral-800 dark:text-neutral-200">
+            <CardDescription className="line-clamp-[6] text-xs sm:line-clamp-[8] sm:text-sm">
               {agent.description}
-            </p>
+            </CardDescription>
           </div>
         </div>
       </CardContent>
@@ -63,13 +65,7 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
         </div>
         <div className="flex items-center gap-1.5">
           <p>{agent.rating.toFixed(1) ?? "0.0"}</p>
-          <div
-            className="inline-flex items-center justify-start gap-px"
-            role="img"
-            aria-label={`Rating: ${agent.rating.toFixed(1)} out of 5 stars`}
-          >
-            {StarRatingIcons(agent.rating)}
-          </div>
+          {StarRatingIcons(agent.rating)}
         </div>
       </CardFooter>
     </Card>
diff --git a/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx b/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx
index c559fdf678..3cf0646fbc 100644
--- a/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx
+++ b/autogpt_platform/frontend/src/components/agptui/composite/FeaturedSection.tsx
@@ -46,45 +46,41 @@ export const FeaturedSection: React.FC<FeaturedSectionProps> = ({
   };
 
   return (
-    <div className="flex w-full flex-col items-center justify-center">
-      <div className="w-[99vw]">
-        <h2 className="mx-auto mb-8 max-w-[1360px] px-4 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
-          Featured agents
-        </h2>
+    <section className="mx-auto w-full max-w-7xl px-4 pb-16">
+      <h2 className="mb-8 font-poppins text-2xl font-semibold leading-7 text-neutral-800 dark:text-neutral-200">
+        Featured agents
+      </h2>
 
-        <div className="w-[99vw] pb-[60px]">
-          <Carousel
-            className="mx-auto pb-10"
-            opts={{
-              align: "center",
-              containScroll: "trimSnaps",
-            }}
-          >
-            <CarouselContent className="ml-[calc(50vw-690px)]">
-              {featuredAgents.map((agent, index) => (
-                <CarouselItem
-                  key={index}
-                  className="max-w-[460px] flex-[0_0_auto]"
-                >
-                  <Link
-                    href={`/marketplace/agent/${encodeURIComponent(agent.creator)}/${encodeURIComponent(agent.slug)}`}
-                  >
-                    <FeaturedAgentCard
-                      agent={agent}
-                      backgroundColor={getBackgroundColor(index)}
-                    />
-                  </Link>
-                </CarouselItem>
-              ))}
-            </CarouselContent>
-            <div className="relative mx-auto w-full max-w-[1360px] pl-4">
-              <CarouselIndicator />
-              <CarouselPrevious afterClick={handlePrevSlide} />
-              <CarouselNext afterClick={handleNextSlide} />
-            </div>
-          </Carousel>
+      <Carousel
+        opts={{
+          align: "center",
+          containScroll: "trimSnaps",
+        }}
+      >
+        <CarouselContent>
+          {featuredAgents.map((agent, index) => (
+            <CarouselItem
+              key={index}
+              className="h-[480px] md:basis-1/2 lg:basis-1/3"
+            >
+              <Link
+                href={`/marketplace/agent/${encodeURIComponent(agent.creator)}/${encodeURIComponent(agent.slug)}`}
+                className="block h-full"
+              >
+                <FeaturedAgentCard
+                  agent={agent}
+                  backgroundColor={getBackgroundColor(index)}
+                />
+              </Link>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <div className="relative mt-4">
+          <CarouselIndicator />
+          <CarouselPrevious afterClick={handlePrevSlide} />
+          <CarouselNext afterClick={handleNextSlide} />
         </div>
-      </div>
-    </div>
+      </Carousel>
+    </section>
   );
 };