diff --git a/web/.storybook/tools/Emoji.stories.md b/web/.storybook/tools/Emoji.stories.mdx
similarity index 52%
rename from web/.storybook/tools/Emoji.stories.md
rename to web/.storybook/tools/Emoji.stories.mdx
index 33a24251e..853ac2598 100644
--- a/web/.storybook/tools/Emoji.stories.md
+++ b/web/.storybook/tools/Emoji.stories.mdx
@@ -1,5 +1,3 @@
-
-
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Image, ImageRow } from './ImageAsset';
 
@@ -10,13 +8,14 @@ import { Image, ImageRow } from './ImageAsset';
 {{#each emojiCollections}}
 
 ## {{capitalize this.name}}
-	<a href="/img/emoji/{{this.name}}/LICENSE.md" target="_blank">
-		LICENSE
-	</a>
-	<ImageRow images={[
-		{{#each this.images}}
-			{src: "{{this.src}}", name: "{{this.name}}"},
-		{{/each}}
-	]}/>
+
+    <a href="img/emoji/{{this.name}}/LICENSE.md" target="_blank">
+    	LICENSE
+    </a>
+    <ImageRow images={[
+    	{{#each this.images}}
+    		{src: "{{this.src}}", name: "{{this.name}}"},
+    	{{/each}}
+    ]}/>
 
 {{/each}}
diff --git a/web/.storybook/tools/generate-emoji-story.mjs b/web/.storybook/tools/generate-emoji-story.mjs
index b7e5c27ea..ff810cf74 100644
--- a/web/.storybook/tools/generate-emoji-story.mjs
+++ b/web/.storybook/tools/generate-emoji-story.mjs
@@ -31,7 +31,7 @@ emojiCollectionDirs.forEach(collection => {
   emojiCollections[collection] = { name: collection, images: emojiCollection };
 });
 
-const template = fs.readFileSync('./Emoji.stories.md', 'utf8');
+const template = fs.readFileSync('./Emoji.stories.mdx', 'utf8');
 let t = handlebars.compile(template);
 let output = t({ emojiCollections });
 console.log(output);