diff --git a/hadith/hadith.go b/hadith/hadith.go
index fcac2c3..43dede9 100644
--- a/hadith/hadith.go
+++ b/hadith/hadith.go
@@ -25,7 +25,46 @@ type Hadith struct {
 	Text string `json:"text"`
 }
 
-type Volumes []*Volume
+type Volumes struct {
+	Contents []*Volume
+	Books    []*Book
+}
+
+func (b *Book) HTML() string {
+	var data string
+
+	data += fmt.Sprintf(`<h1>%s</h1>`, b.Name)
+	data += fmt.Sprintln()
+	data += fmt.Sprintln()
+
+	for _, hadith := range b.Hadiths {
+		data += fmt.Sprintf(`<h3>%s</h3>`, hadith.Info)
+		data += fmt.Sprintln()
+		data += fmt.Sprintf(`<h4>%s</h4>`, hadith.By)
+		data += fmt.Sprintln()
+		data += fmt.Sprintf(`<div>%s</div>`, hadith.Text)
+		data += fmt.Sprintln()
+		data += fmt.Sprintln()
+	}
+
+	return data
+}
+
+func (v *Volumes) TOC() string {
+	var data string
+
+	for _, volume := range v.Contents {
+		for id, book := range volume.Books {
+			data += fmt.Sprintf(`<div class="chapter"><a href="/hadith/%d">%s</a></div>`, id+1, book.Name)
+		}
+	}
+
+	return data
+}
+
+func (v *Volumes) Get(book int) *Book {
+	return v.Books[book-1]
+}
 
 func (v *Volumes) JSON() []byte {
 	b, _ := json.Marshal(v)
@@ -35,7 +74,7 @@ func (v *Volumes) JSON() []byte {
 func (v *Volumes) Markdown() string {
 	var data string
 
-	for _, volume := range *v {
+	for _, volume := range v.Contents {
 		data += fmt.Sprintln()
 		data += fmt.Sprintf(`# %s`, volume.Name)
 		data += fmt.Sprintln()
@@ -98,9 +137,10 @@ func Load() *Volumes {
 			}
 
 			volume.Books = append(volume.Books, book)
+			volumes.Books = append(volumes.Books, book)
 		}
 
-		*volumes = append(*volumes, volume)
+		volumes.Contents = append(volumes.Contents, volume)
 	}
 
 	return volumes
diff --git a/html/html.go b/html/html.go
index f71def0..90aac03 100644
--- a/html/html.go
+++ b/html/html.go
@@ -35,10 +35,14 @@ var Template = `
   font-size: 1.5em;
 }
 .chapter {
-  margin: 10px;
+  margin-bottom: 10px;
   border: 1px solid grey;
+  border-radius: 5px;
   padding: 10px;
-  display: inline-block;
+  display: block;
+}
+.chapter a {
+  text-decoration: none;
 }
 code {
   background: whitesmoke;
diff --git a/main.go b/main.go
index 8bf65d0..544b665 100644
--- a/main.go
+++ b/main.go
@@ -9,6 +9,7 @@ import (
 	"net/http"
 	"os"
 	"path/filepath"
+	"strconv"
 	"strings"
 
 	"github.com/asim/reminder/api"
@@ -71,7 +72,7 @@ func indexNames(idx *search.Index, n *names.Names) {
 func indexHadith(idx *search.Index, b *hadith.Volumes) {
 	fmt.Println("Indexing Hadith")
 
-	for _, volume := range *b {
+	for _, volume := range b.Contents {
 		for _, book := range volume.Books {
 			for _, hadith := range book.Hadiths {
 
@@ -128,13 +129,14 @@ func main() {
 		fmt.Println(err)
 	}
 
+	// load data
+	q := quran.Load()
+	n := names.Load()
+	b := hadith.Load()
+
 	// render the markdown as html
 	if *GenerateFlag {
 		fmt.Println("Loading data")
-		// load data
-		q := quran.Load()
-		n := names.Load()
-		b := hadith.Load()
 
 		fmt.Println("Generating html")
 		text := q.HTML()
@@ -181,12 +183,6 @@ func main() {
 	indexed := make(chan bool, 1)
 
 	if *IndexFlag {
-		fmt.Println("Loading data")
-		// load data
-		q := quran.Load()
-		n := names.Load()
-		b := hadith.Load()
-
 		fmt.Println("Indexing data")
 		go func() {
 			indexQuran(idx, q)
@@ -219,9 +215,9 @@ func main() {
 	apiHtml := files.Get("api.html")
 	ihtml := files.Get("index.html")
 	shtml := files.Get("search.html")
-	thtml := files.Get("quran.html")
+	//thtml := files.Get("quran.html")
 	nhtml := files.Get("names.html")
-	vhtml := files.Get("hadith.html")
+	//vhtml := files.Get("hadith.html")
 	otf := files.Get("arabic.otf")
 	qjson := files.Get("quran.json")
 	njson := files.Get("names.json")
@@ -240,7 +236,27 @@ func main() {
 	})
 
 	http.HandleFunc("/quran", func(w http.ResponseWriter, r *http.Request) {
-		w.Write([]byte(thtml))
+		qhtml := html.RenderHTML("Quran", q.TOC())
+
+		w.Write([]byte(qhtml))
+	})
+
+	http.HandleFunc("/quran/{id}", func(w http.ResponseWriter, r *http.Request) {
+		id := r.PathValue("id")
+		if len(id) == 0 {
+			return
+		}
+
+		ch, _ := strconv.Atoi(id)
+
+		if ch < 1 || ch > 114 {
+			return
+		}
+
+		head := fmt.Sprintf("%d | Quran", ch)
+		qhtml := html.RenderHTML(head, q.Get(ch).HTML())
+
+		w.Write([]byte(qhtml))
 	})
 
 	http.HandleFunc("/names", func(w http.ResponseWriter, r *http.Request) {
@@ -248,7 +264,27 @@ func main() {
 	})
 
 	http.HandleFunc("/hadith", func(w http.ResponseWriter, r *http.Request) {
-		w.Write([]byte(vhtml))
+		qhtml := html.RenderHTML("Hadith", b.TOC())
+
+		w.Write([]byte(qhtml))
+	})
+
+	http.HandleFunc("/hadith/{book}", func(w http.ResponseWriter, r *http.Request) {
+		book := r.PathValue("book")
+		if len(book) == 0 {
+			return
+		}
+
+		ch, _ := strconv.Atoi(book)
+
+		if ch < 1 || ch > len(b.Books) {
+			return
+		}
+
+		head := fmt.Sprintf("%d | Hadith", ch)
+		qhtml := html.RenderHTML(head, b.Get(ch).HTML())
+
+		w.Write([]byte(qhtml))
 	})
 
 	http.HandleFunc("/search", func(w http.ResponseWriter, r *http.Request) {
diff --git a/quran/quran.go b/quran/quran.go
index 277fe5a..77f8861 100644
--- a/quran/quran.go
+++ b/quran/quran.go
@@ -25,33 +25,56 @@ type Quran struct {
 	Chapters []*Chapter `json:"chapters"`
 }
 
+func (ch *Chapter) HTML() string {
+	var data string
+
+	data += fmt.Sprintln()
+	data += fmt.Sprintf(`<h1 id="%d">%d</h1>`, ch.Number, ch.Number)
+	data += fmt.Sprintln()
+	data += fmt.Sprintln()
+	data += fmt.Sprintf(`<h3>%s</h3>`, ch.Name)
+	data += fmt.Sprintln()
+
+	// max 286 ayahs
+	for _, verse := range ch.Verses {
+		data += fmt.Sprintln()
+		data += fmt.Sprintf(`<h4 id="%d">%d:%d</h4>`, verse.Number, ch.Number, verse.Number)
+		data += fmt.Sprintln()
+		data += fmt.Sprintln(`<div class="arabic">` + verse.Arabic + `</div>`)
+		data += fmt.Sprintln()
+		data += fmt.Sprintln(`<div class="english">` + verse.Text + `</div>`)
+		data += fmt.Sprintln()
+	}
+
+	return data
+}
+
 func (q *Quran) JSON() []byte {
 	b, _ := json.Marshal(q)
 	return b
 }
 
-func (q *Quran) HTML() string {
+func (q *Quran) TOC() string {
 	var data string
 
+	data += `<div id="contents">`
 	for _, ch := range q.Chapters {
-		data += fmt.Sprintln()
-		data += fmt.Sprintf(`<h1 id="%d">%d</h1>`, ch.Number, ch.Number)
-		data += fmt.Sprintln()
-		data += fmt.Sprintln()
-		data += fmt.Sprintf(`<h3>%s</h3>`, ch.Name)
-		data += fmt.Sprintln()
+		data += fmt.Sprintf(`<div class="chapter"><a href="/quran/%d">%d: %s</a></div>`, ch.Number, ch.Number, ch.Name)
+	}
+	data += `</div>`
 
-		// max 286 ayahs
-		for _, verse := range ch.Verses {
-			data += fmt.Sprintln()
-			data += fmt.Sprintf(`<h4 id="%d-%d">%d:%d</h4>`, ch.Number, verse.Number, ch.Number, verse.Number)
-			data += fmt.Sprintln()
-			data += fmt.Sprintln(`<div class="arabic">` + verse.Arabic + `</div>`)
-			data += fmt.Sprintln()
-			data += fmt.Sprintln(`<div class="english">` + verse.Text + `</div>`)
-			data += fmt.Sprintln()
-		}
+	return data
+}
+
+func (q *Quran) Get(chapter int) *Chapter {
+	return q.Chapters[chapter-1]
+}
 
+func (q *Quran) HTML() string {
+	var data string
+
+	for _, ch := range q.Chapters {
+		data += ch.HTML()
 	}
 
 	return data