diff --git a/components/buttons/GithubButton.js b/components/buttons/GithubButton.js
index 31f8cf4322b..1375efd9bf9 100644
--- a/components/buttons/GithubButton.js
+++ b/components/buttons/GithubButton.js
@@ -1,17 +1,21 @@
 import Button from './Button'
 import IconGithub from '../icons/Github'
+import { useTranslation } from '../../lib/i18n'
 
 export default function GithubButton({
-  text = 'View on Github',
+  text = 'githubButton',
   href = 'https://github.com/asyncapi',
   target = '_blank',
   iconPosition = 'left',
   className,
   inNav = "false"
 }) {
+
+  const { t } = useTranslation("common");
+
   return (
     <Button
-      text={text}
+      text={t(text)}
       icon={<IconGithub className="inline-block -mt-1 w-6 h-6" />}
       href={href}
       iconPosition={iconPosition}
diff --git a/cypress/test/buttons/GithubButton.cy.js b/cypress/test/buttons/GithubButton.cy.js
index 270d0ec4f99..3007018305a 100644
--- a/cypress/test/buttons/GithubButton.cy.js
+++ b/cypress/test/buttons/GithubButton.cy.js
@@ -3,7 +3,7 @@ import GithubButton from '../../../components/buttons/GithubButton'
 describe('GithubButton', () => {
     it('renders correctly with default props', () => {
       mount(<GithubButton />);
-      cy.contains('View on Github').should('be.visible');
+      cy.contains('githubButton').should('be.visible');
       cy.get('[ data-testid="Button-link"]').should('have.attr', 'href', 'https://github.com/asyncapi');
       cy.get('[ data-testid="Button-link"]').should('have.attr', 'target', '_blank');
 });
diff --git a/locales/de/common.json b/locales/de/common.json
index c51ee2d695b..61ee0a72562 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -15,6 +15,7 @@
     "googleCalendarBtn": "Zu Google Kalender hinzufügen",
     "subscribeBtn": "Abonnieren",
     "icsFileBtn": "ICS-Datei herunterladen",
+    "githubButton": "Ansicht auf Github",
     "calendar": {
         "title": "Kommende Veranstaltungen",
         "viewCalendarBtn": "Kalender ansehen",
diff --git a/locales/de/tools.json b/locales/de/tools.json
new file mode 100644
index 00000000000..afd8e189d75
--- /dev/null
+++ b/locales/de/tools.json
@@ -0,0 +1,25 @@
+{
+    "cli": {
+        "title": "Interagieren Sie mit der AsyncAPI bequem von Ihrer CLI aus",
+        "description": "Interagieren Sie mit der AsyncAPI bequem von Ihrer CLI aus",
+        "installationTitle": "Installation und Verwendung",
+        "installationDescription": "Verwenden Sie AsyncAPI CLI innerhalb von Sekunden, indem Sie einen unserer Befehle auswählen, um loszulegen.",
+        "docsButton": "Docs anzeigen",
+        "installingTitle": "Installation von",
+        "exampleTitle": "Beispiel",
+        "exampleDescription": "Erstellen Sie eine neue AsyncAPI-Datei",
+        "featuresTitle": "Eigenschaften",
+        "featuresDescription": "Verwenden Sie das AsyncAPI-CLI-Tool, um Ihre AsyncAPI-Dateien zu erstellen, zu entwickeln und zu pflegen.",
+        "features": {
+            "new-files.name": "Neue Dateien",
+            "new-files.description": "Verwenden Sie das CLI-Tool, um schnell neue AsyncAPI-Dateien zu erstellen. Wählen Sie aus einer Reihe von Vorlagen (MQTT, WebSockets, Kafka und mehr).",
+            "validate.name": "Validieren Sie",
+            "validate.description": "Validieren Sie Ihre AsyncAPI-Dokumente mit der CLI. Erhalten Sie schnelles Feedback, um zu überprüfen, ob Ihr AsyncAPI-Dokument das richtige Format hat.",
+            "open-studio.name": "Offenes Atelier",
+            "open-studio.description_pretext": "Haben Sie eine lokale AsyncAPI-Datei? Führen Sie  aus.",
+            "open-studio.description_posttext": "um unser Studio in Sekundenschnelle zu öffnen",
+            "open-source.name": "Offene Quelle",
+            "open-source.description": "Alle unsere Tools sind quelloffen. Sie können gerne neue Befehle beisteuern oder bei der Weiterentwicklung der bestehenden helfen."
+        }
+    }
+}
\ No newline at end of file
diff --git a/locales/en/common.json b/locales/en/common.json
index f2834c3d411..500a90540e2 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -15,6 +15,7 @@
     "googleCalendarBtn": "Add to Google Calendar",
     "subscribeBtn": "Subscribe",
     "icsFileBtn": "Download ICS File",
+    "githubButton": "View on Github",
     "calendar": {
         "title": "Upcoming events",
         "viewCalendarBtn": "View Calendar",
diff --git a/locales/en/tools.json b/locales/en/tools.json
new file mode 100644
index 00000000000..8a0f10a99da
--- /dev/null
+++ b/locales/en/tools.json
@@ -0,0 +1,25 @@
+{
+    "cli": {
+        "title": "Interact with AsyncAPI from the comfort of your CLI",
+        "description": "Create, validate, and explore your AsyncAPI files with our CLI tool.",
+        "installationTitle": "Installation & Usage",
+        "installationDescription": "Start using AsyncAPI CLI within seconds by selecting one of our commands to get started.",
+        "docsButton": "View Docs",
+        "installingTitle": "Installing",
+        "exampleTitle": "Example",
+        "exampleDescription": "Create a new AsyncAPI file",
+        "featuresTitle": "Features",
+        "featuresDescription": "Use the AsyncAPI CLI tool to help you create, develop, and maintain your AsyncAPI files.",
+        "features": {
+            "new-files.name": "New files",
+            "new-files.description": "Use the CLI tool to quickly create new AsyncAPI files. Select from a range of templates (MQTT, WebSockets, Kafka, and more.)",
+            "validate.name": "Validate",
+            "validate.description": "Validate your AsyncAPI documents with the CLI. Quickly get feedback to verify your AsyncAPI document is within the correct format.",
+            "open-studio.name": "Open Studio",
+            "open-studio.description_pretext": "Got an AsyncAPI file locally? Run",
+            "open-studio.description_posttext": "to open our studio in seconds.",
+            "open-source.name": "Open Source",
+            "open-source.description": "All our tools are open source, feel free to contribute new commands or help evolve our existing ones."
+        }
+    }
+}
\ No newline at end of file
diff --git a/next-i18next-static-site.config.js b/next-i18next-static-site.config.js
index d601a062f82..f5c974fc3ff 100644
--- a/next-i18next-static-site.config.js
+++ b/next-i18next-static-site.config.js
@@ -2,7 +2,7 @@ module.exports = {
     i18n: {
         languages: ["en", "de"],
         defaultLanguage: "en",
-        namespaces: ["landing-page", "common"],
+        namespaces: ["landing-page", "common", "tools"],
         defaultNamespace: "landing-page",
     },
 };
\ No newline at end of file
diff --git a/pages/[lang]/tools/cli.js b/pages/[lang]/tools/cli.js
new file mode 100644
index 00000000000..7c0813e4db6
--- /dev/null
+++ b/pages/[lang]/tools/cli.js
@@ -0,0 +1,242 @@
+import GenericLayout from '../../../components/layout/GenericLayout';
+import GithubButton from '../../../components/buttons/GithubButton';
+
+import {
+    DocumentAddIcon,
+    BadgeCheckIcon,
+    GlobeIcon,
+    CodeIcon,
+} from '@heroicons/react/outline';
+
+import CodeBlock from '../../../components/editor/CodeBlock';
+import Heading from '../../../components/typography/Heading';
+import Paragraph from '../../../components/typography/Paragraph';
+import DocsButton from '../../../components/buttons/DocsButton';
+import Button from '../../../components/buttons/Button';
+import {
+    getAllLanguageSlugs,
+    getLanguage, useTranslation
+} from '../../../lib/i18n';
+
+const features = [
+    {
+        name: 'cli.features.new-files.name',
+        description: () => {
+            const { t } = useTranslation('tools');
+            return t("cli.features.new-files.description");
+        },
+        icon: DocumentAddIcon,
+    },
+    {
+        name: 'cli.features.validate.name',
+        description: () => {
+            const { t } = useTranslation('tools');
+            return t("cli.features.validate.description");
+        },
+        icon: BadgeCheckIcon,
+    },
+    {
+        name: 'cli.features.open-studio.name',
+        // eslint-disable-next-line react/display-name
+        description: () => {
+            const { t } = useTranslation('tools');
+            return (
+                <>
+                    {t("cli.features.open-studio.description_pretext")}{' '}
+                    <code className=" px-1 py-0.5 bg-gray-200 text-gray-900 rounded font-mono text-sm">
+                        asyncapi start studio
+                    </code>{' '}
+                    {t("cli.features.open-studio.description_posttext")}
+                </>)
+        },
+        icon: CodeIcon,
+    },
+    {
+        name: 'cli.features.open-source.name',
+        description: () => {
+            const { t } = useTranslation('tools');
+            return t("cli.features.open-source.description");
+        },
+        icon: GlobeIcon,
+    },
+];
+
+export default function CliPage() {
+
+    const { t } = useTranslation('tools');
+
+    function renderButtons() {
+        return (
+            <div className="mt-8">
+                <GithubButton
+                    className="block mt-2 md:mt-0 md:inline-block w-full sm:w-auto"
+                    href="https://www.github.com/asyncapi/cli"
+                />
+                <Button text={t("cli.docsButton")} href="/docs/tools/cli" className="ml-2 block mt-2 md:mt-0 md:inline-block w-full sm:w-auto" />
+            </div>
+        );
+    }
+
+    const description =
+        'cli.description';
+    const image = '/img/social/cli-card.jpg';
+
+    const getPkgCode = () => {
+        return `# Download latest PKG file\ncurl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.pkg\n# Install application on MacOS\nsudo installer -pkg asyncapi.pkg -target /`;
+    };
+
+    const setUpWin = () => {
+        return `# Download latest asyncapi.x64.exe for 64-bit Windows\n https://github.com/asyncapi/cli/releases/latest/download/asyncapi.x64.exe\n# Download asyncapi.x86.exe for 32-bit Windows\n https://github.com/asyncapi/cli/releases/latest/download/asyncapi.x86.exe`;
+    };
+
+    const setUpLinux = () => {
+        return `# For Debian based distros, you can install the AsycAPI CLI using the dpkg package manager for Debian\ncurl -OL https://github.com/asyncapi/cli/releases/latest/download/asyncapi.deb\n# To download a specific release of the CLI, run this command in your terminal\ncurl -OL https://github.com/asyncapi/cli/releases/download/<replace this with the specific CLI version e.g v0.13.0>/asyncapi.deb /`;
+    };
+
+
+    return (
+        <GenericLayout title="CLI" description={description} image={image} wide>
+            <div className="py-12 overflow-hidden">
+                <div className="relative max-w-xl mx-auto px-4 sm:px-6 lg:px-8 lg:max-w-screen-xl">
+                    <div className="relative">
+                        <Heading level="h1" typeStyle="heading-lg" className="text-center">
+                            <span className="hidden md:block">
+                                {t("cli.title")}
+                            </span>
+                            <span className="md:hidden">AsyncAPI CLI</span>
+                        </Heading>
+                        <Paragraph className="mt-4 max-w-3xl mx-auto text-center">
+                            {t(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 lg:mt-8">
+                            <Heading level="h4" typeStyle="heading-md-semibold">
+                                {t("cli.installationTitle")}
+                            </Heading>
+                            <Paragraph className="mt-3 lg:pr-4">
+                                {t("cli.installationDescription")}
+                            </Paragraph>
+                            {renderButtons()}
+                        </div>
+
+                        <div className="relative w-full mt-8 mx-auto space-y-10">
+                            <div>
+                                <Heading level="h3" typeStyle="heading-sm-semibold" className="mb-4 text-center md:text-left">
+                                    {t("cli.installingTitle")}
+                                </Heading>
+                                <CodeBlock
+                                    language="generator-cli"
+                                    textSizeClassName="text-sm"
+                                    className="shadow-lg"
+                                    codeBlocks={[
+                                        {
+                                            language: 'npm',
+                                            code: `npm install -g @asyncapi/cli`,
+                                        },
+                                        {
+                                            language: 'brew',
+                                            code: `brew install asyncapi`
+                                        },
+                                        {
+                                            language: '.pkg',
+                                            code: getPkgCode()
+                                        },
+                                        {
+                                            language: 'windows',
+                                            code: setUpWin()
+                                        },
+                                        {
+                                            language: 'linux',
+                                            code: setUpLinux()
+                                        }
+                                    ]}
+                                />
+                            </div>
+
+                            <div>
+                                <Heading level="h3" typeStyle="heading-sm-semibold" className="text-center md:text-left">
+                                    {t("cli.exampleTitle")}
+                                </Heading>
+                                <div className="space-y-5">
+                                    <div>
+                                        <Paragraph typeStyle="body-md" className="mb-4">
+                                            {t("cli.exampleDescription")}
+                                        </Paragraph>
+                                        <CodeBlock
+                                            language="generator-cli"
+                                            textSizeClassName="text-sm"
+                                            className="shadow-lg"
+                                            codeBlocks={[
+                                                {
+                                                    language: 'npm',
+                                                    code: `asyncapi new`,
+                                                },
+                                            ]}
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="lg:py-12 bg-white mt-20">
+                        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                            <div className="text-center mb-16">
+                                <Heading level="h2" typeStyle="heading-md-semibold">
+                                    {t("cli.featuresTitle")}
+                                </Heading>
+                                <Paragraph className="mt-3 text-center lg:pr-4 max-w-lg mx-auto">
+                                    {t("cli.featuresDescription")}
+                                </Paragraph>
+                            </div>
+
+                            <div className="mt-10">
+                                <dl className=" md:grid lg:grid-cols-2 lg:space-y-0">
+                                    {features.map(({ description: Description, ...feature }) => (
+                                        <div key={feature.name} className="relative mb-10">
+                                            <dt>
+                                                <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-secondary-100 text-gray-900 border border-gray-900">
+                                                    <feature.icon
+                                                        className="h-6 w-6"
+                                                        aria-hidden="true"
+                                                    />
+                                                </div>
+                                                <Heading level="h4" typeStyle="heading-sm-semibold" className="ml-16">
+                                                    {t(feature.name)}
+                                                </Heading>
+                                            </dt>
+                                            <dd className="mt-2 ml-16 pr-10">
+                                                <Paragraph typeStyle="body-md">
+                                                    <Description />
+                                                </Paragraph>
+                                            </dd>
+                                        </div>
+                                    ))}
+                                </dl>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="mt-16 text-center">{renderButtons()}</div>
+                </div>
+            </div>
+        </GenericLayout>
+    );
+}
+
+export async function getStaticPaths() {
+    const paths = getAllLanguageSlugs();
+    return {
+        paths,
+        fallback: false,
+    };
+}
+
+export async function getStaticProps({ params }) {
+    const language = getLanguage(params.lang);
+    return {
+        props: {
+            language,
+        },
+    };
+}