diff --git a/main.go b/main.go
index 45ad345..27b84dc 100644
--- a/main.go
+++ b/main.go
@@ -22,6 +22,7 @@ import (
 type Page struct {
 	ID       string    `json:"id"`
 	Name     string    `json:"name"`
+	Description string    `json:"description"`
 	Filename string    `json:"filename"`
 	HTML     string    `json:"html"`
 	Tags     []string  `json:"tags"`
@@ -236,6 +237,7 @@ func handleAPIPages(w http.ResponseWriter, r *http.Request) {
 func createPage(w http.ResponseWriter, r *http.Request) {
 	var req struct {
 		Name     string   `json:"name"`
+		Description string   `json:"description"`
 		Filename string   `json:"filename"`
 		HTML     string   `json:"html"`
 		Tags     []string `json:"tags"`
@@ -259,6 +261,7 @@ func createPage(w http.ResponseWriter, r *http.Request) {
 	page := &Page{
 		ID:       generateID(),
 		Name:     req.Name,
+		Description: req.Description,
 		Filename: req.Filename,
 		HTML:     req.HTML,
 		Tags:     req.Tags,
@@ -282,6 +285,7 @@ func updatePage(w http.ResponseWriter, r *http.Request) {
 	var req struct {
 		ID       string   `json:"id"`
 		Name     string   `json:"name"`
+		Description string   `json:"description"`
 		Filename string   `json:"filename"`
 		HTML     string   `json:"html"`
 		Tags     []string `json:"tags"`
@@ -302,6 +306,7 @@ func updatePage(w http.ResponseWriter, r *http.Request) {
 
 	oldFilename := page.Filename
 	page.Name = req.Name
+	page.Description = req.Description
 	page.Filename = req.Filename
 	page.HTML = req.HTML
 	page.Tags = req.Tags
@@ -429,7 +434,7 @@ body.dark .tag { background: #3a3a3a; }
 </div>
 <div class="grid" id="grid">
 {{range .}}
-<div class="card" data-name="{{.Name}}" data-tags="{{range .Tags}}{{.}} {{end}}">
+<div class="card" data-name="{{.Name}}" data-tags="{{range .Tags}}{{.}} {{end}}" title="{{.Description}}">
 <h3><a href="/p/{{.Filename}}.html" target="_blank" style="color:inherit;text-decoration:none">{{.Name}}</a></h3>
 <div class="meta">{{.Created.Format "2006-01-02 15:04"}}</div>
 {{if .Tags}}<div class="tags">{{range .Tags}}<span class="tag">{{.}}</span>{{end}}</div>{{end}}
@@ -528,6 +533,7 @@ body.dark .item { border-color: #444; }
 <h2 id="formTitle">Create New Page</h2>
 <input type="hidden" id="pageId">
 <input type="text" id="name" placeholder="Page Name" required>
+<input type="text" id="description" placeholder="Description (optional)">
 <input type="text" id="filename" placeholder="Filename (no extension)" required>
 <input type="text" id="tags" placeholder="Tags (comma separated)">
 <textarea id="html" placeholder="HTML Code"></textarea>
@@ -561,6 +567,7 @@ async function savePage() {
   const data = {
     id,
     name: document.getElementById('name').value,
+	description: document.getElementById('description').value,
     filename: document.getElementById('filename').value,
     html: document.getElementById('html').value,
     tags: document.getElementById('tags').value.split(',').map(t=>t.trim()).filter(t=>t)
@@ -576,6 +583,7 @@ async function editPage(id) {
   document.getElementById('formTitle').textContent = 'Edit Page';
   document.getElementById('pageId').value = page.id;
   document.getElementById('name').value = page.name;
+  document.getElementById('description').value = page.description || '';
   document.getElementById('filename').value = page.filename;
   document.getElementById('html').value = page.html;
   document.getElementById('tags').value = (page.tags || []).join(', ');
@@ -592,6 +600,7 @@ function resetForm() {
   document.getElementById('formTitle').textContent = 'Create New Page';
   document.getElementById('pageId').value = '';
   document.getElementById('name').value = '';
+  document.getElementById('description').value = '';
   document.getElementById('filename').value = '';
   document.getElementById('html').value = '';
   document.getElementById('tags').value = '';