diff --git a/frontend/apps/editor3d/app/public/resources/gifs/artcraft-3d-demo.gif b/frontend/apps/editor3d/app/public/resources/gifs/artcraft-3d-demo.gif
new file mode 100644
index 0000000000..01a1100be1
Binary files /dev/null and b/frontend/apps/editor3d/app/public/resources/gifs/artcraft-3d-demo.gif differ
diff --git a/frontend/apps/editor3d/app/public/resources/gifs/artcraft-canvas-demo.gif b/frontend/apps/editor3d/app/public/resources/gifs/artcraft-canvas-demo.gif
new file mode 100644
index 0000000000..39473b9a4d
Binary files /dev/null and b/frontend/apps/editor3d/app/public/resources/gifs/artcraft-canvas-demo.gif differ
diff --git a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
index 0cc159a5df..f5c39d3bd9 100644
--- a/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
+++ b/frontend/apps/editor3d/app/src/components/signaled/TopBar/TopBar.tsx
@@ -43,11 +43,17 @@ const appMenuTabs: MenuIconItem[] = [
     id: "2D",
     label: "2D Canvas",
     icon: <FontAwesomeIcon icon={faPaintbrush} />,
+    imageSrc: "/resources/gifs/artcraft-canvas-demo.gif",
+    description: "Easy edits. Great for graphic design.",
+    large: true,
   },
   {
     id: "3D",
     label: "3D Editor",
     icon: <FontAwesomeIcon icon={faCube} />,
+    imageSrc: "/resources/gifs/artcraft-3d-demo.gif",
+    description: "Precision control. Great for AI film.",
+    large: true,
   },
   {
     id: "IMAGE",
diff --git a/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx b/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx
index 6f8d6c9bf4..b02d4f82a1 100644
--- a/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx
+++ b/frontend/libs/components/menu-icon-selector/src/lib/menu-icon-selector.tsx
@@ -6,6 +6,9 @@ export interface MenuIconItem {
   id: string;
   label: string;
   icon: React.ReactNode;
+  imageSrc?: string;
+  description?: string;
+  large?: boolean;
 }
 
 interface MenuIconSelectorProps {
@@ -114,7 +117,12 @@ export const MenuIconSelector: React.FC<MenuIconSelectorProps> = ({
             position="bottom"
             delay={100}
             closeOnClick={true}
-            className="font-medium"
+            className={twMerge(
+              "text-sm font-semibold",
+              item.large && "text-md"
+            )}
+            imageSrc={item.imageSrc || undefined}
+            description={item.description || undefined}
           >
             <button
               ref={(el) => {
diff --git a/frontend/libs/components/tooltip/src/lib/tooltip.tsx b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
index f069a00c92..e2bccb6c79 100644
--- a/frontend/libs/components/tooltip/src/lib/tooltip.tsx
+++ b/frontend/libs/components/tooltip/src/lib/tooltip.tsx
@@ -9,6 +9,8 @@ interface TooltipProps {
   className?: string;
   delay?: number;
   closeOnClick?: boolean;
+  imageSrc?: string;
+  description?: string;
 }
 
 export const Tooltip = ({
@@ -18,6 +20,8 @@ export const Tooltip = ({
   className,
   delay = 300,
   closeOnClick = false,
+  imageSrc,
+  description,
 }: TooltipProps) => {
   const [isShowing, setIsShowing] = useState(false);
   const triggerRef = useRef<HTMLDivElement>(null);
@@ -142,7 +146,19 @@ export const Tooltip = ({
             className ? className : ""
           )}
         >
-          {content}
+          <div className="flex flex-col gap-1">
+            {content}
+            {imageSrc && (
+              <img
+                src={imageSrc}
+                alt="tooltip"
+                className="mb-1 max-h-40 w-auto rounded-md"
+              />
+            )}
+            {description && (
+              <p className="text-sm text-white font-normal">{description}</p>
+            )}
+          </div>
         </div>
       </Transition>
     </div>