diff --git a/next.config.mjs b/next.config.mjs
index b5482b54..96158e0c 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -23,7 +23,7 @@ const nextConfig = {
     return [
       {
         source: '/',
-        destination: '/docs/introduction',
+        destination: '/docs/introductions',
         permanent: true,
       },
     ]
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index a7ccdc7d..ad8518be 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -70,10 +70,10 @@ export const Header = forwardRef(function Header({ className }, ref) {
           <ul role="list" className="flex items-center gap-8">
             <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
             <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
-            <TopLevelNavItem href="/users">API</TopLevelNavItem>
+            <TopLevelNavItem href="/introductions">API</TopLevelNavItem>
             <TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
             <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
-            <TopLevelNavItem href="#">Support</TopLevelNavItem>
+            <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>
           </ul>
         </nav>
         <div className="hidden md:block md:h-5 md:w-px md:bg-zinc-900/10 md:dark:bg-white/15" />
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index 82414418..39a32a2d 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -388,11 +388,11 @@ export function Navigation(props) {
     <nav {...props}>
       <ul role="list">
         <TopLevelNavItem href="https://netbird.io/">Home</TopLevelNavItem>
-        <TopLevelNavItem href="/docs/introduction">Docs</TopLevelNavItem>
-        <TopLevelNavItem href="/api/introduction">API</TopLevelNavItem>
+        <TopLevelNavItem href="/docs/introductions">Docs</TopLevelNavItem>
+        <TopLevelNavItem href="/introductions">API</TopLevelNavItem>
         <TopLevelNavItem href="https://netbird.io/blog/">Blog</TopLevelNavItem>
         <TopLevelNavItem href="https://github.com/netbirdio/netbird">Github</TopLevelNavItem>
-        <TopLevelNavItem href="#">Support</TopLevelNavItem>
+        <TopLevelNavItem href="https://join.slack.com/t/netbirdio/shared_invite/zt-vrahf41g-ik1v7fV8du6t0RwxSrJ96A">Support</TopLevelNavItem>
         {
           router.route.startsWith('/docs') && docsNavigation.map((group, groupIndex) => (
           <NavigationGroup
diff --git a/src/pages/docs/introductions.mdx b/src/pages/docs/introductions.mdx
index 574b2f4d..89e7c595 100644
--- a/src/pages/docs/introductions.mdx
+++ b/src/pages/docs/introductions.mdx
@@ -12,7 +12,7 @@ export const sections = [
 
 <HeroPattern />
 
-# API Documentation
+# NetBirds Super Awesome Docs Landing Page
 
 Use the Protocol API to access contacts, conversations, group messages, and more and seamlessly integrate your product into the workflows of dozens of devoted Protocol users. {{ className: 'lead' }}
 
diff --git a/src/pages/introductions.mdx b/src/pages/introductions.mdx
new file mode 100644
index 00000000..3081f080
--- /dev/null
+++ b/src/pages/introductions.mdx
@@ -0,0 +1,39 @@
+import { Guides } from '@/components/Guides'
+import { Resources } from '@/components/Resources'
+import { HeroPattern } from '@/components/HeroPattern'
+
+export const description =
+  'Learn everything there is to know about the Protocol API and integrate Protocol into your product.'
+
+export const sections = [
+  { title: 'Guides', id: 'guides' },
+  { title: 'Resources', id: 'resources' },
+]
+
+<HeroPattern />
+
+# NetBirds Super Awesome API Landing Page
+
+Use the Protocol API to access contacts, conversations, group messages, and more and seamlessly integrate your product into the workflows of dozens of devoted Protocol users. {{ className: 'lead' }}
+
+<div className="not-prose mb-16 mt-6 flex gap-3">
+  <Button href="/quickstart" arrow="right" children="Quickstart" />
+  <Button href="/sdks" variant="outline" children="Explore SDKs" />
+</div>
+
+## Getting started {{ anchor: false }}
+
+To get started, create a new application in your [developer settings](#), then read about how to make requests for the resources you need to access using our HTTP APIs or dedicated client SDKs. When your integration is ready to go live, publish it to our [integrations directory](#) to reach the Protocol community. {{ className: 'lead' }}
+
+<div className="not-prose">
+  <Button
+    href="/sdks"
+    variant="text"
+    arrow="right"
+    children="Get your API key"
+  />
+</div>
+
+<Guides />
+
+<Resources />