diff --git a/src/app.css b/src/app.css
index d4b5078..c88b97b 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1,19 @@
 @import 'tailwindcss';
+
+@layer components {
+	.textbox-base {
+		@apply rounded-md border-2 border-gray-300 p-2;
+	}
+
+	.btn {
+		@apply rounded-md p-2;
+	}
+
+	.btn-primary {
+		@apply bg-blue-500 hover:bg-blue-700 text-white;
+	}
+
+	.review-tag {
+		@apply bg-blue-200 p-2 rounded-lg my-2 text-sm text-blue-800 whitespace-nowrap;
+	}
+}
diff --git a/src/lib/components/ScoreSlider.svelte b/src/lib/components/ScoreSlider.svelte
new file mode 100644
index 0000000..6ab9e83
--- /dev/null
+++ b/src/lib/components/ScoreSlider.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { PageProps } from './$types';
+
+	let { title, currentRating }: PageProps = $props();
+</script>
+
+<div class="flex flex-col space-y-2">
+	<p>{title}</p>
+	<input type="range" name="song" id="song" min="1" max="100" value={currentRating} />
+	<div class="flex justify-between">
+		<p class="text-center">1</p>
+		<p>|</p>
+		<p class="text-center">25</p>
+		<p>|</p>
+		<p class="text-center">50</p>
+		<p>|</p>
+		<p class="text-center">75</p>
+		<p>|</p>
+		<p class="text-center">100</p>
+	</div>
+</div>