diff --git a/cmd/nourybot/commands.go b/cmd/nourybot/commands.go
index a097cf2..51eedf9 100644
--- a/cmd/nourybot/commands.go
+++ b/cmd/nourybot/commands.go
@@ -389,6 +389,7 @@ func (app *application) handleCommand(message twitch.PrivateMessage) {
 }
 
 type command struct {
+	Name        string
 	Alias       []string
 	Description string
 	Level       string
@@ -399,264 +400,308 @@ type command struct {
 // Required is < >
 var helpText = map[string]command{
 	"bttv": {
+		Name:        "bttv",
 		Alias:       []string{"bttv", "betterttv"},
 		Description: "Returns the search URL for a given BTTV emote.",
 		Level:       "0",
 		Usage:       "()bttv <emote name>",
 	},
 	"catbox": {
+		Name:        "catbox",
 		Alias:       nil,
 		Description: "Downloads the video of a given link with yt-dlp and then uploads the video to catbox.moe.",
 		Level:       "420",
 		Usage:       "()catbox <link>",
 	},
 	"coin": {
+		Name:        "coin",
 		Alias:       []string{"coin", "coinflip", "cf"},
 		Description: "Flip a coin.",
 		Level:       "0",
 		Usage:       "()coin",
 	},
 	"command add": {
+		Name:        "command add",
 		Alias:       nil,
 		Description: "Adds a channel command to the database.",
 		Level:       "250",
 		Usage:       "()add command <command name> <command text>",
 	},
 	"command edit level": {
+		Name:        "command edit level",
 		Alias:       nil,
 		Description: "Edits the required level of a channel command with the given name.",
 		Level:       "250",
 		Usage:       "()command edit level <command name> <new command level>",
 	},
 	"command delete": {
+		Name:        "command delete",
 		Alias:       nil,
 		Description: "Deletes the channel command with the given name.",
 		Level:       "250",
 		Usage:       "()command delete <command name>",
 	},
 	"commands": {
+		Name:        "commands",
 		Alias:       nil,
 		Description: "Returns a link to the commands in the channel.",
 		Level:       "0",
 		Usage:       "()commands",
 	},
 	"currency": {
+		Name:        "currency",
 		Alias:       []string{"currency", "money"},
 		Description: "Returns the exchange rate for two currencies. Only three letter abbreviations are supported ( List of supported currencies: https://decapi.me/misc/currency?list ).",
 		Level:       "0",
 		Usage:       "()currency <curr> to <curr>",
 	},
 	"debug env": {
+		Name:        "debug env",
 		Alias:       nil,
 		Description: "Returns the environment currently running in.",
 		Level:       "100",
 		Usage:       "()debug env",
 	},
 	"debug user": {
+		Name:        "debug user",
 		Alias:       nil,
 		Description: "Returns additional information about a user.",
 		Level:       "100",
 		Usage:       "()debug user <username>",
 	},
 	"debug command": {
+		Name:        "debug command",
 		Alias:       nil,
 		Description: "Returns additional informations about a command.",
 		Level:       "100",
 		Usage:       "()debug command <command name>",
 	},
 	"debug timers": {
+		Name:        "debug timers",
 		Alias:       nil,
 		Description: "Returns a list of timers currently running in the channel with additional informations.",
 		Level:       "100",
 		Usage:       "()debug timers",
 	},
 	"duckduckgo": {
+		Name:        "duckduckgo",
 		Alias:       []string{"duckduckgo", "ddg"},
 		Description: "Returns the duckduckgo search URL for a given query.",
 		Level:       "0",
 		Usage:       "()duckduckgo <query>",
 	},
 	"ffz": {
+		Name:        "ffz",
 		Alias:       []string{"ffz", "frankerfacez"},
 		Description: "Returns the search URL for a given FFZ emote.",
 		Level:       "0",
 		Usage:       "()ffz <emote name>",
 	},
 	"firstline": {
+		Name:        "firstline",
 		Alias:       []string{"firstline", "fl"},
 		Description: "Returns the first message a user has sent in a channel",
 		Level:       "0",
 		Usage:       "()firstline <channel> <username>",
 	},
 	"followage": {
+		Name:        "followage",
 		Alias:       []string{"followage", "fa"},
 		Description: "Returns how long a user has been following a channel.",
 		Level:       "0",
 		Usage:       "()followage <channel> <username>",
 	},
 	"godocs": {
+		Name:        "godocs",
 		Alias:       nil,
 		Description: "Returns the godocs.io search URL for a given query.",
 		Level:       "0",
 		Usage:       "()godoc <query>",
 	},
 	"gofile": {
+		Name:        "gofile",
 		Alias:       nil,
 		Description: "Downloads the video of a given link with yt-dlp and then uploads the video to gofile.io.",
 		Level:       "420",
 		Usage:       "()gofile <link>",
 	},
 	"google": {
+		Name:        "google",
 		Alias:       nil,
 		Description: "Returns the google search URL for a given query.",
 		Level:       "0",
 		Usage:       "()google <query>",
 	},
 	"help": {
+		Name:        "help",
 		Alias:       nil,
 		Description: "Returns more information about a command 4Head.",
 		Level:       "0",
 		Usage:       "()help <command name>",
 	},
 	"join": {
+		Name:        "join",
 		Alias:       nil,
 		Description: "Adds the bot to a given channel.",
 		Level:       "1000",
 		Usage:       "()join <channel name>",
 	},
 	"kappa": {
+		Name:        "kappa",
 		Alias:       nil,
 		Description: "Downloads the video of a given link with yt-dlp and then uploads the video to kappa.lol.",
 		Level:       "420",
 		Usage:       "()kappa <link>",
 	},
 	"lastfm": {
+		Name:        "lastfm",
 		Alias:       nil,
 		Description: `Look up the last played title for a user on last.fm. If you "$set lastfm" a last.fm username the command will use that username if no other username is specified.`,
 		Level:       "0",
 		Usage:       "()lastfm [username]",
 	},
 	"osrs": {
+		Name:        "osrs",
 		Alias:       nil,
 		Description: "Returns the oldschool runescape wiki search URL for a given query.",
 		Level:       "0",
 		Usage:       "()osrs <query>",
 	},
 	"part": {
+		Name:        "part",
 		Alias:       nil,
 		Description: "Removes the bot from a given channel.",
 		Level:       "1000",
 		Usage:       "()part <channel name>",
 	},
 	"phonetic": {
+		Name:        "phonetic",
 		Alias:       []string{"phonetic", "ph"},
 		Description: "Translates the input to the character equivalent on a phonetic russian keyboard layout. Layout and general functionality is the same as on https://russian.typeit.org/",
 		Level:       "0",
 		Usage:       "()phonetic <input>",
 	},
 	"ping": {
+		Name:        "ping",
 		Alias:       nil,
 		Description: "Hopefully returns a pong monkaS.",
 		Level:       "0",
 		Usage:       "()ping",
 	},
 	"predb search": {
+		Name:        "predb search",
 		Alias:       nil,
 		Description: "Returns the last 100 predb.net search results for a given query.",
 		Level:       "100",
 		Usage:       "()predb search <query>",
 	},
 	"predb group": {
+		Name:        "predb group",
 		Alias:       nil,
 		Description: "Returns the last 100 predb.net group results for a given release group.",
 		Level:       "100",
 		Usage:       "()predb group <group>",
 	},
 	"preview": {
+		Name:        "preview",
 		Alias:       []string{"preview", "thumbnail"},
 		Description: "Returns a link to an (almost) live screenshot of a live channel.",
 		Level:       "0",
 		Usage:       "()thumbnail <channel>",
 	},
 	"randomxkcd": {
+		Name:        "randomxkcd",
 		Alias:       []string{"randomxkcd", "rxkcd"},
 		Description: "Returns a link to a random xkcd comic.",
 		Level:       "0",
 		Usage:       "()randomxkcd",
 	},
 	"seventv": {
+		Name:        "seventv",
 		Alias:       []string{"seventv", "7tv"},
 		Description: "Returns the search URL for a given SevenTV emote.",
 		Level:       "0",
 		Usage:       "()seventv <emote name>",
 	},
 	"set lastfm": {
+		Name:        "set lastfm",
 		Alias:       nil,
 		Description: "Allows you to set a last.fm username that will be used for $lastfm lookups if no other username is specified.",
 		Level:       "0",
 		Usage:       "()set lastfm <username>",
 	},
 	"set location": {
+		Name:        "set location",
 		Alias:       nil,
 		Description: "Allows you to set a location that will be used for $weather lookups if no other location is specified.",
 		Level:       "0",
 		Usage:       "()set location <location>",
 	},
 	"timer add": {
+		Name:        "timer add",
 		Alias:       nil,
 		Description: "Adds a new timer to the channel.",
 		Level:       "500",
 		Usage:       "()timer add <name> <repeat> <text>",
 	},
 	"timer delete": {
+		Name:        "timer delete",
 		Alias:       nil,
 		Description: "Deletes a timer from the channel.",
 		Level:       "500",
 		Usage:       "()timer delete <name>",
 	},
 	"timer edit": {
+		Name:        "timer edit",
 		Alias:       nil,
 		Description: "Edits a timer from the channel.",
 		Level:       "500",
 		Usage:       "()timer edit <name> <repeat> <text>",
 	},
 	"timers": {
+		Name:        "timers",
 		Alias:       nil,
 		Description: "Returns a link to the currently active timers in the channel.",
 		Level:       "0",
 		Usage:       "()timers",
 	},
 	"user edit level": {
+		Name:        "user edit level",
 		Alias:       []string{"user set level"},
 		Description: "Edits the user level for a given username.",
 		Level:       "1000",
 		Usage:       "()user edit level <username> <level>",
 	},
 	"uid": {
+		Name:        "uid",
 		Alias:       []string{"uid", "userid"},
 		Description: "Returns the Twitch user ID for a given username.",
 		Level:       "0",
 		Usage:       "()uid <username>",
 	},
 	"wa": {
+		Name:        "wa",
 		Alias:       []string{"wa", "query"},
 		Description: "Queries the Wolfram|Alpha API about the input.",
 		Level:       "100",
 		Usage:       "()wa <input>",
 	},
 	"weather": {
+		Name:        "weather",
 		Alias:       nil,
 		Description: `Returns the weather for a given location. If you "$set location" your location, the command will use that location if no other location is specified.`,
 		Level:       "0",
 		Usage:       "()weather [location]",
 	},
 	"xkcd": {
+		Name:        "xkcd",
 		Alias:       nil,
 		Description: "Returns the link to the latest xkcd comic.",
 		Level:       "0",
 		Usage:       "()xkcd",
 	},
 	"yaf": {
+		Name:        "yaf",
 		Alias:       nil,
 		Description: "Downloads the video of a given link with yt-dlp and then uploads the video to yaf.li.",
 		Level:       "420",
diff --git a/cmd/nourybot/router.go b/cmd/nourybot/router.go
index 8abb4b6..5fc653e 100644
--- a/cmd/nourybot/router.go
+++ b/cmd/nourybot/router.go
@@ -2,15 +2,19 @@ package main
 
 import (
 	"fmt"
+	"html/template"
 	"net/http"
+	"sort"
 	"strings"
 
 	"github.com/julienschmidt/httprouter"
 	"github.com/lyx0/nourybot/internal/common"
+	"github.com/lyx0/nourybot/internal/data"
 )
 
 func (app *application) startRouter() {
 	router := httprouter.New()
+	router.GET("/", app.homeRoute)
 	router.GET("/status", app.statusPageRoute)
 	router.GET("/commands/:channel", app.channelCommandsRoute)
 	router.GET("/commands", app.commandsRoute)
@@ -19,16 +23,78 @@ func (app *application) startRouter() {
 	app.Log.Fatal(http.ListenAndServe(":8080", router))
 }
 
-func (app *application) commandsRoute(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
+type commandsRouteData struct {
+	Commands map[string]command
+}
+
+func (app *application) commandsRoute(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
+	t, err := template.ParseFiles("./web/templates/commands.page.gohtml")
+	if err != nil {
+		app.Log.Error(err)
+		return
+	}
+
+	// The slice of timers is only used to log them at
+	// the start so it looks a bit nicer.
 	var cs []string
-	var text string
 
-	allHelpText := app.GetAllHelpText()
-	cs = append(cs, fmt.Sprintf("General commands: \n\n%s", allHelpText))
+	// Iterate over all timers and then add them onto the scheduler.
+	for i, v := range helpText {
+		// idk why this works but it does so no touchy touchy.
+		// https://github.com/robfig/cron/issues/420#issuecomment-940949195
+		i, v := i, v
+		_ = i
+		var c string
 
-	text = strings.Join(cs, "")
+		if v.Alias == nil {
+			c = fmt.Sprintf("Name: %s\nDescription: %s\nLevel: %s\nUsage: %s\n\n", i, v.Description, v.Level, v.Usage)
+		} else {
+			c = fmt.Sprintf("Name: %s\nAliases: %s\nDescription: %s\nLevel: %s\nUsage: %s\n\n", i, v.Alias, v.Description, v.Level, v.Usage)
+
+		}
+
+		// Add new value to the slice
+		cs = append(cs, c)
+	}
+
+	sort.Strings(cs)
+	data := &commandsRouteData{helpText}
+
+	err = t.Execute(w, data)
+	if err != nil {
+		app.Log.Error(err)
+		return
+	}
+
+}
+
+type homeRouteData struct {
+	Name     string
+	Channels []*data.Channel
+}
+
+func (app *application) homeRoute(w http.ResponseWriter, r *http.Request, _ httprouter.Params) {
+	t, err := template.ParseFiles("./web/templates/home.page.gohtml")
+	if err != nil {
+		app.Log.Error(err)
+		return
+	}
+
+	allChannel, err := app.Models.Channels.GetAll()
+	if err != nil {
+		app.Log.Error(err)
+		return
+	}
+	app.Log.Infow("All channels:",
+		"channel", allChannel)
+	data := &homeRouteData{name, allChannel}
+
+	err = t.Execute(w, data)
+	if err != nil {
+		app.Log.Error(err)
+		return
+	}
 
-	fmt.Fprintf(w, fmt.Sprint(text))
 }
 
 func (app *application) channelCommandsRoute(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
diff --git a/web/templates/commands.page.gohtml b/web/templates/commands.page.gohtml
new file mode 100644
index 0000000..368d9bf
--- /dev/null
+++ b/web/templates/commands.page.gohtml
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width,initial-scale=1" name="viewport">
+    <title>nourybot - lidl twitch bot</title>
+    <meta property="og:title" content="nourybot - lidl twitch bot">
+    <meta property="og:description" content="nourybot">
+  </head>
+<h1>Commands</h1>
+<p>General commands:</p>
+{{ with .Commands }} 
+{{ range . }}
+<p>
+    <b>Name:</b> {{ .Name }} </br>
+    {{ if .Alias }}
+        <b>Alias:</b> {{ .Alias}} </br>
+    {{ else }}
+    {{ end}}
+    <b>Description:</b> {{ .Description }} </br>
+    <b>Level:</b> {{ .Level }} </br>
+    <b>Usage:</b> {{ .Usage }} </br>
+</p>
+{{ end }}
+{{ end }}
diff --git a/web/templates/home.page.gohtml b/web/templates/home.page.gohtml
new file mode 100644
index 0000000..09d915c
--- /dev/null
+++ b/web/templates/home.page.gohtml
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width,initial-scale=1" name="viewport">
+    <title>nourybot - lidl twitch bot</title>
+    <meta property="og:title" content="nourybot - lidl twitch bot">
+    <meta property="og:description" content="nourybot">
+  </head>
+<h1>nourybot</h1>
+<p>Channels connected to:</hp>
+    <table>
+        <tr>
+            <th>Twitch ID</th>
+            <th>Username</th>
+        </tr>
+        {{ with .Channels }} 
+        {{ range . }}
+        <tr>
+            <td>{{ .TwitchID }}</td>
+            <td>{{ .Login }}</td>
+        </tr>
+        {{ end }}
+    </table>
+{{ end }}