diff --git a/static/img/readme.txt b/static/img/readme.txt
new file mode 100644
index 0000000..e69de29
diff --git a/templates/about.html b/templates/about.html
new file mode 100644
index 0000000..c82baa1
--- /dev/null
+++ b/templates/about.html
@@ -0,0 +1,5 @@
+<div class="row">
+{{ range . }}
+<div class="col-sm-3 text-center">{{ .Itemtext }}<br/><a class="btn btn-primary" href="javascript:playSound('{{ .Itemcommand }}', '{{ .Itemsoundname }}')" role="button">Play!</a></div>
+{{ end }}
+</div>
diff --git a/templates/header.html b/templates/header.html
index a5474d4..e5339f8 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -15,7 +15,7 @@
         body {
             padding-top: 50px;
         }
-        .itembuffer {
+        .sounditem {
             margin: 1px;
             padding: 5px;
             border: 1px solid black;
diff --git a/templates/item.html b/templates/item.html
index 4ec4cd2..38747cf 100644
--- a/templates/item.html
+++ b/templates/item.html
@@ -1 +1 @@
-<div class="col-sm-3 text-center"><div class="itembuffer">{{ .Itemtext }}<br/><a class="btn btn-default" href="javascript:playSound('{{ .Itemcommand }}', '{{ .Itemsoundname }}')" role="button">Play!</a></div></div>
+<div class="col-sm-3 text-center"><div class="sounditem" style="background-image: linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)), url(/static/img/{{ .Itemprefix }}.jpg); background-size: 100%;" data-toggle="tooltip" title="{{ .Itemtext }}">{{ .Itemcommand }} {{ .Itemsoundname }}<br/>{{ .Itemshorttext }}<br/><a class="btn btn-default" href="javascript:playSound('{{ .Itemcommand }}', '{{ .Itemsoundname }}')" role="button">Play!</a></div></div>
diff --git a/templates/stats.html b/templates/stats.html
new file mode 100644
index 0000000..c82baa1
--- /dev/null
+++ b/templates/stats.html
@@ -0,0 +1,5 @@
+<div class="row">
+{{ range . }}
+<div class="col-sm-3 text-center">{{ .Itemtext }}<br/><a class="btn btn-primary" href="javascript:playSound('{{ .Itemcommand }}', '{{ .Itemsoundname }}')" role="button">Play!</a></div>
+{{ end }}
+</div>
diff --git a/webserver.go b/webserver.go
index 118b61c..fe44bee 100644
--- a/webserver.go
+++ b/webserver.go
@@ -1,11 +1,13 @@
 package main
 
 import (
+	"bufio"
 	"crypto/rand"
 	"encoding/base64"
 	"fmt"
 	"html/template"
 	"net/http"
+	"os"
 
 	"github.com/bwmarrin/discordgo"
 	"github.com/gorilla/mux"
@@ -38,10 +40,13 @@ var (
 	store *sessions.CookieStore
 )
 
+// SoundItem is used to represent a sound of our COLLECTIONS for html generation
 type SoundItem struct {
+	Itemprefix    string
 	Itemcommand   string
 	Itemsoundname string
 	Itemtext      string
+	Itemshorttext string
 }
 
 // startWebServer
@@ -63,6 +68,7 @@ func startWebServer(port string, ci string, cs string, redirectURL string) {
 	r.HandleFunc("/discordCallback", handlediscordCallback)
 	r.HandleFunc("/playsound", handlePlaySound)
 	http.Handle("/", r)
+	http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static"))))
 	http.ListenAndServe(":"+port, nil)
 }
 
@@ -96,11 +102,27 @@ func handleMain(w http.ResponseWriter, r *http.Request) {
 		var si []SoundItem
 		for _, sc := range COLLECTIONS {
 			for _, snd := range sc.Sounds {
-				si = append(si, SoundItem{
+				var newSoundItem SoundItem
+				newSoundItem = SoundItem{
+					Itemprefix:    sc.Prefix,
 					Itemcommand:   "!" + sc.Prefix,
 					Itemsoundname: snd.Name,
 					Itemtext:      "!" + sc.Prefix + " " + snd.Name,
-				})
+					Itemshorttext: "!" + sc.Prefix + " " + snd.Name,
+				}
+				file, e := os.Open(fmt.Sprintf("audio/%v_%v.txt", sc.Prefix, snd.Name))
+				if e == nil {
+					scanner := bufio.NewScanner(file)
+					scanner.Scan()
+					text := scanner.Text()
+					newSoundItem.Itemtext = text
+					if len(text) > 20 {
+						text = text[0:20]
+						text += "..."
+					}
+					newSoundItem.Itemshorttext = text
+				}
+				si = append(si, newSoundItem)
 			}
 		}