diff --git a/public/css/error.css b/public/css/error.css
new file mode 100644
index 0000000..65dce6b
--- /dev/null
+++ b/public/css/error.css
@@ -0,0 +1,25 @@
+body {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 90vh;
+	background: #0e0e10;
+	color: #fff;
+	font-family: system-ui, sans-serif;
+}
+.error-container {
+	text-align: center;
+	padding: 2rem;
+	background: #1a1a1d;
+	border-radius: 12px;
+	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+}
+.error-title {
+	font-size: 2rem;
+	margin-bottom: 1rem;
+	color: #ff4e4e;
+}
+.error-message {
+	font-size: 1.2rem;
+	opacity: 0.8;
+}
diff --git a/public/js/index.js b/public/js/index.js
index 3ff4eb8..4c0bfc4 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -258,15 +258,18 @@ function buildActivityHTML(activity) {
 	const activityTypeMap = {
 		0: "Playing",
 		1: "Streaming",
-		2: "Listening to",
+		2: "Listening",
 		3: "Watching",
 		4: "Custom Status",
 		5: "Competing",
 	};
 
-	const activityType = activityTypeMap[activity.type]
-		? `${activityTypeMap[activity.type]}${activity.type === 2 ? ` ${activity.name}` : ""}`
-		: "Playing";
+	const activityType =
+		activity.name === "Spotify"
+			? "Listening to Spotify"
+			: activity.name === "TIDAL"
+				? "Listening to TIDAL"
+				: activityTypeMap[activity.type] || "Playing";
 
 	const activityTimestamp =
 		start && progress === null