diff --git a/.gitignore b/.gitignore
index ea7b5c1..70b0239 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@ static/
 src/app/database/data.db-journal
 src/app/database/old_migrations/
 src/lib
+src/app/scripts/
\ No newline at end of file
diff --git a/src/app/views/artists/get.zmpl b/src/app/views/artists/get.zmpl
index 931fe9c..9913061 100644
--- a/src/app/views/artists/get.zmpl
+++ b/src/app/views/artists/get.zmpl
@@ -1,20 +1,32 @@
 <html>
 <head>
+<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
 <link rel="stylesheet" href="styles.css">
 <meta charset="UTF-8">
 </head>
 <body>
 @partial partials/header
 <h1>{{.artist}}</h1>
-<table>
+<table id="myTable">
+<thead>
 <tr>
 <th>Name</th><th>Scrobbles</th>
+</tr>
+</thead>
+<tbody>
 @for (.albums) |album| {
   <tr>
   <td class=cell><a href="/albums/{{album.url}}">{{album.name}}</a></td>
   <td class=cell>{{album.scrobbles}}</td>
   </tr>
 }
+</tbody>
 </table>
+<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
+<script>
+    const dataTable = new simpleDatatables.DataTable("#myTable", {
+        searchable: false,
+    });
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/app/views/artists/index.zmpl b/src/app/views/artists/index.zmpl
index a122138..6854e07 100644
--- a/src/app/views/artists/index.zmpl
+++ b/src/app/views/artists/index.zmpl
@@ -1,20 +1,34 @@
 <html>
 <head>
-<link rel="stylesheet" href="styles.css">
+<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
 <meta charset="UTF-8">
 </head>
 <body>
 @partial partials/header
-<h1> Artists</h1>
-<table>
+<h1>Artists</h1>
+<table id="myTable" class='table'>
+<thead>
 <tr>
 <th>Name</th>
+<th>Scrobbles</th>
+</tr>
+</thead>
+<tbody>
 @for (.artists) |artist| {
   <tr>
   <td class=cell><a href="/artists/{{artist.url}}">{{artist.name}}</a></td>
   <td class=cell>{{artist.scrobbles}}</td>
   </tr>
 }
+</tbody>
 </table>
+<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
+<script>
+    const dataTable = new simpleDatatables.DataTable("#myTable", {
+        searchable: true,
+        perPage: 50,
+        perPageSelect: [25,50,100],
+    });
+</script>
 </body>
 </html>
\ No newline at end of file
diff --git a/src/app/views/scrobbles.zig b/src/app/views/scrobbles.zig
index 5ce68e9..7bd4f19 100644
--- a/src/app/views/scrobbles.zig
+++ b/src/app/views/scrobbles.zig
@@ -1,8 +1,36 @@
 const std = @import("std");
 const jetzig = @import("jetzig");
 
-pub fn index(request: *jetzig.Request, data: *jetzig.Data) !jetzig.View {
-    _ = data;
+pub fn index(request: *jetzig.Request) !jetzig.View {
+    var root = try request.data(.object);
+    var scrobbles_view = try root.put("scrobbles", .array);
+    const query = jetzig.database.Query(.Scrobble).select(.{})
+        .include(.song, .{ .select = .{ .id, .name } })
+        .include(.album, .{ .select = .{ .id, .name } })
+        .include(.scrobbleartists, .{ .select = .{.artist_id} })
+        .orderBy(.{ .date = .desc });
+    const scrobbles = try request.repo.all(query);
+    for (scrobbles) |scrobble| {
+        var scrobble_view = try scrobbles_view.append(.object);
+
+        var artist_infos = try scrobble_view.put("artist_info", .array);
+        for (scrobble.scrobbleartists) |artist| {
+            var artist_info = try artist_infos.append(.object);
+            const artist_data = try jetzig.database.Query(.Artist).where(.{ .id = artist.artist_id }).all(request.repo);
+            for (artist_data) |ad| {
+                try artist_info.put("name", ad.name);
+                try artist_info.put("id", ad.id);
+            }
+        }
+
+        try scrobble_view.put("song_name", scrobble.song.name);
+        try scrobble_view.put("song_id", scrobble.song.id);
+        try scrobble_view.put("artist_name", "placeholder");
+        try scrobble_view.put("artist_id", "placeholder");
+        try scrobble_view.put("album_name", scrobble.album.name);
+        try scrobble_view.put("album_id", scrobble.album.id);
+        try scrobble_view.put("date", scrobble.date);
+    }
     return request.render(.ok);
 }
 
diff --git a/src/app/views/scrobbles/index.zmpl b/src/app/views/scrobbles/index.zmpl
index 48b753a..377f50f 100644
--- a/src/app/views/scrobbles/index.zmpl
+++ b/src/app/views/scrobbles/index.zmpl
@@ -1,16 +1,42 @@
 <html>
 <head>
-<link rel="stylesheet" href="styles.css">
+<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
+<meta charset="UTF-8">
 </head>
 <body>
 @partial partials/header
-<div>
-  <span>Look for an artist</span>
-</div>
-<form action="/scrobbles" method"GET">
-  <label>Filename</label>
-  <input type="text" name="ar" />
-  <input type="submit" value="Submit" />
-</form>
+<h1>Scrobbles</h1>
+<table id="myTable">
+<thead>
+<tr>
+<th>Song</th>
+<th>Artist(s)</th>
+<th>Album</th>
+<th>Date</th>
+</tr>
+</thead>
+<tbody>
+@for (.scrobbles) |scrobble| {
+  <tr>
+  <td class=cell><a href="/songs/{{scrobble.song_id}}">{{scrobble.song_name}}</a></td>
+  <td class=cell>
+  @for (scrobble.get("artist_info").?) |ai| {
+    <a href="/artists/{{ai.id}}">{{ai.name}}</a>
+  }
+  </td>
+  <td class=cell><a href="/albums/{{scrobble.album_id}}">{{scrobble.album_name}}</a></td>
+  <td class=cell>{{scrobble.date}}</td>
+  </tr>
+}
+</tbody>
+</table>
+<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
+<script>
+    const dataTable = new simpleDatatables.DataTable("#myTable", {
+        searchable: true,
+        perPage: 50,
+        perPageSelect: [25,50,100],
+    });
+</script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/src/app/views/songs.zig b/src/app/views/songs.zig
index efd9222..1da1d88 100644
--- a/src/app/views/songs.zig
+++ b/src/app/views/songs.zig
@@ -7,9 +7,11 @@ pub fn index(request: *jetzig.Request) !jetzig.View {
     const query = jetzig.database.Query(.Song).select(.{}).orderBy(.{ .name = .asc });
     const songs = try request.repo.all(query);
     for (songs) |song| {
+        const scrobbles = try jetzig.database.Query(.Scrobble).where(.{ .song_id = song.id }).count().execute(request.repo);
         var song_view = try songs_view.append(.object);
         try song_view.put("name", song.name);
         try song_view.put("url", song.id);
+        try song_view.put("scrobbles", scrobbles);
     }
     return request.render(.ok);
 }
diff --git a/src/app/views/songs/index.zmpl b/src/app/views/songs/index.zmpl
index 76fc323..7efdc2f 100644
--- a/src/app/views/songs/index.zmpl
+++ b/src/app/views/songs/index.zmpl
@@ -1,19 +1,34 @@
 <html>
 <head>
-<link rel="stylesheet" href="styles.css">
+<link href="https://cdn.jsdelivr.net/npm/simple-datatables@latest/dist/style.css" rel="stylesheet" type="text/css">
 <meta charset="UTF-8">
 </head>
 <body>
 @partial partials/header
 <h1>Songs</h1>
-<table>
+<table id="myTable">
+<thead>
 <tr>
 <th>Name</th>
+<th>Scrobbles</th>
+</tr>
+</thead>
+<tbody>
 @for (.songs) |song| {
   <tr>
   <td class=cell><a href="/songs/{{song.url}}">{{song.name}}</a></td>
+  <td>{{song.scrobbles}}</td>
   </tr>
 }
+</tbody>
 </table>
+<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest" type="text/javascript"></script>
+<script>
+    const dataTable = new simpleDatatables.DataTable("#myTable", {
+        searchable: true,
+        perPage: 50,
+        perPageSelect: [25,50,100],
+    });
+</script>
 </body>
 </html>
\ No newline at end of file
