diff --git a/components/app/AppFooter.vue b/components/app/AppFooter.vue
index a3c291b8b..627b56f3d 100644
--- a/components/app/AppFooter.vue
+++ b/components/app/AppFooter.vue
@@ -7,9 +7,9 @@ const textLinks = computed(() => config.value?.footer?.textLinks || [])
 const socialIconsCount = computed(() => Object.entries(config.value?.socials || {}).filter(([, v]) => v).length)
 const nbSocialIcons = computed(() => (socialIcons.value ? socialIconsCount.value : 0))
 
-const isIndex = computed(() => route.path === '/')
+const isBasicLayout = computed(() => route.meta.layout === 'basic')
 
-watch(isIndex, (value) => {
+watch(isBasicLayout, (value) => {
   updateAppConfig({
     docus: {
       footer: {
@@ -22,11 +22,25 @@ watch(isIndex, (value) => {
 
 <template>
   <footer>
-    <Container :fluid="config?.footer?.fluid" padded class="footer-layout">
+    <Container
+      :fluid="config?.footer?.fluid"
+      padded
+      class="footer-layout"
+    >
       <!-- Left -->
       <div class="left">
-        <a v-if="config?.footer?.credits" :href="config?.footer?.credits?.href || '#'" rel="noopener" target="_blank" class="footer-credits">
-          <Component :is="config?.footer?.credits?.icon" v-if="config?.footer?.credits?.icon" class="credits-icon" />
+        <a
+          v-if="config?.footer?.credits"
+          :href="config?.footer?.credits?.href || '#'"
+          rel="noopener"
+          target="_blank"
+          class="footer-credits"
+        >
+          <Component
+            :is="config?.footer?.credits?.icon"
+            v-if="config?.footer?.credits?.icon"
+            class="credits-icon"
+          />
           <p v-if="config?.footer?.credits?.text">{{ config.footer.credits.text }}</p>
         </a>
       </div>
diff --git a/components/app/AppHeader.vue b/components/app/AppHeader.vue
index 185d156d8..e0e4ca082 100644
--- a/components/app/AppHeader.vue
+++ b/components/app/AppHeader.vue
@@ -7,9 +7,9 @@ const route = useRoute()
 
 const hasDrawer = computed(() => navigation.value?.length > 1 || navigation.value?.[0]?.children?.length)
 
-const isIndex = computed(() => route.path === '/')
+const isBasicLayout = computed(() => route.meta.layout === 'basic')
 
-watch(isIndex, (value) => {
+watch(isBasicLayout, (value) => {
   updateAppConfig({
     docus: {
       header: {
@@ -21,7 +21,7 @@ watch(isIndex, (value) => {
 </script>
 
 <template>
-  <header :class="{ 'has-drawer': hasDrawer, 'has-doc-search': hasDocSearch, 'is-index': isIndex, 'on-top': y === 0 }">
+  <header :class="{ 'has-drawer': hasDrawer, 'has-doc-search': hasDocSearch, 'is-basic-layout': isBasicLayout, 'on-top': y === 0 }">
     <Container :fluid="config?.header?.fluid ">
       <div class="header-layout">
         <div class="section left">
@@ -87,7 +87,7 @@ css({
     backgroundColor: '{docus.app.header.backgroundColor}',
     height: '{docus.app.header.height}',
 
-    '&.is-index.on-top': {
+    '&.is-basic-layout.on-top': {
       background: 'transparent',
       borderColor: 'transparent',
       backdropFilter: 'none',