diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index f4c8f205..4b61ca2e 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -22,7 +22,7 @@ function onBlur() {
 
 <template>
   <div
-    class="VPFlyout"
+    class="VPFlyout js-required"
     ref="el"
     @mouseenter="open = true"
     @mouseleave="open = false"
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index 15791dd5..439adb48 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -48,7 +48,8 @@ const classes = computed(() => {
     VPLocalNav: true,
     'has-sidebar': hasSidebar.value,
     empty: empty.value,
-    fixed: emptyAndNoSidebar.value
+    fixed: emptyAndNoSidebar.value,
+    'js-required': true
   }
 })
 </script>
diff --git a/src/client/theme-default/components/VPNavBar.vue b/src/client/theme-default/components/VPNavBar.vue
index 19a5da61..47aece70 100644
--- a/src/client/theme-default/components/VPNavBar.vue
+++ b/src/client/theme-default/components/VPNavBar.vue
@@ -46,6 +46,7 @@ watchPostEffect(() => {
           </VPNavBarTitle>
         </div>
 
+
         <div class="content">
           <div class="content-body">
             <slot name="nav-bar-content-before" />
@@ -56,7 +57,7 @@ watchPostEffect(() => {
             <VPNavBarSocialLinks class="social-links" />
             <VPNavBarExtra class="extra" />
             <slot name="nav-bar-content-after" />
-            <VPNavBarHamburger class="hamburger" :active="isScreenOpen" @click="$emit('toggle-screen')" />
+            <VPNavBarHamburger class="hamburger js-required" :active="isScreenOpen" @click="$emit('toggle-screen')" />
           </div>
         </div>
       </div>
diff --git a/src/client/theme-default/components/VPNavBarExtra.vue b/src/client/theme-default/components/VPNavBarExtra.vue
index 0513d62b..40b29842 100644
--- a/src/client/theme-default/components/VPNavBarExtra.vue
+++ b/src/client/theme-default/components/VPNavBarExtra.vue
@@ -28,7 +28,7 @@ const hasExtraContent = computed(
       </template>
     </div>
 
-    <div v-if="site.appearance && site.appearance !== 'force-dark'" class="group">
+    <div v-if="site.appearance && site.appearance !== 'force-dark'" class="group js-required">
       <div class="item appearance">
         <p class="label">
           {{ theme.darkModeSwitchLabel || 'Appearance' }}
diff --git a/src/node/build/render.ts b/src/node/build/render.ts
index 7aacff68..5c8447f3 100644
--- a/src/node/build/render.ts
+++ b/src/node/build/render.ts
@@ -178,6 +178,7 @@ export async function renderPage(
         : ''
     }
     ${await renderHead(head)}
+    <noscript><style>.js-required{display:none!important}</style></noscript>
   </head>
   <body>${teleports?.body || ''}
     <div id="app">${content}</div>
diff --git a/src/node/markdown/plugins/preWrapper.ts b/src/node/markdown/plugins/preWrapper.ts
index 9e79a4e1..fc7d6a4c 100644
--- a/src/node/markdown/plugins/preWrapper.ts
+++ b/src/node/markdown/plugins/preWrapper.ts
@@ -20,7 +20,7 @@ export function preWrapperPlugin(md: MarkdownIt, options: Options) {
     const rawCode = fence(...args)
     return `<div class="language-${lang}${getAdaptiveThemeMarker(
       options
-    )}${active}"><button title="Copy Code" class="copy"></button><span class="lang">${lang}</span>${rawCode}</div>`
+    )}${active}"><button title="Copy Code" class="copy js-required"></button><span class="lang">${lang}</span>${rawCode}</div>`
   }
 }
 
