diff --git a/modelina-website/src/pages/index.tsx b/modelina-website/src/pages/index.tsx
index b51846d951..d4e90b8583 100644
--- a/modelina-website/src/pages/index.tsx
+++ b/modelina-website/src/pages/index.tsx
@@ -10,7 +10,7 @@ import Image from 'next/image';
 
 export default function Index() {
   const description =
-    'Sometimes you just want to generate data models for your payload. Modelina is a library for generating data models based on inputs such as AsyncAPI, OpenAPI, or JSON Schema documents.';
+    'Modelina is a library for generating data models based on inputs such as AsyncAPI, OpenAPI, or JSON Schema documents.';
   const image = '/img/social/modelina-card.jpg';
 
   return (
@@ -22,84 +22,95 @@ export default function Index() {
     >
       <div className="py-16 overflow-hidden lg:py-24">
         <div className="relative text-center">
-          <Heading level="h1" typeStyle="heading-lg">
-            Modelina
+          <Heading level="h1" typeStyle="heading-xl" className="mb-4">
+            Generate data models for payload
           </Heading>
           <Paragraph className="mt-4 max-w-3xl mx-auto">
             {description}
           </Paragraph>
         </div>
 
-        <div className="relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
-          <div className="relative mb-8 lg:mt-8">
-            <Heading level="h4" typeStyle="heading-md-semibold">
-              AsyncAPI Cli
-            </Heading>
-            <Paragraph className="mt-3 lg:pr-4">
-              Get started immediately with Modelina through the AsyncAPI Cli.
-            </Paragraph>
-            <div className="mt-8">
-              <CodeBlock
-                language="generator-cli"
-                showLineNumbers={false}
-                className="mt-8"
-                textSizeClassName="text-sm"
-              >
-                asyncapi generate models typescript ./asyncapi.json
-              </CodeBlock>
+        <div className="relative text-center mt-12">
+          <Heading level="h1" typeStyle="heading-lg">
+            How to get started
+          </Heading>
+          <Paragraph className="mt-4 max-w-3xl mx-auto">
+            You can use through the AsyncAPI CLI or install it as a library.
+          </Paragraph>
+        </div>
+
+        <div className='md:grid md:grid-cols-2 md:gap-8 md:items-start'>
+          <div className="relative grid md:gap-8 md:items-center">
+            <div className="relative hidden md:block md:mt-8 h-[300px]">
+              <Image
+                src={'/img/card/cli-card.jpg'}
+                fill
+                sizes='100%'
+                alt={'CLI card'}
+              />
+            </div>
+            <div className="relative mb-8 overflow-x-auto">
+              <Heading level="h4" typeStyle="heading-md-semibold">
+                AsyncAPI CLI
+              </Heading>
+              <Paragraph className="mt-3 md:pr-4">
+                Get started immediately with Modelina through the AsyncAPI CLI or by installing it as a library.
+              </Paragraph>
               <div className="mt-8">
-                <GithubButton
-                  className="block md:mt-0 md:inline-block w-full sm:w-auto mt-8"
-                  href="https://github.com/asyncapi/cli"
-                />
+                <CodeBlock
+                  language="generator-cli"
+                  showLineNumbers={false}
+                  className="mt-8"
+                  textSizeClassName="text-sm"
+                >
+                  asyncapi generate models typescript ./asyncapi.json
+                </CodeBlock>
+                <div className="mt-8">
+                  <GithubButton
+                    className="block md:mt-0 md:inline-block w-full sm:w-auto mt-8"
+                    href="https://github.com/asyncapi/cli"
+                  />
+                </div>
               </div>
             </div>
           </div>
-          <div className="relative lg:mt-8 h-full">
-            <Image
-              src={'/img/card/cli-card.jpg'}
-              fill
-              sizes='100vw'
-              alt={'CLI card'}
-            />
-          </div>
-        </div>
 
-        <div className="relative mt-12 lg:mt-20 lg:grid lg:grid-cols-2 lg:gap-8 lg:items-center">
-          <div className="relative mb-8 lg:mt-8">
-            <Heading level="h4" typeStyle="heading-md-semibold">
-              Installation
-            </Heading>
-            <Paragraph className="mt-3 lg:pr-4">
-              Install Modelina as a library to take full control.
-            </Paragraph>
-            <div className="mt-8">
-              <CodeBlock
-                language="bash"
-                showLineNumbers={false}
-                className="mt-8"
-                textSizeClassName="text-sm"
-              >
-                npm install @asyncapi/modelina
-              </CodeBlock>
+          <div className="relative grid md:gap-8 md:items-center">
+            <div className="relative hidden md:block md:mt-8 h-[300px]">
+              <Image
+                src={'/img/card/modelina-card.jpg'}
+                fill
+                sizes='100%'
+                alt={'Modelina card'}
+              />
+            </div>
+            <div className="relative mb-8">
+              <Heading level="h4" typeStyle="heading-md-semibold">
+                Installation
+              </Heading>
+              <Paragraph className="mt-3 lg:pr-4">
+                Install Modelina as a library to take full control.
+              </Paragraph>
               <div className="mt-8">
-                <Button
-                  className="hidden mt-2 md:mt-0 lg:inline-block md:ml-2"
-                  text="Try The Playground"
-                  href="/playground"
-                  icon={<IconRocket className="inline-block -mt-1 w-6 h-6" />}
-                />
+                <CodeBlock
+                  language="bash"
+                  showLineNumbers={false}
+                  className="mt-8"
+                  textSizeClassName="text-sm"
+                >
+                  npm install @asyncapi/modelina
+                </CodeBlock>
+                <div className="mt-8">
+                  <Button
+                    className="hidden mt-2 md:mt-0 lg:inline-block md:ml-2"
+                    text="Try The Playground"
+                    href="/playground"
+                    icon={<IconRocket className="inline-block -mt-1 w-6 h-6" />}
+                  />
+                </div>
               </div>
             </div>
           </div>
-          <div className="relative lg:mt-8 h-full">
-            <Image
-              src={'/img/card/modelina-card.jpg'}
-              fill
-              sizes='100vw'
-              alt={'Modelina card'}
-            />
-          </div>
         </div>
 
         <div className="relative text-center mt-12">
@@ -114,24 +125,22 @@ export default function Index() {
           </Paragraph>
         </div>
 
-        <div className="relative lg:mt-20 lg:items-center">
-          <table className="min-w-full relative lg:mt-8">
-            <tbody>
-              <tr className="border-b">
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <b>
-                    Modelina lets you generate data models from many types of{' '}
-                    <a href="#inputs">inputs</a>
-                  </b>
-                </td>
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <CodeBlock
-                    language="typescript"
-                    showLineNumbers={false}
-                    className="mt-8"
-                    textSizeClassName="text-sm"
-                  >
-                    {`const asyncapi = ...
+        <table className="flex flex-col mt-8 md:mt-20">
+          <tbody>
+            <tr className='border-b mt-6 md:mt-0 flex flex-col md:flex-row-reverse'>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2 flex justify-center items-center">
+                <b>
+                  Modelina lets you generate data models from many types of{' '}
+                  <a href="#inputs" className='italic underline underline-offset-2'>inputs</a>
+                </b>
+              </td>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2">
+                <CodeBlock
+                  language="typescript"
+                  showLineNumbers={false}
+                  textSizeClassName="text-sm"
+                >
+                  {`const asyncapi = ...
 const jsonschema = ...
 const openapi = ...
 const metamodel = ...
@@ -139,48 +148,50 @@ const metamodel = ...
 const models = await generator.generate(
   asyncapi | jsonschema | openapi | metamodel
 );`}
-                  </CodeBlock>
-                </td>
-              </tr>
-              <tr className="border-b">
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <b>
-                    Use the same inputs across a range of different{' '}
-                    <a href="#outputs">generators</a>
-                  </b>
-                </td>
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <CodeBlock
-                    language="typescript"
-                    showLineNumbers={false}
-                    className="mt-8"
-                    textSizeClassName="text-sm"
-                  >
-                    {`const generator = new TypeScriptGenerator();
+                </CodeBlock>
+              </td>
+            </tr>
+
+            <tr className='border-b mt-6 md:mt-0 flex flex-col md:flex-row'>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2 flex justify-center items-center">
+                <b>
+                  Use the same inputs across a range of different{' '}
+                  <a href="#outputs" className='italic underline underline-offset-2'>generators</a>
+                </b>
+              </td>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2">
+                <CodeBlock
+                  language="typescript"
+                  showLineNumbers={false}
+                  textSizeClassName="text-sm"
+                >
+                  {`const generator = new TypeScriptGenerator();
 const generator = new CsharpGenerator();
 const generator = new JavaGenerator();
 const generator = new RustGenerator();
 ...
 const models = await generator.generate(input);`}
-                  </CodeBlock>
-                </td>
-              </tr>
-              <tr className="border-b">
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
+                </CodeBlock>
+              </td>
+            </tr>
+
+            <tr className='border-b mt-6 md:mt-0 flex flex-col md:flex-row-reverse'>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2 flex justify-center items-center">
+                <p>
                   <b>Easily let you interact with the generated models.</b>-
                   Want to show the generated models on a website? Sure! - Want
                   to generate the models into files? Sure! - Want to combine all
                   the models into one single file? Sure! Whatever interaction
                   you need, you can create.
-                </td>
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <CodeBlock
-                    language="typescript"
-                    showLineNumbers={false}
-                    className="mt-8"
-                    textSizeClassName="text-sm"
-                  >
-                    {`const models = await generator.generate(input);
+                </p>
+              </td>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2">
+                <CodeBlock
+                  language="typescript"
+                  showLineNumbers={false}
+                  textSizeClassName="text-sm"
+                >
+                  {`const models = await generator.generate(input);
 for (const model in models) { 
   const generatedCode = generatedModel.result;
   const dependencies = generatedModel.dependencies;
@@ -188,26 +199,25 @@ for (const model in models) {
   const modelName = generatedModel.modelName;
   ...
 }`}
-                  </CodeBlock>
-                </td>
-              </tr>
-              <tr className="border-b">
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <b>
-                    Easily modify how models are{' '}
-                    <a href="./docs/constraints.md">constrained</a> into the
-                    output
-                  </b>
-                </td>
+                </CodeBlock>
+              </td>
+            </tr>
 
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <CodeBlock
-                    language="typescript"
-                    showLineNumbers={false}
-                    className="mt-8"
-                    textSizeClassName="text-sm"
-                  >
-                    {`const generator = new TypeScriptGenerator({
+            <tr className='border-b mt-6 md:mt-0 flex flex-col md:flex-row'>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2 flex justify-center items-center">
+                <b>
+                  Easily modify how models are{' '}
+                  <a href="./docs/constraints.md" className='italic underline underline-offset-2'>constrained</a> into the
+                  output
+                </b>
+              </td>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2">
+                <CodeBlock
+                  language="typescript"
+                  showLineNumbers={false}
+                  textSizeClassName="text-sm"
+                >
+                  {`const generator = new TypeScriptGenerator({
   constraints: {
     modelName: ({modelName}) => {
       // Implement your own constraining logic
@@ -215,28 +225,27 @@ for (const model in models) {
     }
   }
 });`}
-                  </CodeBlock>
-                </td>
-              </tr>
-              <tr className="border-b">
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <b>
-                    Seamlessly layer additional or replacement code{' '}
-                    <a href="./docs/presets.md">
-                      on top of each other to customize the models
-                    </a>{' '}
-                    to your use-case
-                  </b>
-                </td>
+                </CodeBlock>
+              </td>
+            </tr>
 
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <CodeBlock
-                    language="typescript"
-                    showLineNumbers={false}
-                    className="mt-8"
-                    textSizeClassName="text-sm"
-                  >
-                    {`const generator = new TypeScriptGenerator({
+            <tr className='border-b mt-6 md:mt-0 flex flex-col md:flex-row-reverse'>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2 flex justify-center items-center">
+                <b>
+                  Seamlessly layer additional or replacement code{' '}
+                  <a href="./docs/presets.md" className='italic underline underline-offset-2'>
+                    on top of each other to customize the models
+                  </a>{' '}
+                  to your use-case
+                </b>
+              </td>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2">
+                <CodeBlock
+                  language="typescript"
+                  showLineNumbers={false}
+                  textSizeClassName="text-sm"
+                >
+                  {`const generator = new TypeScriptGenerator({
   presets: [
     {
       class: {
@@ -251,27 +260,26 @@ public myCustomFunction(): string {
   ]
 });
 const models = await generator.generate(input);`}
-                  </CodeBlock>
-                </td>
-              </tr>
-              <tr className="border-b">
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <b>
-                    Seamlessly lets you{' '}
-                    <a href="./docs/presets.md">
-                      combine multiple layers of additional or replacement code
-                    </a>
-                  </b>
-                </td>
+                </CodeBlock>
+              </td>
+            </tr>
 
-                <td className="text-sm text-gray-900 font-light px-6 py-4">
-                  <CodeBlock
-                    language="typescript"
-                    showLineNumbers={false}
-                    className="mt-8"
-                    textSizeClassName="text-sm"
-                  >
-                    {`const myCustomFunction1 = {
+            <tr className='border-b mt-6 md:mt-0 flex flex-col md:flex-row'>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2 flex justify-center items-center">
+                <b>
+                  Seamlessly lets you{' '}
+                  <a href="./docs/presets.md" className='italic underline underline-offset-2'>
+                    combine multiple layers of additional or replacement code
+                  </a>
+                </b>
+              </td>
+              <td className="text-sm text-gray-900 font-light px-6 py-4 md:w-1/2">
+                <CodeBlock
+                  language="typescript"
+                  showLineNumbers={false}
+                  textSizeClassName="text-sm"
+                >
+                  {`const myCustomFunction1 = {
   class: {
     additionalContent({ content }) {
       return \`\${content}
@@ -289,12 +297,11 @@ const generator = new TypeScriptGenerator({
   ]
 });
 const models = await generator.generate(input);`}
-                  </CodeBlock>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
+                </CodeBlock>
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </div>
     </GenericLayout>
   );