diff --git a/nuxtjs.org/components/AnimFromCliCodeblock.vue b/nuxtjs.org/components/AnimFromCliCodeblock.vue
index a15cd85d7..cbda38f89 100644
--- a/nuxtjs.org/components/AnimFromCliCodeblock.vue
+++ b/nuxtjs.org/components/AnimFromCliCodeblock.vue
@@ -7,7 +7,7 @@
             <span>$&nbsp;</span
             ><span class="fromcli__yarn__createnuxtapp"
               >npx
-              <span class="text-primary-green">create-nuxt-app</span>
+              <span class="text-primary">create-nuxt-app</span>
               project-name</span
             >
           </p>
@@ -17,54 +17,54 @@
             <div class="fromcli__progressbar"></div>
           </div>
           <p class="fromcli__question1">
-            <span class="text-primary-green">? </span> Project name :
-            <span class="text-primary-green">My project</span>
+            <span class="text-primary">? </span> Project name :
+            <span class="text-primary">My project</span>
           </p>
           <p class="fromcli__question2">
-            <span class="text-primary-green">? </span> Programming language :
+            <span class="text-primary">? </span> Programming language :
             <span class="fromcli__question2__answer">Javascript</span>
           </p>
           <p class="fromcli__question2__answer1">> Javascript</p>
           <p class="fromcli__question2__answer2">&nbsp;&nbsp;Typescript</p>
           <p class="fromcli__question3">
-            <span class="text-primary-green">? </span> Package manager :
-            <span class="text-primary-green">Yarn</span>
+            <span class="text-primary">? </span> Package manager :
+            <span class="text-primary">Yarn</span>
           </p>
           <p class="fromcli__question4">
-            <span class="text-primary-green">? </span> UI Framework :
-            <span class="text-primary-green">Tailwind CSS</span>
+            <span class="text-primary">? </span> UI Framework :
+            <span class="text-primary">Tailwind CSS</span>
           </p>
           <p class="fromcli__question5">
-            <span class="text-primary-green">? </span> Nuxt.js modules :
-            <span class="text-primary-green">Axios</span>
+            <span class="text-primary">? </span> Nuxt.js modules :
+            <span class="text-primary">Axios</span>
           </p>
           <p class="fromcli__question6">
-            <span class="text-primary-green">? </span> Testing Framework :
-            <span class="text-primary-green">Jest</span>
+            <span class="text-primary">? </span> Testing Framework :
+            <span class="text-primary">Jest</span>
           </p>
           <p class="fromcli__question7">
-            <span class="text-primary-green">? </span> Rendering mode :
-            <span class="text-primary-green">Universal (SSR / SSG)</span>
+            <span class="text-primary">? </span> Rendering mode :
+            <span class="text-primary">Universal (SSR / SSG)</span>
           </p>
           <p class="fromcli__question8">
-            <span class="text-primary-green">? </span> Deployment target :
-            <span class="text-primary-green">Server</span>
+            <span class="text-primary">? </span> Deployment target :
+            <span class="text-primary">Server</span>
           </p>
           <div class="fromcli__progressbars__compilation">
             <div class="fromcli__progressbar"></div>
             <div class="fromcli__progressbar"></div>
           </div>
           <p class="flex items-center fromcli__installed">
-            <IconCheck class="mr-2 nui-icon-md text-primary-green w-4 h-4" />
+            <IconCheck class="mr-2 nui-icon-md text-primary w-4 h-4" />
             installed
           </p>
           <p class="flex">
             <span class="fromcli__seconddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__cd">cd <span class="text-primary-green">My Project</span></span>
+            ><span class="fromcli__yarn__cd">cd <span class="text-primary">My Project</span></span>
           </p>
           <p class="flex">
             <span class="fromcli__thirddollar">$&nbsp;</span
-            ><span class="fromcli__yarn__run">yarn run <span class="text-primary-green">dev</span></span>
+            ><span class="fromcli__yarn__run">yarn run <span class="text-primary">dev</span></span>
           </p>
         </div>
         <div class="fromcli__code__ide">
@@ -199,7 +199,7 @@
 }
 
 .fromcli__display__progressbar__progress {
-  @apply absolute left-0 top-0 w-0 bg-primary-green rounded-full opacity-0;
+  @apply absolute left-0 top-0 w-0 bg-primary rounded-full opacity-0;
   height: 10px;
   animation: progress cubic-bezier(0.83, 0, 0.17, 1) 1.5s forwards 3.8s;
 }
@@ -249,7 +249,7 @@ span[class*='fromcli__yarn'] {
 }
 
 .fromcli__question2__answer {
-  @apply opacity-0 text-primary-green;
+  @apply opacity-0 text-primary;
   animation: appear 150ms ease forwards 4.2s;
 }
 
@@ -309,7 +309,7 @@ span[class*='fromcli__yarn'] {
       animation-delay: 5.8s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 6.2s;
     }
   }
@@ -323,7 +323,7 @@ span[class*='fromcli__yarn'] {
       animation-delay: 2.4s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 2.6s;
     }
   }
@@ -337,7 +337,7 @@ span[class*='fromcli__yarn'] {
       animation-delay: 4.8s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 5s;
     }
     &:nth-child(3) {
@@ -373,7 +373,7 @@ span[class*='fromcli__yarn'] {
 }
 
 .fromcli__code__ide__head__circles__circle {
-  @apply h-3 w-3 rounded-full mr-2 bg-primary-green;
+  @apply h-3 w-3 rounded-full mr-2 bg-primary;
 }
 
 .fromcli__code__ide__head__file {
diff --git a/nuxtjs.org/components/AnimFromScratchCodeblock.vue b/nuxtjs.org/components/AnimFromScratchCodeblock.vue
index 2a5aa300d..2b5c5bdc9 100644
--- a/nuxtjs.org/components/AnimFromScratchCodeblock.vue
+++ b/nuxtjs.org/components/AnimFromScratchCodeblock.vue
@@ -141,7 +141,7 @@
 }
 
 .fromscratch__display__progressbar__progress {
-  @apply absolute left-0 top-0 w-0 bg-primary-green rounded-full opacity-0;
+  @apply absolute left-0 top-0 w-0 bg-primary rounded-full opacity-0;
   height: 10px;
   animation: progress cubic-bezier(0.83, 0, 0.17, 1) 1.5s forwards 3.8s;
 }
@@ -185,7 +185,7 @@ span[class*='fromscratch__yarn'] {
       animation-delay: 2.4s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 2.6s;
     }
     &:nth-child(3) {
@@ -203,7 +203,7 @@ span[class*='fromscratch__yarn'] {
       animation-delay: 4.8s;
     }
     &:nth-child(2) {
-      @apply bg-primary-green;
+      @apply bg-primary;
       animation-delay: 5s;
     }
     &:nth-child(3) {
@@ -239,7 +239,7 @@ span[class*='fromscratch__yarn'] {
 }
 
 .fromscratch__code__ide__head__circles__circle {
-  @apply rounded-full mr-2 bg-primary-green;
+  @apply rounded-full mr-2 bg-primary;
   height: 12px;
   width: 12px;
 }
diff --git a/nuxtjs.org/components/AppFooter.vue b/nuxtjs.org/components/AppFooter.vue
index 608c87134..5b13c9d04 100644
--- a/nuxtjs.org/components/AppFooter.vue
+++ b/nuxtjs.org/components/AppFooter.vue
@@ -1,37 +1,53 @@
 <template>
-  <footer class="light:bg-gray-50 dark:bg-secondary-black" aria-labelledby="footerHeading">
-    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
-      <div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
-        <div class="grid grid-cols-2 gap-8 xl:col-span-4">
-          <div v-for="i in 2" :key="i">
-            <MFooterLink
-              :links="i === 1 ? links.slice(0, 2) : links.slice(2, 4)"
-              class="md:grid md:grid-cols-2 md:gap-8"
-            />
+  <footer class="" aria-labelledby="footerHeading">
+    <div class="select-none">
+      <img
+        loading="lazy"
+        :src="`/img/footer/dark/landscape.svg`"
+        class="w-full h-40 object-fill light:hidden pointer-events-none"
+        alt="A landscape image"
+      />
+      <img
+        loading="lazy"
+        :src="`/img/footer/${$colorMode.value}/landscape.svg`"
+        class="w-full h-40 object-fill dark:hidden pointer-events-none"
+        alt="A landscape image"
+      />
+    </div>
+    <div class="bg-gray-50 dark:bg-secondary-black">
+      <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
+        <div class="pb-8 xl:grid xl:grid-cols-5 xl:gap-8">
+          <div class="grid grid-cols-2 gap-8 xl:col-span-4">
+            <div v-for="i in 2" :key="i">
+              <MFooterLink
+                :links="i === 1 ? links.slice(0, 2) : links.slice(2, 4)"
+                class="md:grid md:grid-cols-2 md:gap-8"
+              />
+            </div>
           </div>
+          <MFooterLanguage class="mt-12 xl:mt-0" />
         </div>
-        <MFooterLanguage class="mt-12 xl:mt-0" />
+        <MFooterNewsLetter
+          class="
+            border-t
+            light:border-gray-200
+            dark:border-secondary-darker
+            pt-8
+            lg:flex lg:items-center lg:justify-between
+            xl:mt-0
+          "
+        />
+        <MFooterFoot
+          class="
+            mt-8
+            border-t border-gray-200
+            dark:border-secondary-darker
+            pt-8
+            md:flex md:items-center md:justify-between
+            flex-row-reverse
+          "
+        />
       </div>
-      <MFooterNewsLetter
-        class="
-          border-t
-          light:border-gray-200
-          dark:border-secondary-darker
-          pt-8
-          lg:flex lg:items-center lg:justify-between
-          xl:mt-0
-        "
-      />
-      <MFooterFoot
-        class="
-          mt-8
-          border-t border-gray-200
-          dark:border-secondary-darker
-          pt-8
-          md:flex md:items-center md:justify-between
-          flex-row-reverse
-        "
-      />
     </div>
   </footer>
 </template>
diff --git a/nuxtjs.org/components/BlogpostList.vue b/nuxtjs.org/components/BlogpostList.vue
new file mode 100644
index 000000000..fb13ed04e
--- /dev/null
+++ b/nuxtjs.org/components/BlogpostList.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="px-6 my-8">
+    <div class="flex flex-wrap grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+      <ContentCardTemplate
+        v-for="post in posts"
+        :key="post.id"
+        class=""
+        :title="post.title"
+        :description="post.description"
+        :image="post.imgUrl"
+        :slug="post.slug"
+        :tags="post.tags"
+      >
+        <div slot="footer" class="px-4 mb-4 mt-auto">
+          <div class="flex items-center">
+            <div class="flex mr-4">
+              <a
+                v-for="(author, index) in post.authors"
+                :key="index"
+                :href="author.link"
+                target="_blank"
+                rel="noopener noindex nofollow"
+                :class="{ '-ml-4': index !== 0 }"
+                class="flex items-center justify-end rounded-full border-3 border-white dark:border-secondary-darker"
+              >
+                <NuxtImg
+                  class="inline-block h-10 w-10 rounded-full"
+                  height="32"
+                  width="32"
+                  :src="author.avatarUrl"
+                  alt
+                />
+              </a>
+            </div>
+            <div class="text-sm flex flex-col">
+              <span class="font-bold">{{ post.authors.length > 1 ? 'Multiple Authors' : post.authors[0].name }}</span>
+              <time :datetime="post.date" class="font-medium mr-2 text-sm text-gray-400 dark:text-cloud">
+                {{ formatDateByLocale($i18n.locale, post.date) }}
+              </time>
+            </div>
+          </div>
+        </div>
+      </ContentCardTemplate>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, useContext, useFetch } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const { $docus } = useContext()
+    const posts = ref()
+    useFetch(async () => {
+      const documents = await $docus
+        .search('/blog', { deep: true })
+        .where({ slug: { $ne: '' } })
+        .sortBy('date', 'desc')
+        .fetch()
+
+      posts.value = documents
+    })
+
+    const formatDateByLocale = (locale, d) => {
+      const currentLocale = locale || 'en'
+      const options = { year: 'numeric', month: 'long', day: 'numeric' }
+      return new Date(d).toLocaleDateString(currentLocale, options)
+    }
+
+    return {
+      posts,
+      formatDateByLocale
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/ContentCardTemplate.vue b/nuxtjs.org/components/ContentCardTemplate.vue
new file mode 100644
index 000000000..e04ff4dfc
--- /dev/null
+++ b/nuxtjs.org/components/ContentCardTemplate.vue
@@ -0,0 +1,51 @@
+<template>
+  <NuxtLink
+    tag="article"
+    :to="slug"
+    class="flex flex-col cursor-pointer shadow rounded-lg overflow-hidden dark:bg-secondary-darkest"
+  >
+    <div class="aspect-w-16 aspect-h-9 bg-gray-100 dark:bg-secondary-darker mb-4">
+      <NuxtImg :src="image" width="864" height="378" :alt="title" />
+    </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>
+    <h1 class="font-bold text-body-xl mb-2 px-4">
+      <NuxtLink :to="slug">{{ title }}</NuxtLink>
+    </h1>
+    <p class="pb-8 px-4 text-gray-500 dark:text-cloud-lighter">{{ description }}</p>
+    <slot name="footer" />
+  </NuxtLink>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    image: {
+      type: String,
+      default: ''
+    },
+    slug: {
+      type: String,
+      default: ''
+    },
+    tags: {
+      type: Array,
+      default: () => []
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/HeaderNavigation.vue b/nuxtjs.org/components/HeaderNavigation.vue
index debd71732..16633075e 100644
--- a/nuxtjs.org/components/HeaderNavigation.vue
+++ b/nuxtjs.org/components/HeaderNavigation.vue
@@ -11,7 +11,7 @@
         <NuxtLink
           :to="`/${link.slug}/${link.children[0].slug || ''}`"
           :class="{
-            'text-primary-green': currentSlug === link.slug
+            'text-primary': currentSlug === link.slug
           }"
         >
           {{ link.title }}
diff --git a/nuxtjs.org/components/HomeCampfire.vue b/nuxtjs.org/components/HomeCampfire.vue
index a92e2244b..7e687901d 100644
--- a/nuxtjs.org/components/HomeCampfire.vue
+++ b/nuxtjs.org/components/HomeCampfire.vue
@@ -7,9 +7,7 @@
         </template>
 
         <template #title>
-          <SectionTitle class="text-center"
-            >Sharing is <span class="text-primary-green italic">Caring</span></SectionTitle
-          >
+          <SectionTitle class="text-center">Sharing is <span class="text-primary italic">Caring</span></SectionTitle>
         </template>
 
         <template #content>
diff --git a/nuxtjs.org/components/HomeCommunity.vue b/nuxtjs.org/components/HomeCommunity.vue
index 87122ab20..0a9834ae5 100644
--- a/nuxtjs.org/components/HomeCommunity.vue
+++ b/nuxtjs.org/components/HomeCommunity.vue
@@ -42,7 +42,7 @@
                 justify-between
                 space-y-4
                 border-2 border-gray-200
-                dark:border-secondary-light
+                dark:border-secondary-dark
                 rounded-lg
                 p-4
               "
@@ -64,7 +64,7 @@
                   class="flex flex-1 pl-4 text-left flex-col"
                 >
                   <ALabel tag="span" class="font-bold text-base">{{ testimonial.author }}</ALabel>
-                  <ALabel tag="span" class="text-sm">{{ testimonial.job }}</ALabel>
+                  <ALabel tag="span" class="text-sm dark:text-cloud-lighter">{{ testimonial.job }}</ALabel>
                 </a>
                 <a :href="testimonial.jobUrl" target="_blank" rel="noopener sponsored" class="hidden xl:block">
                   <img
@@ -87,21 +87,6 @@
         </template>
       </SectionContent>
     </template>
-
-    <template #footer-illustration>
-      <img
-        loading="lazy"
-        :src="`/img/home/community/dark/landscape-community-b.svg`"
-        class="absolute w-full h-40 object-fill -mt-32 light:hidden pointer-events-none"
-        alt="A landscape image"
-      />
-      <img
-        loading="lazy"
-        :src="`/img/home/community/${$colorMode.value}/landscape-community-b.svg`"
-        class="absolute w-full h-40 object-fill -mt-32 dark:hidden pointer-events-none"
-        alt="A landscape image"
-      />
-    </template>
   </HomeSection>
 </template>
 <script>
diff --git a/nuxtjs.org/components/HomeDiscoverDx.vue b/nuxtjs.org/components/HomeDiscoverDx.vue
new file mode 100644
index 000000000..7f2d77ba6
--- /dev/null
+++ b/nuxtjs.org/components/HomeDiscoverDx.vue
@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <HomeSection class="pt-40 pb-20">
+      <template #section-content>
+        <SectionContent class="col-span-12 items-center">
+          <template #category>
+            <CategoryLabel label="Discover" />
+          </template>
+
+          <template #title>
+            <SectionTitle class="pb-16 text-center">
+              Intuitive <span class="text-primary italic">D</span>eveloper E<span class="text-primary italic">x</span
+              >perience
+            </SectionTitle>
+          </template>
+
+          <template #content>
+            <ul class="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-12">
+              <SectionContentItem
+                v-for="exp in experiences"
+                :key="exp.title"
+                :image="`/img/home/discover/dx/${exp.icon}.svg`"
+                :title="exp.title"
+                :description="exp.description"
+              />
+            </ul>
+          </template>
+        </SectionContent>
+      </template>
+    </HomeSection>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  setup() {
+    const experiences = [
+      {
+        title: 'Zero Configuration',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'zero-config'
+      },
+      {
+        title: 'File-system Routing',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'file-system-routing'
+      },
+      {
+        title: 'Components Auto-import',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'auto-import'
+      },
+      {
+        title: 'Plugins Auto-injection',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'auto-inject'
+      },
+      {
+        title: 'Hybrid: SSG or SSR',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'hybrid'
+      },
+      {
+        title: 'Modular Architecture',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'modular'
+      },
+      {
+        title: 'TypeScript Support',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'typescript'
+      },
+      {
+        title: 'SEO Friendly',
+        description: 'Automatic compilation and bundling. Optimised for production from the start.',
+        icon: 'seo'
+      }
+    ]
+
+    return {
+      experiences
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/HomeDiscoverPartners.vue b/nuxtjs.org/components/HomeDiscoverPartners.vue
index 9c7d048cc..fa5dac0d6 100644
--- a/nuxtjs.org/components/HomeDiscoverPartners.vue
+++ b/nuxtjs.org/components/HomeDiscoverPartners.vue
@@ -7,9 +7,7 @@
         </template>
 
         <template #title>
-          <SectionTitle class="text-center"
-            >Art in the <span class="text-primary-green italic">Making</span></SectionTitle
-          >
+          <SectionTitle class="text-center">Art in the <span class="text-primary italic">Making</span></SectionTitle>
         </template>
 
         <template #paragraph>
diff --git a/nuxtjs.org/components/HomeExplore.vue b/nuxtjs.org/components/HomeExplore.vue
index d8504efad..873fb2e1e 100644
--- a/nuxtjs.org/components/HomeExplore.vue
+++ b/nuxtjs.org/components/HomeExplore.vue
@@ -56,7 +56,7 @@
             to="#"
             aria-label="Explore more"
             size="sm"
-            class="bg-primary-green text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
+            class="bg-primary text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
           >
             Explore more
           </SectionButton>
diff --git a/nuxtjs.org/components/HomeHero.vue b/nuxtjs.org/components/HomeHero.vue
index 7a4846239..adaed463e 100644
--- a/nuxtjs.org/components/HomeHero.vue
+++ b/nuxtjs.org/components/HomeHero.vue
@@ -6,7 +6,20 @@
         <h1 class="font-normal font-serif text-display-5 xs:text-display-4 md:text-display-3 2xl:text-display-2 mb-4">
           <Markdown slot="title" unwrap="p" />
         </h1>
-        <h2 class="font-normal text-body-base xs:text-body-lg md:text-body-xl 2xl:text-body-2xl mb-8 px-8 sm:px-0">
+        <h2
+          class="
+            font-normal
+            text-body-base
+            xs:text-body-lg
+            md:text-body-xl
+            2xl:text-body-2xl
+            mb-8
+            px-8
+            sm:px-0
+            text-secondary-dark
+            dark:text-cloud-lighter
+          "
+        >
           <Markdown slot="description" unwrap="p" />
         </h2>
         <div class="flex flex-wrap justify-center space-x-3 xl:space-x-4">
@@ -14,7 +27,7 @@
             :to="primary.url"
             :aria-label="primary.text"
             size="md"
-            class="bg-primary-green text-gray-800 hover:bg-green-300 focus:bg-green-300"
+            class="bg-primary text-gray-800 hover:bg-green-300 focus:bg-green-300"
             :icon-left="primary.icon"
             >{{ primary.text }}</SectionButton
           >
diff --git a/nuxtjs.org/components/HomeLearnGuides.vue b/nuxtjs.org/components/HomeLearnGuides.vue
index 06b2c181c..ecfb434ac 100644
--- a/nuxtjs.org/components/HomeLearnGuides.vue
+++ b/nuxtjs.org/components/HomeLearnGuides.vue
@@ -7,9 +7,7 @@
         </template>
 
         <template #title>
-          <SectionTitle class="text-center"
-            >Follow our <span class="text-primary-green italic">Guides</span></SectionTitle
-          >
+          <SectionTitle class="text-center">Follow our <span class="text-primary italic">Guides</span></SectionTitle>
         </template>
 
         <template #paragraph>
@@ -35,7 +33,7 @@
             to="#"
             aria-label="Learn more"
             size="sm"
-            class="bg-primary-green text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
+            class="bg-primary text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
           >
             Learn more
           </SectionButton>
diff --git a/nuxtjs.org/components/HomeLearnMaster.vue b/nuxtjs.org/components/HomeLearnMaster.vue
index 1dcad7c0d..f613da616 100644
--- a/nuxtjs.org/components/HomeLearnMaster.vue
+++ b/nuxtjs.org/components/HomeLearnMaster.vue
@@ -8,8 +8,8 @@
 
         <template #title>
           <SectionTitle class="text-center"
-            ><span class="text-primary-green italic">Easy </span>to learn.
-            <span class="text-primary-green italic">Easy</span> to master</SectionTitle
+            ><span class="text-primary italic">Easy </span>to learn. <span class="text-primary italic">Easy</span> to
+            master</SectionTitle
           >
         </template>
 
@@ -29,7 +29,7 @@
               to="#"
               aria-label="Learn everything"
               size="sm"
-              class="bg-primary-green text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
+              class="bg-primary text-gray-800 font-semibold hover:bg-green-300 focus:bg-green-300"
             >
               Learn everything
             </SectionButton>
diff --git a/nuxtjs.org/components/MFooterFoot.vue b/nuxtjs.org/components/MFooterFoot.vue
index 7b69abfe3..77d9cfb3d 100644
--- a/nuxtjs.org/components/MFooterFoot.vue
+++ b/nuxtjs.org/components/MFooterFoot.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <MFooterSocialLinks />
-    <p class="mt-8 text-base light:text-gray-400 dark:text-secondary-lightest md:mt-0 md:order-1">
-      &copy; {{ year }} Nuxt, Inc. All rights reserved.
+    <p class="mt-8 text-base light:text-gray-400 dark:text-cloud-light md:mt-0 md:order-1">
+      &copy; 2020 Workflow, Inc. All rights reserved.
     </p>
   </div>
 </template>
diff --git a/nuxtjs.org/components/MFooterLanguage.vue b/nuxtjs.org/components/MFooterLanguage.vue
index d9ac90e59..7b4da281e 100644
--- a/nuxtjs.org/components/MFooterLanguage.vue
+++ b/nuxtjs.org/components/MFooterLanguage.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <h3 class="text-lg font-semibold light:text-gray-400 dark:text-secondary-light">Language</h3>
+    <h3 class="text-lg font-semibold light:text-gray-400 dark:text-cloud-light">Language</h3>
     <form class="mt-4 sm:max-w-xs">
       <fieldset class="w-full">
         <MFooterLocaleSelector />
diff --git a/nuxtjs.org/components/MFooterLink.vue b/nuxtjs.org/components/MFooterLink.vue
index 347d783b6..4efaf9a51 100644
--- a/nuxtjs.org/components/MFooterLink.vue
+++ b/nuxtjs.org/components/MFooterLink.vue
@@ -2,7 +2,7 @@
   <div>
     <div v-for="(link, index) in links" :key="link.title">
       <h3
-        class="font-semibold light:text-gray-400 dark:text-secondary-light text-lg"
+        class="font-semibold light:text-gray-400 dark:text-cloud-light text-lg"
         :class="{ 'mt-16 md:mt-0': index !== 0 }"
       >
         {{ link.title }}
diff --git a/nuxtjs.org/components/MFooterLocaleSelector.vue b/nuxtjs.org/components/MFooterLocaleSelector.vue
index 11df3e648..6a7e35dc5 100644
--- a/nuxtjs.org/components/MFooterLocaleSelector.vue
+++ b/nuxtjs.org/components/MFooterLocaleSelector.vue
@@ -2,7 +2,7 @@
   <ASelectNative
     v-model="locale"
     :options="locales"
-    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-white dark:focus:border-secondary-light sm:text-sm"
+    select-class="appearance-none block w-full bg-none dark:bg-transparent light:bg-white border light:border-gray-200 dark:border-secondary-dark rounded-md py-2 pl-3 pr-10 text-base light:text-gray-500 dark:text-secondary-surface focus:outline-none light:focus:ring-black dark:focus:ring-white light:focus:border-gray-400 dark:focus:border-secondary-light sm:text-sm"
   />
 </template>
 
diff --git a/nuxtjs.org/components/MFooterNewsLetter.vue b/nuxtjs.org/components/MFooterNewsLetter.vue
index 357bc042d..8e36f32c7 100644
--- a/nuxtjs.org/components/MFooterNewsLetter.vue
+++ b/nuxtjs.org/components/MFooterNewsLetter.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <h3 class="font-semibold light:text-gray-400 dark:text-secondary-light text-lg">Subscribe to our newsletter</h3>
+      <h3 class="font-semibold light:text-gray-400 dark:text-cloud-light text-lg">Subscribe to our newsletter</h3>
       <p class="mt-2 text-base text-gray-500 dark:text-secondary-surface">
         The latest news, articles, and resources, sent to your inbox weekly.
       </p>
diff --git a/nuxtjs.org/components/MFooterSocialLinks.vue b/nuxtjs.org/components/MFooterSocialLinks.vue
index 8d145fc61..1a7bc559c 100644
--- a/nuxtjs.org/components/MFooterSocialLinks.vue
+++ b/nuxtjs.org/components/MFooterSocialLinks.vue
@@ -2,10 +2,7 @@
   <ul class="flex items-center space-x-4 xl:space-x-5">
     <li v-for="(social, key) in socials" :key="key">
       <ALink :href="social.href">
-        <Component
-          :is="social.icon"
-          class="h-6 w-6 text-gray-400 dark:text-secondary-surface hover:text-primary-green"
-        />
+        <Component :is="social.icon" class="h-6 w-6 text-gray-400 dark:text-cloud-lighter hover:text-primary" />
       </ALink>
     </li>
   </ul>
diff --git a/nuxtjs.org/components/MInputGroupButton.vue b/nuxtjs.org/components/MInputGroupButton.vue
index e8362ffc4..4b23fecd6 100644
--- a/nuxtjs.org/components/MInputGroupButton.vue
+++ b/nuxtjs.org/components/MInputGroupButton.vue
@@ -27,7 +27,7 @@
         focus:outline-none
         light:focus:ring-black
         dark:focus:ring-white
-        light:focus:border-white
+        light:focus:border-gray-400
         dark:focus:border-secondary-light
         sm:text-sm
       "
@@ -38,7 +38,7 @@
         type="submit"
         aria-label="Submit"
         class="
-          bg-primary-green
+          bg-primary
           w-full
           rounded-md
           text-sm
diff --git a/nuxtjs.org/components/OCodeBlockAnimation.vue b/nuxtjs.org/components/OCodeBlockAnimation.vue
index edcdeafeb..5128e03cb 100644
--- a/nuxtjs.org/components/OCodeBlockAnimation.vue
+++ b/nuxtjs.org/components/OCodeBlockAnimation.vue
@@ -4,16 +4,13 @@
       <li>
         <button class="relative mr-8 text-lg font-bold light:text-gray-800" @click="activeCodeBlock = 'fromCLI'">
           From CLI
-          <span v-if="activeCodeBlock === 'fromCLI'" class="absolute -bottom-1.5 left-0 h-0.5 bg-primary-green w-1/3" />
+          <span v-if="activeCodeBlock === 'fromCLI'" class="absolute -bottom-1.5 left-0 h-0.5 bg-primary w-1/3" />
         </button>
       </li>
       <li>
         <button class="relative mr-8 text-lg font-bold light:text-gray-800" @click="activeCodeBlock = 'fromScratch'">
           From Scratch
-          <span
-            v-if="activeCodeBlock === 'fromScratch'"
-            class="absolute -bottom-1.5 left-0 h-0.5 bg-primary-green w-1/3"
-          />
+          <span v-if="activeCodeBlock === 'fromScratch'" class="absolute -bottom-1.5 left-0 h-0.5 bg-primary w-1/3" />
         </button>
       </li>
     </ul>
diff --git a/nuxtjs.org/components/ResourcesList.vue b/nuxtjs.org/components/ResourcesList.vue
new file mode 100644
index 000000000..7f55fb83b
--- /dev/null
+++ b/nuxtjs.org/components/ResourcesList.vue
@@ -0,0 +1,34 @@
+<template>
+  <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"
+        :key="id"
+        class=""
+        :title="title"
+        :description="description"
+        :image="image"
+        :slug="slug"
+      >
+        <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>
+        </div>
+      </ContentCardTemplate>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    resources: {
+      type: Object,
+      default: () => {}
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/ThemesList.vue b/nuxtjs.org/components/ThemesList.vue
new file mode 100644
index 000000000..8fb8dd0a1
--- /dev/null
+++ b/nuxtjs.org/components/ThemesList.vue
@@ -0,0 +1,34 @@
+<template>
+  <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"
+        :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">
+            Get it for {{ price }}
+          </SectionButton>
+        </div>
+      </ContentCardTemplate>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    themes: {
+      type: Object,
+      default: () => {}
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/VideoCoursesList.vue b/nuxtjs.org/components/VideoCoursesList.vue
new file mode 100644
index 000000000..a2a41c4af
--- /dev/null
+++ b/nuxtjs.org/components/VideoCoursesList.vue
@@ -0,0 +1,35 @@
+<template>
+  <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"
+        :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">
+            Start course
+          </SectionButton>
+        </div>
+      </ContentCardTemplate>
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    videoCourses: {
+      type: Object,
+      default: () => {}
+    }
+  }
+})
+</script>
diff --git a/nuxtjs.org/components/templates/Blog.vue b/nuxtjs.org/components/templates/Blog.vue
new file mode 100644
index 000000000..9e0d5a20b
--- /dev/null
+++ b/nuxtjs.org/components/templates/Blog.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <PageHero title="NuxtJS Blog" />
+    <BlogpostList />
+  </div>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+
+export default defineComponent({
+  props: {
+    page: {
+      type: Object,
+      required: true
+    }
+  },
+  templateOptions: {
+    aside: false,
+    fluid: true
+  }
+})
+</script>
diff --git a/nuxtjs.org/content/2.blog/1.case-study-livementor.md b/nuxtjs.org/content/2.blog/1.case-study-livementor.md
index a45a19f6e..d2bc5afb7 100644
--- a/nuxtjs.org/content/2.blog/1.case-study-livementor.md
+++ b/nuxtjs.org/content/2.blog/1.case-study-livementor.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: Case Study / LiveMentor
 description: LiveMentor is one of the world's leading education companies focused on entrepreneurship. They decided to migrate their existing front-end to Nuxt. We met with Romain and Alexandre to talk about their journey.
 imgUrl: blog/case-study-livementor/main.png
diff --git a/nuxtjs.org/content/2.blog/10.build-dev-to-clone-with-nuxt-new-fetch.md b/nuxtjs.org/content/2.blog/10.build-dev-to-clone-with-nuxt-new-fetch.md
index 4b4ad3396..ce7d2d771 100644
--- a/nuxtjs.org/content/2.blog/10.build-dev-to-clone-with-nuxt-new-fetch.md
+++ b/nuxtjs.org/content/2.blog/10.build-dev-to-clone-with-nuxt-new-fetch.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Build a dev.to clone with Nuxt new fetch'
 description: Let’s build a blazing fast articles and tutorials app using Nuxt and the DEV API, with lazy loading, placeholders, caching and trendy neumorphic design UI.
 imgUrl: blog/build-dev-to-clone-with-nuxt-new-fetch/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md b/nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md
index a957b9ed7..43bf71ae6 100644
--- a/nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md
+++ b/nuxtjs.org/content/2.blog/11.understanding-how-fetch-works-in-nuxt-2-12.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Understanding how fetch works in Nuxt 2.12'
 description: Explore different features of the fetch hook and learn a brand new way to bring data into Nuxt applications.
 imgUrl: blog/understanding-how-fetch-works-in-nuxt-2-12/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md b/nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md
index 05b558e88..866ff92c2 100644
--- a/nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md
+++ b/nuxtjs.org/content/2.blog/12.nuxtjs-from-terminal-to-browser.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Nuxt: From Terminal to Browser'
 description: How we changed the developer experience to stop switching between the terminal and browser.
 imgUrl: blog/nuxtjs-from-terminal-to-browser/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md b/nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md
index aeffad9f2..869bf10c4 100644
--- a/nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md
+++ b/nuxtjs.org/content/2.blog/13.introducing-smart-prefetching.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: Introducing Smart Prefetching
 description: 'Starting from Nuxt v2.4.0, Nuxt.js will automagically prefetch the code-splitted pages linked with a nuxt-link when visible in the viewport by default.'
 imgUrl: blog/introducing-smart-prefetching/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/2.creating-a-nuxt-module.md b/nuxtjs.org/content/2.blog/2.creating-a-nuxt-module.md
index 258f0a317..ca789ac38 100644
--- a/nuxtjs.org/content/2.blog/2.creating-a-nuxt-module.md
+++ b/nuxtjs.org/content/2.blog/2.creating-a-nuxt-module.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: Creating a Nuxt Module
 description: Modules are functions that are called sequentially when booting Nuxt. The framework waits for each module to finish before continuing. In this way, modules can customize almost any aspect of your project. Let's create a module that uses ngrok to get a Public URL that you can share while working in Development.
 imgUrl: blog/creating-nuxt-module/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/3.nuxt-static-improvements.md b/nuxtjs.org/content/2.blog/3.nuxt-static-improvements.md
index 0a944f94d..8f0800b62 100644
--- a/nuxtjs.org/content/2.blog/3.nuxt-static-improvements.md
+++ b/nuxtjs.org/content/2.blog/3.nuxt-static-improvements.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: Nuxt Static Improvements
 description: With Nuxt.js version 2.13, the full-static mode has been introduced. In addition, a new command nuxt export was added to pre-render your pages without triggering a webpack build with the goal to separate the rendering and build process. The only issue was that most Nuxt.js users weren't able to unleash the full potential of the separation... until now.
 imgUrl: blog/nuxt-static-improvements/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/4.creating-blog-with-nuxt-content.md b/nuxtjs.org/content/2.blog/4.creating-blog-with-nuxt-content.md
index 61a2bfe48..ecff70683 100644
--- a/nuxtjs.org/content/2.blog/4.creating-blog-with-nuxt-content.md
+++ b/nuxtjs.org/content/2.blog/4.creating-blog-with-nuxt-content.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Create a Blog with Nuxt Content'
 description: 'The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and discover how we can create a blog with it.'
 imgUrl: blog/creating-blog-with-nuxt-content/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/5.improve-your-developer-experience-with-nuxt-components.md b/nuxtjs.org/content/2.blog/5.improve-your-developer-experience-with-nuxt-components.md
index 0376d0f5e..e7b5271e3 100644
--- a/nuxtjs.org/content/2.blog/5.improve-your-developer-experience-with-nuxt-components.md
+++ b/nuxtjs.org/content/2.blog/5.improve-your-developer-experience-with-nuxt-components.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Improve Your Developer Experience With Nuxt Components'
 description: Explore how you can import and register Vue components automatically using @nuxt/components module.
 imgUrl: 'blog/improve-developer-experience-nuxt-components/main.jpeg?cover=new'
diff --git a/nuxtjs.org/content/2.blog/6.going-full-static.md b/nuxtjs.org/content/2.blog/6.going-full-static.md
index 286109885..152ab0a3e 100644
--- a/nuxtjs.org/content/2.blog/6.going-full-static.md
+++ b/nuxtjs.org/content/2.blog/6.going-full-static.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Going Full Static'
 description: 'Long awaited features for JAMstack fans has been shipped in v2.13: full static export, improved smart prefetching, integrated crawler, faster re-deploy, built-in web server and new target option for config ⚡️'
 imgUrl: blog/going-full-static/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/7.moving-from-nuxtjs-dotenv-to-runtime-config.md b/nuxtjs.org/content/2.blog/7.moving-from-nuxtjs-dotenv-to-runtime-config.md
index f58d2e360..6ede88959 100644
--- a/nuxtjs.org/content/2.blog/7.moving-from-nuxtjs-dotenv-to-runtime-config.md
+++ b/nuxtjs.org/content/2.blog/7.moving-from-nuxtjs-dotenv-to-runtime-config.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Moving from @nuxtjs/dotenv to runtime config'
 description: 'In our frontend applications, we often use APIs and third-party integrations which require us to use configuration data which is usually provided by environment variables. These variables should not be exposed to the frontend as the browser environment is accessible by all visitors.'
 imgUrl: blog/moving-from-nuxtjs-dotenv-to-runtime-config/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/8.going-dark-with-nuxtjs-color-mode.md b/nuxtjs.org/content/2.blog/8.going-dark-with-nuxtjs-color-mode.md
index c2885d6b4..6f57b496b 100644
--- a/nuxtjs.org/content/2.blog/8.going-dark-with-nuxtjs-color-mode.md
+++ b/nuxtjs.org/content/2.blog/8.going-dark-with-nuxtjs-color-mode.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: 'Going dark with Nuxt.js color mode'
 description: 'The @nuxtjs/color-mode module is a cool way of adding dark mode to your site. But not only does it switch from dark to light but also any color theme (eg. sepia mode). It even has auto detection so that it will choose the right mode depending on your system appearance.'
 imgUrl: blog/going-dark-with-nuxtjs-color-mode/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/9.seed-round.md b/nuxtjs.org/content/2.blog/9.seed-round.md
index d4b470868..c72378ce3 100644
--- a/nuxtjs.org/content/2.blog/9.seed-round.md
+++ b/nuxtjs.org/content/2.blog/9.seed-round.md
@@ -1,4 +1,5 @@
 ---
+template: blog-post
 title: "Announcing Nuxt's $2M seed round"
 description: 'Three years ago, my brother Sébastien and I were open sourcing our code to build Vue.js application server side rendered easily. Today, we are incredibly excited to announce that NuxtJS has raised $2M in seed funding.'
 imgUrl: blog/seed-round/main.jpeg?cover=new
diff --git a/nuxtjs.org/content/2.blog/index.md b/nuxtjs.org/content/2.blog/index.md
index 24f4588e2..89a484022 100644
--- a/nuxtjs.org/content/2.blog/index.md
+++ b/nuxtjs.org/content/2.blog/index.md
@@ -1,5 +1,8 @@
 ---
+template: blog
 title: Blog
 navigation: 
   exclusive: true
 ---
+
+kmefkwmekfm
\ No newline at end of file
diff --git a/nuxtjs.org/content/resources.md b/nuxtjs.org/content/resources.md
index e645c98ba..9c9411f32 100644
--- a/nuxtjs.org/content/resources.md
+++ b/nuxtjs.org/content/resources.md
@@ -1,10 +1,31 @@
 ---
 template: page
-layout:
-  fluid: true
 ---
+
 ::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: 
+    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: 
+    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
+---
 ::
\ No newline at end of file
diff --git a/nuxtjs.org/content/themes.md b/nuxtjs.org/content/themes.md
index bb39df168..77cff05fc 100644
--- a/nuxtjs.org/content/themes.md
+++ b/nuxtjs.org/content/themes.md
@@ -1,10 +1,44 @@
 ---
 template: page
-layout:
-  fluid: true
 ---
 ::simple-page-hero
 title: NuxtJS 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."
 ---
+::
+
+::themes-list
+
+themes:
+  one:
+    title: Nuxt Argon Dashboard PRO
+    description: Premium Bootstrap 4 + NuxtJS Admin Template.
+    image: https://source.unsplash.com/user/jasebloor/1280x720
+    slug: one
+    price: $99
+  two: 
+    title: Nuxt Argon Dashboard PRO Laravel
+    description: FULL STACK APP WITH NUXT, LARAVEL & JSON:API.
+    image: https://source.unsplash.com/user/remithorel/1280x720
+    slug: two
+    price: $99
+  three: 
+    title: Nuxt Now UI Kit
+    description: Premium Bootstrap Nuxt.js UI Kit.
+    image: https://source.unsplash.com/user/agk42/1280x720
+    slug: three
+    price: $99
+  four: 
+    title: Nuxt Black Dashboard PRO
+    description: Premium Bootstrap 4 + NuxtJS Admin Template.
+    image: https://source.unsplash.com/user/agk42/1280x720
+    slug: four
+    price: $99
+  five: 
+    title: Nuxt Scutum Dashboard
+    description: Professional Material Design UIkit Admin Template.
+    image: https://source.unsplash.com/user/agk42/1280x720
+    slug: five
+    price: $99
+---
 ::
\ No newline at end of file
diff --git a/nuxtjs.org/content/video-courses.md b/nuxtjs.org/content/video-courses.md
index 7cf44e4dd..18e39c864 100644
--- a/nuxtjs.org/content/video-courses.md
+++ b/nuxtjs.org/content/video-courses.md
@@ -1,10 +1,69 @@
 ---
 template: page
-layout:
-  fluid: true
 ---
 ::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."
+---
+::
+
+::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: 
+    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: 
+    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: 
+    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: 
+    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: 
+    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: 
+    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: 
+    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/nuxtjs.org/static/img/footer/dark/landscape.svg b/nuxtjs.org/static/img/footer/dark/landscape.svg
new file mode 100644
index 000000000..8a66bceda
--- /dev/null
+++ b/nuxtjs.org/static/img/footer/dark/landscape.svg
@@ -0,0 +1,4 @@
+<svg width="1440" height="189"  fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M188.857 41.0815L192.759 36.781L204.021 28.2886C208.25 25.0994 213.83 24.2253 218.759 25.6191C228.21 28.2918 242.78 31.9799 243.758 31.405C244.355 31.0542 245.988 29.2781 247.932 27.1646C250.572 24.2942 253.784 20.8016 255.748 19.4123L267.419 13.0024C270.803 11.3769 274.718 12.2335 277.324 15.1695L277.97 15.8972L282.398 21.1703L290.201 22.8726C290.984 23.0434 291.707 23.4644 292.286 24.0858L296.5 28.613C298.342 30.5911 301.197 30.6986 303.151 28.8635L303.741 28.3085C305.071 27.0594 306.942 26.8659 308.449 27.8215L314.101 31.405L323.214 36.781H324.734C328.731 36.781 332.519 38.8072 335.059 42.3044L336.004 43.6044H343.358C347.315 43.6044 351.18 42.2486 354.445 39.7149L357.227 37.5564C357.877 37.0513 358.648 36.781 359.437 36.781H367.499C368.51 36.781 369.466 37.2987 370.1 38.1894L376.611 47.3263L383.325 43.6044L395.635 47.3263H408.745L426.983 52.3452L446.954 40.9164H461.662L476.21 43.6044L486.593 31.9532C486.906 31.602 487.328 31.405 487.769 31.405H497.793L508.664 23.1341L522.413 19.4123L534.083 10.3143L552.149 1.62996C557.552 -1.1653 563.879 -0.320735 568.561 3.82072L568.985 4.19558L599.151 23.1341L610.821 31.405L629.52 34.6571L640.668 31.405L641.654 30.2025C642.913 28.6658 645.035 28.5815 646.387 30.0146L650.348 34.2142L657.847 34.6571L660.116 32.5262C664.73 28.1933 670.535 25.8221 676.528 25.8221L683.562 23.1341L698.43 13.4159H710.421L729.126 19.4123L735.52 25.8221L751.667 28.5102L755.984 36.781H782.842L792.612 32.1618L806.048 16.6992C807.828 14.6505 810.4 13.7568 812.888 14.3226L823.122 19.4123L835.425 25.8221L842.474 16.7242L846.623 12.7639C848.038 11.4125 850.154 11.6218 851.341 13.2308L855.903 19.4123L859.74 28.5102L869.534 33.6174C871.062 34.4142 872.513 35.3891 873.862 36.5263L879.564 41.33L885.438 39.4931C890.884 37.7904 896.72 39.1618 901.119 43.1777L902.266 44.2248H907.526C908.972 44.2248 910.414 44.3429 911.842 44.5773L924.042 37.8332L924.483 37.4838C929.349 33.6241 935.706 33.1539 940.973 36.264L958.615 46.0022L969.852 55.7761L983.411 60.3038L993.888 69.2046L1003.9 69.7959C1004.34 69.8218 1004.75 70.0435 1005.05 70.4127L1009.07 75.4244L1026.96 81.1553L1029.53 80.8342L1044.22 81.7017L1059.42 91.557L1066.23 93.7397L1082.08 90.3565L1095.18 91.1297L1107.64 88.139L1114.17 92.2518L1121.1 83.5113C1121.77 82.6592 1122.75 82.1986 1123.76 82.2582L1131.81 82.7338C1132.6 82.7803 1133.35 83.0957 1133.98 83.6385L1136.66 85.9581C1139.8 88.6809 1143.6 90.2629 1147.55 90.4963L1154.9 90.9301L1155.9 89.6874C1158.6 86.3448 1162.47 84.5448 1166.46 84.7805L1167.98 84.8702L1177.33 80.0389L1183.14 76.7937C1184.69 75.9283 1186.55 76.2319 1187.82 77.5577L1188.38 78.1468C1190.25 80.0947 1193.11 80.1557 1195.04 78.2889L1199.45 74.0164C1200.06 73.4299 1200.8 73.0522 1201.59 72.9278L1209.46 71.6881L1214.12 66.6832L1214.8 65.9946C1217.54 63.2163 1221.49 62.5918 1224.79 64.4146L1236.15 71.5042C1238.05 73.0075 1241.1 76.6849 1243.6 79.7071C1245.45 81.9324 1247 83.8024 1247.58 84.1878C1248.53 84.8197 1263.25 81.9959 1272.81 79.8843C1277.8 78.7831 1283.33 79.9851 1287.4 83.4194L1298.26 92.5645L1301.96 97.0894C1304.39 100.061 1307.38 102.375 1310.71 103.859L1318.43 109.242L1322.55 112.121H1331.08L1337.84 109.242H1346.9L1373.51 81.4234C1375.64 79.2007 1379.25 79.4068 1381.11 81.8571L1392.67 97.0894L1403.79 100.753L1412.06 109.242L1421.24 118.967L1427.16 126.252L1433.58 130.936L1440 135.099V184H568.257L360.207 172.923L192.759 173.457L0 172.906V106.483L7.27319 109.828L18.0016 106.496L25.9486 100.409H30.7908L37.5493 96.4652L41.3892 92.7505L48.2002 89.5864L56.942 97.4016L61.9646 92.7505L66.7109 90.8271L73.084 83.9939L77.6041 76.751L85.9484 70.448L94.6902 62.3441L111.379 47.3263L131.736 62.3441L163.888 57.1656L179.811 47.3263C183.201 46.0405 186.293 43.9061 188.857 41.0815Z" fill="#012A35"/>
+<path d="M1251.14 123.755L1247.24 121.791L1235.98 117.914C1231.75 116.458 1226.17 116.059 1221.24 116.696C1211.79 117.916 1197.22 119.6 1196.24 119.337C1195.65 119.177 1194.01 118.366 1192.07 117.401C1189.43 116.091 1186.22 114.496 1184.25 113.862L1172.58 110.936C1169.2 110.194 1165.28 110.585 1162.68 111.925L1162.03 112.257L1157.6 114.665L1149.8 115.442C1149.02 115.52 1148.29 115.712 1147.71 115.996L1143.5 118.062C1141.66 118.965 1138.8 119.015 1136.85 118.177L1136.26 117.923C1134.93 117.353 1133.06 117.265 1131.55 117.701L1125.9 119.337L1116.79 121.791H1115.27C1111.27 121.791 1107.48 122.716 1104.94 124.313L1104 124.906H1096.64C1092.69 124.906 1088.82 124.287 1085.55 123.131L1082.77 122.145C1082.12 121.915 1081.35 121.791 1080.56 121.791H1072.5C1071.49 121.791 1070.53 122.028 1069.9 122.434L1063.39 126.605L1056.67 124.906L1044.36 126.605H1031.26L1013.02 128.897L993.046 123.679H978.338L963.79 124.906L953.407 119.587C953.094 119.427 952.671 119.337 952.231 119.337H942.207L931.336 115.561L917.587 113.862L905.917 109.709L887.851 105.744C882.448 104.468 876.121 104.854 871.439 106.744L871.015 106.915L840.849 115.561L829.179 119.337L810.48 120.822L799.332 119.337L798.346 118.788C797.087 118.087 794.965 118.048 793.613 118.702L789.652 120.62L782.153 120.822L779.884 119.849C775.27 117.871 769.465 116.788 763.472 116.788L756.438 115.561L741.57 111.125H729.579L710.874 113.862L704.48 116.788L688.333 118.016L684.016 121.791H657.158L647.388 119.683L633.952 112.624C632.172 111.688 629.6 111.28 627.112 111.539L616.878 113.862L604.575 116.788L597.526 112.635L593.377 110.827C591.962 110.21 589.846 110.306 588.659 111.04L584.097 113.862L580.26 118.016L570.466 120.347C568.938 120.711 567.487 121.156 566.138 121.675L560.436 123.868L554.562 123.029C549.116 122.252 543.28 122.878 538.881 124.712L537.734 125.19H532.474C531.028 125.19 529.586 125.243 528.158 125.351L515.958 122.272L515.517 122.112C510.652 120.35 504.294 120.135 499.027 121.555L481.385 126.001L470.148 130.463L456.589 132.53L446.112 136.593L436.102 136.863C435.662 136.875 435.249 136.976 434.953 137.145L430.929 139.433L413.043 142.049L410.467 141.903L395.779 142.299L380.58 146.798L373.768 147.794L357.917 146.25L344.825 146.603L332.361 145.237L325.826 147.115L318.905 143.125C318.23 142.736 317.251 142.525 316.243 142.553L308.191 142.77C307.403 142.791 306.646 142.935 306.019 143.183L303.341 144.242C300.196 145.485 296.399 146.207 292.447 146.314L285.103 146.512L284.1 145.944C281.403 144.418 277.527 143.597 273.536 143.704L272.017 143.745L262.67 141.54L256.861 140.058C255.312 139.663 253.452 139.802 252.182 140.407L251.617 140.676C249.751 141.565 246.894 141.593 244.964 140.741L240.548 138.79C239.941 138.522 239.199 138.35 238.41 138.293L230.539 137.727L225.876 135.442L225.197 135.128C222.459 133.86 218.51 133.574 215.205 134.407L203.845 137.643C201.947 138.33 198.9 140.008 196.396 141.388C194.552 142.404 193.002 143.258 192.422 143.434C191.472 143.722 176.752 142.433 167.191 141.469C162.204 140.966 156.673 141.515 152.596 143.083L141.739 147.258L138.04 149.323C135.61 150.68 132.62 151.737 129.293 152.414L121.569 154.871L117.452 156.186H108.921L102.16 154.871H93.0991L64.8614 141.396C63.3462 140.673 61.5693 140.758 60.1307 141.624L47.3308 149.323L36.2111 150.996L27.9439 154.871L18.7582 159.311L12.8372 162.637L6.41861 164.775L0 166.676V189H871.743H1080.56H1247.24H1440V153.612L1432.73 155.139L1422 153.618L1414.05 150.839H1409.21L1402.45 149.038L1398.61 147.343L1391.8 145.898L1383.06 149.466L1378.04 147.343L1373.29 146.465L1366.92 143.345L1362.4 140.039L1354.05 137.161L1345.31 133.461L1328.62 126.605L1308.26 133.461L1276.11 131.097L1260.19 126.605C1256.8 126.019 1253.71 125.044 1251.14 123.755Z" fill="#001E26"/>
+</svg>
diff --git a/nuxtjs.org/static/img/footer/light/landscape.svg b/nuxtjs.org/static/img/footer/light/landscape.svg
new file mode 100644
index 000000000..b3584d2ea
--- /dev/null
+++ b/nuxtjs.org/static/img/footer/light/landscape.svg
@@ -0,0 +1,4 @@
+<svg width="1440" height="189"  fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M188.857 41.0815L192.759 36.781L204.021 28.2886C208.25 25.0994 213.83 24.2253 218.759 25.6191C228.21 28.2918 242.78 31.9799 243.758 31.405C244.355 31.0542 245.988 29.2781 247.932 27.1646C250.572 24.2942 253.784 20.8016 255.748 19.4123L267.419 13.0024C270.803 11.3769 274.718 12.2335 277.324 15.1695L277.97 15.8972L282.398 21.1703L290.201 22.8726C290.984 23.0434 291.707 23.4644 292.286 24.0858L296.5 28.613C298.342 30.5911 301.197 30.6986 303.151 28.8635L303.741 28.3085C305.071 27.0594 306.942 26.8659 308.449 27.8215L314.101 31.405L323.214 36.781H324.734C328.731 36.781 332.519 38.8072 335.059 42.3044L336.004 43.6044H343.358C347.315 43.6044 351.18 42.2486 354.445 39.7149L357.227 37.5564C357.877 37.0513 358.648 36.781 359.437 36.781H367.499C368.51 36.781 369.466 37.2987 370.1 38.1894L376.611 47.3263L383.325 43.6044L395.635 47.3263H408.745L426.983 52.3452L446.954 40.9164H461.662L476.21 43.6044L486.593 31.9532C486.906 31.602 487.328 31.405 487.769 31.405H497.793L508.664 23.1341L522.413 19.4123L534.083 10.3143L552.149 1.62996C557.552 -1.1653 563.879 -0.320735 568.561 3.82072L568.985 4.19558L599.151 23.1341L610.821 31.405L629.52 34.6571L640.668 31.405L641.654 30.2025C642.913 28.6658 645.035 28.5815 646.387 30.0146L650.348 34.2142L657.847 34.6571L660.116 32.5262C664.73 28.1933 670.535 25.8221 676.528 25.8221L683.562 23.1341L698.43 13.4159H710.421L729.126 19.4123L735.52 25.8221L751.667 28.5102L755.984 36.781H782.842L792.612 32.1618L806.048 16.6992C807.828 14.6505 810.4 13.7568 812.888 14.3226L823.122 19.4123L835.425 25.8221L842.474 16.7242L846.623 12.7639C848.038 11.4125 850.154 11.6218 851.341 13.2308L855.903 19.4123L859.74 28.5102L869.534 33.6174C871.062 34.4142 872.513 35.3891 873.862 36.5263L879.564 41.33L885.438 39.4931C890.884 37.7904 896.72 39.1618 901.119 43.1777L902.266 44.2248H907.526C908.972 44.2248 910.414 44.3429 911.842 44.5773L924.042 37.8332L924.483 37.4838C929.349 33.6241 935.706 33.1539 940.973 36.264L958.615 46.0022L969.852 55.7761L983.411 60.3038L993.888 69.2046L1003.9 69.7959C1004.34 69.8218 1004.75 70.0435 1005.05 70.4127L1009.07 75.4244L1026.96 81.1553L1029.53 80.8342L1044.22 81.7017L1059.42 91.557L1066.23 93.7397L1082.08 90.3565L1095.18 91.1297L1107.64 88.139L1114.17 92.2518L1121.1 83.5113C1121.77 82.6592 1122.75 82.1986 1123.76 82.2582L1131.81 82.7338C1132.6 82.7803 1133.35 83.0957 1133.98 83.6385L1136.66 85.9581C1139.8 88.6809 1143.6 90.2629 1147.55 90.4963L1154.9 90.9301L1155.9 89.6874C1158.6 86.3448 1162.47 84.5448 1166.46 84.7805L1167.98 84.8702L1177.33 80.0389L1183.14 76.7937C1184.69 75.9283 1186.55 76.2319 1187.82 77.5577L1188.38 78.1468C1190.25 80.0947 1193.11 80.1557 1195.04 78.2889L1199.45 74.0164C1200.06 73.4299 1200.8 73.0522 1201.59 72.9278L1209.46 71.6881L1214.12 66.6832L1214.8 65.9946C1217.54 63.2163 1221.49 62.5918 1224.79 64.4146L1236.15 71.5042C1238.05 73.0075 1241.1 76.6849 1243.6 79.7071C1245.45 81.9324 1247 83.8024 1247.58 84.1878C1248.53 84.8197 1263.25 81.9959 1272.81 79.8843C1277.8 78.7831 1283.33 79.9851 1287.4 83.4194L1298.26 92.5645L1301.96 97.0894C1304.39 100.061 1307.38 102.375 1310.71 103.859L1318.43 109.242L1322.55 112.121H1331.08L1337.84 109.242H1346.9L1373.51 81.4234C1375.64 79.2007 1379.25 79.4068 1381.11 81.8571L1392.67 97.0894L1403.79 100.753L1412.06 109.242L1421.24 118.967L1427.16 126.252L1433.58 130.936L1440 135.099V184H568.257L360.207 172.923L192.759 173.457L0 172.906V106.483L7.27319 109.828L18.0016 106.496L25.9486 100.409H30.7908L37.5493 96.4652L41.3892 92.7505L48.2002 89.5864L56.942 97.4016L61.9646 92.7505L66.7109 90.8271L73.084 83.9939L77.6041 76.751L85.9484 70.448L94.6902 62.3441L111.379 47.3263L131.736 62.3441L163.888 57.1656L179.811 47.3263C183.201 46.0405 186.293 43.9061 188.857 41.0815Z" fill="#F3F4F6"/>
+<path d="M1251.14 123.755L1247.24 121.791L1235.98 117.914C1231.75 116.458 1226.17 116.059 1221.24 116.696C1211.79 117.916 1197.22 119.6 1196.24 119.337C1195.65 119.177 1194.01 118.366 1192.07 117.401C1189.43 116.091 1186.22 114.496 1184.25 113.862L1172.58 110.936C1169.2 110.194 1165.28 110.585 1162.68 111.925L1162.03 112.257L1157.6 114.665L1149.8 115.442C1149.02 115.52 1148.29 115.712 1147.71 115.996L1143.5 118.062C1141.66 118.965 1138.8 119.015 1136.85 118.177L1136.26 117.923C1134.93 117.353 1133.06 117.265 1131.55 117.701L1125.9 119.337L1116.79 121.791H1115.27C1111.27 121.791 1107.48 122.716 1104.94 124.313L1104 124.906H1096.64C1092.69 124.906 1088.82 124.287 1085.55 123.131L1082.77 122.145C1082.12 121.915 1081.35 121.791 1080.56 121.791H1072.5C1071.49 121.791 1070.53 122.028 1069.9 122.434L1063.39 126.605L1056.67 124.906L1044.36 126.605H1031.26L1013.02 128.897L993.046 123.679H978.338L963.79 124.906L953.407 119.587C953.094 119.427 952.671 119.337 952.231 119.337H942.207L931.336 115.561L917.587 113.862L905.917 109.709L887.851 105.744C882.448 104.468 876.121 104.854 871.439 106.744L871.015 106.915L840.849 115.561L829.179 119.337L810.48 120.822L799.332 119.337L798.346 118.788C797.087 118.087 794.965 118.048 793.613 118.702L789.652 120.62L782.153 120.822L779.884 119.849C775.27 117.871 769.465 116.788 763.472 116.788L756.438 115.561L741.57 111.125H729.579L710.874 113.862L704.48 116.788L688.333 118.016L684.016 121.791H657.158L647.388 119.683L633.952 112.624C632.172 111.688 629.6 111.28 627.112 111.539L616.878 113.862L604.575 116.788L597.526 112.635L593.377 110.827C591.962 110.21 589.846 110.306 588.659 111.04L584.097 113.862L580.26 118.016L570.466 120.347C568.938 120.711 567.487 121.156 566.138 121.675L560.436 123.868L554.562 123.029C549.116 122.252 543.28 122.878 538.881 124.712L537.734 125.19H532.474C531.028 125.19 529.586 125.243 528.158 125.351L515.958 122.272L515.517 122.112C510.652 120.35 504.294 120.135 499.027 121.555L481.385 126.001L470.148 130.463L456.589 132.53L446.112 136.593L436.102 136.863C435.662 136.875 435.249 136.976 434.953 137.145L430.929 139.433L413.043 142.049L410.467 141.903L395.779 142.299L380.58 146.798L373.768 147.794L357.917 146.25L344.825 146.603L332.361 145.237L325.826 147.115L318.905 143.125C318.23 142.736 317.251 142.525 316.243 142.553L308.191 142.77C307.403 142.791 306.646 142.935 306.019 143.183L303.341 144.242C300.196 145.485 296.399 146.207 292.447 146.314L285.103 146.512L284.1 145.944C281.403 144.418 277.527 143.597 273.536 143.704L272.017 143.745L262.67 141.54L256.861 140.058C255.312 139.663 253.452 139.802 252.182 140.407L251.617 140.676C249.751 141.565 246.894 141.593 244.964 140.741L240.548 138.79C239.941 138.522 239.199 138.35 238.41 138.293L230.539 137.727L225.876 135.442L225.197 135.128C222.459 133.86 218.51 133.574 215.205 134.407L203.845 137.643C201.947 138.33 198.9 140.008 196.396 141.388C194.552 142.404 193.002 143.258 192.422 143.434C191.472 143.722 176.752 142.433 167.191 141.469C162.204 140.966 156.673 141.515 152.596 143.083L141.739 147.258L138.04 149.323C135.61 150.68 132.62 151.737 129.293 152.414L121.569 154.871L117.452 156.186H108.921L102.16 154.871H93.0991L64.8614 141.396C63.3462 140.673 61.5693 140.758 60.1307 141.624L47.3308 149.323L36.2111 150.996L27.9439 154.871L18.7582 159.311L12.8372 162.637L6.41861 164.775L0 166.676V189H871.743H1080.56H1247.24H1440V153.612L1432.73 155.139L1422 153.618L1414.05 150.839H1409.21L1402.45 149.038L1398.61 147.343L1391.8 145.898L1383.06 149.466L1378.04 147.343L1373.29 146.465L1366.92 143.345L1362.4 140.039L1354.05 137.161L1345.31 133.461L1328.62 126.605L1308.26 133.461L1276.11 131.097L1260.19 126.605C1256.8 126.019 1253.71 125.044 1251.14 123.755Z" fill="#F9FAFB"/>
+</svg>
diff --git a/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg b/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg
deleted file mode 100644
index 9f27b6a71..000000000
--- a/nuxtjs.org/static/img/home/community/dark/landscape-community-b.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1440" height="189" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M188.857 41.0815l3.902-4.3005 11.262-8.4924c4.229-3.1892 9.809-4.0633 14.738-2.6695 9.451 2.6727 24.021 6.3608 24.999 5.7859.597-.3508 2.23-2.1269 4.174-4.2404 2.64-2.8704 5.852-6.363 7.816-7.7523l11.671-6.4099c3.384-1.6255 7.299-.7689 9.905 2.1671l.646.7277 4.428 5.2731 7.803 1.7023c.783.1708 1.506.5918 2.085 1.2132l4.214 4.5272c1.842 1.9781 4.697 2.0856 6.651.2505l.59-.555c1.33-1.2491 3.201-1.4426 4.708-.487l5.652 3.5835 9.113 5.376h1.52c3.997 0 7.785 2.0262 10.325 5.5234l.945 1.3h7.354c3.957 0 7.822-1.3558 11.087-3.8895l2.782-2.1585c.65-.5051 1.421-.7754 2.21-.7754h8.062c1.011 0 1.967.5177 2.601 1.4084l6.511 9.1369 6.714-3.7219 12.31 3.7219h13.11l18.238 5.0189 19.971-11.4288h14.708l14.548 2.688 10.383-11.6512c.313-.3512.735-.5482 1.176-.5482h10.024l10.871-8.2709 13.749-3.7218 11.67-9.098 18.066-8.68434c5.403-2.79526 11.73-1.950695 16.412 2.19076l.424.37486 30.166 18.93852 11.67 8.2709 18.699 3.2521 11.148-3.2521.986-1.2025c1.259-1.5367 3.381-1.621 4.733-.1879l3.961 4.1996 7.499.4429 2.269-2.1309c4.614-4.3329 10.419-6.7041 16.412-6.7041l7.034-2.688 14.868-9.7182h11.991l18.705 5.9964 6.394 6.4098 16.147 2.6881 4.317 8.2708h26.858l9.77-4.6192 13.436-15.4626c1.78-2.0487 4.352-2.9424 6.84-2.3766l10.234 5.0897 12.303 6.4098 7.049-9.0979 4.149-3.9603c1.415-1.3514 3.531-1.1421 4.718.4669l4.562 6.1815 3.837 9.0979 9.794 5.1072c1.528.7968 2.979 1.7717 4.328 2.9089l5.702 4.8037 5.874-1.8369c5.446-1.7027 11.282-.3313 15.681 3.6846l1.147 1.0471h5.26c1.446 0 2.888.1181 4.316.3525l12.2-6.7441.441-.3494c4.866-3.8597 11.223-4.3299 16.49-1.2198l17.642 9.7382 11.237 9.7739 13.559 4.5277 10.477 8.9008 10.012.5913c.44.0259.85.2476 1.15.6168l4.02 5.0117 17.89 5.7309 2.57-.3211 14.69.8675 15.2 9.8553 6.81 2.1827 15.85-3.3832 13.1.7732 12.46-2.9907 6.53 4.1128 6.93-8.7405c.67-.8521 1.65-1.3127 2.66-1.2531l8.05.4756c.79.0465 1.54.3619 2.17.9047l2.68 2.3196c3.14 2.7228 6.94 4.3048 10.89 4.5382l7.35.4338 1-1.2427c2.7-3.3426 6.57-5.1426 10.56-4.9069l1.52.0897 9.35-4.8313 5.81-3.2452c1.55-.8654 3.41-.5618 4.68.764l.56.5891c1.87 1.9479 4.73 2.0089 6.66.1421l4.41-4.2725c.61-.5865 1.35-.9642 2.14-1.0886l7.87-1.2397 4.66-5.0049.68-.6886c2.74-2.7783 6.69-3.4028 9.99-1.58l11.36 7.0896c1.9 1.5033 4.95 5.1807 7.45 8.2029 1.85 2.2253 3.4 4.0953 3.98 4.4807.95.6319 15.67-2.1919 25.23-4.3035 4.99-1.1012 10.52.1008 14.59 3.5351l10.86 9.1451 3.7 4.5249c2.43 2.9716 5.42 5.2856 8.75 6.7696l7.72 5.383 4.12 2.879h8.53l6.76-2.879h9.06l26.61-27.8186c2.13-2.2227 5.74-2.0166 7.6.4337l11.56 15.2323 11.12 3.6636 8.27 8.489 9.18 9.725 5.92 7.285 6.42 4.684 6.42 4.163V184H568.257l-208.05-11.077-167.448.534L0 172.906v-66.423l7.27319 3.345 10.72841-3.332 7.947-6.087h4.8422l6.7585-3.9438 3.8399-3.7147 6.811-3.1641 8.7418 7.8152 5.0226-4.6511 4.7463-1.9234 6.3731-6.8332 4.5201-7.2429 8.3443-6.303 8.7418-8.1039 16.6888-15.0178 20.357 15.0178 32.152-5.1785 15.923-9.8393c3.39-1.2858 6.482-3.4202 9.046-6.2448z" fill="#012A35"/><path d="M1251.14 123.755l-3.9-1.964-11.26-3.877c-4.23-1.456-9.81-1.855-14.74-1.218-9.45 1.22-24.02 2.904-25 2.641-.59-.16-2.23-.971-4.17-1.936-2.64-1.31-5.85-2.905-7.82-3.539l-11.67-2.926c-3.38-.742-7.3-.351-9.9.989l-.65.332-4.43 2.408-7.8.777c-.78.078-1.51.27-2.09.554l-4.21 2.066c-1.84.903-4.7.953-6.65.115l-.59-.254c-1.33-.57-3.2-.658-4.71-.222l-5.65 1.636-9.11 2.454h-1.52c-4 0-7.79.925-10.33 2.522l-.94.593h-7.36c-3.95 0-7.82-.619-11.09-1.775l-2.78-.986c-.65-.23-1.42-.354-2.21-.354h-8.06c-1.01 0-1.97.237-2.6.643l-6.51 4.171-6.72-1.699-12.31 1.699h-13.1l-18.24 2.292-19.974-5.218h-14.708l-14.548 1.227-10.383-5.319c-.313-.16-.735-.25-1.176-.25h-10.024l-10.871-3.776-13.749-1.699-11.67-4.153-18.066-3.965c-5.403-1.276-11.73-.89-16.412 1l-.424.171-30.166 8.646-11.67 3.776-18.699 1.485-11.148-1.485-.986-.549c-1.259-.701-3.381-.74-4.733-.086l-3.961 1.918-7.499.202-2.269-.973c-4.614-1.978-10.419-3.061-16.412-3.061l-7.034-1.227-14.868-4.436h-11.991l-18.705 2.737-6.394 2.926-16.147 1.228-4.317 3.775h-26.858l-9.77-2.108-13.436-7.059c-1.78-.936-4.352-1.344-6.84-1.085l-10.234 2.323-12.303 2.926-7.049-4.153-4.149-1.808c-1.415-.617-3.531-.521-4.718.213l-4.562 2.822-3.837 4.154-9.794 2.331c-1.528.364-2.979.809-4.328 1.328l-5.702 2.193-5.874-.839c-5.446-.777-11.282-.151-15.681 1.683l-1.147.478h-5.26c-1.446 0-2.888.053-4.316.161l-12.2-3.079-.441-.16c-4.866-1.762-11.223-1.977-16.49-.557l-17.642 4.446-11.237 4.462-13.559 2.067-10.477 4.063-10.01.27c-.44.012-.853.113-1.149.282l-4.024 2.288-17.886 2.616-2.576-.146-14.688.396-15.199 4.499-6.812.996-15.851-1.544-13.092.353-12.464-1.366-6.535 1.878-6.921-3.99c-.675-.389-1.654-.6-2.662-.572l-8.052.217c-.788.021-1.545.165-2.172.413l-2.678 1.059c-3.145 1.243-6.942 1.965-10.894 2.072l-7.344.198-1.003-.568c-2.697-1.526-6.573-2.347-10.564-2.24l-1.519.041-9.347-2.205-5.809-1.482c-1.549-.395-3.409-.256-4.679.349l-.565.269c-1.866.889-4.723.917-6.653.065l-4.416-1.951c-.607-.268-1.349-.44-2.138-.497l-7.871-.566-4.663-2.285-.679-.314c-2.738-1.268-6.687-1.554-9.992-.721l-11.36 3.236c-1.898.687-4.945 2.365-7.449 3.745-1.844 1.016-3.394 1.87-3.974 2.046-.95.288-15.67-1.001-25.231-1.965-4.987-.503-10.518.046-14.595 1.614l-10.857 4.175-3.699 2.065c-2.43 1.357-5.42 2.414-8.747 3.091l-7.724 2.457-4.117 1.315h-8.531l-6.761-1.315h-9.0609l-28.2377-13.475c-1.5152-.723-3.2921-.638-4.7307.228l-12.7999 7.699-11.1197 1.673-8.2672 3.875-9.1857 4.44-5.921 3.326-6.41859 2.138L0 166.676V189h871.743l208.047-5.057 167.45.244 192.76-.252v-30.323l-7.27 1.527-10.73-1.521-7.95-2.779h-4.84l-6.76-1.801-3.84-1.695-6.81-1.445-8.74 3.568-5.02-2.123-4.75-.878-6.37-3.12-4.52-3.306-8.35-2.878-8.74-3.7-16.69-6.856-20.36 6.856-32.15-2.364-15.92-4.492c-3.39-.586-6.48-1.561-9.05-2.85z" fill="#001E26"/></svg>
\ No newline at end of file
diff --git a/nuxtjs.org/static/img/home/community/light/landscape-community-b.svg b/nuxtjs.org/static/img/home/community/light/landscape-community-b.svg
deleted file mode 100644
index e820fe3ca..000000000
--- a/nuxtjs.org/static/img/home/community/light/landscape-community-b.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="1440" height="189" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M188.857 41.0815l3.902-4.3005 11.262-8.4924c4.229-3.1892 9.809-4.0633 14.738-2.6695 9.451 2.6727 24.021 6.3608 24.999 5.7859.597-.3508 2.23-2.1269 4.174-4.2404 2.64-2.8704 5.852-6.363 7.816-7.7523l11.671-6.4099c3.384-1.6255 7.299-.7689 9.905 2.1671l.646.7277 4.428 5.2731 7.803 1.7023c.783.1708 1.506.5918 2.085 1.2132l4.214 4.5272c1.842 1.9781 4.697 2.0856 6.651.2505l.59-.555c1.33-1.2491 3.201-1.4426 4.708-.487l5.652 3.5835 9.113 5.376h1.52c3.998 0 7.785 2.0262 10.325 5.5234l.945 1.3h7.354c3.957 0 7.822-1.3558 11.087-3.8895l2.782-2.1585c.65-.5051 1.421-.7754 2.21-.7754h8.062c1.011 0 1.967.5177 2.601 1.4084l6.511 9.1369 6.714-3.7219 12.31 3.7219h13.11l18.238 5.0189 19.971-11.4288h14.708l14.548 2.688 10.383-11.6512c.313-.3512.736-.5482 1.176-.5482h10.024l10.871-8.2709 13.749-3.7218 11.67-9.098 18.066-8.68434c5.403-2.79526 11.73-1.950695 16.412 2.19076l.424.37486 30.166 18.93852 11.67 8.2709 18.699 3.2521 11.148-3.2521.985-1.2025c1.26-1.5367 3.382-1.621 4.734-.1879l3.961 4.1996 7.499.4429 2.269-2.1309c4.614-4.3329 10.419-6.7041 16.412-6.7041l7.034-2.688 14.868-9.7182h11.991l18.705 5.9964 6.394 6.4098 16.147 2.6881 4.317 8.2708h26.858l9.77-4.6192 13.436-15.4626c1.78-2.0487 4.352-2.9424 6.84-2.3766l10.234 5.0897 12.303 6.4098 7.049-9.0979 4.149-3.9603c1.415-1.3514 3.53-1.1421 4.718.4669l4.562 6.1815 3.837 9.0979 9.794 5.1072c1.528.7968 2.979 1.7717 4.328 2.9089l5.702 4.8037 5.875-1.8369c5.445-1.7027 11.281-.3313 15.68 3.6846l1.147 1.0471h5.26c1.446 0 2.888.1181 4.316.3525l12.2-6.7441.441-.3494c4.866-3.8597 11.223-4.3299 16.49-1.2198l17.642 9.7382 11.237 9.7739 13.559 4.5277 10.477 8.9008 10.012.5913c.44.0259.85.2476 1.15.6168l4.02 5.0117 17.89 5.7309 2.57-.3211 14.69.8675 15.2 9.8553 6.81 2.1827 15.85-3.3832 13.1.7732 12.46-2.9907 6.53 4.1128 6.93-8.7405c.67-.8521 1.65-1.3127 2.66-1.2531l8.05.4756c.79.0465 1.54.3619 2.17.9047l2.68 2.3196c3.14 2.7228 6.94 4.3048 10.89 4.5382l7.35.4338 1-1.2427c2.7-3.3426 6.57-5.1426 10.56-4.9069l1.52.0897 9.35-4.8313 5.81-3.2452c1.55-.8654 3.41-.5618 4.68.764l.56.5891c1.87 1.9479 4.73 2.0089 6.66.1421l4.41-4.2725c.61-.5865 1.35-.9642 2.14-1.0886l7.87-1.2397 4.66-5.0049.68-.6886c2.74-2.7783 6.69-3.4028 9.99-1.58l11.36 7.0896c1.9 1.5033 4.95 5.1807 7.45 8.2029 1.85 2.2253 3.4 4.0953 3.98 4.4807.95.6319 15.67-2.1919 25.23-4.3035 4.99-1.1012 10.52.1008 14.59 3.5351l10.86 9.1451 3.7 4.5249c2.43 2.9716 5.42 5.2856 8.75 6.7696l7.72 5.383 4.12 2.879h8.53l6.76-2.879h9.06l26.61-27.8186c2.13-2.2227 5.74-2.0166 7.6.4337l11.56 15.2323 11.12 3.6636 8.27 8.489 9.18 9.725 5.92 7.285 6.42 4.684 6.42 4.163V184H568.257l-208.05-11.077-167.448.534-192.75903455-.551v-66.423L7.27316 109.828l10.72844-3.332 7.947-6.087h4.8422l6.7585-3.9438 3.8399-3.7146 6.811-3.1642 8.7418 7.8152 5.0226-4.651 4.7464-1.9235 6.373-6.8332 4.5201-7.2429 8.3443-6.303 8.7417-8.1039 16.6889-15.0178 20.357 15.0178 32.152-5.1785 15.923-9.8393c3.39-1.2858 6.482-3.4202 9.046-6.2448z" fill="#F3F4F6"/><path d="M1251.14 123.755l-3.9-1.964-11.26-3.877c-4.23-1.456-9.81-1.855-14.74-1.218-9.45 1.22-24.02 2.904-25 2.641-.59-.16-2.23-.971-4.17-1.936-2.64-1.31-5.85-2.905-7.82-3.539l-11.67-2.926c-3.38-.742-7.3-.351-9.9.989l-.65.332-4.43 2.408-7.8.777c-.78.078-1.51.27-2.09.554l-4.21 2.066c-1.84.903-4.7.953-6.65.115l-.59-.254c-1.33-.57-3.2-.658-4.71-.222l-5.65 1.636-9.11 2.454h-1.52c-4 0-7.79.925-10.33 2.522l-.94.593h-7.36c-3.95 0-7.82-.619-11.09-1.775l-2.78-.986c-.65-.23-1.42-.354-2.21-.354h-8.06c-1.01 0-1.97.237-2.6.643l-6.51 4.171-6.72-1.699-12.31 1.699h-13.1l-18.24 2.292-19.974-5.218h-14.708l-14.548 1.227-10.383-5.319c-.313-.16-.736-.25-1.176-.25h-10.024l-10.871-3.776-13.749-1.699-11.67-4.153-18.066-3.965c-5.403-1.276-11.73-.89-16.412 1l-.424.171-30.166 8.646-11.67 3.776-18.699 1.485-11.148-1.485-.985-.549c-1.26-.701-3.382-.74-4.734-.086l-3.961 1.918-7.499.202-2.269-.973c-4.614-1.978-10.419-3.061-16.412-3.061l-7.034-1.227-14.868-4.436h-11.991l-18.705 2.737-6.394 2.926-16.147 1.228-4.317 3.775h-26.858l-9.77-2.108-13.436-7.059c-1.78-.936-4.352-1.344-6.84-1.085l-10.234 2.323-12.303 2.926-7.049-4.153-4.149-1.808c-1.415-.617-3.53-.521-4.718.213l-4.562 2.822-3.837 4.154-9.794 2.331c-1.528.364-2.979.809-4.328 1.328l-5.702 2.193-5.875-.839c-5.445-.777-11.281-.151-15.68 1.683l-1.147.478h-5.26c-1.446 0-2.888.053-4.316.161l-12.2-3.079-.441-.16c-4.866-1.762-11.223-1.977-16.49-.557l-17.642 4.446-11.237 4.462-13.559 2.067-10.477 4.063-10.01.27c-.44.012-.853.113-1.149.282l-4.024 2.288-17.886 2.616-2.576-.146-14.688.396-15.199 4.499-6.812.996-15.851-1.544-13.092.353-12.464-1.366-6.535 1.878-6.921-3.99c-.675-.389-1.654-.6-2.662-.572l-8.052.217c-.788.021-1.545.165-2.172.413l-2.678 1.059c-3.145 1.243-6.942 1.965-10.894 2.072l-7.344.198-1.003-.568c-2.697-1.526-6.573-2.347-10.564-2.24l-1.519.041-9.347-2.205-5.809-1.482c-1.549-.395-3.409-.256-4.679.349l-.565.269c-1.866.889-4.723.917-6.653.065l-4.416-1.951c-.607-.268-1.349-.44-2.138-.497l-7.871-.566-4.663-2.285-.679-.314c-2.738-1.268-6.687-1.554-9.992-.721l-11.36 3.236c-1.898.687-4.945 2.365-7.449 3.745-1.844 1.016-3.394 1.87-3.974 2.046-.95.288-15.67-1.001-25.231-1.965-4.987-.503-10.518.046-14.595 1.614l-10.857 4.175-3.699 2.065c-2.43 1.357-5.42 2.414-8.747 3.091l-7.724 2.457-4.117 1.315h-8.531l-6.761-1.315h-9.0609l-28.2377-13.475c-1.5152-.723-3.2921-.638-4.7307.228l-12.7999 7.699-11.1197 1.673-8.2672 3.875-9.1857 4.44-5.921 3.326-6.41859 2.138L0 166.676V189h871.743l208.047-5.057 167.45.244 192.76-.252v-30.323l-7.27 1.527-10.73-1.521-7.95-2.779h-4.84l-6.76-1.801-3.84-1.695-6.81-1.445-8.74 3.568-5.02-2.123-4.75-.878-6.37-3.12-4.52-3.306-8.35-2.878-8.74-3.7-16.69-6.856-20.36 6.856-32.15-2.364-15.92-4.492c-3.39-.586-6.48-1.561-9.05-2.85z" fill="#F9FAFB"/></svg>
\ No newline at end of file
diff --git a/nuxtjs.org/windi.config.js b/nuxtjs.org/windi.config.js
index 13837023e..ef6854f5f 100644
--- a/nuxtjs.org/windi.config.js
+++ b/nuxtjs.org/windi.config.js
@@ -5,7 +5,13 @@ export default {
     colors: {
       transparent: 'transparent',
       current: 'currentColor',
-      'primary-green': '#00DC82',
+      // $colorGreenLighter: #80EEC0;
+      // $colorGreenLight: #40E5A1;
+      // $colorGreenDefault: #00DC82;
+      // $colorGreenDark: #00BB6F;
+      // $color-greenDarker: #009A5B;
+
+      primary: '#00DC82',
       'secondary-surface': '#E5F9FF',
       'secondary-lightest': '#B7E1ED',
       'secondary-lighter': '#95CDDE',
diff --git a/package.json b/package.json
index 387954f2c..a7106d4fa 100755
--- a/package.json
+++ b/package.json
@@ -134,4 +134,4 @@
   "peerDependencies": {
     "vuex": "^3.6.2"
   }
-}
+}
\ No newline at end of file
diff --git a/src/defaultTheme/components/atoms/Badge.vue b/src/defaultTheme/components/atoms/Badge.vue
index ebf0c9186..d942ea4dc 100644
--- a/src/defaultTheme/components/atoms/Badge.vue
+++ b/src/defaultTheme/components/atoms/Badge.vue
@@ -11,7 +11,7 @@
       rounded-full
       bg-primary-100
       dark:bg-primary-800
-      text-primary
+      d-text-primary
     "
   >
     <slot />
diff --git a/src/defaultTheme/components/atoms/LangSwitcher.vue b/src/defaultTheme/components/atoms/LangSwitcher.vue
index 938be058f..650bc585d 100644
--- a/src/defaultTheme/components/atoms/LangSwitcher.vue
+++ b/src/defaultTheme/components/atoms/LangSwitcher.vue
@@ -20,7 +20,7 @@
           :class="[
             $i18n.locale === locale.code
               ? 'font-semibold cursor-default text-gray-800 dark:text-gray-200'
-              : 'hover:text-primary'
+              : 'hover:d-text-primary'
           ]"
           >{{ locale.name }}</NuxtLink
         >
diff --git a/src/defaultTheme/components/atoms/List.vue b/src/defaultTheme/components/atoms/List.vue
index be21f0d8f..07801833e 100644
--- a/src/defaultTheme/components/atoms/List.vue
+++ b/src/defaultTheme/components/atoms/List.vue
@@ -85,7 +85,7 @@ export default {
 <style lang="postcss">
 /* Primary */
 .list-primary {
-  @apply text-primary;
+  @apply d-text-primary;
 }
 
 /* Info */
diff --git a/src/defaultTheme/components/organisms/page/PagePrevNext.vue b/src/defaultTheme/components/organisms/page/PagePrevNext.vue
index 51fa3a7d8..2a0676382 100644
--- a/src/defaultTheme/components/organisms/page/PagePrevNext.vue
+++ b/src/defaultTheme/components/organisms/page/PagePrevNext.vue
@@ -16,8 +16,8 @@
           rounded-xl
           group
           xs:w-auto
-          dark:text-gray-400 dark:border-gray-800 dark:border-opacity-50 dark:hover:text-primary-400
-          hover:text-primary hover:border-primary-200
+          dark:text-gray-400 dark:border-gray-800 dark:border-opacity-50 dark:hover:d-text-primary-400
+          hover:d-text-primary hover:border-primary-200
           dark:hover:border-gray-700
         "
       >
@@ -26,8 +26,8 @@
             {{ directory(prev.to) }}
           </span>
           <span class="flex items-center w-full leading-tight">
-            <IconArrowLeft class="flex-shrink-0 w-4 h-4 mr-2 text-primary" />
-            <span class="truncate text-primary">{{ prev.title }}</span>
+            <IconArrowLeft class="flex-shrink-0 w-4 h-4 mr-2 d-text-primary" />
+            <span class="truncate d-text-primary">{{ prev.title }}</span>
           </span>
         </span>
       </NuxtLink>
@@ -51,7 +51,7 @@
           group
           xs:mb-0 xs:w-auto
           dark:text-gray-400 dark:border-gray-800
-          hover:text-primary hover:border-primary-200
+          hover:d-text-primary hover:border-primary-200
           dark:hover:border-gray-700 dark:border-opacity-50
         "
       >
@@ -60,8 +60,8 @@
             {{ directory(next.to) }}
           </span>
           <span class="flex items-center w-full leading-tight">
-            <span class="truncate text-primary">{{ next.title }}</span>
-            <IconArrowRight class="flex-shrink-0 w-4 h-4 ml-2 text-primary" />
+            <span class="truncate d-text-primary">{{ next.title }}</span>
+            <IconArrowRight class="flex-shrink-0 w-4 h-4 ml-2 d-text-primary" />
           </span>
         </span>
       </NuxtLink>
diff --git a/src/defaultTheme/components/templates/BlogPost.vue b/src/defaultTheme/components/templates/BlogPost.vue
index 5297c04aa..51f6a30ac 100644
--- a/src/defaultTheme/components/templates/BlogPost.vue
+++ b/src/defaultTheme/components/templates/BlogPost.vue
@@ -2,7 +2,7 @@
   <div>
     <div class="py-16 sm:py-24 relative">
       <div class="relative max-w-2xl mx-auto">
-        <NuxtLink :to="$contentLocalePath('/templates/blog')" class="absolute top-0 left-0 px-4 -mt-12 sm:-mt-16">
+        <NuxtLink :to="$contentLocalePath('/blog')" class="absolute top-0 left-0 px-4 -mt-12 sm:-mt-16">
           <span
             class="
               text-sm
diff --git a/src/defaultTheme/settings.ts b/src/defaultTheme/settings.ts
index 1c4f2fdbf..d0e4e7ec7 100644
--- a/src/defaultTheme/settings.ts
+++ b/src/defaultTheme/settings.ts
@@ -37,9 +37,9 @@ const defaultThemeSettings = {
     'body-bg': 'bg-white dark:bg-gray-900',
     'docus-body-text-color': 'text-gray-900 dark:text-gray-50',
     // Primary
-    'text-primary': 'text-primary-500 dark:text-primary-400',
+    'd-text-primary': 'text-primary-500 dark:text-primary-400',
     'border-primary': 'border-primary-500 dark:border-primary-400',
-    'bg-primary': 'bg-primary-500 dark:bg-primary-400',
+    'd-bg-primary': 'bg-primary-500 dark:bg-primary-400',
     // Icons
     'text-icon': 'text-gray-500 dark:text-gray-500 hover:text-gray-700 dark:hover:text-gray-400',
     'd-icon': 'text-icon focus:outline-none',