diff --git a/src/components/MdxComponents/highlights.js b/src/components/MdxComponents/highlights.js
index 253226fd..6425c416 100644
--- a/src/components/MdxComponents/highlights.js
+++ b/src/components/MdxComponents/highlights.js
@@ -47,15 +47,15 @@ const Highlight = ({ children, color, icon, ...props }) => {
 };
 
 export default {
-  Note: (props) =>
+  Warning: (props) =>
     Highlight({
-      color: 'note',
+      color: 'warning',
       icon: AlertTriangle,
       ...props,
     }),
-  Warning: (props) =>
+  Error: (props) =>
     Highlight({
-      color: 'warning',
+      color: 'error',
       icon: AlertOctagon,
       ...props,
     }),
diff --git a/src/theme/base.js b/src/theme/base.js
index d9b50bde..91dc65e3 100644
--- a/src/theme/base.js
+++ b/src/theme/base.js
@@ -147,12 +147,12 @@ const jargon = (colors) => ({
 });
 
 const highlights = (colors) => ({
-  note: {
+  warning: {
     border: colors.orange,
     background: colors.orangeLight,
     font: colors.fontDark,
   },
-  warning: {
+  error: {
     border: colors.red,
     background: colors.redLight,
     font: colors.fontDark,