diff --git a/app/index.html b/app/index.html
index 9aff395..637a962 100644
--- a/app/index.html
+++ b/app/index.html
@@ -82,7 +82,7 @@
 
     <div class="noteBox">
         <textarea id="noteBox" class="noteBoxText"></textarea>
-        <iframe src="about:blank" id="markdown" style="display: none;" sandbox="allow-same-origin allow-scripts"></iframe>
+        <iframe id="markdown" style="display: none;" sandbox="allow-scripts"></iframe>
     </div>
 
     <script type="text/javascript" src="../static/js/main.js"></script>
diff --git a/markdown/index.html b/markdown/index.html
new file mode 100644
index 0000000..2c87462
--- /dev/null
+++ b/markdown/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <script>
+    let iframe = document.Get
+    window.addEventListener('message', function(event) {
+        var message = event.data;
+
+        if (message && message.header && message.body) {
+            if (message.header === 'head') {
+                console.log("head" + message.body);
+            } else if (message.header === 'body') {
+                console.log("body" + message.body);
+            }
+        }
+    });
+    </script>
+</head>
+
+<body>
+    <iframe src="about:blank" id="markdown-frame" style="width: 100%; height: 100%; border: none;"></iframe>
+</body>
diff --git a/static/css/style.css b/static/css/style.css
index c9c26dd..3947ec5 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -353,6 +353,7 @@ body {
     color: var(--text-color);
     border: none;
     width: 100%;
+    font-family: "Inter", sans-serif;
 }
 
 iframe#markdown {
diff --git a/static/iframe.html b/static/iframe.html
new file mode 100644
index 0000000..5ff566b
--- /dev/null
+++ b/static/iframe.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>iFrame Container</title>
+</head>
+<body>
+  <iframe style="width: 100%; height: 100%; border: none;" id="messageContainer" sandbox="allow-same-origin allow-scripts"></iframe>
+
+  <script>
+    function receiveMessage(event) {
+      if (event.origin !== location.origin) {
+        return;
+      }
+
+      document.getElementById('messageContainer').contentWindow.document;
+      iframeDocument.open();
+      iframeDocument.write(event.data);
+      iframeDocument.close();
+    }
+
+    // Listen for messages from the parent window
+    window.addEventListener('message', receiveMessage, false);
+  </script>
+</body>
+</html>
diff --git a/static/js/main.js b/static/js/main.js
index c43d1e0..a368d65 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -185,8 +185,8 @@ function updateFont() {
     currentFontSize = localStorage.getItem("SETTING-fontsize")
     noteBox.style.fontSize = currentFontSize + "px"
     textSizeBox.innerText = currentFontSize + "px"
-    var style = "<style>body { color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; font-size: " + currentFontSize + "px; }</style>";
-    markdown.contentWindow.document.head.innerHTML = style;
+    var targethtml = "<!DOCTYPE html><html><style>html { height: 100% } body { font-family: 'Inter', sans-serif; height: 100%; color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; font-size: " + currentFontSize + "px; }</style>" + marked.parse(noteBox.value) + "</html>";
+    markdown.srcdoc = targethtml;
 }
 
 async function waitforedit() {
@@ -399,7 +399,8 @@ function updateWordCount() {
 }
 
 function renderMarkDown() {
-    markdown.contentWindow.document.body.innerHTML = marked.parse(noteBox.value)
+    var targethtml = "<!DOCTYPE html><html><style>html { height: 100% } body { font-family: 'Inter', sans-serif; height: 100%; color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; font-size: " + currentFontSize + "px; }</style>" + marked.parse(noteBox.value) + "</html>";
+    markdown.srcdoc = targethtml
 }
 
 function selectNote(nameithink) {
@@ -674,8 +675,8 @@ removeBox.addEventListener("click", (event) => {
 });
 
 document.addEventListener("DOMContentLoaded", function() {
-    var style = "<style>body { color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; }</style>";
-    markdown.contentWindow.document.head.innerHTML = style;
+    var targethtml = "<!DOCTYPE html><html><style>html { height: 100% } body { font-family: 'Inter', sans-serif; height: 100%; color: " + getComputedStyle(document.documentElement).getPropertyValue('--text-color') + "; font-size: " + currentFontSize + "px; }</style>" + marked.parse(noteBox.value) + "</html>";
+    markdown.srcdoc = targethtml
 });
 
 if (isFirstTimeVisitor() && /Android|iPhone|iPod/i.test(navigator.userAgent)) {
