diff --git a/docs/docs/codes/applications.mdx b/docs/docs/codes/applications.mdx
index 68e24d36..c76aa298 100644
--- a/docs/docs/codes/applications.mdx
+++ b/docs/docs/codes/applications.mdx
@@ -4,12 +4,14 @@ sidebar_label: Applications
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_applications.mdx";
 
 export const toc = contentToc;
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Content />
diff --git a/docs/docs/codes/editing.mdx b/docs/docs/codes/editing.mdx
index 3475d6c2..f4359ba9 100644
--- a/docs/docs/codes/editing.mdx
+++ b/docs/docs/codes/editing.mdx
@@ -4,12 +4,14 @@ sidebar_label: Editing
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_editing.mdx";
 
 export const toc = contentToc;
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Content />
diff --git a/docs/docs/codes/index.mdx b/docs/docs/codes/index.mdx
index 6a2fbdc8..a701b4ce 100644
--- a/docs/docs/codes/index.mdx
+++ b/docs/docs/codes/index.mdx
@@ -5,6 +5,7 @@ hide_title: true
 slug: ./
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Key, { toc as keyToc } from "./_keyboard-keypad.mdx";
@@ -23,6 +24,7 @@ export const toc = [
   ...powerToc,
 ];
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Key />
diff --git a/docs/docs/codes/input-assist.mdx b/docs/docs/codes/input-assist.mdx
index e8406f5c..33d661e0 100644
--- a/docs/docs/codes/input-assist.mdx
+++ b/docs/docs/codes/input-assist.mdx
@@ -4,12 +4,14 @@ sidebar_label: Input Assist
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_input-assist.mdx";
 
 export const toc = contentToc;
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Content />
diff --git a/docs/docs/codes/keyboard-keypad.mdx b/docs/docs/codes/keyboard-keypad.mdx
index 7b040bfd..033a7246 100644
--- a/docs/docs/codes/keyboard-keypad.mdx
+++ b/docs/docs/codes/keyboard-keypad.mdx
@@ -4,12 +4,14 @@ sidebar_label: Keyboard & Keypad
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_keyboard-keypad.mdx";
 
 export const toc = contentToc;
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Content />
diff --git a/docs/docs/codes/media.mdx b/docs/docs/codes/media.mdx
index c7884479..760e059c 100644
--- a/docs/docs/codes/media.mdx
+++ b/docs/docs/codes/media.mdx
@@ -4,12 +4,14 @@ sidebar_label: Media
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_media.mdx";
 
 export const toc = contentToc;
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Content />
diff --git a/docs/docs/codes/modifiers.mdx b/docs/docs/codes/modifiers.mdx
index 483e34af..ea85583b 100644
--- a/docs/docs/codes/modifiers.mdx
+++ b/docs/docs/codes/modifiers.mdx
@@ -4,10 +4,12 @@ sidebar_label: Modifiers
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Table from "@site/src/components/codes/Table";
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 
diff --git a/docs/docs/codes/power.mdx b/docs/docs/codes/power.mdx
index 2af3233f..44123e91 100644
--- a/docs/docs/codes/power.mdx
+++ b/docs/docs/codes/power.mdx
@@ -4,12 +4,14 @@ sidebar_label: Power
 hide_title: true
 ---
 
+import SpellingCaution from "@site/src/components/codes/SpellingCaution";
 import OsLegend from "@site/src/components/codes/OsLegend";
 import ToastyContainer from "@site/src/components/codes/ToastyContainer";
 import Content, { toc as contentToc } from "./_power.mdx";
 
 export const toc = contentToc;
 
+<SpellingCaution />
 <OsLegend />
 <ToastyContainer />
 <Content />
diff --git a/docs/src/components/codes/SpellingCaution.jsx b/docs/src/components/codes/SpellingCaution.jsx
new file mode 100644
index 00000000..95a10a72
--- /dev/null
+++ b/docs/src/components/codes/SpellingCaution.jsx
@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2020 The ZMK Contributors
+ *
+ * SPDX-License-Identifier: CC-BY-NC-SA-4.0
+ */
+
+import React from "react";
+import Admonition from '@theme/Admonition';
+
+export default function SpellingCaution() {
+  return (
+    <Admonition type="caution">
+        <p>Take extra notice of the spelling of the keycodes, especially the shorthand spelling. Otherwise, it will result in an elusive parsing error!</p>
+    </Admonition>
+  );
+}
+
+SpellingCaution.propTypes = {};