diff --git a/tem/html/core/head.html b/tem/html/core/head.html
index f3d40a2..fd92dbf 100644
--- a/tem/html/core/head.html
+++ b/tem/html/core/head.html
@@ -15,12 +15,60 @@
 
 <body>
 
-<a style='
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  width: 32px;
-  height: 32px;
-  background-color: #000;
-  opacity: 0.02;
-' href='/reload'></a>
+<!-- nav -->
+<div id="nav">
+  <div style="display: flex; gap: 12px;">
+    <div
+      id="nav_side"
+      style="
+        display: flex;
+        gap: 12px;
+        width: auto;
+      "
+    >
+      <a href="javascript:toggle_side()">
+        <img src="/public/img/icons/menu.svg?v1" height="32" width="auto" />
+      </a>
+      <a href="/about" style="display: flex; align-items: center; gap: 6px; text-decoration: none;">
+        <img src="https://media.dof.dev/kit/logo.svg?v1" height="32" width="auto" style="border-radius: 16px;" />
+        <div
+          style="
+            color: #fff;
+            font-weight: bold;
+            font-size: 16px;
+          "
+        >
+          dofdev&nbsp;
+        </div>
+      </a>
+    </div>
+
+    <div
+      style="
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        background-color: #11111166;
+        color: var(--col-10);
+        font-size: 12px;
+        padding: 0 12px;
+        border-radius: 16px;
+      "
+    >
+      <a href="/">
+        <img src="/public/img/icons/search.svg?v1" height="16" width="auto" />
+      </a>
+      <input id="search" maxlength="24" placeholder="search" />
+    </div>
+  </div>
+  <div id="nav_border"></div>
+
+  <div class="disabled" style="display: flex; gap: 12px;">
+    <a href="/settings">
+      <img src="/public/img/icons/settings.svg?v2" height="32" width="auto" />
+    </a>
+    <a href="/profile">
+      <img src="/public/img/profile-pic.png?v1" height="32" width="auto" style="border-radius: 16px;" />
+    </a>
+  </div>
+</div>
