diff --git a/Server/template/index.html b/Server/template/index.html
new file mode 100644
index 0000000..0436c87
--- /dev/null
+++ b/Server/template/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <link rel="stylesheet" href="highlight/styles/tokyo-night-dark.min.css">
+        <script src="highlight/highlight.min.js"></script>
+        <link href="katex/katex.min.css" rel="stylesheet" type="text/css">
+        <script src="katex/katex.min.js"></script>
+        <script src="katex/contrib/auto-render.min.js"></script>
+        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    </head>
+    <body>
+        <div class="page-container">
+            <header class="page-header">
+                <h1 class="page-title">Your Note Title</h1>
+                <div class="page-subtitle">
+                    <div class="page-author">Author: Your Name</div>
+                    <div class="page-date">Date: August 1, 2025</div>
+                </div>
+            </header>
+
+            <div id="page-content" class="page-content">
+                {% raw body_content %}
+            </div>
+
+        <script>
+            hljs.highlightAll();
+            renderMathInElement(
+                document.body,
+                {
+                    delimiters : [
+                        {left: "$$", right: "$$", display: true},
+                        {left: "\\[", right: "\\]", display: true},
+                        {left: "$", right: "$", display: false},
+                        {left: "\\(", right: "\\)", display: false}
+                    ]
+                });
+
+            const socket = new WebSocket("ws://localhost:8888/ws");
+
+            socket.addEventListener("open", (event) => {
+                socket.send("ping");
+            });
+
+            socket.addEventListener("message", (event) => {
+                var data = JSON.parse(event.data);
+                var node = document.getElementById("page-content");
+                var wrapper = document.createElement('div');
+                wrapper.innerHTML = data['show'];
+                node.replaceChildren(wrapper);
+
+                hljs.highlightAll();
+                renderMathInElement(
+                    node,
+                    {
+                        delimiters : [
+                            {left: "$$", right: "$$", display: true},
+                            {left: "\\[", right: "\\]", display: true},
+                            {left: "$", right: "$", display: false},
+                            {left: "\\(", right: "\\)", display: false}
+                        ]
+                    });
+            });
+        </script>
+    </body>
+</html>
