diff --git a/civet.dev/.vitepress/components/Hero.vue b/civet.dev/.vitepress/components/Hero.vue
index ef2f1f2b..9920ff1f 100644
--- a/civet.dev/.vitepress/components/Hero.vue
+++ b/civet.dev/.vitepress/components/Hero.vue
@@ -4,8 +4,8 @@ import VPHero from 'vitepress/dist/client/theme-default/components/VPHero.vue';
 const actions = [
   {
     theme: 'brand',
-    text: 'Cheatsheet',
-    link: '/cheatsheet',
+    text: 'Reference',
+    link: '/reference',
   },
   {
     theme: 'alt',
diff --git a/civet.dev/.vitepress/config.js b/civet.dev/.vitepress/config.mjs
similarity index 95%
rename from civet.dev/.vitepress/config.js
rename to civet.dev/.vitepress/config.mjs
index 5271c0ca..27e314f0 100644
--- a/civet.dev/.vitepress/config.js
+++ b/civet.dev/.vitepress/config.mjs
@@ -1,6 +1,6 @@
 import pkg from '../../package.json';
-import { head } from './head.js';
-import { getContributors } from './utils/getContributors.js';
+import { head } from './head.mjs';
+import { getContributors } from './utils/getContributors.mjs';
 import { defineConfig } from 'vitepress';
 import { compileCivet } from './utils/compileCivet';
 import { getHighlighter } from './utils/getHighlighter';
@@ -26,7 +26,7 @@ export default async function vitePressConfig() {
       siteTitle: 'Civet',
       nav: [
         { text: 'Getting started', link: '/getting-started' },
-        { text: 'Cheatsheet', link: '/cheatsheet' },
+        { text: 'Reference', link: '/reference' },
         { text: 'Comparison', link: '/comparison' },
         { text: 'Integrations', link: '/integrations' },
         { text: 'Config', link: '/config' },
diff --git a/civet.dev/.vitepress/head.js b/civet.dev/.vitepress/head.mjs
similarity index 100%
rename from civet.dev/.vitepress/head.js
rename to civet.dev/.vitepress/head.mjs
diff --git a/civet.dev/.vitepress/utils/getContributors.js b/civet.dev/.vitepress/utils/getContributors.mjs
similarity index 100%
rename from civet.dev/.vitepress/utils/getContributors.js
rename to civet.dev/.vitepress/utils/getContributors.mjs
diff --git a/civet.dev/comparison.md b/civet.dev/comparison.md
index e66681c9..e147715c 100644
--- a/civet.dev/comparison.md
+++ b/civet.dev/comparison.md
@@ -165,7 +165,7 @@ $: document.title = title
 ## Decorators
 
 Civet uses `@` as
-[shorthand for `this`, `static`, and `constructor`](/cheatsheet#this).
+[shorthand for `this`, `static`, and `constructor`](/reference#this).
 Decorators need to be written with `@@`:
 
 <Playground>
diff --git a/civet.dev/index.md b/civet.dev/index.md
index 0837051d..a1d4d74d 100644
--- a/civet.dev/index.md
+++ b/civet.dev/index.md
@@ -18,7 +18,7 @@ so you can [use existing tooling](/integrations)
 but enable concise and powerful syntax.
 In addition to 99% JS/TS [compatibility](/comparison), there are many
 features, with some highlights below and more comprehensive examples
-on the [cheatsheet](/cheatsheet).
+in the [reference](/reference).
 See also Civet's [design philosophy](/philosophy).
 
 ## Highlights: Beyond TC39
@@ -174,7 +174,7 @@ export a, b, c from "./cool.js"
 export x = 3
 </Playground>
 
-### [JSX](/cheatsheet#jsx)
+### [JSX](/reference#jsx)
 
 <Playground>
 function Listing(props)
diff --git a/civet.dev/cheatsheet.md b/civet.dev/reference.md
similarity index 99%
rename from civet.dev/cheatsheet.md
rename to civet.dev/reference.md
index a3a387aa..8843c4c5 100644
--- a/civet.dev/cheatsheet.md
+++ b/civet.dev/reference.md
@@ -1,5 +1,5 @@
 ---
-title: Cheatsheet
+title: Reference
 aside: false
 ---