diff --git a/front/components/home/Car.tsx b/front/components/home/Car.tsx
new file mode 100644
index 0000000000000..1a780ee1c2571
--- /dev/null
+++ b/front/components/home/Car.tsx
@@ -0,0 +1,256 @@
+"use client";
+
+import { Button, ChevronLeftIcon, ChevronRightIcon } from "@dust-tt/sparkle";
+import type { UseEmblaCarouselType } from "embla-carousel-react";
+import useEmblaCarousel from "embla-carousel-react";
+import * as React from "react";
+
+import { classNames } from "@app/lib/utils";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext]
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={classNames("relative", className ? className : "")}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={classNames(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className ? className : ""
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={classNames(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className ? className : ""
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "secondary", size = "sm", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={classNames(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className ? className : ""
+      )}
+      disabled={!canScrollPrev}
+      icon={ChevronLeftIcon}
+      onClick={scrollPrev}
+      {...props}
+    />
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "secondary", size = "sm", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={classNames(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className ? className : ""
+      )}
+      disabled={!canScrollNext}
+      icon={ChevronRightIcon}
+      onClick={scrollNext}
+      {...props}
+    />
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  Carousel,
+  type CarouselApi,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+};
diff --git a/front/components/home/NavigationMenu.tsx b/front/components/home/components/NavigationMenu.tsx
similarity index 98%
rename from front/components/home/NavigationMenu.tsx
rename to front/components/home/components/NavigationMenu.tsx
index 8bc242a3e9529..1e494a5744bd7 100644
--- a/front/components/home/NavigationMenu.tsx
+++ b/front/components/home/components/NavigationMenu.tsx
@@ -2,7 +2,7 @@ import { ChevronDownIcon, Icon } from "@dust-tt/sparkle";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import * as React from "react";
 
-import { A } from "@app/components/home/contentComponents";
+import { A } from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 const NavigationMenu = React.forwardRef<
diff --git a/front/components/home/carousel.css b/front/components/home/components/carousel.css
similarity index 100%
rename from front/components/home/carousel.css
rename to front/components/home/components/carousel.css
diff --git a/front/components/home/carousel.tsx b/front/components/home/components/carousel.tsx
similarity index 100%
rename from front/components/home/carousel.tsx
rename to front/components/home/components/carousel.tsx
diff --git a/front/components/home/contentBlocks.tsx b/front/components/home/components/contentBlocks.tsx
similarity index 93%
rename from front/components/home/contentBlocks.tsx
rename to front/components/home/components/contentBlocks.tsx
index acbbb8dc9341e..38653ffb2eb21 100644
--- a/front/components/home/contentBlocks.tsx
+++ b/front/components/home/components/contentBlocks.tsx
@@ -9,7 +9,7 @@ import {
   H4,
   H5,
   P,
-} from "@app/components/home/contentComponents";
+} from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 interface ImgBlockProps {
@@ -121,10 +121,10 @@ interface BlockProps {
 }
 
 const blockColors = {
-  pink: { block: "bg-pink-300/80", title: "text-pink-800" },
-  sky: { block: "bg-sky-300/80", title: "text-sky-800" },
-  emerald: { block: "bg-emerald-300/80", title: "text-emerald-800" },
-  amber: { block: "bg-amber-300/80", title: "text-amber-800" },
+  pink: { block: "bg-pink-300", title: "text-pink-700" },
+  sky: { block: "bg-sky-300", title: "text-sky-700" },
+  emerald: { block: "bg-emerald-300", title: "text-emerald-700" },
+  amber: { block: "bg-amber-300", title: "text-amber-700" },
 };
 
 export const Block = ({ children, title, color }: BlockProps) => {
diff --git a/front/components/home/contentComponents.tsx b/front/components/home/components/contentComponents.tsx
similarity index 97%
rename from front/components/home/contentComponents.tsx
rename to front/components/home/components/contentComponents.tsx
index 77ea42068680e..cb9553b8c1c94 100644
--- a/front/components/home/contentComponents.tsx
+++ b/front/components/home/components/contentComponents.tsx
@@ -78,7 +78,7 @@ export const Span = ({ children, className = "" }: ContentProps) => (
 const pClasses = {
   xxs: "font-objektiv text-xs text-slate-500 md:text-sm leading-relaxed",
   xs: "font-objektiv text-sm text-slate-400 md:text-base leading-relaxed",
-  sm: "font-objektiv text-base text-slate-300 md:text-lg leading-relaxed",
+  sm: "font-objektiv text-base text-slate-400 md:text-lg leading-relaxed",
   md: "font-objektiv text-base md:text-lg text-slate-300 lg:text-xl drop-shadow leading-relaxed",
   lg: "font-objektiv text-lg md:text-xl text-slate-300 lg:text-2xl drop-shadow leading-relaxed",
 };
@@ -171,9 +171,7 @@ export const A = ({
 };
 
 export const Strong = ({ children, className = "" }: ContentProps) => (
-  <strong className={classNames(className, "font-semibold text-slate-200")}>
-    {children}
-  </strong>
+  <strong className={classNames(className, "font-semibold")}>{children}</strong>
 );
 
 interface ReactImgProps {
diff --git a/front/components/home/particles.tsx b/front/components/home/components/particles.tsx
similarity index 100%
rename from front/components/home/particles.tsx
rename to front/components/home/components/particles.tsx
diff --git a/front/components/home/scrollingHeader.tsx b/front/components/home/components/scrollingHeader.tsx
similarity index 100%
rename from front/components/home/scrollingHeader.tsx
rename to front/components/home/components/scrollingHeader.tsx
diff --git a/front/components/home/website/ForCustomerSupport.tsx b/front/components/home/content/ForCustomerSupport.tsx
similarity index 96%
rename from front/components/home/website/ForCustomerSupport.tsx
rename to front/components/home/content/ForCustomerSupport.tsx
index c86a8de6f6c52..34cd13f9b5591 100644
--- a/front/components/home/website/ForCustomerSupport.tsx
+++ b/front/components/home/content/ForCustomerSupport.tsx
@@ -1,14 +1,14 @@
 import React from "react";
 
-import { avatars, DroidItem } from "@app/components/home/carousel";
+import { avatars, DroidItem } from "@app/components/home/components/carousel";
 import {
   Block,
   Conversation,
   Handle,
   HeaderContentBlock,
   Message,
-} from "@app/components/home/contentBlocks";
-import { Grid, H1, P } from "@app/components/home/contentComponents";
+} from "@app/components/home/components/contentBlocks";
+import { Grid, H1, P } from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 const defaultFlexClasses = "flex flex-col gap-4";
@@ -35,19 +35,6 @@ export function ForCustomerSupport() {
         }
       />
 
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          Links to Blog articles around Marketing use cases
-        </H1>
-      </Grid>
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          Structured referal specific to Marketing
-          <br />
-          (post from our users, quotes)
-        </H1>
-      </Grid>
-      {/* <SimpleSlider slides={customerSupportSlides} /> */}
       <Grid>
         <div
           className={classNames(
@@ -155,6 +142,18 @@ export function ForCustomerSupport() {
           </Conversation>
         </div>
       </Grid>
+      <Grid>
+        <H1 className="col-span-12 text-center text-white">
+          Links to Blog articles around Marketing use cases
+        </H1>
+      </Grid>
+      <Grid>
+        <H1 className="col-span-12 text-center text-white">
+          Structured referal specific to Marketing
+          <br />
+          (post from our users, quotes)
+        </H1>
+      </Grid>
     </>
   );
 }
diff --git a/front/components/home/website/ForMarketing.tsx b/front/components/home/content/ForMarketing.tsx
similarity index 94%
rename from front/components/home/website/ForMarketing.tsx
rename to front/components/home/content/ForMarketing.tsx
index f8f22bca2f52d..0140b7e9de10f 100644
--- a/front/components/home/website/ForMarketing.tsx
+++ b/front/components/home/content/ForMarketing.tsx
@@ -1,8 +1,11 @@
 import React from "react";
 
-import { avatars, DroidItem } from "@app/components/home/carousel";
-import { Block, HeaderContentBlock } from "@app/components/home/contentBlocks";
-import { Grid, H1 } from "@app/components/home/contentComponents";
+import { avatars, DroidItem } from "@app/components/home/components/carousel";
+import {
+  Block,
+  HeaderContentBlock,
+} from "@app/components/home/components/contentBlocks";
+import { Grid, H1 } from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 const defaultFlexClasses = "flex flex-col gap-4";
@@ -29,20 +32,7 @@ export function ForMarketing() {
           </>
         }
       />
-      {/* <SimpleSlider slides={marketingSlides} /> */}
 
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          Links to Blog articles around Marketing use cases
-        </H1>
-      </Grid>
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          Structured referal specific to Marketing
-          <br />
-          (post from our users, quotes)
-        </H1>
-      </Grid>
       <Grid>
         <div
           className={classNames(
@@ -101,6 +91,18 @@ export function ForMarketing() {
           </div>
         </div>
       </Grid>
+      <Grid>
+        <H1 className="col-span-12 text-center text-white">
+          Links to Blog articles around Marketing use cases
+        </H1>
+      </Grid>
+      <Grid>
+        <H1 className="col-span-12 text-center text-white">
+          Structured referal specific to Marketing
+          <br />
+          (post from our users, quotes)
+        </H1>
+      </Grid>
     </>
   );
 }
diff --git a/front/components/home/website/ForPeople.tsx b/front/components/home/content/ForPeople.tsx
similarity index 96%
rename from front/components/home/website/ForPeople.tsx
rename to front/components/home/content/ForPeople.tsx
index 85d57d12a1c1a..b149a65e8602b 100644
--- a/front/components/home/website/ForPeople.tsx
+++ b/front/components/home/content/ForPeople.tsx
@@ -1,8 +1,16 @@
 import React from "react";
 
-import { avatars, DroidItem } from "@app/components/home/carousel";
-import { Block, HeaderContentBlock } from "@app/components/home/contentBlocks";
-import { Grid, H1, H2, P } from "@app/components/home/contentComponents";
+import { avatars, DroidItem } from "@app/components/home/components/carousel";
+import {
+  Block,
+  HeaderContentBlock,
+} from "@app/components/home/components/contentBlocks";
+import {
+  Grid,
+  H1,
+  H2,
+  P,
+} from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 const defaultFlexClasses = "flex flex-col gap-4";
diff --git a/front/components/home/website/Navigation.tsx b/front/components/home/content/Navigation.tsx
similarity index 90%
rename from front/components/home/website/Navigation.tsx
rename to front/components/home/content/Navigation.tsx
index 05ae52a196659..521e2078e7492 100644
--- a/front/components/home/website/Navigation.tsx
+++ b/front/components/home/content/Navigation.tsx
@@ -1,7 +1,11 @@
 import { ChevronRightIcon, Icon } from "@dust-tt/sparkle";
 import React from "react";
 
-import { A, H4, Strong } from "@app/components/home/contentComponents";
+import {
+  A,
+  H4,
+  Strong,
+} from "@app/components/home/components/contentComponents";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -9,7 +13,7 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-} from "@app/components/home/NavigationMenu";
+} from "@app/components/home/components/NavigationMenu";
 
 const solutions: { title: string; target: string }[] = [
   {
@@ -118,7 +122,7 @@ export function Navigation({
         <NavigationMenuItem>
           <NavigationMenuLink onClick={() => onPageChange("product")}>
             <A
-              variant={currentPage === "product" ? "primary" : "tertiary"}
+              variant={currentPage === "product" ? "secondary" : "tertiary"}
               className="pr-2"
             >
               Product
@@ -129,7 +133,7 @@ export function Navigation({
           <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
           <NavigationMenuContent>
             <ul className="grid gap-4 p-6 pb-8 lg:w-[560px] lg:grid-cols-2">
-              <H4 className="col-span-2 text-emerald-400">Dust for…</H4>
+              <H4 className="col-span-2 text-white">Dust for…</H4>
               {solutions.map((solution, index) => (
                 <ListItem
                   key={index}
@@ -148,7 +152,7 @@ export function Navigation({
           <NavigationMenuTrigger>Developpers</NavigationMenuTrigger>
           <NavigationMenuContent>
             <ul className="grid gap-4 p-6 pb-8 lg:w-[560px] lg:grid-cols-2">
-              <H4 className="col-span-2 text-amber-400">Build with Dust</H4>
+              <H4 className="col-span-2 text-white">Build with Dust</H4>
               {devs.map((dev, index) => (
                 <ListItem
                   key={index}
@@ -168,7 +172,7 @@ export function Navigation({
         <NavigationMenuItem>
           <NavigationMenuLink onClick={() => onPageChange("pricing")}>
             <A
-              variant={currentPage === "pricing" ? "primary" : "tertiary"}
+              variant={currentPage === "pricing" ? "secondary" : "tertiary"}
               className="pr-2"
             >
               Pricing
@@ -178,7 +182,7 @@ export function Navigation({
         <NavigationMenuItem>
           <NavigationMenuLink onClick={() => onPageChange("security")}>
             <A
-              variant={currentPage === "pricing" ? "primary" : "tertiary"}
+              variant={currentPage === "security" ? "secondary" : "tertiary"}
               className="pr-2"
             >
               Security
@@ -188,8 +192,8 @@ export function Navigation({
         <NavigationMenuItem>
           <NavigationMenuTrigger>More</NavigationMenuTrigger>
           <NavigationMenuContent>
-            <div className="grid gap-4 p-6 pb-8 lg:w-[580px] lg:grid-cols-3">
-              <H4 className="col-span-3 text-pink-400">All about Dust</H4>
+            <div className="grid gap-4 p-6 pb-8 text-white lg:w-[580px] lg:grid-cols-3">
+              <H4 className="col-span-3 text-white">All about Dust</H4>
 
               <ul className="flex flex-col gap-4">
                 <Strong>Careers</Strong>
diff --git a/front/components/home/website/PricingPage.tsx b/front/components/home/content/PricingPage.tsx
similarity index 97%
rename from front/components/home/website/PricingPage.tsx
rename to front/components/home/content/PricingPage.tsx
index d64f80ed0d615..72e70a3c944e0 100644
--- a/front/components/home/website/PricingPage.tsx
+++ b/front/components/home/content/PricingPage.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import type { ParsedUrlQuery } from "querystring";
 import React from "react";
 
-import { Grid, H2 } from "@app/components/home/contentComponents";
+import { Grid, H2 } from "@app/components/home/components/contentComponents";
 import { PricePlans } from "@app/components/PlansTables";
 
 interface PricingPageProps {
diff --git a/front/components/home/website/Product/ArtSection.tsx b/front/components/home/content/Product/FutureSection.tsx
similarity index 81%
rename from front/components/home/website/Product/ArtSection.tsx
rename to front/components/home/content/Product/FutureSection.tsx
index dcd7dec5f6a6a..31c2cc2ca73da 100644
--- a/front/components/home/website/Product/ArtSection.tsx
+++ b/front/components/home/content/Product/FutureSection.tsx
@@ -1,44 +1,36 @@
 import { Div3D, Hover3D } from "@dust-tt/sparkle";
 import React from "react";
 
-import { Grid, H2, P, Strong } from "@app/components/home/contentComponents";
-
-const defaultFlexClasses = "flex flex-col gap-4";
-
-import { ImgBlock } from "@app/components/home/contentBlocks";
+import { ImgBlock } from "@app/components/home/components/contentBlocks";
+import {
+  Grid,
+  H2,
+  P,
+  Strong,
+} from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
-export function ArtSection() {
+export function FutureSection() {
   return (
     <>
       <Grid>
         <div
           className={classNames(
-            defaultFlexClasses,
-            "col-span-12",
+            "col-span-12 flex flex-col gap-8",
             "lg:col-span-10 lg:col-start-2",
-            "xl:col-span-10 xl:col-start-2"
+            "xl:col-span-8 xl:col-start-2"
           )}
         >
           <H2 className="text-pink-500">
-            Future-Proof your AI&nbsp;Strategy
+            Future-Proof
             <br />
-            <span className="text-pink-200">
-              with a Model-Agnostic, modular&nbsp;solution.
-            </span>
+            <span className="text-pink-200">your AI&nbsp;Strategy</span>
           </H2>
-          <P size="lg">
-            <Strong>
-              Dust is&nbsp; exceptionally modular and&nbsp;adaptable,
-            </Strong>
-            <br />
-            tailoring to&nbsp;your unique requirements.
-          </P>
           <P size="lg">
             Continuously&nbsp;evolving to&nbsp;meet
-            your&nbsp;changing&nbsp;needs, Dust offers access the&nbsp;market's
-            leading&nbsp;models and support of&nbsp;multiple sources
-            of&nbsp;data.
+            your&nbsp;changing&nbsp;needs, Dust&nbsp;offers access
+            the&nbsp;market's leading&nbsp;models and support of&nbsp;multiple
+            sources of&nbsp;data.
           </P>
         </div>
         <ImgBlock
diff --git a/front/components/home/website/Product/IntroSection.tsx b/front/components/home/content/Product/IntroSection.tsx
similarity index 97%
rename from front/components/home/website/Product/IntroSection.tsx
rename to front/components/home/content/Product/IntroSection.tsx
index ccdb8667445d8..4306846458396 100644
--- a/front/components/home/website/Product/IntroSection.tsx
+++ b/front/components/home/content/Product/IntroSection.tsx
@@ -9,7 +9,7 @@ import {
   H4,
   P,
   Strong,
-} from "@app/components/home/contentComponents";
+} from "@app/components/home/components/contentComponents";
 import { classNames } from "@app/lib/utils";
 
 interface IntroSectionProps {
@@ -30,7 +30,7 @@ export function IntroSection({ getReturnToUrl }: IntroSectionProps) {
           )}
         >
           <div className="flex flex-col gap-12">
-            <H1 className="text-slate-100">
+            <H1 className="text-red-300">
               Cracking
               <br />
               <span className="text-red-400">team AI productivity</span>
diff --git a/front/components/home/website/Product/TeamSection.tsx b/front/components/home/content/Product/TeamSection.tsx
similarity index 97%
rename from front/components/home/website/Product/TeamSection.tsx
rename to front/components/home/content/Product/TeamSection.tsx
index 1f2c7b23ab66c..e23fb35e78e83 100644
--- a/front/components/home/website/Product/TeamSection.tsx
+++ b/front/components/home/content/Product/TeamSection.tsx
@@ -1,11 +1,16 @@
 import { Div3D, Hover3D } from "@dust-tt/sparkle";
 import React from "react";
 
-import { Grid, H2, P, Strong } from "@app/components/home/contentComponents";
+import {
+  Grid,
+  H2,
+  P,
+  Strong,
+} from "@app/components/home/components/contentComponents";
 
 const defaultFlexClasses = "flex flex-col gap-4";
 
-import { ImgBlock } from "@app/components/home/contentBlocks";
+import { ImgBlock } from "@app/components/home/components/contentBlocks";
 import { classNames } from "@app/lib/utils";
 
 export function TeamSection() {
diff --git a/front/components/home/content/ProductPage.tsx b/front/components/home/content/ProductPage.tsx
new file mode 100644
index 0000000000000..4095d17e424f2
--- /dev/null
+++ b/front/components/home/content/ProductPage.tsx
@@ -0,0 +1,163 @@
+import type { ParsedUrlQuery } from "querystring";
+import React from "react";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@app/components/home/Car";
+import { BlogBlock } from "@app/components/home/components/contentBlocks";
+import {
+  Grid,
+  H1,
+  H2,
+} from "@app/components/home/components/contentComponents";
+import { FutureSection } from "@app/components/home/content/Product/FutureSection";
+import { IntroSection } from "@app/components/home/content/Product/IntroSection";
+import { TeamSection } from "@app/components/home/content/Product/TeamSection";
+
+interface ProductPageProps {
+  getReturnToUrl: (routerQuery: ParsedUrlQuery) => string;
+}
+
+export function ProductPage({ getReturnToUrl }: ProductPageProps) {
+  return (
+    <>
+      <IntroSection getReturnToUrl={getReturnToUrl} />
+      <TeamSection />
+      <FutureSection />
+      <Grid>
+        <H2 className="col-span-10 col-start-2 text-emerald-200">
+          How <span className="text-emerald-400">they use&nbsp;Dust</span>
+        </H2>
+
+        <BlogBlock
+          title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
+          content="Discover how November Five leverages AI with Dust to enhance efficiency and maintain a human touch in their digital solutions."
+          href="https://blog.dust.tt/november-five-ai-transformation-dust/"
+        >
+          <img
+            src="https://blog.dust.tt/content/images/size/w2000/2024/04/DSCF6552-1.jpeg"
+            alt="Blog Image"
+          />
+        </BlogBlock>
+        <BlogBlock
+          title="How Eléonore improved the efficiency of Pennylane’s Care team thanks to Dust"
+          content="Discover how Pennylane leveraged Dust’s specialized virtual assistants to improve efficiency and optimize workflows."
+          href="https://blog.dust.tt/pennylane-dust-customer-support-journey/"
+        >
+          <img
+            src="https://blog.dust.tt/content/images/size/w2000/2024/04/Ele-onore-MOTTE--1--1.jpg"
+            alt="Blog Image"
+          />
+        </BlogBlock>
+        <BlogBlock
+          title="Integrating AI for Enhanced Workflows at Alan"
+          content="Discover how Alan revolutionizes healthcare and enhances workflows using AI. See how @code-help and Dust streamline developer tasks."
+          href="https://blog.dust.tt/integrating-ai-workflows-alan/"
+        >
+          <img
+            src="https://blog.dust.tt/content/images/size/w2000/2024/03/cover-vincent.png"
+            alt="Blog Image"
+          />
+        </BlogBlock>
+      </Grid>
+      <Grid>
+        <H1 className="col-span-12 text-center text-white">
+          CAROUSSEL DISPLAY
+          <br />
+          Connections to "Dust for…" pages, Dust Apps, Security…
+        </H1>
+      </Grid>{" "}
+      <Grid>
+        <H1 className="col-span-12 text-center text-white">
+          Structured referal section
+          <br />
+          (post from our users, quotes)
+        </H1>
+      </Grid>
+      <Grid>
+        <Carousel className="col-span-12">
+          <CarouselContent>
+            <CarouselItem className="basis-1/3">
+              <BlogBlock
+                title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
+                content="Discover how November Five leverages AI with Dust to enhance efficiency and maintain a human touch in their digital solutions."
+                href="https://blog.dust.tt/november-five-ai-transformation-dust/"
+              >
+                <img
+                  src="https://blog.dust.tt/content/images/size/w2000/2024/04/DSCF6552-1.jpeg"
+                  alt="Blog Image"
+                />
+              </BlogBlock>
+            </CarouselItem>
+            <CarouselItem className="basis-1/3">
+              <BlogBlock
+                title="How Eléonore improved the efficiency of Pennylane’s Care team thanks to Dust"
+                content="Discover how Pennylane leveraged Dust’s specialized virtual assistants to improve efficiency and optimize workflows."
+                href="https://blog.dust.tt/pennylane-dust-customer-support-journey/"
+              >
+                <img
+                  src="https://blog.dust.tt/content/images/size/w2000/2024/04/Ele-onore-MOTTE--1--1.jpg"
+                  alt="Blog Image"
+                />
+              </BlogBlock>
+            </CarouselItem>
+            <CarouselItem className="basis-1/3">
+              <BlogBlock
+                title="Integrating AI for Enhanced Workflows at Alan"
+                content="Discover how Alan revolutionizes healthcare and enhances workflows using AI. See how @code-help and Dust streamline developer tasks."
+                href="https://blog.dust.tt/integrating-ai-workflows-alan/"
+              >
+                <img
+                  src="https://blog.dust.tt/content/images/size/w2000/2024/03/cover-vincent.png"
+                  alt="Blog Image"
+                />
+              </BlogBlock>
+            </CarouselItem>
+            <CarouselItem className="basis-1/3">
+              <BlogBlock
+                title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
+                content="Discover how November Five leverages AI with Dust to enhance efficiency and maintain a human touch in their digital solutions."
+                href="https://blog.dust.tt/november-five-ai-transformation-dust/"
+              >
+                <img
+                  src="https://blog.dust.tt/content/images/size/w2000/2024/04/DSCF6552-1.jpeg"
+                  alt="Blog Image"
+                />
+              </BlogBlock>
+            </CarouselItem>
+            <CarouselItem className="basis-1/3">
+              <BlogBlock
+                title="How Eléonore improved the efficiency of Pennylane’s Care team thanks to Dust"
+                content="Discover how Pennylane leveraged Dust’s specialized virtual assistants to improve efficiency and optimize workflows."
+                href="https://blog.dust.tt/pennylane-dust-customer-support-journey/"
+              >
+                <img
+                  src="https://blog.dust.tt/content/images/size/w2000/2024/04/Ele-onore-MOTTE--1--1.jpg"
+                  alt="Blog Image"
+                />
+              </BlogBlock>
+            </CarouselItem>
+            <CarouselItem className="basis-1/3">
+              <BlogBlock
+                title="Integrating AI for Enhanced Workflows at Alan"
+                content="Discover how Alan revolutionizes healthcare and enhances workflows using AI. See how @code-help and Dust streamline developer tasks."
+                href="https://blog.dust.tt/integrating-ai-workflows-alan/"
+              >
+                <img
+                  src="https://blog.dust.tt/content/images/size/w2000/2024/03/cover-vincent.png"
+                  alt="Blog Image"
+                />
+              </BlogBlock>
+            </CarouselItem>
+          </CarouselContent>
+          <CarouselPrevious label="" />
+          <CarouselNext label="" />
+        </Carousel>
+      </Grid>
+    </>
+  );
+}
diff --git a/front/components/home/website/SecurityPage.tsx b/front/components/home/content/SecurityPage.tsx
similarity index 90%
rename from front/components/home/website/SecurityPage.tsx
rename to front/components/home/content/SecurityPage.tsx
index ffec8ac5db19b..476acc9841493 100644
--- a/front/components/home/website/SecurityPage.tsx
+++ b/front/components/home/content/SecurityPage.tsx
@@ -1,6 +1,11 @@
 import React from "react";
 
-import { Grid, H2, P, Strong } from "@app/components/home/contentComponents";
+import {
+  Grid,
+  H2,
+  P,
+  Strong,
+} from "@app/components/home/components/contentComponents";
 
 export function SecurityPage() {
   return (
diff --git a/front/components/home/website/ProductPage.tsx b/front/components/home/website/ProductPage.tsx
deleted file mode 100644
index ee2a7ab25289c..0000000000000
--- a/front/components/home/website/ProductPage.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { ParsedUrlQuery } from "querystring";
-import React from "react";
-
-import { BlogBlock } from "@app/components/home/contentBlocks";
-import { Grid, H1 } from "@app/components/home/contentComponents";
-import { ArtSection } from "@app/components/home/website/Product/ArtSection";
-import { IntroSection } from "@app/components/home/website/Product/IntroSection";
-import { TeamSection } from "@app/components/home/website/Product/TeamSection";
-
-interface ProductPageProps {
-  getReturnToUrl: (routerQuery: ParsedUrlQuery) => string;
-}
-
-export function ProductPage({ getReturnToUrl }: ProductPageProps) {
-  return (
-    <>
-      <IntroSection getReturnToUrl={getReturnToUrl} />
-      <TeamSection />
-      <ArtSection />
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          Links to Blog articles
-        </H1>
-        <BlogBlock
-          title="Navigating Growth and Innovation with November Five’s Dario Prskalo"
-          content="Discover how November Five leverages AI with Dust to enhance efficiency and maintain a human touch in their digital solutions."
-          href="https://blog.dust.tt/november-five-ai-transformation-dust/"
-        >
-          <img
-            src="https://blog.dust.tt/content/images/size/w2000/2024/04/DSCF6552-1.jpeg"
-            alt="Blog Image"
-          />
-        </BlogBlock>
-        <BlogBlock
-          title="How Eléonore improved the efficiency of Pennylane’s Care team thanks to Dust"
-          content="Discover how Pennylane leveraged Dust’s specialized virtual assistants to improve efficiency and optimize workflows."
-          href="https://blog.dust.tt/pennylane-dust-customer-support-journey/"
-        >
-          <img
-            src="https://blog.dust.tt/content/images/size/w2000/2024/04/Ele-onore-MOTTE--1--1.jpg"
-            alt="Blog Image"
-          />
-        </BlogBlock>
-        <BlogBlock
-          title="Integrating AI for Enhanced Workflows at Alan"
-          content="Discover how Alan revolutionizes healthcare and enhances workflows using AI. See how @code-help and Dust streamline developer tasks."
-          href="https://blog.dust.tt/integrating-ai-workflows-alan/"
-        >
-          <img
-            src="https://blog.dust.tt/content/images/size/w2000/2024/03/cover-vincent.png"
-            alt="Blog Image"
-          />
-        </BlogBlock>
-      </Grid>
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          CAROUSSEL DISPLAY
-          <br />
-          Connections to "Dust for…" pages, Dust Apps, Security…
-        </H1>
-      </Grid>{" "}
-      <Grid>
-        <H1 className="col-span-12 text-center text-white">
-          Structured referal section
-          <br />
-          (post from our users, quotes)
-        </H1>
-      </Grid>
-    </>
-  );
-}
diff --git a/front/package-lock.json b/front/package-lock.json
index 4d811be70fc05..fc43532dd262a 100644
--- a/front/package-lock.json
+++ b/front/package-lock.json
@@ -49,6 +49,7 @@
         "csv-stringify": "^6.4.5",
         "date-fns": "^3.6.0",
         "dd-trace": "^5.1.0",
+        "embla-carousel-react": "^8.0.1",
         "emoji-mart": "^5.5.2",
         "eventsource-parser": "^1.0.0",
         "fast-diff": "^1.3.0",
@@ -19369,6 +19370,31 @@
       "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
       "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
     },
+    "node_modules/embla-carousel": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.1.tgz",
+      "integrity": "sha512-RsaMRyBCd144N95gb3XoI+H9zj3RI4y0qcfvKYEh2tIAIEenL9CW9vwzltCeoYkWYipGdkvup+HGT9ewG1YTEw=="
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.1.tgz",
+      "integrity": "sha512-cpFQ/HwCsjBjzpu9Z9IHmZ9DaCSf/wo4q+qUTcRW3SsNv+1Q8IY7Y8J2QIyTmz0vOWY7tliu3uE2gqRH7ZDwOQ==",
+      "dependencies": {
+        "embla-carousel": "8.0.1",
+        "embla-carousel-reactive-utils": "8.0.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.1.tgz",
+      "integrity": "sha512-KBSkz2h9LwVFkOrwzIJKgXbmEDlIShkreeOHnV8Cph09AdBMzb412nRkcctbeDcuG9x3CVsqLzJrSXnZeYhFPQ==",
+      "peerDependencies": {
+        "embla-carousel": "8.0.1"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.13.1",
       "dev": true,
diff --git a/front/package.json b/front/package.json
index 16feb12db2de9..3216df54b1801 100644
--- a/front/package.json
+++ b/front/package.json
@@ -28,9 +28,9 @@
     "@nangohq/node": "^0.36.37",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@sendgrid/mail": "^8.0.0",
     "@slack/web-api": "^6.8.1",
     "@tailwindcss/forms": "^0.5.3",
@@ -57,6 +57,7 @@
     "csv-stringify": "^6.4.5",
     "date-fns": "^3.6.0",
     "dd-trace": "^5.1.0",
+    "embla-carousel-react": "^8.0.1",
     "emoji-mart": "^5.5.2",
     "eventsource-parser": "^1.0.0",
     "fast-diff": "^1.3.0",
diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 1497ef8b7a499..b336778c44164 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -16,16 +16,18 @@ import type { ParsedUrlQuery } from "querystring";
 import React, { useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
 
-import { A } from "@app/components/home/contentComponents";
-import Particles, { particuleShapes } from "@app/components/home/particles";
-import ScrollingHeader from "@app/components/home/scrollingHeader";
-import { ForCustomerSupport } from "@app/components/home/website/ForCustomerSupport";
-import { ForMarketing } from "@app/components/home/website/ForMarketing";
-import { ForPeople } from "@app/components/home/website/ForPeople";
-import { Navigation } from "@app/components/home/website/Navigation";
-import { PricingPage } from "@app/components/home/website/PricingPage";
-import { ProductPage } from "@app/components/home/website/ProductPage";
-import { SecurityPage } from "@app/components/home/website/SecurityPage";
+import { A } from "@app/components/home/components/contentComponents";
+import Particles, {
+  particuleShapes,
+} from "@app/components/home/components/particles";
+import ScrollingHeader from "@app/components/home/components/scrollingHeader";
+import { ForCustomerSupport } from "@app/components/home/content/ForCustomerSupport";
+import { ForMarketing } from "@app/components/home/content/ForMarketing";
+import { ForPeople } from "@app/components/home/content/ForPeople";
+import { Navigation } from "@app/components/home/content/Navigation";
+import { PricingPage } from "@app/components/home/content/PricingPage";
+import { ProductPage } from "@app/components/home/content/ProductPage";
+import { SecurityPage } from "@app/components/home/content/SecurityPage";
 import { SubscriptionContactUsDrawer } from "@app/components/SubscriptionContactUsDrawer";
 import { trackPageView } from "@app/lib/amplitude/browser";
 import { getSession } from "@app/lib/auth";
@@ -77,6 +79,7 @@ export default function Home({
 
   const handlePageChange = async (page: string) => {
     await router.push(`/?${page}`, undefined, { shallow: true });
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   const [showCookieBanner, setShowCookieBanner] = useState<boolean>(true);
diff --git a/front/pages/w/[wId]/a/index.tsx b/front/pages/w/[wId]/a/index.tsx
index 2a50a70589f2d..acd9defa18921 100644
--- a/front/pages/w/[wId]/a/index.tsx
+++ b/front/pages/w/[wId]/a/index.tsx
@@ -10,7 +10,7 @@ import { useRouter } from "next/router";
 import { useState } from "react";
 import { useSWRConfig } from "swr";
 
-import { A } from "@app/components/home/contentComponents";
+import { A } from "@app/components/home/components/contentComponents";
 import AI21Setup from "@app/components/providers/AI21Setup";
 import AnthropicSetup from "@app/components/providers/AnthropicSetup";
 import AzureOpenAISetup from "@app/components/providers/AzureOpenAISetup";