diff --git a/front/pages/index.tsx b/front/pages/index.tsx
index 6f1585b67b0f..92d15562ce3a 100644
--- a/front/pages/index.tsx
+++ b/front/pages/index.tsx
@@ -1,9 +1,11 @@
 import {
   AnthropicLogo,
   Button,
+  Div3D,
   DriveLogo,
   GithubWhiteLogo,
   GoogleLogo,
+  Hover3D,
   Logo,
   LogoHorizontalWhiteLogo,
   MicrosoftLogo,
@@ -227,7 +229,36 @@ export default function Home({
             </div>
           </Grid>
           <Grid className="items-center">
-            <ReactiveImg
+            <Hover3D
+              attack={0.2}
+              release={4}
+              perspective={800}
+              className={classNames(
+                "relative rounded-2xl border p-3 shadow-xl",
+                "bg-gradient-to-b from-slate-800/60 to-slate-900/80",
+                "border-slate-700/40",
+                "col-span-12",
+                "sm:col-span-10 sm:col-start-2",
+                "lg:col-span-7 lg:col-start-auto lg:row-span-4",
+                "xl:col-span-6 xl:col-start-2",
+                "2xl:col-span-5 2xl:col-start-3"
+              )}
+              depth={0}
+            >
+              <Div3D depth={0} className="absolute top-0">
+                <img src="/static/landing/conversation_1.png" />
+              </Div3D>
+              <Div3D depth={50}>
+                <img src="/static/landing/conversation_0.png" />
+              </Div3D>
+              <Div3D depth={25} className="absolute top-0">
+                <img src="/static/landing/conversation_2.png" />
+              </Div3D>
+              <Div3D depth={50} className="absolute top-0">
+                <img src="/static/landing/conversation_3.png" />
+              </Div3D>
+            </Hover3D>
+            {/* <ReactiveImg
               className={classNames(
                 "col-span-12",
                 "sm:col-span-10 sm:col-start-2",
@@ -237,7 +268,7 @@ export default function Home({
               )}
             >
               <img src="/static/landing/conversation.png" />
-            </ReactiveImg>
+            </ReactiveImg> */}
             <div
               ref={scrollRef0}
               id="sectionProduct"
diff --git a/front/public/static/landing/conversation_0.png b/front/public/static/landing/conversation_0.png
new file mode 100644
index 000000000000..62a685fe0a20
Binary files /dev/null and b/front/public/static/landing/conversation_0.png differ
diff --git a/front/public/static/landing/conversation_1.png b/front/public/static/landing/conversation_1.png
new file mode 100644
index 000000000000..b53d10c7c419
Binary files /dev/null and b/front/public/static/landing/conversation_1.png differ
diff --git a/front/public/static/landing/conversation_2.png b/front/public/static/landing/conversation_2.png
new file mode 100644
index 000000000000..10e4600e16a8
Binary files /dev/null and b/front/public/static/landing/conversation_2.png differ
diff --git a/front/public/static/landing/conversation_3.png b/front/public/static/landing/conversation_3.png
new file mode 100644
index 000000000000..07e370891a16
Binary files /dev/null and b/front/public/static/landing/conversation_3.png differ
diff --git a/sparkle/src/_index.ts b/sparkle/src/_index.ts
index ac1e32611b4d..c8224b2720d7 100644
--- a/sparkle/src/_index.ts
+++ b/sparkle/src/_index.ts
@@ -94,18 +94,26 @@ export { PageHeader };
 
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
+  LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,
+  LogoHorizontalColorLayer2 as LogoHorizontalColorLogoLayer2,
   LogoHorizontalDark as LogoHorizontalDarkLogo,
   LogoHorizontalWhite as LogoHorizontalWhiteLogo,
   LogoSquareColor as LogoSquareColorLogo,
+  LogoSquareColorLayer1 as LogoSquareColorLogoLayer1,
+  LogoSquareColorLayer2 as LogoSquareColorLogoLayer2,
   LogoSquareDark as LogoSquareDarkLogo,
   LogoSquareWhite as LogoSquareWhiteLogo,
 } from "./logo/dust";
 
 export {
   LogoHorizontalColorLogo,
+  LogoHorizontalColorLogoLayer1,
+  LogoHorizontalColorLogoLayer2,
   LogoHorizontalDarkLogo,
   LogoHorizontalWhiteLogo,
   LogoSquareColorLogo,
+  LogoSquareColorLogoLayer1,
+  LogoSquareColorLogoLayer2,
   LogoSquareDarkLogo,
   LogoSquareWhiteLogo,
 };
diff --git a/sparkle/src/logo/dust/LogoHorizontalColorLayer1.tsx b/sparkle/src/logo/dust/LogoHorizontalColorLayer1.tsx
new file mode 100644
index 000000000000..f7d6445392ca
--- /dev/null
+++ b/sparkle/src/logo/dust/LogoHorizontalColorLayer1.tsx
@@ -0,0 +1,29 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoHorizontalColorLayer1 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 96 24"
+    {...props}
+  >
+    <path fill="#FCD34D" d="M84 0H72v24h12V0Z" />
+    <path
+      fill="#6EE7B7"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z"
+    />
+    <path
+      fill="#F9A8D4"
+      d="M36 24c6.627 0 12-5.373 12-12S42.627 0 36 0 24 5.373 24 12s5.373 12 12 12Z"
+    />
+    <path
+      fill="#7DD3FC"
+      fillRule="evenodd"
+      d="M48 24V12h12a6 6 0 0 1 0 12H48Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLogoHorizontalColorLayer1;
diff --git a/sparkle/src/logo/dust/LogoHorizontalColorLayer2.tsx b/sparkle/src/logo/dust/LogoHorizontalColorLayer2.tsx
new file mode 100644
index 000000000000..951bed2d2aa3
--- /dev/null
+++ b/sparkle/src/logo/dust/LogoHorizontalColorLayer2.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoHorizontalColorLayer2 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 96 24"
+    {...props}
+  >
+    <path fill="#10B981" d="M12 0H0v24h12V0Z" />
+    <path fill="#F87171" d="M48 0H24v12h24V0Z" />
+    <path
+      fill="#3B82F6"
+      fillRule="evenodd"
+      d="M60 12a6 6 0 0 1 0-12h36v12H60Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+export default SvgLogoHorizontalColorLayer2;
diff --git a/sparkle/src/logo/dust/LogoSquareColorLayer1.tsx b/sparkle/src/logo/dust/LogoSquareColorLayer1.tsx
new file mode 100644
index 000000000000..8869095a11da
--- /dev/null
+++ b/sparkle/src/logo/dust/LogoSquareColorLayer1.tsx
@@ -0,0 +1,29 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoSquareColorLayer1 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path fill="#FCD34D" d="M36 24H24v24h12V24Z" />
+    <path
+      fill="#7DD3FC"
+      fillRule="evenodd"
+      d="M0 48V36h12a6 6 0 0 1 0 12H0Z"
+      clipRule="evenodd"
+    />
+    <path
+      fill="#6EE7B7"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Z"
+    />
+    <path
+      fill="#F9A8D4"
+      d="M36 24c6.627 0 12-5.373 12-12S42.627 0 36 0 24 5.373 24 12s5.373 12 12 12Z"
+    />
+  </svg>
+);
+export default SvgLogoSquareColorLayer1;
diff --git a/sparkle/src/logo/dust/LogoSquareColorLayer2.tsx b/sparkle/src/logo/dust/LogoSquareColorLayer2.tsx
new file mode 100644
index 000000000000..7f08afac42a2
--- /dev/null
+++ b/sparkle/src/logo/dust/LogoSquareColorLayer2.tsx
@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgLogoSquareColorLayer2 = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 48 48"
+    {...props}
+  >
+    <path
+      fill="#3B82F6"
+      fillRule="evenodd"
+      d="M12 36a6 6 0 0 1 0-12h36v12H12Z"
+      clipRule="evenodd"
+    />
+    <path fill="#10B981" d="M12 0H0v24h12V0Z" />
+    <path fill="#F87171" d="M48 0H24v12h24V0Z" />
+  </svg>
+);
+export default SvgLogoSquareColorLayer2;
diff --git a/sparkle/src/logo/dust/index.ts b/sparkle/src/logo/dust/index.ts
index 12f0f6d576e7..a09243089062 100644
--- a/sparkle/src/logo/dust/index.ts
+++ b/sparkle/src/logo/dust/index.ts
@@ -1,6 +1,10 @@
 export { default as LogoHorizontalColor } from "./LogoHorizontalColor";
+export { default as LogoHorizontalColorLayer1 } from "./LogoHorizontalColorLayer1";
+export { default as LogoHorizontalColorLayer2 } from "./LogoHorizontalColorLayer2";
 export { default as LogoHorizontalDark } from "./LogoHorizontalDark";
 export { default as LogoHorizontalWhite } from "./LogoHorizontalWhite";
 export { default as LogoSquareColor } from "./LogoSquareColor";
+export { default as LogoSquareColorLayer1 } from "./LogoSquareColorLayer1";
+export { default as LogoSquareColorLayer2 } from "./LogoSquareColorLayer2";
 export { default as LogoSquareDark } from "./LogoSquareDark";
 export { default as LogoSquareWhite } from "./LogoSquareWhite";
diff --git a/sparkle/src/logo/src/dust/logoHorizontalColor_layer1.svg b/sparkle/src/logo/src/dust/logoHorizontalColor_layer1.svg
new file mode 100644
index 000000000000..0cc27f2479f5
--- /dev/null
+++ b/sparkle/src/logo/src/dust/logoHorizontalColor_layer1.svg
@@ -0,0 +1,6 @@
+<svg width="96" height="24" viewBox="0 0 96 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M84 0H72V24H84V0Z" fill="#FCD34D"/>
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#6EE7B7"/>
+<path d="M36 24C42.6274 24 48 18.6274 48 12C48 5.37258 42.6274 0 36 0C29.3726 0 24 5.37258 24 12C24 18.6274 29.3726 24 36 24Z" fill="#F9A8D4"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48 24V12H60C63.3137 12 66 14.6863 66 18C66 21.3137 63.3137 24 60 24H48Z" fill="#7DD3FC"/>
+</svg>
diff --git a/sparkle/src/logo/src/dust/logoHorizontalColor_layer2.svg b/sparkle/src/logo/src/dust/logoHorizontalColor_layer2.svg
new file mode 100644
index 000000000000..d758ae35739d
--- /dev/null
+++ b/sparkle/src/logo/src/dust/logoHorizontalColor_layer2.svg
@@ -0,0 +1,5 @@
+<svg width="96" height="24" viewBox="0 0 96 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 0H0V24H12V0Z" fill="#10B981"/>
+<path d="M48 0H24V12H48V0Z" fill="#F87171"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M60 12C56.6863 12 54 9.31371 54 6C54 2.68629 56.6863 0 60 0H96V12H60Z" fill="#3B82F6"/>
+</svg>
diff --git a/sparkle/src/logo/src/dust/logoSquareColor_layer1.svg b/sparkle/src/logo/src/dust/logoSquareColor_layer1.svg
new file mode 100644
index 000000000000..5e3d7e0f1cb0
--- /dev/null
+++ b/sparkle/src/logo/src/dust/logoSquareColor_layer1.svg
@@ -0,0 +1,6 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M36 24H24V48H36V24Z" fill="#FCD34D"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 48V36H12C15.3137 36 18 38.6863 18 42C18 45.3137 15.3137 48 12 48H0Z" fill="#7DD3FC"/>
+<path d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z" fill="#6EE7B7"/>
+<path d="M36 24C42.6274 24 48 18.6274 48 12C48 5.37258 42.6274 0 36 0C29.3726 0 24 5.37258 24 12C24 18.6274 29.3726 24 36 24Z" fill="#F9A8D4"/>
+</svg>
diff --git a/sparkle/src/logo/src/dust/logoSquareColor_layer2.svg b/sparkle/src/logo/src/dust/logoSquareColor_layer2.svg
new file mode 100644
index 000000000000..7fa6a0a22997
--- /dev/null
+++ b/sparkle/src/logo/src/dust/logoSquareColor_layer2.svg
@@ -0,0 +1,5 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 36C8.68629 36 6 33.3137 6 30C6 26.6863 8.68629 24 12 24H48V36H12Z" fill="#3B82F6"/>
+<path d="M12 0H0V24H12V0Z" fill="#10B981"/>
+<path d="M48 0H24V12H48V0Z" fill="#F87171"/>
+</svg>
diff --git a/sparkle/src/stories/Logo.stories.tsx b/sparkle/src/stories/Logo.stories.tsx
index 864bc27bc820..b1ad2560b7e2 100644
--- a/sparkle/src/stories/Logo.stories.tsx
+++ b/sparkle/src/stories/Logo.stories.tsx
@@ -1,10 +1,14 @@
 import React from "react";
 
+import { Div3D, Hover3D, LogoSquareColorLogoLayer2 } from "..";
 import {
   LogoHorizontalColor,
+  LogoHorizontalColorLayer1,
+  LogoHorizontalColorLayer2,
   LogoHorizontalDark,
   LogoHorizontalWhite,
   LogoSquareColor,
+  LogoSquareColorLayer1,
   LogoSquareDark,
   LogoSquareWhite,
 } from "../logo/dust";
@@ -76,5 +80,34 @@ export const DustLogo = () => (
         </div>
       </div>
     </div>
+
+    <div style={gridStyle}>
+      <div className="s-p-6">
+        <Hover3D className="s-relative s-h-8 s-w-32">
+          <Div3D depth={0} className="s-h-8 s-w-32">
+            <LogoHorizontalColorLayer1 className="s-h-8 s-w-32" />
+          </Div3D>
+          <Div3D depth={25} className="s-absolute s-top-0">
+            <LogoHorizontalColorLayer2 className=" s-h-8 s-w-32" />
+          </Div3D>
+        </Hover3D>
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          Horizontal Hover3D
+        </div>
+      </div>
+      <div className="s-p-6">
+        <Hover3D className="s-relative s-h-16 s-w-16">
+          <Div3D depth={0} className="s-h-16 s-w-16">
+            <LogoSquareColorLayer1 className="s-h-16 s-w-16" />
+          </Div3D>
+          <Div3D depth={25} className="s-absolute s-top-0">
+            <LogoSquareColorLogoLayer2 className=" s-h-16 s-w-16" />
+          </Div3D>
+        </Hover3D>
+        <div style={itemStyle as React.CSSProperties} className="s-text-sm">
+          Square Hover3D
+        </div>
+      </div>
+    </div>
   </>
 );