diff --git a/www/data.json b/www/data.json
index eb9d70e..3938b8b 100644
--- a/www/data.json
+++ b/www/data.json
@@ -17,5 +17,12 @@
   "settings": {
     "tankTopOffset": 360,
     "tankBottomOffset": 101
-  }
+  },
+  "logs": [
+    { "date": 1746126240, "text": "Added 1% Coyote Cum." },
+    { "date": 1751396678, "text": "CV'd Zae~" },
+    { "date": 1751407200, "text": "Zae added 41% Kan'vi Cum" },
+    { "date": 1751493600, "text": "Added 1% Coyote Cum." },
+    { "date": 1751569534, "text": "Dumped 40% into Ky-Li" }
+  ]
 }
diff --git a/www/index.html b/www/index.html
index 090e1dd..6bd189e 100644
--- a/www/index.html
+++ b/www/index.html
@@ -17,6 +17,7 @@
   <meta name="twitter:image" content="/preview.png" />
 
   <link rel="stylesheet" href="styles.css" />
+  <script src="https://cdn.jsdelivr.net/npm/timesago@1"></script>
 </head>
 
 <body>
@@ -43,6 +44,9 @@
         <input type="number" id="tankBottomOffset" value="40" min="0" max="800" />
       </label>
     </div>
+    <div class="logbook">
+      <ul id="logList"></ul>
+    </div>
   </div>
 
   <script>
@@ -58,6 +62,7 @@
         const response = await fetch("data.json");
         tankData = await response.json();
         updateTank();
+        updateLogbook();
       } catch (error) {
         console.error("Error loading tank data:", error);
       }
@@ -134,6 +139,24 @@
       });
     }
 
+    function updateLogbook() {
+      const logList = document.getElementById("logList");
+      logList.innerHTML = "";
+      if (tankData.logs) {
+        tankData.logs.forEach(log => {
+          const li = document.createElement("li");
+          // If log.date is a string, try to parse as epoch seconds
+          let epoch = typeof log.date === 'number' ? log.date : Date.parse(log.date) / 1000;
+          // timesago expects ms
+          li.textContent = `${window.timesago ? timesago(epoch * 1000) : log.date} — ${log.text}`;
+          logList.appendChild(li);
+        });
+        // Auto-scroll to bottom
+        const logbookDiv = document.querySelector('.logbook');
+        if (logbookDiv) logbookDiv.scrollTop = logbookDiv.scrollHeight;
+      }
+    }
+
     // Update settings
     function updateSettings() {
       if (!tankData) return;
@@ -143,6 +166,7 @@
         tankBottomOffsetInput.value
       );
       updateTank();
+      updateLogbook();
     }
 
     // Event listeners
diff --git a/www/styles.css b/www/styles.css
index 6bbeaad..71190d0 100644
--- a/www/styles.css
+++ b/www/styles.css
@@ -177,3 +177,45 @@ h1 {
 .tiny-footer a:hover {
   color: #fff;
 }
+
+.logbook {
+  position: absolute;
+  left: 24px;
+  top: 20px;
+  width: 260px;
+  height: 850px;
+  background: rgba(30, 30, 40, 0.95);
+  border: 4px solid #000;
+  box-sizing: border-box;
+  font-size: 0.85em;
+  color: #eee;
+  overflow-y: auto;
+  z-index: 10;
+  padding: 16px 10px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.logbook h2 {
+  font-size: 1em;
+  margin: 0 0 8px 0;
+  color: #fff;
+  text-align: left;
+}
+
+#logList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-size: 0.85em;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+#logList li {
+  color: #ccc;
+  font-size: 0.95em;
+  word-break: break-word;
+}
