diff --git a/src/modules/album/album.go b/src/modules/album/album.go
index c5cd87d..602b111 100644
--- a/src/modules/album/album.go
+++ b/src/modules/album/album.go
@@ -19,7 +19,14 @@ func Setup(g *echo.Group) {
 }
 
 func allAlbumsPage(c echo.Context) error {
-	return utils.RenderTempl(c, http.StatusOK, allAlbumsTempl())
+	// get the first 10 albums
+	token, server := utils.Credentials(c)
+	albums, err := loadAlbums(token, server, 0, 30)
+	if err != nil {
+		return err
+	}
+
+	return utils.RenderTempl(c, http.StatusOK, allAlbumsTempl(albums))
 }
 
 func albumPage(c echo.Context) error {
diff --git a/src/modules/album/album.service.go b/src/modules/album/album.service.go
index c4a260c..276d3be 100644
--- a/src/modules/album/album.service.go
+++ b/src/modules/album/album.service.go
@@ -8,6 +8,28 @@ import (
 	"github.com/go-resty/resty/v2"
 )
 
+func loadAlbums(token, server string, start, end int) ([]utils.Album, error) {
+	var albums []utils.Album
+	var error utils.NavError
+
+	client := resty.New()
+	response, err := client.R().
+		SetHeader("x-nd-authorization", fmt.Sprintf("Bearer %s", token)).
+		SetResult(&albums).
+		SetError(&error).
+		Get(fmt.Sprintf("%s/api/album?_start=%d&_end=%d&_sort=name&_order=ASC", server, start, end))
+
+	if err != nil {
+		return nil, err
+	}
+
+	if !response.IsSuccess() {
+		return nil, errors.New(error.Error)
+	}
+
+	return albums, nil
+}
+
 func loadAlbum(token, server, albumId string) (*utils.Album, error) {
 	var album utils.Album
 	var error utils.NavError
diff --git a/src/modules/album/album.templ b/src/modules/album/album.templ
index 6025ae8..7d50a51 100644
--- a/src/modules/album/album.templ
+++ b/src/modules/album/album.templ
@@ -1,19 +1,29 @@
 package album
 
 import (
+	"acide/src/modules/index"
 	"acide/src/utils"
 	"fmt"
 	"strconv"
 )
 
-templ allAlbumsTempl() {
+// Renders a page with all albums passed to it
+templ allAlbumsTempl(albums []utils.Album) {
 	@utils.SkeletonTempl() {
 		<div>
-			:D
+			<h1 class="font-bold pt-4 pb-2 text-2xl">
+				Albums
+			</h1>
+			<div class="grid grid-cols-3 gap-2">
+				for _, album := range albums {
+					@index.AlbumCard(album)
+				}
+			</div>
 		</div>
 	}
 }
 
+// Renders the page of a single Album
 templ albumTempl(albumId string, album *utils.Album, songs []utils.Song) {
 	@utils.SkeletonTempl() {
 		<div class="text-center">
diff --git a/src/modules/album/album_templ.go b/src/modules/album/album_templ.go
index cf6a862..5615f7c 100644
--- a/src/modules/album/album_templ.go
+++ b/src/modules/album/album_templ.go
@@ -9,12 +9,14 @@ import "github.com/a-h/templ"
 import templruntime "github.com/a-h/templ/runtime"
 
 import (
+	"acide/src/modules/index"
 	"acide/src/utils"
 	"fmt"
 	"strconv"
 )
 
-func allAlbumsTempl() templ.Component {
+// Renders a page with all albums passed to it
+func allAlbumsTempl(albums []utils.Album) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -47,7 +49,17 @@ func allAlbumsTempl() templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div>:D</div>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><h1 class=\"font-bold pt-4 pb-2 text-2xl\">Albums</h1><div class=\"grid grid-cols-3 gap-2\">")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			for _, album := range albums {
+				templ_7745c5c3_Err = index.AlbumCard(album).Render(ctx, templ_7745c5c3_Buffer)
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
@@ -61,6 +73,7 @@ func allAlbumsTempl() templ.Component {
 	})
 }
 
+// Renders the page of a single Album
 func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -101,7 +114,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 			var templ_7745c5c3_Var5 string
 			templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(fmt.Sprintf("/covers/%s", albumId))
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 20, Col: 89}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 30, Col: 89}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 			if templ_7745c5c3_Err != nil {
@@ -114,7 +127,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 			var templ_7745c5c3_Var6 string
 			templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(album.Name)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 22, Col: 16}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 32, Col: 16}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
 			if templ_7745c5c3_Err != nil {
@@ -127,7 +140,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 			var templ_7745c5c3_Var7 string
 			templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(album.Artist)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 25, Col: 18}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 35, Col: 18}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
 			if templ_7745c5c3_Err != nil {
@@ -150,7 +163,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 					song.ID,
 				))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 36, Col: 7}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 46, Col: 7}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
 				if templ_7745c5c3_Err != nil {
@@ -163,7 +176,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 				var templ_7745c5c3_Var9 string
 				templ_7745c5c3_Var9, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(song.TrackNumber))
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 39, Col: 39}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 49, Col: 39}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
 				if templ_7745c5c3_Err != nil {
@@ -176,7 +189,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song) templ.Co
 				var templ_7745c5c3_Var10 string
 				templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(song.Title)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 41, Col: 18}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `src/modules/album/album.templ`, Line: 51, Col: 18}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
 				if templ_7745c5c3_Err != nil {
diff --git a/src/modules/index/index.templ b/src/modules/index/index.templ
index c9dedb4..3b0553b 100644
--- a/src/modules/index/index.templ
+++ b/src/modules/index/index.templ
@@ -15,15 +15,15 @@ templ IndexTempl(albums []utils.Album) {
 		</h2>
 		<div class="overflow-x-scroll whitespace-nowrap py-2">
 			for _, album := range albums {
-				@albumCard(album)
+				@AlbumCard(album)
 			}
 		</div>
 		@utils.MusicPlayer()
 	}
 }
 
-templ albumCard(album utils.Album) {
-	<div class="inline-block p-1 mx-1 rounded bg-zinc-200 w-32">
+templ AlbumCard(album utils.Album) {
+	<div class="inline-block p-1 rounded bg-zinc-200 max-w-32">
 		<div class="h-30 relative">
 			<img src={ fmt.Sprintf("/covers/%s", album.ID) }/>
 			<a
diff --git a/src/modules/index/index_templ.go b/src/modules/index/index_templ.go
index d55c831..2148a0d 100644
--- a/src/modules/index/index_templ.go
+++ b/src/modules/index/index_templ.go
@@ -51,7 +51,7 @@ func IndexTempl(albums []utils.Album) templ.Component {
 				return templ_7745c5c3_Err
 			}
 			for _, album := range albums {
-				templ_7745c5c3_Err = albumCard(album).Render(ctx, templ_7745c5c3_Buffer)
+				templ_7745c5c3_Err = AlbumCard(album).Render(ctx, templ_7745c5c3_Buffer)
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
@@ -74,7 +74,7 @@ func IndexTempl(albums []utils.Album) templ.Component {
 	})
 }
 
-func albumCard(album utils.Album) templ.Component {
+func AlbumCard(album utils.Album) templ.Component {
 	return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
 		templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
 		if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -95,7 +95,7 @@ func albumCard(album utils.Album) templ.Component {
 			templ_7745c5c3_Var3 = templ.NopComponent
 		}
 		ctx = templ.ClearChildren(ctx)
-		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"inline-block p-1 mx-1 rounded bg-zinc-200 w-32\"><div class=\"h-30 relative\"><img src=\"")
+		_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"inline-block p-1 rounded bg-zinc-200 max-w-32\"><div class=\"h-30 relative\"><img src=\"")
 		if templ_7745c5c3_Err != nil {
 			return templ_7745c5c3_Err
 		}