diff --git a/src/app/views/ratings/songs.zig b/src/app/views/ratings/songs.zig
new file mode 100644
index 0000000..3145fb4
--- /dev/null
+++ b/src/app/views/ratings/songs.zig
@@ -0,0 +1,12 @@
+const std = @import("std");
+const jetzig = @import("jetzig");
+pub fn post(request: *jetzig.Request) !jetzig.View {
+    var root = try request.data(.object);
+    const params = try request.params();
+    const id = params.getT(.integer, "song_id");
+    const review = params.getT(.string, "review");
+    try root.put("song_id", id);
+    try root.put("review", review);
+
+    return request.render(.created);
+}
diff --git a/src/app/views/ratings/songs/post.zmpl b/src/app/views/ratings/songs/post.zmpl
new file mode 100644
index 0000000..3366a0c
--- /dev/null
+++ b/src/app/views/ratings/songs/post.zmpl
@@ -0,0 +1,2 @@
+{{.song_id}}
+{{.review}}
\ No newline at end of file
diff --git a/src/app/views/songs/get.zmpl b/src/app/views/songs/get.zmpl
index 1ceddef..33e6886 100644
--- a/src/app/views/songs/get.zmpl
+++ b/src/app/views/songs/get.zmpl
@@ -5,6 +5,7 @@
 
 <html>
 <head>
+  <script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.5/dist/htmx.min.js" integrity="sha384-t4DxZSyQK+0Uv4jzy5B0QyHyWQD2GFURUmxKMBVww9+e2EJ0ei/vCvv7+79z0fkr" crossorigin="anonymous"></script>
 <meta charset="UTF-8">
 </head>
 <body>
@@ -24,9 +25,13 @@
   </div>
   <div style="display:flex;flex-direction:column;align-self:right">
     <h2>Rating</h2>
-    <input type="text">
-    <input type="button">
+    <form>
+    <input type="number" name="score" id="score" style="width:50px;height:30px">
+    <textarea name="review" id="review" style="width:350px;height:100px"></textarea>
+    <button hx-post="/ratings/songs" hx-vals='{"song_id":"{{.song.song_id}}"}' hx-target="#review-container" style="width:50px;height:30px">Post</button>
+    </form>
   </div>
+  <div id="review-container">No reviews</div>
 </div>
 </body>
 </html>
\ No newline at end of file
