diff --git a/style/style.css b/style/style.css
index aab7d1d..6d74934 100644
--- a/style/style.css
+++ b/style/style.css
@@ -1,20 +1,11 @@
+/* use catppuccin color palette */
+@import url('https://unpkg.com/@catppuccin/palette/css/catppuccin.css');
+
 :root {
     color-scheme: light dark;
-
-    --light-bg: ghostwhite;
-    --light-color: darkslategray;
-    --light-code: tomato;
-
-    --dark-bg: darkslategray;
-    --dark-color: ghostwhite;
-    --dark-code: gold;
 }
 
 * {
-    background-color: light-dark(var(--light-bg), var(--dark-bg));
-    color: light-dark(var(--light-color), var(--dark-color));
-}
-
-code {
-    color: light-dark(var(--light-code), var(--dark-code));
+    background-color: light-dark(var(--ctp-latte-base), var(--ctp-frappe-base));
+    color: light-dark(var(--ctp-latte-text), var(--ctp-frappe-text));
 }
diff --git a/templates/head.html b/templates/head.html
new file mode 100644
index 0000000..0279b7d
--- /dev/null
+++ b/templates/head.html
@@ -0,0 +1,6 @@
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{title}}</title>
+    <link rel="stylesheet" href="/style/style.css">
+</head>
diff --git a/templates/header.html b/templates/header.html
new file mode 100644
index 0000000..6917d1f
--- /dev/null
+++ b/templates/header.html
@@ -0,0 +1,3 @@
+<header>
+    <h1>{{title}}</h1>
+</header>
diff --git a/templates/index.html b/templates/index.html
index 5d21e41..aed8988 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,23 +1,12 @@
 <!DOCTYPE html>
 <html lang="{{lang}}">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{title}}</title>
-    <link rel="stylesheet" href="/style/style.css">
-</head>
+{{head}}
 <body>
-    <header>
-        <h1>{{title}}</h1>
-    </header>
-
-    <nav id="nav">
-
-    </nav>
+    {{header}}
 
     <main>
         <ol id="posts">
-
+            {{posts}}
         </ol>
     </main>
 </body>
