diff --git a/static/css/colors.css b/static/css/colors.css
new file mode 100644
index 0000000..d90a24a
--- /dev/null
+++ b/static/css/colors.css
@@ -0,0 +1,42 @@
+/* ---------------- Colors ---------------- */
+
+
+:root {
+    /* root default is dark */
+    color-scheme: dark;
+
+    --bg-color: var(--nord0);
+    --text-color: var(--nord4);
+
+    --highlight-color: var(--nord8);
+    --highlight-color-rgb: 133, 64, 201;
+}
+
+/* Detect which mode the user prefers */
+@media (prefers-color-scheme: dark) {
+
+    /* root values for darkmode (best) users :3 */
+    :root {
+        color-scheme: dark;
+
+        --bg-color: var(--nord0);
+        --text-color: var(--nord4);
+
+        --highlight-color: var(--nord8);
+        --highlight-color-rgb: 133, 64, 201;
+    }
+}
+
+@media (prefers-color-scheme: light) {
+
+    /* root values for lightmode (eww) users... */
+    :root {
+        color-scheme: light;
+
+        --bg-color: var(--nord4);
+        --text-color: var(--nord0);
+
+        --highlight-color: var(--nord8);
+        --highlight_color-rgb: 181, 122, 240;
+    }
+}
diff --git a/static/css/components.css b/static/css/components.css
new file mode 100644
index 0000000..5065c03
--- /dev/null
+++ b/static/css/components.css
@@ -0,0 +1,208 @@
+/* ---------------- Components ---------------- */ 
+
+
+/* -------- General components -------- */
+
+
+.flex-container {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+}
+
+
+/* -------- Tree components -------- */
+
+
+.tree li, .tree ul li {
+    margin-left: 15px;
+    position: relative;
+    padding-left: 5px;
+}
+
+.tree li::before, .tree ul li::before {
+    content: " ";
+    position: absolute;
+    width: 1px;
+    background-color: var(--text-color);
+    top: 5px;
+    bottom: -12px;
+    left: -10px;
+}
+
+.tree>li:first-child::before {
+    top: 12px;
+}
+
+.tree li:not(:first-child):last-child::before, .tree ul li:not(:first-child):last-child::before {
+    display: none;
+}
+
+.tree li:only-child::before, .tree ul li:only-child::before {
+    display: list-item;
+    content: " ";
+    position: absolute;
+    width: 1px;
+    background-color: var(--text-color);
+    top: 5px;
+    bottom: 7px;
+    height: 7px;
+    left: -10px;
+}
+
+.tree li::after, .tree ul li::after {
+    content: " ";
+    position: absolute;
+    left: -10px;
+    width: 10px;
+    height: 1px;
+    background-color: var(--text-color);
+    top: 12px;
+}
+
+
+/* -------- Form components -------- */
+
+
+.input-form {
+    display: flex;
+    padding: 0;
+    border: 1px solid var(--highlight-color);
+}
+
+.input-form input {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    transition-duration: 0.5s;
+    background-color: var(--bg-color);
+}
+
+.input-form input:hover,
+.input-form input:focus {
+    background-color: rgba(var(--highlight-color-rgb), 0.15);
+}
+
+.input-form button {
+    padding: 0.5rem 1rem;
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+    outline: none;
+    cursor: pointer;
+    white-space: nowrap;
+    transition-duration: 0.5s;
+    color: var(--text-color);
+    background-color: rgba(var(--highlight-color-rgb), 0.15);
+}
+
+.input-form button:hover {
+    background-color: var(--highlight-color);
+}
+
+.input-form ::placeholder {
+    color: var(--text-color);
+    opacity: 1;
+    /* Firefox */
+}
+
+.input-form ::-ms-input-placeholder {
+    /* Edge 12 -18 */
+    color: var(--text-color);
+}
+
+
+/* -------- Button components --------*/
+
+
+.button {
+    margin: 0.5rem;
+    padding: 0.5rem 1rem;
+    border: 1px solid var(--highlight-color);
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    cursor: pointer;
+    transition-duration: 0.5s;
+}
+
+.button:hover {
+    background-color: var(--highlight-color);
+    font-weight: bold;
+}
+
+.hover-button:hover {
+    margin: 0.5rem 1rem 1rem 0.5rem;
+    box-shadow: 0.5rem 0.5rem 0rem rgba(var(--highlight-color-rgb), 0.3);
+}
+
+.button:active {
+    transition-duration: 0s;
+    background-color: rgba(var(--highlight-color-rgb), 0.15);
+}
+
+.copy-button {
+    margin: 0;
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 1;
+    background-color: transparent;
+    border: 0;
+}
+
+
+/* -------- Box components -------- */
+
+
+.box {
+    margin: 0.5rem;
+    padding: 1rem;
+    border: 1px solid var(--highlight-color);
+}
+
+
+/* -------- Component modifiers -------- */
+
+
+.float-end {
+    float: inline-end;
+}
+
+.float-start {
+    float: inline-start;
+}
+
+
+.box-hover {
+    transition-duration: 0.5s;
+}
+
+.box-hover:hover {
+    background-color: rgba(var(--highlight-color-rgb), 0.15);
+    margin: 0.5rem 1rem 1rem 0.5rem;
+    box-shadow: 0.5rem 0.5rem 0rem rgba(var(--highlight-color-rgb), 0.3);
+}
+
+.box-code {
+    position: relative;
+    padding: 0;
+    background-color: rgba(var(--highlight-color-rgb), 0.15);
+}
+
+.box-pop {
+    margin: 0.5rem 1rem 1rem 0.5rem;
+    box-shadow: 0.5rem 0.5rem 0rem rgba(var(--highlight-color-rgb), 0.3);
+}
+
+.box-fit {
+    width: fit-content;
+    height: fit-content;
+}
+
+.box-stealth {
+    border: 0;
+    box-shadow: none;
+}
\ No newline at end of file
diff --git a/static/css/core.css b/static/css/core.css
new file mode 100644
index 0000000..349358e
--- /dev/null
+++ b/static/css/core.css
@@ -0,0 +1,109 @@
+:root {}
+
+/* if we ever need it, its there :3 */
+html {
+    scroll-behavior: smooth;
+}
+
+/* get the body in shape nya~ */
+body {
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    max-width: 100vw;
+    text-decoration: none;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    font-family: "SpaceMono", monospace, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+    list-style: none;
+}
+
+
+/* ---------------- Text formatting ---------------- */
+
+
+b,
+strong,
+.bold {
+    font-weight: bold;
+
+}
+
+i,
+em,
+.italic {
+    font-style: italic;
+}
+
+i b,
+i strong,
+em b,
+em strong,
+b i,
+strong i,
+b em,
+strong em,
+.bolditalic {
+    font-weight: bold;
+    font-style: italic;
+}
+
+noscript {
+    display: block;
+}
+
+blockquote {
+    /* h2 */
+    font-size: 1.5rem; 
+}
+
+a {
+    font-weight: bold;
+    text-decoration: dotted underline;
+    color: var(--highlight-color);
+}
+
+pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    padding: 1rem;
+    overflow-x: auto;
+}
+
+code {
+    display: block;
+    word-break: break-all;
+}
+
+/* ---------------- Highlighting ---------------- */
+
+
+::selection {
+    background: var(--highlight-color);
+    color: var(--text-color);
+}
+
+.highlight-bg::selection,
+.highlight-bg ::selection {
+    background: var(--text-color);
+    color: var(--bg-color);
+}
+
+.highlight-text {
+    color: var(--highlight-color);
+}
+
+.highlight-bg {
+    background-color: var(--highlight-color);
+}
+
+.highlight-bg-15 {
+    background-color: rgba(var(--highlight-color-rgb), 0.15);
+}
\ No newline at end of file
diff --git a/static/css/font.css b/static/css/font.css
new file mode 100644
index 0000000..c3997a6
--- /dev/null
+++ b/static/css/font.css
@@ -0,0 +1,42 @@
+/* ---------------- Font ---------------- */
+
+
+@font-face {
+    font-family: "SpaceMono";
+    src:
+        local("SpaceMono"),
+        url("/res/ttf/SpaceMono-Regular.ttf") format('truetype');
+    font-weight: normal;
+    font-style: normal;
+    /* Regular */
+}
+
+@font-face {
+    font-family: "SpaceMono";
+    src:
+        local("SpaceMono-Bold"),
+        url("/res/ttf/SpaceMono-Bold.ttf") format('truetype');
+    font-weight: bold;
+    font-style: normal;
+    /* Bold */
+}
+
+@font-face {
+    font-family: "SpaceMono";
+    src:
+        local("SpaceMono-Italic"),
+        url("/res/ttf/SpaceMono-Italic.ttf") format('truetype');
+    font-weight: normal;
+    font-style: italic;
+    /* Italic */
+}
+
+@font-face {
+    font-family: "SpaceMono";
+    src:
+        local("SpaceMono-BoldItalic"),
+        url("/res/ttf/SpaceMono-BoldItalic.ttf") format('truetype');
+    font-weight: bold;
+    font-style: italic;
+    /* Bold Italic */
+}
diff --git a/static/ttf/SpaceMono-Bold.ttf b/static/ttf/SpaceMono-Bold.ttf
new file mode 100644
index 0000000..4acd36a
Binary files /dev/null and b/static/ttf/SpaceMono-Bold.ttf differ
diff --git a/static/ttf/SpaceMono-Italic.ttf b/static/ttf/SpaceMono-Italic.ttf
new file mode 100644
index 0000000..8799738
Binary files /dev/null and b/static/ttf/SpaceMono-Italic.ttf differ
diff --git a/static/ttf/SpaceMono-Regular.ttf b/static/ttf/SpaceMono-Regular.ttf
new file mode 100644
index 0000000..28d7ff7
Binary files /dev/null and b/static/ttf/SpaceMono-Regular.ttf differ
diff --git a/templates/base.html b/templates/base.html
new file mode 100644
index 0000000..ed07bef
--- /dev/null
+++ b/templates/base.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  {% include "head.html" %}
+  <body>
+  <main>
+  {% include "nav.html" %}
+  {% block content %}
+  {% endblock %}
+  </main>
+  {% include "footer.html" %}
+  </body>
+</html>
diff --git a/templates/blog_list.html b/templates/blog_list.html
new file mode 100644
index 0000000..5a65f12
--- /dev/null
+++ b/templates/blog_list.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block content %}
+{% for (slug, post) in posts %}
+  {% if loop.first %}<div class="new_callout">NEW!</div>{% endif %}
+  <a href="/blog/{{ slug }}"><h2>{{ post.title }}</h2></a>
+  <p>{{ post.description }}</p>
+{% endfor %}
+{% endblock %}
diff --git a/templates/blog_post.html b/templates/blog_post.html
new file mode 100644
index 0000000..38e7f84
--- /dev/null
+++ b/templates/blog_post.html
@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+{% block content %}
+<h1>{{ post.meta.title }}</h1>
+<img src="{{ post.cover_img_path }}"></img>
+<article>
+{{ post.body }}
+</article>
+{% endblock %}
diff --git a/templates/footer.html b/templates/footer.html
new file mode 100644
index 0000000..23df581
--- /dev/null
+++ b/templates/footer.html
@@ -0,0 +1,3 @@
+<footer>
+  <p>Copyright 2024 cbax</p>
+</footer>
diff --git a/templates/head.html b/templates/head.html
new file mode 100644
index 0000000..3c04705
--- /dev/null
+++ b/templates/head.html
@@ -0,0 +1,23 @@
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="language" content="EN">
+<title>{{ meta.title }}</title>
+<style>
+  {{ styles }}
+</style>
+<meta name="title" content="{{ meta.title }}">
+<meta name="description" content="{{ meta.description }}">
+<meta name="author" content="{{ meta.author }}">
+<meta name="canonical" content="{{ meta.canonical_url }}">
+
+<meta property="og:type" content="website">
+<meta property="og:url" content="{{ meta.canonical_url }}">
+<meta property="og:title" content="{{ meta.title }}">
+<meta property="og:description" content="{{ meta.description }}">
+<meta property="og:image" content="{{ meta.img_path }}">
+
+<meta property="twitter:card" content="summary_large_image">
+<meta property="twitter:url" content="{{ meta.canonical_url }}">
+<meta property="twitter:title" content="{{ meta.title }}">
+<meta property="twitter:description" content="{{ meta.description }}">
+<meta property="twitter:image" content="{{ meta.img_path }}">
diff --git a/templates/meta.svg b/templates/meta.svg
new file mode 100644
index 0000000..6aa94e8
--- /dev/null
+++ b/templates/meta.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
+    <defs>
+        <pattern id="img" x="0" y="0" width="1" height="1" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid slice">
+            <image width="500" height="500" href="{{ meta_img_path }}"/>
+        </pattern>
+    </defs>
+    <rect width="1200" height="630" fill="black" />
+    <rect width="400" height="400" x="200" y="115" fill="url(#img)" />
+    <text x="630" y="330" font-size="100px" fill="#ffffff" font-family="Inter" >
+        {{ text }}
+    </text>
+</svg>
+
diff --git a/templates/nav.html b/templates/nav.html
new file mode 100644
index 0000000..70aa7a5
--- /dev/null
+++ b/templates/nav.html
@@ -0,0 +1,3 @@
+<nav>
+  <a href="/">Home</a>
+</nav>