diff --git a/components/forms/GradingForm.tsx b/components/forms/GradingForm.tsx
index 5d1be4c..f1d796b 100644
--- a/components/forms/GradingForm.tsx
+++ b/components/forms/GradingForm.tsx
@@ -8,7 +8,7 @@ import { Session } from 'next-auth';
 import { addGrade } from '@/actions/grades';
 
 export function GradingForm({ session, testId }: { session: Session; testId: number }) {
-	const [grade, setGrade] = useState<number>(0);
+	const [grade, setGrade] = useState<number>(4);
 	const [hasVoted, setHasVoted] = useState<boolean>(false);
 
 	async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
@@ -39,7 +39,7 @@ export function GradingForm({ session, testId }: { session: Session; testId: num
 		<div className={'w-full md:w-[400px]'}>
 			<form onSubmit={handleSubmit}>
 				<div>
-					<input type="range" min="2" max="12" id="gradeSelector" className={'w-full h-4 bg-white range range:bg-white text-white'} onChange={(e) => setGrade(Number(e.target.value) / 2)} />
+					<input type="range" value={grade} step="0.5" min="1" max="6" id="gradeSelector" className={"w-full appearance-none bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-primary/75 accent-accent"} onChange={(e) => setGrade(Number(e.target.value))} />
 				</div>
 				<div className={'flex flex-row justify-evenly'}>
 					<Image src={YourGrade} alt={YourGrade} width={100} />