diff --git a/next.config.js b/next.config.js
index 9151f4d01..f053ebf79 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1 @@
-module.exports = {
-  webpack: (config, { isServer }) => {
-    return config;
-  },
-};
+module.exports = {};
diff --git a/package.json b/package.json
index b63397788..c4f5660d3 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "@types/react": "^17.0.5",
     "@types/react-dom": "^17.0.4",
     "@types/styled-components": "^5.1.9",
+    "@types/twemoji": "^12.1.1",
     "autoprefixer": "^10.2.5",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-styled-components": "^1.12.0",
diff --git a/src/layouts/simpleLayout.tsx b/src/layouts/simpleLayout.tsx
index 68d9d8a0d..5685b63e6 100644
--- a/src/layouts/simpleLayout.tsx
+++ b/src/layouts/simpleLayout.tsx
@@ -1,32 +1,15 @@
 import { ILayout } from "../types";
-import { emojify, gString } from "./utils";
+import { Emoji, emojify, gString, Markdown } from "./utils";
 
 export const simpleLayout: ILayout = {
   name: "Simple",
-  properties: [{ name: "Test", type: "text", default: "**Hello** _World_" }],
+  properties: [{ name: "Text", type: "text", default: "**Hello** _World_" }],
   getCSS: () => `
-    .top {
-      width: 100%;
-      display: flex;
-      height: 100vh;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .emoji {
-      font-size: 100px; 
-      margin: 0 80px;
-    }
-
-    .header { 
-      font-size: 100px; 
+    body {
+      font-size: 200px;
     }
   `,
   Component: ({ config }) => (
-    <div className="top">
-      <div className="emoji">${emojify("✨")}</div>
-      <div className="header">${gString(config, "Test")}</div>
-      <div className="emoji">${emojify("✨")}</div>
-    </div>
+    <Markdown className="header">{gString(config, "Text")}</Markdown>
   ),
 };
diff --git a/src/layouts/utils.ts b/src/layouts/utils.ts
deleted file mode 100644
index 98653c2be..000000000
--- a/src/layouts/utils.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import twemoji from "twemoji";
-import marked from "marked";
-import { ILayoutConfig } from "../types";
-
-const twOptions = { folder: "svg", ext: ".svg" };
-export const emojify = (text: string): string => twemoji.parse(text, twOptions);
-
-export const mdToHTML = (text: string): string => marked(text);
-
-export const gString = (
-  layoutConfig: ILayoutConfig,
-  name: string,
-  defaultValue?: string,
-): string => {
-  const value = layoutConfig[name] ?? defaultValue;
-  return Array.isArray(value) ? value.join(", ") : value;
-};
diff --git a/src/layouts/utils.tsx b/src/layouts/utils.tsx
new file mode 100644
index 000000000..5ae9bb8bb
--- /dev/null
+++ b/src/layouts/utils.tsx
@@ -0,0 +1,40 @@
+import twemoji from "twemoji";
+import marked from "marked";
+import { ILayoutConfig } from "../types";
+import React from "react";
+
+export const emojify = (text: string): string =>
+  twemoji.parse(text, {
+    ext: ".svg",
+  });
+
+export const mdToHTML = (text: string): string => marked(text);
+
+export const gString = (
+  layoutConfig: ILayoutConfig,
+  name: string,
+  defaultValue?: string,
+): string => {
+  const value = layoutConfig[name] ?? defaultValue;
+  return Array.isArray(value) ? value.join(", ") : value;
+};
+
+export const Emoji: React.FC<{ children: string; className?: string }> = ({
+  children,
+  ...props
+}) => (
+  <div
+    className={`emoji ${props.className}`}
+    dangerouslySetInnerHTML={{ __html: emojify(children) }}
+  />
+);
+
+export const Markdown: React.FC<{ children: string; className?: string }> = ({
+  children,
+  ...props
+}) => (
+  <div
+    className={`markdown ${props.className}`}
+    dangerouslySetInnerHTML={{ __html: mdToHTML(children) }}
+  />
+);
diff --git a/yarn.lock b/yarn.lock
index 598e7a433..aef92a005 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -321,6 +321,11 @@
     "@types/react" "*"
     csstype "^3.0.2"
 
+"@types/twemoji@^12.1.1":
+  version "12.1.1"
+  resolved "https://registry.yarnpkg.com/@types/twemoji/-/twemoji-12.1.1.tgz#34c5dcecff438b5be173889a6ee8ad51ba90445f"
+  integrity sha512-dW1B1WHTfrWmEzXb/tp8xsZqQHAyMB9JwLwbBqkIQVzmNUI02R7lJqxUpKFM114ygNZHKA1r74oPugCAiYHt1A==
+
 "@types/yauzl@^2.9.1":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.1.tgz#d10f69f9f522eef3cf98e30afb684a1e1ec923af"