diff --git a/spine.el b/spine.el
index e9b792c..0fdf171 100644
--- a/spine.el
+++ b/spine.el
@@ -123,7 +123,14 @@ Returns nil if the file is missing or cannot be parsed."
 (defun spine-render-index (books &optional selected-id)
   "Render the index page HTML for BOOKS, expanding the book matching SELECTED-ID."
   (let ((order '("WANT" "READING" "READ" "ABANDONED"))
-        (grouped (make-hash-table :test 'equal)))
+        (grouped (make-hash-table :test 'equal))
+        (total 0)
+        (reading-count 0))
+    ;; Count totals
+    (dolist (book books)
+      (cl-incf total)
+      (when (equal "READING" (plist-get book :status))
+        (cl-incf reading-count)))
     ;; Group books by status
     (dolist (book books)
       (let* ((status (or (plist-get book :status) "WANT")))
@@ -133,38 +140,65 @@ Returns nil if the file is missing or cannot be parsed."
       (insert "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n")
       (insert "<meta charset=\"utf-8\">\n")
       (insert "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n")
-      (insert "<title>Spine</title>\n</head>\n<body>\n")
-      (insert "<div class=\"frame\">\n")
-      (insert "<div class=\"titlebar\">Spine</div>\n")
+      (insert "<title>Spine</title>\n")
+      (insert "<link rel=\"stylesheet\""
+              " href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css\">\n")
+      (insert "<style>\n")
+      (insert ".spine-row{display:flex;align-items:center;gap:0.75rem;")
+      (insert "padding:0.4rem 0;border-bottom:1px solid var(--pico-muted-border-color)}\n")
+      (insert ".spine-row:last-child{border-bottom:none}\n")
+      (insert ".spine-selected{background:var(--pico-secondary-background)}\n")
+      (insert ".spine-glyph{width:1.5rem;text-align:center;flex-shrink:0}\n")
+      (insert ".spine-title{flex:1;min-width:0}\n")
+      (insert ".spine-trail{font-size:0.85em;color:var(--pico-muted-color)}\n")
+      (insert ".spine-tags{font-size:0.85em;color:var(--pico-muted-color)}\n")
+      (insert ".spine-detail{margin:0 0 0 2rem;border-left:2px solid var(--pico-primary)}\n")
+      (insert ".spine-detail p{margin-bottom:0.3rem}\n")
+      (insert ".spine-detail footer{margin-top:0.5rem}\n")
+      (insert "mark.want{background:var(--pico-mark-background);"
+              "color:var(--pico-mark-color)}\n")
+      (insert "mark.reading{background:#faeeda;color:#854f0b}\n")
+      (insert "mark.read{background:#e1f5ee;color:#085041}\n")
+      (insert "mark.abandoned{background:var(--pico-muted-color);"
+              "color:var(--pico-background-color)}\n")
+      (insert "article{margin-bottom:0}\n")
+      (insert "article header{padding-bottom:0.5rem;margin-bottom:0.5rem}\n")
+      (insert "</style>\n")
+      (insert "</head>\n<body>\n")
+      (insert "<main class=\"container\">\n")
+      (insert "<article>\n")
+      (insert (format "<header><strong>spine</strong>"
+                      "<small>%d books · %d reading</small></header>\n"
+                      total reading-count))
       ;; Each group in order
       (dolist (status order)
         (let ((group-books (nreverse (gethash status grouped))))
           (when group-books
-            (insert (format "<div class=\"group\">%s (%d)</div>\n"
+            (insert (format "<hgroup><h2>%s</h2><small>%d</small></hgroup>\n"
                             status (length group-books)))
             (dolist (book group-books)
               (let ((selected (equal (plist-get book :id) selected-id)))
-                (insert (format "<div class=\"row%s\">\n"
-                                (if selected " selected" "")))
-                ;; Format glyph
+                (insert (format "<div class=\"spine-row%s\">\n"
+                                (if selected " spine-selected" "")))
+                ;; Format glyph (emoji)
                 (let ((fmt (plist-get book :format)))
-                  (insert (format "<span class=\"glyph\">%s</span>\n"
-                                  (cond ((equal fmt "hardcover") "[H]")
-                                        ((equal fmt "ebook")    "[E]")
-                                        ((equal fmt "audiobook") "[A]")
+                  (insert (format "<span class=\"spine-glyph\">%s</span>\n"
+                                  (cond ((equal fmt "hardcover") "📖")
+                                        ((equal fmt "ebook")    "📱")
+                                        ((equal fmt "audiobook") "🎧")
                                         (t                      "")))))
                 ;; Title + author
-                (insert "<span class=\"title\">")
+                (insert "<span class=\"spine-title\">")
                 (insert (spine--h (plist-get book :title)))
                 (let ((author (plist-get book :author)))
                   (when author
-                    (insert (format " <span class=\"muted\">%s</span>"
+                    (insert (format " <small>%s</small>"
                                     (spine--h author)))))
                 (insert "</span>\n")
                 ;; Tags
                 (let ((tags (plist-get book :tags)))
                   (when tags
-                    (insert (format "<span class=\"tags\">%s</span>\n"
+                    (insert (format "<small class=\"spine-tags\">%s</small>\n"
                                     (mapconcat (lambda (tag) (concat ":" tag ":"))
                                                tags " ")))))
                 ;; Recommendation trail
@@ -172,42 +206,42 @@ Returns nil if the file is missing or cannot be parsed."
                       (rec-note (plist-get book :rec_note)))
                   (when (and rec-by (> (length rec-by) 0))
                     (insert
-                     (format "<span class=\"trail\">%s%s</span>\n"
+                     (format "<span class=\"spine-trail\">%s%s</span>\n"
                              (spine--h rec-by)
                              (if (and rec-note (> (length rec-note) 0))
                                  (concat ": " (spine--h rec-note))
                                "")))))
                 ;; Status pill
                 (let ((status (or (plist-get book :status) "WANT")))
-                  (insert (format "<span class=\"pill %s\">%s</span>\n"
-                                  (downcase status) status)))
+                  (insert (format "<mark class=\"%s\">%s</mark>\n"
+                                  (downcase status) (downcase status))))
                 ;; Expanded detail
                 (when selected
-                  (insert "<div class=\"detail\">\n")
+                  (insert "<blockquote class=\"spine-detail\">\n")
                   (dolist (note (plist-get book :notes))
-                    (insert (format
-                             "<div class=\"logline\"><span class=\"logdate\">[%s]</span> %s</div>\n"
-                             (spine--h (car note))
-                             (spine--h (cadr note)))))
-                  (let ((rating (plist-get book :rating)))
-                    (when (and rating (> (length rating) 0))
-                      (insert (format "<div>Rating: %s/5</div>\n"
-                                      (spine--h rating)))))
-                  (let ((isbn (plist-get book :isbn)))
-                    (when (and isbn (> (length isbn) 0))
-                      (insert (format "<div>ISBN: %s</div>\n"
-                                      (spine--h isbn)))))
-                  (let ((fmt (plist-get book :format)))
-                    (when (and fmt (> (length fmt) 0))
-                      (insert (format "<div>Format: %s</div>\n"
-                                      (spine--h fmt)))))
-                  (let ((added (plist-get book :added)))
-                    (when (and added (> (length added) 0))
-                      (insert (format "<div>Added: %s</div>\n"
-                                      (spine--h added)))))
-                  (insert "</div>\n"))
+                    (insert (format "<p><small>[%s]</small> %s</p>\n"
+                                    (spine--h (car note))
+                                    (spine--h (cadr note)))))
+                  (let ((parts nil))
+                    (let ((rating (plist-get book :rating)))
+                      (when (and rating (> (length rating) 0))
+                        (push (format "Rating: %s/5" (spine--h rating)) parts)))
+                    (let ((isbn (plist-get book :isbn)))
+                      (when (and isbn (> (length isbn) 0))
+                        (push (format "ISBN: %s" (spine--h isbn)) parts)))
+                    (let ((fmt (plist-get book :format)))
+                      (when (and fmt (> (length fmt) 0))
+                        (push (format "Format: %s" (spine--h fmt)) parts)))
+                    (let ((added (plist-get book :added)))
+                      (when (and added (> (length added) 0))
+                        (push (format "Added: %s" (spine--h added)) parts)))
+                    (when parts
+                      (insert (format "<footer>%s</footer>\n"
+                                      (mapconcat #'identity (nreverse parts) " · ")))))
+                  (insert "</blockquote>\n"))
                 (insert "</div>\n"))))))
-      (insert "</div>\n</body>\n</html>\n")
+      (insert "</article>\n")
+      (insert "</main>\n</body>\n</html>\n")
       (buffer-string))))
 
 (defun spine-render-empty-state ()
