diff --git a/src/app/views/songs.zig b/src/app/views/songs.zig
index ae42cdc..efd9222 100644
--- a/src/app/views/songs.zig
+++ b/src/app/views/songs.zig
@@ -2,6 +2,15 @@ const std = @import("std");
 const jetzig = @import("jetzig");
 
 pub fn index(request: *jetzig.Request) !jetzig.View {
+    var root = try request.data(.object);
+    var songs_view = try root.put("songs", .array);
+    const query = jetzig.database.Query(.Song).select(.{}).orderBy(.{ .name = .asc });
+    const songs = try request.repo.all(query);
+    for (songs) |song| {
+        var song_view = try songs_view.append(.object);
+        try song_view.put("name", song.name);
+        try song_view.put("url", song.id);
+    }
     return request.render(.ok);
 }
 
@@ -38,7 +47,6 @@ pub fn delete(id: []const u8, request: *jetzig.Request) !jetzig.View {
     return request.render(.ok);
 }
 
-
 test "index" {
     var app = try jetzig.testing.app(std.testing.allocator, @import("routes"));
     defer app.deinit();
diff --git a/src/app/views/songs/index.zmpl b/src/app/views/songs/index.zmpl
index 76457d0..76fc323 100644
--- a/src/app/views/songs/index.zmpl
+++ b/src/app/views/songs/index.zmpl
@@ -1,3 +1,19 @@
-<div>
-  <span>Content goes here</span>
-</div>
+<html>
+<head>
+<link rel="stylesheet" href="styles.css">
+<meta charset="UTF-8">
+</head>
+<body>
+@partial partials/header
+<h1>Songs</h1>
+<table>
+<tr>
+<th>Name</th>
+@for (.songs) |song| {
+  <tr>
+  <td class=cell><a href="/songs/{{song.url}}">{{song.name}}</a></td>
+  </tr>
+}
+</table>
+</body>
+</html>
\ No newline at end of file
