diff --git a/config.toml b/config.toml
new file mode 100644
index 0000000..f479735
--- /dev/null
+++ b/config.toml
@@ -0,0 +1,26 @@
+[project]
+name        = "blog.pi66.xyz"
+version     = "0.1.0"
+description = "My personal blog website"
+
+[tree]
+markdown     = "md"
+static       = "src/static"
+templates    = "src/templates"
+plugins      = "src/plugins"
+
+draft_dest   = "draft"
+release_dest = "/srv/www/blogs.pi66.xyz/public/html"
+
+[webview]
+host        = "localhost"
+port        = 8000
+dev_tools   = false
+html_path   = "/"
+static_path = "/static"
+
+[extras]
+highlight = "monokai"
+
+[cache]
+hash = ".hash.cache"
diff --git a/md/index.md b/md/index.md
new file mode 100644
index 0000000..13a48d0
--- /dev/null
+++ b/md/index.md
@@ -0,0 +1,14 @@
+{% set page_title = "Pixel - Home" %}
+{% set page_content %}
+<center markdown=1>
+
+# **Cooking...** [.!text-4xl .!my-20]
+
+
+</center>
+
+
+{% endset %}
+
+{% include "base.html" %}
+
diff --git a/src/plugins/main.py b/src/plugins/main.py
new file mode 100644
index 0000000..e69de29
diff --git a/src/static/css/style.css b/src/static/css/style.css
new file mode 100644
index 0000000..421e28d
--- /dev/null
+++ b/src/static/css/style.css
@@ -0,0 +1,366 @@
+@font-face {
+   font-family: 'Pixelify';
+   src: url('/static/fonts/PixelifySans-Regular.ttf') format('truetype');
+   font-weight: normal;
+}
+@font-face {
+   font-family: 'Pixelify';
+   src: url('/static/fonts/PixelifySans-Bold.ttf') format('truetype');
+   font-weight: bold;
+}
+
+:root {
+   --color-heading-h1: rgb(21, 128, 61);
+   --color-heading-h2: rgb(22, 163, 74);
+   --color-heading-h3: rgb(34, 197, 94);
+   --color-heading-h4: rgb(74, 222, 128);
+   --color-heading-h5: rgb(134, 239, 172);
+   --color-code-bg: #000;
+   --color-code-border: #444444;
+   --color-blockquote-border: rgb(21, 128, 61);
+
+   --color-text: #ccc;
+   --color-text-muted: #ccc;
+   --color-link: #22c55e;
+   --color-link-hover: #86efac;
+   --color-blockquote: #6b7280;
+   --color-strong: #eed;
+}
+
+html {
+   scroll-behavior: smooth;
+   font-size: 82.5%;
+}
+body {
+   color: var(--color-text);
+}
+
+
+.nav-link { position: relative; }
+.nav-link:hover::before {
+   content: ">";
+   position: absolute;
+   left: -12px;
+}
+
+
+.terminal-glow {
+   box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
+}
+
+
+.table-wrapper {
+   width: 100% !important;
+   display: flex !important;
+   justify-content: center !important;
+   align-items: center;
+   margin: 0 auto !important;
+}
+
+.table-wrapper table {
+   width: fit-content !important;
+   min-width: 300px !important;
+   max-width: 900px !important;
+   border-collapse: collapse !important;
+   border: none !important;
+   background: transparent !important;
+   font-size: 120% !important;
+}
+
+.table-wrapper tr,
+.table-wrapper tbody tr,
+.table-wrapper thead tr,
+.table-wrapper th,
+.table-wrapper td {
+   background: transparent !important;
+   border: none !important;
+}
+
+.table-wrapper th,
+.table-wrapper td {
+   padding: 0.4rem clamp(1rem, 15vw, 9rem) !important;
+   font-size: 1.3rem !important;
+   text-align: left !important;
+}
+
+.table-wrapper th {
+   font-size: 1.4rem !important;
+   font-weight: bold !important;
+}
+
+.table-wrapper td::before {
+   content: "▸ ";
+}
+
+
+main {
+   line-height: 1.5;
+}
+
+
+h1 {
+   margin-top: 0.5rem;
+   margin-bottom: 0.5rem;
+   font-size: 1.9rem;
+   text-decoration: underline;
+   text-decoration-color: var(--color-heading-h3);
+   color: var(--color-heading-h3);
+   font-weight: 900;
+}
+
+h2 {
+   margin-top: 1.5rem;
+   margin-bottom: 0.5rem;
+   font-size: 1.25rem;
+   line-height: 1.4rem;
+   color: var(--color-heading-h2);
+   font-weight: 700;
+}
+
+h3 {
+   margin-top: 1.1rem;
+   margin-bottom: 0.5rem;
+   font-size: 1.125rem;
+   color: var(--color-heading-h3);
+   font-weight: 700;
+}
+
+h4 {
+   margin-top: 1.0rem;
+   margin-bottom: 0.5rem;
+   font-size: 1rem;
+   color: var(--color-heading-h4);
+   font-weight: 700;
+}
+
+h5 {
+   margin-top: 1.9rem;
+   margin-bottom: 0.5rem;
+   font-size: 0.875rem;
+   color: var(--color-heading-h5);
+   font-weight: 600;
+   line-height: 1.4;
+   white-space: pre-line;
+   word-wrap: break-word;
+}
+
+
+p {
+   margin-left: 0.5rem;
+   color: var(--color-text);
+   line-height: 1.5;
+   font-size: 1.1rem;
+}
+
+
+a {
+   color: var(--color-heading-h1);
+   text-decoration: inherit;
+   transition: color 0.2s ease;
+}
+
+a:hover {
+   color: var(--color-link-hover);
+   text-decoration: underline;
+}
+
+
+ul {
+   list-style: none;
+   padding-left: 0;
+   margin-bottom: 1rem;
+}
+
+ul li {
+   color: var(--color-text);
+   margin-bottom: 0.5rem;
+   padding-left: 1rem;
+   position: relative;
+   line-height: 1.4;
+}
+
+ul li::before {
+   content: "▸";
+   position: absolute;
+   left: 0;
+   color: var(--color-heading-h3);
+   font-weight: bold;
+}
+
+
+blockquote {
+   border-left: 3px solid var(--color-blockquote-border);
+   color: var(--color-blockquote);
+   padding-left: 0.8rem;
+   margin: 1rem 0;
+   font-style: italic;
+}
+
+blockquote p {
+   color: inherit;
+}
+
+
+code {
+   background: var(--color-code-bg);
+   border: 1px solid var(--color-code-border);
+   padding: 0.15rem 0.35rem;
+   border-radius: 0px;
+   font-family: 'Courier New', monospace;
+   font-size: 0.8rem;
+   color: var(--color-text);
+}
+
+pre {
+   background: var(--color-code-bg);
+   border: 1px solid var(--color-code-border);
+   border-radius: 0px;
+   padding: 0.3rem;
+   overflow-x: auto;
+   margin:1rem !important;
+}
+
+pre code {
+   background: none;
+   border: none;
+   padding: 0;
+}
+
+
+div:has(> p:first-child + ul + p + ul) {
+   display: grid;
+   grid-template-columns: 1fr 1fr;
+   gap: 1rem;
+   align-items: start;
+}
+
+
+hr {
+   border: none;
+   border-top: 1px solid var(--color-code-border);
+   margin: 1.5rem 0;
+}
+
+
+strong, b {
+   color: var(--color-strong);
+   font-weight: 900;
+}
+
+em, i {
+   font-style: italic;
+   color: var(--color-text-muted);
+}
+
+
+.citation {
+   color: var(--color-link);
+}
+
+.highlight {
+   margin: 0;
+   padding: 0;
+   background-color: transparent !important;
+}
+
+.highlighttable tbody tr td {
+
+   margin: 0;
+   padding: 0;
+   border: 0;
+   .linenodiv{
+       display: none;
+   }
+
+   pre {
+       border: 0;
+       margin: 0 !important;
+       padding: 7px;
+   }
+}
+
+table {
+   width: 100%;
+   border-collapse: collapse;
+   margin: 1rem 0;
+   border: 1px solid var(--color-code-border);
+   color: var(--color-text);
+}
+
+th, td {
+   padding: 0.5rem 0.75rem;
+   text-align: left;
+   font-size: 90%;
+   color: var(--color-text);
+}
+
+th {
+   background-color: var(--color-code-bg);
+   color: var(--color-heading-h3);
+   font-weight: 900;
+}
+
+tr:nth-child(even) {
+   background-color: rgba(34, 197, 94, 0.05);
+}
+
+tr:hover {
+   background-color: rgba(34, 197, 94, 0.1);
+}
+
+@media (max-width: 768px) {
+   .title { font-size: 1rem; }
+   h1 { font-size: 1.2rem; }
+   h2 { font-size: 1.0rem; }
+   h3 { font-size: 0.9rem; }
+   h4 { font-size: 0.8rem; }
+   h5 { font-size: 0.7rem; }
+
+   p {
+       line-height: 1.0;
+       font-size: 0.8rem;
+   }
+
+   ul li {
+       line-height: 1.2;
+       font-size: 0.85rem;
+       padding-left: 0.8rem;
+   }
+
+   code {
+       font-size: 0.75rem;
+       padding: 0.1rem 0.25rem;
+   }
+
+   pre {
+       padding: 0.8rem;
+       font-size: 0.8rem;
+   }
+
+   .skills-container {
+       gap: 3.4rem;
+       font-size: 80%;
+   }
+   .skills-container h4 { font-size: 0.8rem; }
+
+   .table-wrapper th,
+   .table-wrapper td {
+       padding: 0.1rem clamp(1rem, 8vw, 7rem) !important;
+       font-size: 0.9rem !important;
+       text-align: left !important;
+   }
+
+   .table-wrapper table {
+   margin: 1rem 0;
+
+   }
+
+   .table-wrapper th {
+       font-size: 1.0rem !important;
+       font-weight: bold !important;
+   }
+
+   .table-wrapper td::before {
+       content: "▸ ";
+   }
+}
diff --git a/src/static/favicon.ico b/src/static/favicon.ico
new file mode 100644
index 0000000..83f295e
Binary files /dev/null and b/src/static/favicon.ico differ
diff --git a/src/static/fonts/PixelifySans-Bold.ttf b/src/static/fonts/PixelifySans-Bold.ttf
new file mode 100644
index 0000000..200d426
Binary files /dev/null and b/src/static/fonts/PixelifySans-Bold.ttf differ
diff --git a/src/static/fonts/PixelifySans-Regular.ttf b/src/static/fonts/PixelifySans-Regular.ttf
new file mode 100644
index 0000000..783cefa
Binary files /dev/null and b/src/static/fonts/PixelifySans-Regular.ttf differ
diff --git a/src/static/icons/lain.gif b/src/static/icons/lain.gif
new file mode 100644
index 0000000..d4574b6
Binary files /dev/null and b/src/static/icons/lain.gif differ
diff --git a/src/templates/base.html b/src/templates/base.html
new file mode 100644
index 0000000..7ef67f2
--- /dev/null
+++ b/src/templates/base.html
@@ -0,0 +1,17 @@
+{% include "partials/head.html" %}
+   <body class="font-[Pixelify] w-screen h-dvh max-w-[1200px] mx-auto overflow-hidden bg-black p-5 pb-0 flex flex-col gap-3">
+       {% include "partials/header.html" %}
+
+       <div class="flex-1 flex flex-col gap-2 overflow-hidden">
+
+           <main class="flex-initial w-full box-border px-3 overflow-x-hidden pb-2 border border-[#333] overflow-y-auto">
+               {{ page_content }}
+           </main>
+
+           {% include "partials/footer.html" %}
+            {% include "partials/mobile-nav.html" %}
+
+       </div>
+   </body>
+   {% include "partials/scripts.html" %}
+</html>
diff --git a/src/templates/partials/footer.html b/src/templates/partials/footer.html
new file mode 100644
index 0000000..343a95c
--- /dev/null
+++ b/src/templates/partials/footer.html
@@ -0,0 +1,8 @@
+<footer class="mt-auto mb-2 h-10  flex flex-col justify-center items-center text-blockquote text-sm border-[#333]">
+               
+                   <div>
+                       <p class="text-gray-300">// Created by <span class="font-bold text-green-500">Pi66</span></p>
+                       <p class="text-gray-300">// Copyright ©Pi66 2026</p>
+                   </div>
+               
+           </footer>
\ No newline at end of file
diff --git a/src/templates/partials/head.html b/src/templates/partials/head.html
new file mode 100644
index 0000000..08ee04f
--- /dev/null
+++ b/src/templates/partials/head.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+       <meta charset="UTF-8">
+       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+       <meta name="description" content="{{ metadata_content | default('A web interface for the pi66.xyz Git server') }}">
+       <meta name="author" content="Pi66">
+       <meta name="theme-color" content="#000000">
+       <title>{{page_title | default('Pixel - Git')}}</title>
+       <link rel="icon" href="/static/favicon.ico">
+       <link rel="stylesheet" href="/static/css/style.css"/>
+       <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser"></script>
+{% if extra_head is defined %}{{ extra_head }}{% endif %}
+
+   </head>
diff --git a/src/templates/partials/header.html b/src/templates/partials/header.html
new file mode 100644
index 0000000..4badf43
--- /dev/null
+++ b/src/templates/partials/header.html
@@ -0,0 +1,14 @@
+<header class="py-2.5 justify-between h-12 px-3 border-[#333333] border-1 flex items-center">
+   <div class="flex items-center">
+       <a href="/" class="flex items-center">
+           <img
+               src="/static/icons/lain.gif" 
+               class="w-10 h-auto rounded-md object-contain saturate-150"
+           />
+           <h1 class="pi66-title ml-4 text-green-700 font-bold !text-2xl">Pi66</h1>
+       </a>
+   </div>
+   <nav class="pr-4 flex items-center text-green-700 transition-colors duration-200 text-xl font-bold max-md:hidden gap-4">
+       {% include "partials/nav.html" %}
+   </nav>
+</header>
diff --git a/src/templates/partials/mobile-nav.html b/src/templates/partials/mobile-nav.html
new file mode 100644
index 0000000..3514116
--- /dev/null
+++ b/src/templates/partials/mobile-nav.html
@@ -0,0 +1,4 @@
+<nav class="py-2 mb-2 flex justify-around border-1 border-[#333] items-center text-green-600 transition-colors duration-200 text-xl font-bold min-md:hidden gap-4">
+   {% include "partials/nav.html" %}
+
+</nav>
diff --git a/src/templates/partials/nav.html b/src/templates/partials/nav.html
new file mode 100644
index 0000000..342e7f7
--- /dev/null
+++ b/src/templates/partials/nav.html
@@ -0,0 +1,5 @@
+<a class="hover:text-green-400 transition-colors duration-200 " href="https://pi66.xyz" class="nav-link">Home</a>
+<a class="hover:text-green-400 transition-colors duration-200 " href="https://git.pi66.xyz" class="nav-link">Repos</a>
+<a class="hover:text-green-400 transition-colors duration-200 " href="https://pi66.xyz/about" class="nav-link">About</a>
+<a class="hover:text-green-400 transition-colors duration-200 " href="/" class="nav-link">Blogs</a>
+<a class="hover:text-green-400 transition-colors duration-200 " href="https://pi66.xyz/gaza" class="nav-link">Gaza</a>
diff --git a/src/templates/partials/repo-nav.html b/src/templates/partials/repo-nav.html
new file mode 100644
index 0000000..b0e469d
--- /dev/null
+++ b/src/templates/partials/repo-nav.html
@@ -0,0 +1,22 @@
+<div>
+   <blockquote class="!p-0">
+       <p>
+       <strong class="text-xl"> {{ repo_name }} </strong>
+       {% if repo_desc %}
+           <br>
+           {{ repo_desc }}
+       {% endif %}
+       <br>
+       git clone <a href="https://git.pi66.xyz/{{repo_name | lower}}" > https://git.pi66.xyz/{{repo_name | lower}} </a>
+       </p>
+   </blockquote>
+
+</div>
+
+<nav class="flex gap-4 mb-4 pb-2 border-b border-[#333] text-sm">
+   <a class="text-gray-400 text-green-400 font-bold" href="/{{repo_name | lower}}/log.html">Log</a> |
+   <a class="text-gray-400 hover:text-green-400"     href="/{{repo_name | lower}}/files.html">Files</a> |
+   <a class="text-gray-400 hover:text-green-400"     href="/{{repo_name | lower}}/refs.html">Refs</a> |
+   <a class="text-gray-400 hover:text-green-400"     href="/{{repo_name | lower}}/readme.html">README</a> |
+   <a class="text-gray-400 hover:text-green-400"     href="/{{repo_name | lower}}/license.html">LICENSE</a>
+</nav>
diff --git a/src/templates/partials/scripts.html b/src/templates/partials/scripts.html
new file mode 100644
index 0000000..063f61e
--- /dev/null
+++ b/src/templates/partials/scripts.html
@@ -0,0 +1,28 @@
+<script>
+        function typePerLetter(selector, speed = 100) {
+            const el = document.querySelector(selector);
+            if (!el) return;
+
+            const text = el.textContent;
+            el.textContent = "";
+            let i = 0;
+
+            const interval = setInterval(() => {
+                if (i >= text.length) {
+                    clearInterval(interval);
+                    return;
+                }
+
+                const char = text[i];
+                if (char === "\n") {
+                    el.appendChild(document.createElement("br"));
+                } else {
+                    el.append(char);
+                }
+                i++;
+            }, speed);
+        }
+
+        typePerLetter(".pi66-title", 120);
+        document.body.style.zoom = "100%";
+    </script>
\ No newline at end of file