diff --git a/pages/tools/generator.tsx b/pages/tools/generator.tsx
index 0453fddf065..4b96b92c960 100644
--- a/pages/tools/generator.tsx
+++ b/pages/tools/generator.tsx
@@ -42,7 +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.png';
   return (
     <GenericLayout title='Generator' description={description} image={image} wide>
       <div className='overflow-hidden py-12'>
@@ -52,6 +52,8 @@ export default function GeneratorPage() {
               Docs, Code, Anything!
             </Heading>
             <Paragraph className='mt-4'>{description}</Paragraph>
+            <img src={generatorimage} alt="generator" className=' mx-auto h-auto 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.png b/public/img/diagrams/generator.png
new file mode 100644
index 00000000000..5e45a178ff5
Binary files /dev/null and b/public/img/diagrams/generator.png differ