diff --git a/packages/client/builtin/Toc.vue b/packages/client/builtin/Toc.vue
index 06e15888b3..bed3cf9fc3 100644
--- a/packages/client/builtin/Toc.vue
+++ b/packages/client/builtin/Toc.vue
@@ -77,7 +77,7 @@ const toc = computed(() => {
 </script>
 
 <template>
-  <div :style="`column-count:${columns}`">
+  <div class="slidev-toc" :style="`column-count:${columns}`">
     <TocList :level="1" :list="toc" />
   </div>
 </template>
diff --git a/packages/client/builtin/TocList.vue b/packages/client/builtin/TocList.vue
index b2ec22fd4e..a5daaaa3ef 100644
--- a/packages/client/builtin/TocList.vue
+++ b/packages/client/builtin/TocList.vue
@@ -16,8 +16,8 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <ul v-if="list && list.length > 0" :class="['toc', `toc-level-${level}`]">
-    <li v-for="item in list" :key="item.path" :class="['toc-item', {'toc-item-active': item.active}, {'toc-item-parent-active': item.activeParent}]">
+  <ul v-if="list && list.length > 0" :class="['slidev-toc-list', `slidev-toc-list-level-${level}`]">
+    <li v-for="item in list" :key="item.path" :class="['slidev-toc-item', {'slidev-toc-item-active': item.active}, {'slidev-toc-item-parent-active': item.activeParent}]">
       <RouterLink :to="item.path">
         {{ item.title }}
       </RouterLink>