Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 16aed5441fc30d9bf562b00a5fc23dab3e3f4357)
+++ frontend/src/pages/Register.tsx	(revision 3de009b3a9676182b474a121be9e8d177d692101)
@@ -4,5 +4,5 @@
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
-import type { User } from "../utils/types";
+import type { User, UserRegisterType } from "../utils/types";
 
 const Register = () => {
@@ -11,4 +11,5 @@
 	const [password, setPassword] = useState("");
 	const [fullname, setFullname] = useState("");
+	const [userType, setUserType] = useState<UserRegisterType[]>([]);
 	const [email, setEmail] = useState("");
 	const [profilePhotoFile, setProfilePhotoFile] = useState<File | null>(null);
@@ -43,9 +44,14 @@
 		}
 
-		if (username === "" || password === "" || fullname === "" || email === "") {
+		if (
+			username === "" ||
+			password === "" ||
+			fullname === "" ||
+			email === "" ||
+			userType.length === 0
+		) {
 			setError("Please fill in all required fields.");
 			return;
 		}
-
 		if (profilePhotoFile && !profilePhotoFile.type.startsWith("image/")) {
 			alert("Only images allowed");
@@ -58,4 +64,5 @@
 		formData.append("email", email);
 		formData.append("password", password);
+		userType.forEach((type) => formData.append("userType", type));
 
 		try {
@@ -77,5 +84,8 @@
 		<div className="flex flex-col items-center justify-center min-h-[90vh] bg-gray-100">
 			<h2 className="text-2xl mb-4">Register</h2>
-			<form className="bg-white p-6 rounded shadow-md w-full max-w-md">
+			<form
+				className="bg-white p-6 rounded shadow-md w-full max-w-md"
+				onSubmit={handleRegister}
+			>
 				{error && <p className="text-red-500 mb-4">{error}</p>}
 				<div className="mb-4">
@@ -126,4 +136,41 @@
 						onChange={(e) => setEmail(e.target.value)}
 					/>
+				</div>
+				<div className="mb-4">
+					<label className="block text-gray-700 mb-2" htmlFor="userType">
+						User Type
+					</label>
+					<input
+						type="checkbox"
+						id="artist"
+						value="ARTIST"
+						onChange={(e) => {
+							if (e.target.checked) {
+								setUserType((prev) => [...prev, "ARTIST"]);
+							} else {
+								setUserType((prev) => prev.filter((type) => type !== "ARTIST"));
+							}
+						}}
+					/>
+					<label htmlFor="artist" className="ml-2 mr-4">
+						Artist
+					</label>
+					<input
+						type="checkbox"
+						id="listener"
+						value="LISTENER"
+						onChange={(e) => {
+							if (e.target.checked) {
+								setUserType((prev) => [...prev, "LISTENER"]);
+							} else {
+								setUserType((prev) =>
+									prev.filter((type) => type !== "LISTENER"),
+								);
+							}
+						}}
+					/>
+					<label htmlFor="listener" className="ml-2">
+						Listener
+					</label>
 				</div>
 				<div className="mb-4">