diff --git a/client/login.js b/client/login.js
index 2d30e8d..8213f36 100644
--- a/client/login.js
+++ b/client/login.js
@@ -1,12 +1,14 @@
 import Route from "../route.js";
-import form from "../comp/form.js";
 
 // TODO: rewrite
 let main = new Route([], async function (req, res, input) {
-    return form([
-        { label: "Username", type: "text", name: "user" },
-        { label: "Password", type: "password", name: "pass" }
-    ],'/api/form/register')
+    return res.render('form', {
+        data: [
+            { label: "Username", type: "text", name: "user" },
+            { label: "Password", type: "password", name: "pass" }
+        ],
+        'route': '/api/form/login'
+    });
 });
 
 export default main;
\ No newline at end of file
diff --git a/client/main.js b/client/main.js
index 105c7fe..bef7414 100644
--- a/client/main.js
+++ b/client/main.js
@@ -1,23 +1,11 @@
 import Route from "../route.js";
 import auth from "../form/auth.js";
-import format from "../common/format.js";
 
 let main = new Route([auth], async function (req, res, input) {
     let { username } = input;
-    let cta = (username == '!nobody') ?
-        '<div class="button"><a href="/client/register">Join</a></div>' :
-        '<div class="button"><a href="/client/chat?channel=main">Chat</a></div>';
-
-    return `<div class='area'>
-            <h1>About</h1>
-            <p>
-                <b>BiglyChat</b> is a chat service built on <a href='https://codeberg.org/onezDerv/bigly-chat'>free software</a>.
-            </p>
-            <p>
-                Anyone can selfhost an instance to take control of their community.
-            </p>
-            ${cta}
-        </div>`
+    return res.render('main', {
+        username
+    });
 });
 
 export default main;
\ No newline at end of file
diff --git a/client/register.js b/client/register.js
index 9ec57c0..656d207 100644
--- a/client/register.js
+++ b/client/register.js
@@ -1,13 +1,15 @@
 import Route from "../route.js";
-import form from "../comp/form.js";
 
 // TODO: rewrite
 let main = new Route([], async function (req, res, input) {
-    return form([
-        { label: "Username", type: "text", name: "user" },
-        { label: "Password", type: "password", name: "pass" },
-        { label: "Password (again)", type: "password", name: "pass2" },
-    ],'/api/form/register')
+    return res.render('form', {
+        data: [
+            { label: "Username", type: "text", name: "user" },
+            { label: "Password", type: "password", name: "pass" },
+            { label: "Password (again)", type: "password", name: "pass2" }
+        ],
+        'route': '/api/form/register'
+    });
 });
 
 export default main;
\ No newline at end of file
diff --git a/common/format.js b/common/format.js
deleted file mode 100644
index 7d27dfa..0000000
--- a/common/format.js
+++ /dev/null
@@ -1,18 +0,0 @@
-const escapeCodes = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    "'": '&#39;',
-    '"': '&quot;'
-};
-
-let format = {};
-
-format.escape = function (str) {
-    return str.replaceAll(
-        /[&<>'"]/g,
-        tag => escapeCodes[tag]
-    )
-};
-
-export default format;
\ No newline at end of file
diff --git a/comp/form.js b/comp/form.js
deleted file mode 100644
index 3457f69..0000000
--- a/comp/form.js
+++ /dev/null
@@ -1,15 +0,0 @@
-function form(elems, action) {
-    elems.push({
-        'label': 'Submit',
-        'type': 'Submit',
-        'name': 'submit'
-    });
-
-    let mapped = elems.map(elem => 
-        `<span class='form-entry'> <span class='form-key'>${elem.label}</span> <input type='${elem.type}' name='${elem.name}'></span>`
-    ).join('\n');
-
-    return `<form enctype='multipart/form-data' method='POST' action='${action}'><div class='form-message'></div>${mapped}</form>`
-}
-
-export default form;
\ No newline at end of file
diff --git a/index.js b/index.js
index eece498..c3b9394 100644
--- a/index.js
+++ b/index.js
@@ -2,28 +2,18 @@ import express from 'express';
 import multer from 'multer';
 import iterate from './routes.js';
 import cookieParser from 'cookie-parser';
+import ejs from "ejs";
 
 const port = process.env.PORT || 3000;
 
-const header = `<!DOCTYPE HTML>
-<html>
-<head>
-<script src='/static/main.js'></script>
-<link rel='stylesheet' href='/static/main.css'>
-</head>
-<body>
-`
-
-const footer = `
-</body>
-</html>
-`;
-
 const app = express();
 const upload = multer({ dest: 'uploads/' });
 
 app.use(cookieParser());
 app.use('/static', express.static('static'));
+app.engine('.ejs', ejs.__express);
+app.set('views', './views');
+app.set('view engine', 'ejs');
 
 app.get('/', (req, res) => {
     res.status(301).redirect('/client/main');
@@ -31,7 +21,7 @@ app.get('/', (req, res) => {
 
 app.get('/client/:route', async (req, res) => {
     let dat = await iterate(req, res, 'client');
-    res.send(header + dat + footer);
+    //res.send(dat);
 })
 
 app.get('/api/get/:route', async (req, res) => {
diff --git a/package.json b/package.json
index 056a997..781f202 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "bcrypt": "^5.1.1",
     "cookie-parser": "^1.4.6",
+    "ejs": "^3.1.10",
     "express": "^4.19.2",
     "sqlite": "^5.1.1",
     "sqlite3": "^5.1.7",
diff --git a/views/footer.ejs b/views/footer.ejs
new file mode 100644
index 0000000..691287b
--- /dev/null
+++ b/views/footer.ejs
@@ -0,0 +1,2 @@
+</body>
+</html>
\ No newline at end of file
diff --git a/views/form.ejs b/views/form.ejs
new file mode 100644
index 0000000..9d033b0
--- /dev/null
+++ b/views/form.ejs
@@ -0,0 +1,11 @@
+<%- include('header.ejs') -%>
+    <form enctype='multipart/form-data' method='POST' action='<%= route %>'>
+        <div class='form-message'></div>
+        <% for (let elem of data) { %>
+            <span class='form-entry'> <span class='form-key'>
+                    <%= elem.label %>
+                </span> <input type='<%= elem.type %>' name='<%= elem.name %>'></span>
+            <% } %>
+            <input type='Submit' name='Submit'>
+    </form>
+    <%- include('footer.ejs') -%>
\ No newline at end of file
diff --git a/views/header.ejs b/views/header.ejs
new file mode 100644
index 0000000..668896b
--- /dev/null
+++ b/views/header.ejs
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+    <script src='/static/main.js'></script>
+    <link rel='stylesheet' href='/static/main.css'>
+</head>
+
+<body>
\ No newline at end of file
diff --git a/views/main.ejs b/views/main.ejs
new file mode 100644
index 0000000..469fc9a
--- /dev/null
+++ b/views/main.ejs
@@ -0,0 +1,16 @@
+<%- include('header.ejs') -%>
+    <div class='area'>
+        <h1>About</h1>
+        <p>
+            <b>BiglyChat</b> is a project sharing communtiy built on <a href='https://scratch.mit.edu/'>Scratch</a> and
+            <a href='https://turbowarp.org'>TurboWarp</a>
+            . The source code is <a href='https://codeberg.org/onezDerv/bigly-chat'>free software</a>.
+        </p>
+        <p>
+            Anyone can selfhost an instance to take control of their community.
+        </p>
+        <%if (username=='!nobody' ) { %>
+            <div class="button"><a href="/client/register">Join</a></div>
+            <% } %>
+    </div>
+    <%- include('footer.ejs') -%>
\ No newline at end of file