Continued implementing the new design;

Added an average level calculator;

src/components/Navbar.tsx

@@ -11,9 +11,9 @@ export default function Navbar({user}: Props) {
 		<header className="w-full bg-transparent py-4 gap-2 flex items-center">
 			<h1 className="font-bold text-2xl w-1/6 px-8">eCrop</h1>
 			<div className="flex justify-between w-5/6 mr-8">
-				<input type="text" placeholder="Search..." className="rounded-full py-3 px-6 shadow-md outline-none" />
+				<input type="text" placeholder="Search..." className="rounded-full py-4 px-6 shadow-lg shadow-neutral-200 outline-none" />
 				<div className="flex gap-3 items-center justify-end">
-					<Avatar size="normal" label={user.name.slice(0, 1)} shape="circle" />
+					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full" />
 					<span className="text-right">{user.name}</span>
 				</div>
 			</div>