diff --git a/.vscode/settings.json b/.vscode/settings.json
index 0fcb2420..c92756b6 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,10 +6,15 @@
 	"files.exclude": {
 		"**/*.js": {
 			"when": "$(basename).ts"
-		}
+		},
+		"components/": true
 	},
 	"files.associations": {
 		"*.pixy": "jade",
 		"*.scarlet": "stylus"
+	},
+	"search.exclude": {
+		"components/": true,
+		"**/*.svg": true
 	}
 }
\ No newline at end of file
diff --git a/pages/popularanime/popular.go b/pages/popularanime/popular.go
index c7cd7e22..1d80e7ef 100644
--- a/pages/popularanime/popular.go
+++ b/pages/popularanime/popular.go
@@ -16,5 +16,5 @@ func Get(ctx *aero.Context) string {
 		return ctx.Error(http.StatusInternalServerError, "Error fetching popular anime", err)
 	}
 
-	return ctx.HTML(components.AnimeGrid(animeList))
+	return ctx.HTML(components.PopularAnime(animeList))
 }
diff --git a/pages/popularanime/popular.pixy b/pages/popularanime/popular.pixy
new file mode 100644
index 00000000..3d5aeec7
--- /dev/null
+++ b/pages/popularanime/popular.pixy
@@ -0,0 +1,6 @@
+component PopularAnime(animeList []*arn.Anime)
+	h2 Top 3
+	AnimeGrid(animeList[:3])
+
+	h2 Popular
+	AnimeGrid(animeList[3:])
\ No newline at end of file
diff --git a/styles/typography.scarlet b/styles/typography.scarlet
index a9bcb6bc..16633b0f 100644
--- a/styles/typography.scarlet
+++ b/styles/typography.scarlet
@@ -8,6 +8,7 @@ p, h1, h2, h3, h4, h5, h6
 		margin-bottom 0
 
 h2
+	margin-top content-padding
 	margin-bottom content-padding
 
 p > img