diff --git a/images/navigation/product-switcher-dark.png b/images/navigation/product-switcher-dark.png
new file mode 100644
index 000000000..010004fab
Binary files /dev/null and b/images/navigation/product-switcher-dark.png differ
diff --git a/images/navigation/product-switcher-light.png b/images/navigation/product-switcher-light.png
new file mode 100644
index 000000000..1de32e163
Binary files /dev/null and b/images/navigation/product-switcher-light.png differ
diff --git a/organize/navigation.mdx b/organize/navigation.mdx
index f94b015e8..91d9db521 100644
--- a/organize/navigation.mdx
+++ b/organize/navigation.mdx
@@ -321,6 +321,16 @@ In the `navigation` object, `dropdowns` is an array where each entry is an objec
 
 ## Products
 
+<img
+  className="block dark:hidden pointer-events-none"
+  src="/images/navigation/product-switcher-light.png"
+/>
+
+<img
+  className="hidden dark:block pointer-events-none"
+  src="/images/navigation/product-switcher-dark.png"
+/>
+
 Products create a dedicated navigation division for organizing product-specific documentation. Use products to separate different offerings, services, or major feature sets within your documentation.
 
 In the `navigation` object, `products` is an array where each entry is an object that requires a `product` field and can contain other navigation fields such as groups, pages, icons, or links to external pages.