diff --git a/packages/website/mdx/guides/page-template.mdx b/packages/website/mdx/guides/page-template.mdx
index 69301794de..f2302f6a48 100644
--- a/packages/website/mdx/guides/page-template.mdx
+++ b/packages/website/mdx/guides/page-template.mdx
@@ -19,11 +19,15 @@ export const links = [
 
 <StepLinks heading="Useful Links" links={links} />
 
+# Text styling examples
+
+This text is normal
+
 **This text is bold**  
 
-__This text is italicized__  
+_This text is italicized_
 
-~~This text is struck through~~
+~This text is struck through~
 
 # Sol-coverage
 
diff --git a/packages/website/ts/components/docs/mdx/emphasis.tsx b/packages/website/ts/components/docs/mdx/emphasis.tsx
new file mode 100644
index 0000000000..56ff764286
--- /dev/null
+++ b/packages/website/ts/components/docs/mdx/emphasis.tsx
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Emphasis = styled.em`
+    font-style: italic;
+`;
diff --git a/packages/website/ts/pages/docs/page.tsx b/packages/website/ts/pages/docs/page.tsx
index 7c32371359..9c1cf471ae 100644
--- a/packages/website/ts/pages/docs/page.tsx
+++ b/packages/website/ts/pages/docs/page.tsx
@@ -7,6 +7,7 @@ import { MDXProvider } from '@mdx-js/react';
 import { Animation } from 'ts/components/docs/mdx/animation';
 import { Code } from 'ts/components/docs/mdx/code';
 import { CodeTabs } from 'ts/components/docs/mdx/code_tabs';
+import { Emphasis } from 'ts/components/docs/mdx/emphasis';
 import { H1, H2, H3, H4, H5, H6 } from 'ts/components/docs/mdx/headings';
 import { HelpCallout } from 'ts/components/docs/mdx/help_callout';
 import { HelpfulCta } from 'ts/components/docs/mdx/helpful_cta';
@@ -146,6 +147,7 @@ export const DocsPage: React.FC<IDocsPageProps> = props => {
 
 const mdxComponents = {
     code: Code,
+    em: Emphasis,
     h1: H1,
     h2: H2,
     h3: H3,