diff --git a/nuxtjs.org/components/AButton.vue b/nuxtjs.org/components/AButton.vue
index db1408189..e17dfdbd9 100644
--- a/nuxtjs.org/components/AButton.vue
+++ b/nuxtjs.org/components/AButton.vue
@@ -109,6 +109,7 @@ export default defineComponent({
     },
     isExternal() {
       if (!this.to) return false
+
       const isInternal = typeof this.to !== 'string' || (this.to.startsWith('/') && this.to.startsWith('//') === false)
 
       return !isInternal
diff --git a/nuxtjs.org/components/BlogpostList.vue b/nuxtjs.org/components/BlogpostList.vue
index 1325028c6..46492bc40 100644
--- a/nuxtjs.org/components/BlogpostList.vue
+++ b/nuxtjs.org/components/BlogpostList.vue
@@ -8,7 +8,7 @@
         :title="post.title"
         :description="post.description"
         :image="post.imgUrl"
-        :slug="post.slug"
+        :href="post.to"
         :category="post.category"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
diff --git a/nuxtjs.org/components/ContentCardTemplate.vue b/nuxtjs.org/components/ContentCardTemplate.vue
index 48e320ba9..8cecb224a 100644
--- a/nuxtjs.org/components/ContentCardTemplate.vue
+++ b/nuxtjs.org/components/ContentCardTemplate.vue
@@ -1,23 +1,30 @@
 <template>
   <article class="flex flex-col shadow rounded-lg overflow-hidden dark:bg-secondary-darkest">
     <div class="aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
-      <NuxtLink :to="`/blog/${slug}`">
+      <Link :to="href">
         <NuxtImg :src="image" width="864" height="378" :alt="title" />
-      </NuxtLink>
+      </Link>
     </div>
+
     <div v-if="tags.length" class="px-4 mb-1">
       <span v-for="(tag, i) in tags" :key="tag" class="text-gray-400 dark:text-cloud font-medium text-sm">
         <span>{{ tag }}</span>
         <span v-if="(i === 0 && tags.length > 1) || i !== tags.length - 1"> – </span>
       </span>
     </div>
+
     <div v-else-if="category" class="px-4 mb-1">
       <span class="text-gray-400 dark:text-cloud font-medium text-sm">{{ category }}</span>
     </div>
+
     <h1 class="font-bold text-body-xl mb-2 px-4">
-      <NuxtLink :to="`/blog/${slug}`">{{ title }}</NuxtLink>
+      <Link :to="href">
+        {{ title }}
+      </Link>
     </h1>
+
     <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
+
     <slot name="footer" />
   </article>
 </template>
@@ -39,7 +46,7 @@ export default defineComponent({
       type: String,
       default: ''
     },
-    slug: {
+    href: {
       type: String,
       default: ''
     },
diff --git a/nuxtjs.org/components/HeaderNavigation.vue b/nuxtjs.org/components/HeaderNavigation.vue
index ef5223f56..0e56124f8 100644
--- a/nuxtjs.org/components/HeaderNavigation.vue
+++ b/nuxtjs.org/components/HeaderNavigation.vue
@@ -1,58 +1,67 @@
 <template>
-  <div class="relative w-full h-full flex items-center justify-center">
-    <ul class="flex space-x-12 h-full">
-      <li
-        v-for="link in headerLinks"
-        :key="link.slug"
-        class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center"
-      >
-        <NuxtLink
-          :to="`/${link.slug}/${link.slug.includes('blog') ? '' : link.children[0].slug || ''}`"
-          :class="{
-            'text-primary': currentSlug === link.slug,
-            'hover:d-primary-text-hover': currentSlug !== link.slug
-          }"
-        >
-          {{ link.title }}
-        </NuxtLink>
-      </li>
-      <li class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center">
-        <NuxtLink to="/resources" class="hover:d-primary-text-hover"> Resources </NuxtLink>
-      </li>
-      <li class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center">
-        <a
-          href="https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link"
-          class="hover:d-primary-text-hover"
-          target="_blank"
-          rel="noopener"
-        >
-          Video Courses
-        </a>
-      </li>
-    </ul>
-  </div>
+  <nav class="relative w-full h-full flex items-center justify-center space-x-12">
+    <Link
+      v-for="{ title, href, slug } in links"
+      :key="slug"
+      class="relative capitalize font-medium flex flex-col items-center justify-center space-y-1 text-center"
+      :to="href"
+      :class="{
+        'text-primary': currentSlug === slug,
+        'hover:d-primary-text-hover': currentSlug !== slug
+      }"
+    >
+      {{ title }}
+    </Link>
+  </nav>
 </template>
 
 <script>
-import { computed, defineComponent, useRoute, useContext } from '@nuxtjs/composition-api'
+import { computed, defineComponent, useRoute } from '@nuxtjs/composition-api'
 
 export default defineComponent({
+  props: {
+    links: {
+      type: Array,
+      required: false,
+      default: () => [
+        {
+          title: 'Docs',
+          slug: 'docs',
+          href: '/docs'
+        },
+        {
+          title: 'Examples',
+          slug: 'examples',
+          href: '/examples'
+        },
+        {
+          title: 'Resources',
+          slug: 'resources',
+          href: '/resources'
+        },
+        {
+          title: 'Blog',
+          slug: 'blog',
+          href: '/blog'
+        },
+        {
+          title: 'Video Courses',
+          slug: 'video-courses',
+          href: 'https://masteringnuxt.com/?utm_source=nuxt&utm_medium=link&utm_campaign=navbar_link'
+        }
+      ]
+    }
+  },
   setup() {
-    // @ts-ignore
-    const { $docus } = useContext()
-
     const route = useRoute()
-    const currentNav = computed(() => $docus.get({ depth: 1 }).links)
-    // computed
-    const headerLinks = computed(() => currentNav.value.filter(link => link.slug !== '' && link.children.length))
 
     const currentSlug = computed(() => {
       return route.value.path !== '/' && route?.value?.params?.pathMatch
         ? route.value.params.pathMatch.split('/')[0]
         : null
     })
+
     return {
-      headerLinks,
       currentSlug
     }
   }
diff --git a/nuxtjs.org/components/HomeDiscoverPartners.vue b/nuxtjs.org/components/HomeDiscoverPartners.vue
index 9f5b11e89..b34676c69 100644
--- a/nuxtjs.org/components/HomeDiscoverPartners.vue
+++ b/nuxtjs.org/components/HomeDiscoverPartners.vue
@@ -50,6 +50,7 @@ export default defineComponent({
         .where({ tier: { $in: ['MVP Partners', 'Partners'] } })
         .fetch()
     })
+
     return {
       partners
     }
diff --git a/nuxtjs.org/components/MMarketingLink.vue b/nuxtjs.org/components/MMarketingLink.vue
index 0252fdaa0..0ceafc1a1 100644
--- a/nuxtjs.org/components/MMarketingLink.vue
+++ b/nuxtjs.org/components/MMarketingLink.vue
@@ -6,6 +6,7 @@
     :to="`${to}`"
   >
     {{ name }}
+
     <Component :is="icon" class="ml-2 h-5 w-5" />
 
     <span class="absolute -bottom-2 h-0.5 w-8 group-hover:w-full transition-all" :class="'bg-' + color" />
diff --git a/nuxtjs.org/components/ResourcesList.vue b/nuxtjs.org/components/ResourcesList.vue
index 7f55fb83b..411778ba8 100644
--- a/nuxtjs.org/components/ResourcesList.vue
+++ b/nuxtjs.org/components/ResourcesList.vue
@@ -2,18 +2,18 @@
   <div class="px-6 mb-8">
     <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
       <ContentCardTemplate
-        v-for="({ title, description, image, slug }, id) in resources"
+        v-for="({ title, description, image, href }, id) in resources"
         :key="id"
-        class=""
         :title="title"
         :description="description"
         :image="image"
-        :slug="slug"
+        :href="href"
       >
         <div slot="footer" class="px-4 mb-4">
-          <NuxtLink :to="slug" class="text-primary font-medium flex items-center"
-            ><span class="mr-2">Go to {{ title }}</span> <IconChevronRight class="w-4 h-4"
-          /></NuxtLink>
+          <Link class="text-primary font-medium flex items-center" :to="href">
+            <span class="mr-2">Go to {{ title }}</span>
+            <IconChevronRight class="w-4 h-4" />
+          </Link>
         </div>
       </ContentCardTemplate>
     </div>
diff --git a/nuxtjs.org/components/SectionContentItem.vue b/nuxtjs.org/components/SectionContentItem.vue
index 1f031382d..5177bbfc0 100644
--- a/nuxtjs.org/components/SectionContentItem.vue
+++ b/nuxtjs.org/components/SectionContentItem.vue
@@ -3,8 +3,11 @@
     <slot name="image">
       <img class="mb-4" :src="image" :alt="`A ${title} image`" />
     </slot>
+
     <h3 class="mb-1 text-center text-body-lg lg:text-body-xl font-bold">{{ title }}</h3>
+
     <p class="text-center text-sm lg:text-base dark:text-secondary-lightest mb-4">{{ description }}</p>
+
     <MMarketingLink v-if="to" color="primary-green" name="Learn more" icon="IconChevronRight" :to="to" />
   </div>
 </template>
diff --git a/nuxtjs.org/components/SponsorsBlock.vue b/nuxtjs.org/components/SponsorsBlock.vue
index 158526b90..d5af55dcb 100644
--- a/nuxtjs.org/components/SponsorsBlock.vue
+++ b/nuxtjs.org/components/SponsorsBlock.vue
@@ -53,6 +53,7 @@ export default defineComponent({
         .where({ tier: { $in: ['MVP Partners', 'Partners'] } })
         .fetch()
     })
+
     return {
       partners
     }
diff --git a/nuxtjs.org/components/ThemesList.vue b/nuxtjs.org/components/ThemesList.vue
index 8fb8dd0a1..673bc67e1 100644
--- a/nuxtjs.org/components/ThemesList.vue
+++ b/nuxtjs.org/components/ThemesList.vue
@@ -2,13 +2,12 @@
   <div class="px-6 mb-8">
     <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
       <ContentCardTemplate
-        v-for="({ title, description, image, price, slug }, id) in themes"
+        v-for="({ title, description, image, price }, id) in themes"
         :key="id"
         class=""
         :title="title"
         :description="description"
         :image="image"
-        :slug="slug"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
           <SectionButton to="#" size="md" class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300">
diff --git a/nuxtjs.org/components/VideoCoursesList.vue b/nuxtjs.org/components/VideoCoursesList.vue
index a2a41c4af..24f514cde 100644
--- a/nuxtjs.org/components/VideoCoursesList.vue
+++ b/nuxtjs.org/components/VideoCoursesList.vue
@@ -2,17 +2,21 @@
   <div class="px-6 mb-8">
     <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
       <ContentCardTemplate
-        v-for="({ title, description, image, tier, slug }, id) in videoCourses"
+        v-for="({ title, description, image, tier }, id) in videoCourses"
         :key="id"
         class=""
         :title="title"
         :description="description"
         :image="image"
-        :slug="slug"
         :tags="[tier]"
       >
         <div slot="footer" class="px-4 mb-4 mt-auto">
-          <SectionButton to="#" size="md" class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300">
+          <SectionButton
+            to="#"
+            size="md"
+            aria-label="Start course"
+            class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
+          >
             Start course
           </SectionButton>
         </div>
diff --git a/nuxtjs.org/content/0.docs/index.md b/nuxtjs.org/content/0.docs/index.md
index 68966ed38..8c1104d8c 100644
--- a/nuxtjs.org/content/0.docs/index.md
+++ b/nuxtjs.org/content/0.docs/index.md
@@ -2,4 +2,5 @@
 title: Docs
 navigation:
   exclusive: true
+  redirect: /docs/get-started/installation
 ---
diff --git a/nuxtjs.org/content/3.resources/index.md b/nuxtjs.org/content/3.resources/index.md
index 666222c39..7f9453cdb 100644
--- a/nuxtjs.org/content/3.resources/index.md
+++ b/nuxtjs.org/content/3.resources/index.md
@@ -4,29 +4,30 @@ title: Resources
 ---
 
 ::simple-page-hero
-
 title: NuxtJS Resources
 description: "Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework."
 ---
 ::
 
 ::resources-list
-
 resources:
   modules:
     title: Modules
     description: Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.
     image: https://source.unsplash.com/user/jasebloor/1280x720
     slug: modules
-  themes: 
+    href: https://modules.nuxtjs.org
+  themes:
     title: Themes
     description: Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.
     image: https://source.unsplash.com/user/remithorel/1280x720
     slug: themes
-  video-courses: 
+    href: /themes
+  video-courses:
     title: Video Courses
     description: Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework.
     image: https://source.unsplash.com/user/agk42/1280x720
     slug: video-courses
+    href: /video-courses
 ---
 ::
diff --git a/nuxtjs.org/content/index.md b/nuxtjs.org/content/index.md
index dc1fcdd50..21d9d28c5 100644
--- a/nuxtjs.org/content/index.md
+++ b/nuxtjs.org/content/index.md
@@ -115,6 +115,7 @@ From an Idea to a Masterpiece, guides show the path to become a Nuxter.
   to: '/docs/get-started/installation'
   ---
   ::
+  
   ::section-content-item
   title: Internals
   description: "Dive deep into Nuxt internals to extend your application's behavior."
@@ -122,6 +123,7 @@ From an Idea to a Masterpiece, guides show the path to become a Nuxter.
   to: '/docs/internals-glossary/context'
   ---
   ::
+  
   ::section-content-item
   title: API References
   description: 'Discover all properties and their options when you need a complete overview.'
diff --git a/nuxtjs.org/content/video-courses.md b/nuxtjs.org/content/video-courses.md
index 18e39c864..ff753be13 100644
--- a/nuxtjs.org/content/video-courses.md
+++ b/nuxtjs.org/content/video-courses.md
@@ -1,6 +1,7 @@
 ---
 template: page
 ---
+
 ::simple-page-hero
 title: NuxtJS Video Courses
 description: "Discover a panel of resources made by our partners. By using thoses affiliate resources links, you are helping us to maintain and develop the Open Source Framework."
@@ -8,62 +9,51 @@ description: "Discover a panel of resources made by our partners. By using those
 ::
 
 ::video-courses-list
-
 video-courses:
   one:
     title: Learn Nuxt.js by Building a Real World App
     description: Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
     image: https://source.unsplash.com/user/jasebloor/1280x720
-    slug: one
     tier: Premium
-  two: 
+  two:
     title: Get Started with Nuxt
     description: Learn the essentials for how to build and deploy a Nuxt site including dnyamic routes, data fetching, SEO, lazy loading, global styles and transitions as well as how to generate and deploy your Nuxt app.
     image: https://source.unsplash.com/user/remithorel/1280x720
-    slug: two
     tier: Free
-  three: 
+  three:
     title: Learn Nuxt with Debbie
     description: A playlist of YouTube videos covering all things Nuxt including short videos and live streams.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: three
     tier: Free
-  four: 
+  four:
     title: Building Applications with Vue & Nuxt
     description: Build dynamic web applications with Vue and Nuxt! Throughout the course you’ll build out a variety of projects leveraging the tools in the Vue ecosystem including the Vue CLI, Nuxt, Vuex Store, and more.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: four
     tier: Premium
   five: 
     title: Build a Job Board with Laravel, GraphQL, Nuxt and Apollo
     description: Learn while you build a GraphQL API with Laravel Lighthouse, then build a Nuxt frontend with Apollo to consume it. All styled with Tailwind.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: five
     tier: Premium
-  six: 
+  six:
     title: Nuxt.js - Vue.js on Steroids
     description: Build highly engaging Vue JS apps with Nuxt.js. Nuxt adds easy server-side-rendering and a folder-based config approach.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: five
     tier: Premium
-  seven: 
+  seven:
     title: Scaling Vue with Nuxt.js
     description: Once you are comfortable with Vue, learning a framework like Nuxt allows you to create production-ready web apps which follow best practices.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: five
     tier: Premium
-  eight: 
+  eight:
     title: Nuxt.js Fundamentals
     description: Learn the fundamentals of Nuxt.js in this course that we created together with the founders of Nuxt. The course covers what you need to know from scaffolding to deploying your first Nuxt.js application.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: five
     tier: Free
-  nine: 
+  nine:
     title: Create a News App with Vue.js and Nuxt
     description: You will learn how to create dynamic pages for each section of your application and load, store, display, filter, and style the data. Then end result will be a News app with multiple category pages, comments for each section, and user pages.
     image: https://source.unsplash.com/user/agk42/1280x720
-    slug: five
     tier: Free
-    
 ---
-::
\ No newline at end of file
+::
diff --git a/src/defaultTheme/components/atoms/ButtonLink.vue b/src/defaultTheme/components/atoms/ButtonLink.vue
index 478fec535..699a2797b 100644
--- a/src/defaultTheme/components/atoms/ButtonLink.vue
+++ b/src/defaultTheme/components/atoms/ButtonLink.vue
@@ -1,16 +1,15 @@
 <template>
-  <NuxtLink v-if="isInternal" :to="href" class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']">
+  <Link class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" :to="href">
     <Markdown unwrap="p ul li" />
-  </NuxtLink>
 
-  <a v-else :href="href" class="button-link" :class="[size, bold ? 'font-semibold' : 'font-medium']" v-bind="linkAttrs">
-    <Markdown unwrap="p ul li" />
-    <IconExternalLink v-if="blank" class="w-4 h-4 ml-2" />
-  </a>
+    <template #href>
+      <IconExternalLink v-if="blank" class="w-4 h-4 ml-2" />
+    </template>
+  </Link>
 </template>
 
 <script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {
@@ -30,16 +29,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     }
-  },
-  setup(props) {
-    const isInternal = computed(() => props.href.startsWith('/') && props.href.startsWith('//') === false)
-
-    const linkAttrs = computed(() => (props.blank ? { rel: 'noopener nofollow', target: '_blank' } : {}))
-
-    return {
-      isInternal,
-      linkAttrs
-    }
   }
 })
 </script>
diff --git a/src/defaultTheme/components/atoms/Link.vue b/src/defaultTheme/components/atoms/Link.vue
new file mode 100644
index 000000000..039c75aff
--- /dev/null
+++ b/src/defaultTheme/components/atoms/Link.vue
@@ -0,0 +1,39 @@
+<template>
+  <NuxtLink v-if="isInternal" :to="to">
+    <slot />
+    <slot name="nuxt-link" />
+  </NuxtLink>
+
+  <a v-else :href="to" v-bind="linkAttrs">
+    <slot />
+    <slot name="href" />
+  </a>
+</template>
+
+<script>
+import { defineComponent, computed } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      required: true
+    },
+    blank: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  setup(props) {
+    const isInternal = computed(() => props.to.startsWith('/') && props.to.startsWith('//') === false)
+
+    const linkAttrs = computed(() => (props.blank ? { rel: 'noopener nofollow', target: '_blank' } : {}))
+
+    return {
+      isInternal,
+      linkAttrs
+    }
+  }
+})
+</script>
diff --git a/src/defaultTheme/components/atoms/prose/ProseA.vue b/src/defaultTheme/components/atoms/prose/ProseA.vue
index 3801064a6..14e3f6539 100644
--- a/src/defaultTheme/components/atoms/prose/ProseA.vue
+++ b/src/defaultTheme/components/atoms/prose/ProseA.vue
@@ -1,15 +1,11 @@
 <template>
-  <NuxtLink v-if="isInternal" :to="href">
+  <Link :to="href" :blank="blank">
     <slot />
-  </NuxtLink>
-
-  <a v-else :href="href" v-bind="linkAttrs">
-    <slot />
-  </a>
+  </Link>
 </template>
 
 <script>
-import { computed, defineComponent } from '@nuxtjs/composition-api'
+import { defineComponent } from '@nuxtjs/composition-api'
 
 export default defineComponent({
   props: {
@@ -21,16 +17,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     }
-  },
-  setup(props) {
-    const isInternal = computed(() => props.href.startsWith('/') && props.href.startsWith('//') === false)
-
-    const linkAttrs = computed(() => (props.blank ? { rel: 'noopener nofollow', target: '_blank' } : {}))
-
-    return {
-      isInternal,
-      linkAttrs
-    }
   }
 })
 </script>