diff --git a/components/languageSelector/LanguageSelect.js b/components/languageSelector/LanguageSelect.js
index b8d931a7d6f..99d8a68baba 100644
--- a/components/languageSelector/LanguageSelect.js
+++ b/components/languageSelector/LanguageSelect.js
@@ -8,11 +8,11 @@ export default function LanguageSelect({
     return (
         <select data-testid="Select-form"
             onChange={(ev) => onChange(ev.target.value)}
-            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-indigo-500 ${className}`)}
+            className={twMerge(`form-select h-full py-0 px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`)}
             value={selected}
         >
             {options.map((option, index) => (
-                <option key={index} selected={option.value === selected} value={option.value} data-testid="Option-form">
+                <option key={index} value={option.value} data-testid="Option-form">
                     {option.text}
                 </option>
             ))}
diff --git a/components/link.js b/components/link.js
index de49d3b1895..053277db8c9 100644
--- a/components/link.js
+++ b/components/link.js
@@ -1,22 +1,47 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { defaultLanguage, languages } from "../lib/i18n";
+import i18nPaths from "../lib/i18nPaths";
 
 const LinkComponent = ({ children, locale, ...props }) => {
   const router = useRouter();
+
+  // If there is no router available (e.g., during server-side rendering & cypress tests), render a standard Link
+  if (!router) {
+    return (
+      <Link href={props.href} passHref>
+        {children}
+      </Link>
+    );
+  }
+
   const { pathname, query, asPath } = router;
 
-  // Detect current language
+  // Detect current language based on the path or query parameter
   const slug = asPath.split("/")[1];
   const langSlug = languages.includes(slug) && slug;
   const language = query.lang || langSlug || defaultLanguage;
 
   let href = props.href || pathname;
 
+  /* 
+  If explicit href is provided, and the language-specific paths for the current language do not include the href, or if the href starts with "http", render a standard Link 
+  */
+  if ((props.href && i18nPaths[language] && !i18nPaths[language].includes(href)) || href.includes("http", 0)) {
+    return (
+      <Link href={href} passHref>
+        {children}
+      </Link>
+    );
+  }
+
+  // If a locale is provided, update the href with the locale
   if (locale) {
     if (props.href) {
       href = `/${locale}${href}`;
     } else {
+      // If the current path starts with "/404", update href to be the root path with the locale
+      // Otherwise, replace "[lang]" placeholder with the locale
       if (pathname.startsWith("/404")) {
         href = `/${locale}`;
       } else {
@@ -24,6 +49,7 @@ const LinkComponent = ({ children, locale, ...props }) => {
       }
     }
   } else {
+    // If no locale is provided, update the href with the current language or keep it as is
     if (language) {
       href = `/${language}${href}`;
     } else {
diff --git a/components/navigation/MenuBlocks.js b/components/navigation/MenuBlocks.js
index 6feae5ce56d..f9caa326820 100644
--- a/components/navigation/MenuBlocks.js
+++ b/components/navigation/MenuBlocks.js
@@ -1,6 +1,6 @@
+import LinkComponent from '../link';
 import Paragraph from '../typography/Paragraph';
 import Label from './Label'
-import Link from 'next/link'
 import { useRouter } from 'next/router';
 
 
@@ -14,7 +14,7 @@ export default function MenuBlocks ({
         items.map((item, index) => {
           const isExternalHref = item.href && item.href.startsWith('http');
           return (
-            <Link href={item.comingSoon ? '' : item.href} key={index}>
+            <LinkComponent href={item.comingSoon ? '' : item.href} key={index}>
               <a data-testid="MenuBlocks-Link"
                                 className={`flex items-start p-3 -m-3 space-x-4 transition duration-150 ease-in-out rounded-lg  ${router.asPath === item.href ? 'bg-secondary-100 shadow-sm': 'hover:bg-gray-50'}`}
                 target={isExternalHref ? "_blank" : undefined} 
@@ -32,7 +32,7 @@ export default function MenuBlocks ({
                   </Paragraph>
                 </div>
               </a>
-            </Link>
+            </LinkComponent>
           )
         })
       }
diff --git a/components/navigation/NavBar.js b/components/navigation/NavBar.js
index fa5f55f59b9..bf7079f845f 100644
--- a/components/navigation/NavBar.js
+++ b/components/navigation/NavBar.js
@@ -20,12 +20,9 @@ import {
   useTranslation,
 } from "../../lib/i18n";
 import browserLanguageDetector from "../../lib/browserLanguageDetector";
+import i18nPaths from "../../lib/i18nPaths";
 
 const isMobile = isMobileDevice();
-const uniqueLangs = [...new Set(["EN", "DE"])].map((repo) => ({
-  key: repo,
-  text: repo,
-}));
 
 export default function NavBar({
   className = '',
@@ -37,10 +34,46 @@ export default function NavBar({
   const [mobileMenuOpen, setMobileMenuOpen] = useState();
   const { i18n } = useTranslation();
 
+  /**
+ * Retrieves unique language options based on the current path and i18nPaths configuration.
+ *
+ * @returns {string[]} - An array of unique language options in uppercase.
+ */
+  const getUniqueLangs = () => {
+    let pathnameWithoutLocale = pathname;
+
+    // Check if the pathname includes "/[lang]", if so, replace it with an empty string
+    if (pathname && pathname.includes("/[lang]")) {
+      pathnameWithoutLocale = pathname.replace("/[lang]", "");
+    }
+
+    // Filter unique languages based on i18nPaths that include the modified pathnameWithoutLocale
+    let uniqueLangs = Object.keys(i18nPaths).filter(lang => i18nPaths[lang].includes(pathnameWithoutLocale)).map(lang => lang.toUpperCase());
+
+    // If no unique languages are found, default to ["EN"]
+    return uniqueLangs.length === 0 ? ["EN"] : uniqueLangs;
+  }
+
+  const uniqueLangs = getUniqueLangs().map((lang) => ({
+    key: lang,
+    text: lang,
+    value: lang
+  }));
+
+  /**
+ * Changes the language and updates the URL accordingly.
+ *
+ * @async
+ * @param {string} locale - The new locale/language to set.
+ * @param {boolean} langPicker - Indicates whether the change is from the language picker.
+ *                              If true, stores the language in local storage.
+ * @returns {Promise<void>} - A promise representing the completion of the language change.
+ * @throws {Error} - If an error occurs during the language change process.
+ */
   const changeLanguage = async (locale, langPicker) => {
 
     // Verifies if the language change is from langPicker or the browser-api
-    if(langPicker){
+    if (langPicker) {
       localStorage.setItem('i18nLang', locale);
     }
 
@@ -71,11 +104,6 @@ export default function NavBar({
     router.push(href);
   };
 
-  // To be enabled on the last PR
-  // useEffect(() => {
-  //   changeLanguage(browserLanguageDetector(), false);
-  // }, []);
-
   function outsideClick(menu) {
     if (open !== menu) return;
     setOpen(null);
@@ -179,14 +207,14 @@ export default function NavBar({
             </SearchButton>
 
             {/* // Language Picker Component */}
-            {/* <LanguageSelect
+            <LanguageSelect
               options={uniqueLangs}
               onChange={(value) => {
                 changeLanguage(value.toLowerCase(), true);
               }}
               className=""
-              selected={i18n.language.toLocaleUpperCase()}
-            /> */}
+              selected={i18n.language ? i18n.language.toUpperCase() : "EN"}
+            />
 
             <GithubButton text="Star on GitHub" href="https://github.com/asyncapi/spec" className="py-2 ml-2" inNav="true" />
           </div>
diff --git a/lib/i18nPaths.js b/lib/i18nPaths.js
new file mode 100644
index 00000000000..138b598cea6
--- /dev/null
+++ b/lib/i18nPaths.js
@@ -0,0 +1,12 @@
+const i18nPaths = {
+    en: [
+        "", //Homepage Route
+        "/tools/cli"
+    ],
+    de: [
+        "", //Homepage Route
+        "/tools/cli"
+    ]
+};
+
+export default i18nPaths;
\ No newline at end of file
diff --git a/pages/index.js b/pages/index.js
index 67f9185d492..c5bc7fed2b3 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,261 +1,24 @@
-import Container from '../components/layout/Container'
 import NavBar from '../components/navigation/NavBar'
-import Hero from '../components/Hero'
-import NewsletterSubscribe from '../components/NewsletterSubscribe'
-import Sponsors from '../components/sponsors/Sponsors'
 import Head from '../components/Head'
-import Slack from '../components/slack'
-import Button from '../components/buttons/Button'
-import Calendar from '../components/Calendar'
-import AdidasLogo from '../components/logos/Adidas'
-import AxwayLogo from '../components/logos/Axway'
-import SlackLogo from '../components/logos/Slack'
-import SalesforceLogo from '../components/logos/Salesforce'
-import SapLogo from '../components/logos/SAP'
-import Testimonial from '../components/Testimonial'
-import Heading from '../components/typography/Heading'
-import Paragraph from '../components/typography/Paragraph'
-import TextLink from '../components/typography/TextLink'
-import GoldSponsors from '../components/sponsors/GoldSponsors'
-import SilverSponsors from '../components/sponsors/SilverSponsors'
-import SupportUs from '../components/SupportUs/SupportUs'
 import StickyNavbar from '../components/navigation/StickyNavbar'
-import GoogleCalendarButton from '../components/buttons/GoogleCalendarButton';
-import ICSFileButton from '../components/buttons/ICSFileButton';
-import SubscribeButton from '../components/buttons/SubscribeButton';
-import NewsroomSection from '../components/newsroom/NewsroomSection'
 import { languageDetection } from "../lib/i18n";
 
 function HomePage() {
-  //To be enabled in a future PR
-  //languageDetection();
+  const loader = 'img/loaders/loader.png'; // preloader image for the tools
+  languageDetection();
+
   return (
     <>
       <Head />
       <StickyNavbar>
         <NavBar className="max-w-screen-xl block px-4 sm:px-6 lg:px-8 mx-auto" />
       </StickyNavbar>
-
-      <main id="main-content" className="scroll-mt-5">
-        <Container wide>
-          <Hero className="mb-24" />
-        </Container>
-
-        <Container className="text-center pb-12" wide as="section">
-          <Heading
-            level="h3"
-            typeStyle="heading-lg"
-            className="mb-4"
-          >
-            Adopted by the world leading brands
-          </Heading>
-          <Paragraph className="mt-2 mb-20 md:w-2/3 md:mx-auto">
-            These brands are already using AsyncAPI in production. Is your company using AsyncAPI and wants to be included in this list?
-            <TextLink href="https://github.com/asyncapi/website/issues/new" target="_blank">
-              Let us know here!
-            </TextLink>
-          </Paragraph>
-          <ul className="md:grid md:gap-8 md:grid-cols-2 lg:grid-cols-5">
-            <li className="justify-center flex">
-              <AdidasLogo className="h-8 text-gray-400 hover:text-black" />
-            </li>
-            <li className="justify-center flex">
-              <AxwayLogo className="mt-12 md:-mt-5 lg:-mt-5 h-14 text-gray-400 group hover:text-black" />
-            </li>
-            <li className="justify-center flex">
-              <SlackLogo className="mt-12 md:mt-2 lg:-mt-1 h-10 text-gray-400 hover:text-black group" />
-            </li>
-            <li className="justify-center flex">
-              <SalesforceLogo className="mt-12 md:mt-2 lg:-mt-4 h-16 text-gray-400" />
-            </li>
-            <li className="justify-center flex">
-              <SapLogo className="mt-12 md:mt-2 lg:-mt-2 h-12 text-gray-400" />
-            </li>
-          </ul>
-        </Container>
-
-        <div className="bg-dark py-12 mt-8">
-          <Container wide as="section">
-            <NewsletterSubscribe dark />
-          </Container>
+      <div className="h-screen">
+        <div className="flex animate-pulse w-fit mx-auto my-60 gap-4 text-black">
+          <img src={loader} className="mx-auto w-16" />
+          <div className="text-xl my-auto">Loading...</div>
         </div>
-
-        <Container className="text-center py-12" wide as="section">
-          <Heading
-            level="h3"
-            typeStyle="heading-lg"
-            className="mb-4"
-          >
-            Join our great community!
-          </Heading>
-          <Paragraph className="mt-2 md:w-1/2 md:mx-auto">
-            We're a community of great people who are passionate about AsyncAPI and event-driven architectures.
-          </Paragraph>
-          <div className="py-2 lg:py-12">
-            <Container wide>
-              <div className="lg:flex">
-                <div className="mt-10 lg:mt-0 lg:w-1/2">
-                  <Slack />
-                </div>
-                <section className="lg:text-left lg:max-w-xl lg:w-1/2 lg:ml-12">
-                  <div className="mt-5">
-                    <Heading level="h4" typeStyle="heading-md-semibold">
-                      Join our Slack workspace
-                    </Heading>
-                    <Paragraph className="mt-2">
-                      We welcome everyone to join our Slack workspace. If you have a question on how to use AsyncAPI, want to contribute, or simply want to say hello 👋 &nbsp;you're welcome to join us. We're nice people 🙂
-                    </Paragraph>
-                  </div>
-                  <div className="mt-5 flex justify-center lg:justify-start">
-                    <Button className="w-full md:w-auto" text="Join us!" href="/slack-invite" />
-                  </div>
-                </section>
-              </div>
-
-              <div className="mt-12 lg:flex lg:flex-row-reverse">
-                <section className="mt-10 lg:mt-0 lg:flex-1">
-                  <Calendar size="2" className="float-left" />
-                </section>
-                <section className="lg:text-left lg:max-w-xl lg:mr-12">
-                  <div className="mt-5 lg:mr-12">
-                    <Heading level="h3" typeStyle="heading-md-semibold">
-                      Join our public meetings
-                    </Heading>
-                    <Paragraph className="mt-2">
-                      AsyncAPI hosts different meetings every week. They are focused on different topic, sometimes purely technical and sometimes about community building. Pick one and join us!
-
-                      <TextLink href="/community/meetings">
-                        Learn more about our meetings.
-                      </TextLink>
-                    </Paragraph>
-                    <ul className="mt-5 md:flex justify-center">
-                      <li>
-                        <GoogleCalendarButton href="https://calendar.google.com/calendar/u/3?cid=Y19xOXRzZWlnbG9tZHNqNm5qdWh2YnB0czExY0Bncm91cC5jYWxlbmRhci5nb29nbGUuY29t" />
-                      </li>
-                      <li>
-                        <SubscribeButton
-                          href="/community/meetings"
-                          className="mt-2 md:mt-0 md:ml-2"
-                        />
-                      </li>
-                      <li>
-                        <ICSFileButton
-                          href="https://calendar.google.com/calendar/ical/c_q9tseiglomdsj6njuhvbpts11c%40group.calendar.google.com/public/basic.ics"
-                          className="mt-2 md:mt-0 md:ml-2"
-                        />
-                      </li>
-                    </ul>
-                  </div>
-                </section>
-              </div>
-            </Container>
-            <Container wide>
-              <NewsroomSection />
-            </Container>
-          </div>
-
-        </Container>
-
-
-        <section className="pb-20" role="contentinfo" aria-label='Our Sponsors'>
-          <Container className="text-center pb-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-lg"
-              className="mb-4"
-            >
-              Platinum Sponsors
-            </Heading>
-            <Sponsors className="mt-4" showSupportBanner={ false } />
-          </Container>
-
-          <Container className="text-center pb-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-lg"
-              className="mb-4"
-            >
-              Gold Sponsors
-            </Heading>
-            <GoldSponsors className="mt-4" showSupportBanner={ false } />
-          </Container>
-
-          <Container className="text-center pyb-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-lg"
-              className="mb-4"
-            >
-              Silver Sponsors
-            </Heading>
-            <SilverSponsors className="mt-4" showSupportBanner={ false } />
-          </Container>
-
-
-          <Container className="text-center py-6" wide as="section">
-            <Heading
-              level="h3"
-              typeStyle="heading-md-semibold"
-              className="mb-4"
-            >
-              Want to Sponsor Us?
-            </Heading>
-            <Paragraph className="mt-2 md:w-1/2 md:mx-auto">
-              These great organizations are already supporting AsyncAPI. Want to become a sponsor?
-              <TextLink href="https://opencollective.com/asyncapi" target="_blank">
-                Support us!
-              </TextLink>
-            </Paragraph>
-          </Container>
-        </section>
-        <Container className="text-center py-6 pb-20" wide>
-          <Heading level="h3" typeStyle="heading-lg" className="mb-4">
-            Supported by
-          </Heading>
-          <Paragraph className="mt-3 max-w-2xl mx-auto sm:mt-4 pb-4">
-            The following companies support us by letting us use their products for free. Interested in supporting us too?
-            <TextLink href="mailto:info@asyncapi.io" target="_blank">
-              Email us
-            </TextLink> for more info.
-          </Paragraph>
-          <SupportUs className="mt-4" showSupportBanner={ false } />
-        </Container>
-        <Container className="text-center pb-20 mt-8" wide as="section">
-          <Heading level="h3" typeStyle="heading-lg" className="mb-4">
-            What the experts are saying
-          </Heading>
-          <ul className="max-w-screen-xl mx-auto md:grid md:grid-cols-2 md:px-6 lg:px-8">
-            <Testimonial
-              className="md:pr-10 lg:pr-16"
-              text="Microservices underline the need for event-based communication in distributed architectures. AsyncAPI brings the richness of the REST API ecosystem to asynchronous APIs."
-              authorAvatar="/img/testimonials/matt-mclarty.jpg"
-              authorName="Matt McLarty"
-              authorDescription="Global Leader of API Strategy at MuleSoft"
-            />
-            <Testimonial
-              className="md:pl-10 lg:pl-16"
-              text="Event-driven APIs need love too! AsyncAPI brings the many benefits of a machine/human readable specification to these nuanced approaches."
-              authorAvatar="/img/testimonials/bill-doerrfeld.jpg"
-              authorName="Bill Doerrfeld"
-              authorDescription="Editor in Chief at Nordic APIs"
-            />
-            <Testimonial
-              className="md:pr-10 lg:pr-16"
-              text="Developers need to be able to quickly and consistently create event-driven applications that provide business value and react to customer needs in realtime. I can't count how many times I've heard developers ask for OpenAPI/Swagger style tools for the asynchronous and event driven world, and that is exactly what the AsyncAPI initiative is making a reality."
-              authorAvatar="/img/testimonials/jonathan-schabowsky.jpg"
-              authorName="Jonathan Schabowsky"
-              authorDescription="Sr. Architect, Office of the CTO at Solace"
-            />
-            <Testimonial
-              className="md:pl-10 lg:pl-16"
-              text="We’ve been focusing on event-driven APIs since 2014 and thank the AsyncAPI contributors everyday for driving the community towards common standards."
-              authorAvatar="/img/testimonials/eric-horesnyi.jpg"
-              authorName="Eric Horesnyi"
-              authorDescription="CEO at Streamdata.io"
-            />
-          </ul>
-        </Container>
-      </main>
+      </div>
     </>
   )
 }