diff --git a/pages/tools/generator.tsx b/pages/tools/generator.tsx
index 0453fddf0656..ef2867ba7fe1 100644
--- a/pages/tools/generator.tsx
+++ b/pages/tools/generator.tsx
@@ -42,6 +42,7 @@ function renderButtons(): JSX.Element {
 export default function GeneratorPage() {
   const description = 'Generate documentation, code, and more out of your AsyncAPI files with the Generator.';
   const image = '/img/social/generator-card.jpg';
+  const generatorimage = '/img/diagrams/generator.webp';
 
   return (
     <GenericLayout title='Generator' description={description} image={image} wide>
@@ -52,6 +53,7 @@ export default function GeneratorPage() {
               Docs, Code, Anything!
             </Heading>
             <Paragraph className='mt-4'>{description}</Paragraph>
+            <img src={generatorimage} alt='generator diagram' className=' mx-auto h-auto lg:w-1/2 object-cover' />
           </div>
 
           <div className='relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:items-center lg:gap-8'>
diff --git a/public/img/diagrams/generator.webp b/public/img/diagrams/generator.webp
new file mode 100644
index 000000000000..a6fca393d4ba
Binary files /dev/null and b/public/img/diagrams/generator.webp differ