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>

src/components/Sidebar.tsx

@@ -28,7 +28,7 @@ const Nav = ({Icon, label, path, keyPath}: NavProps) => (
 			path === keyPath && "bg-mti-green text-white",
 		)}>
 		<Icon size={20} />
-		<span>{label}</span>
+		<span className="text-lg font-medium">{label}</span>
 	</Link>
 );
 
@@ -59,7 +59,7 @@ export default function Sidebar({path}: Props) {
 					"p-4 px-8 rounded-full flex gap-4 items-center cursor-pointer text-black hover:text-mti-orange transition duration-300 ease-in-out",
 				)}>
 				<RiLogoutBoxFill size={20} />
-				<span>Log Out</span>
+				<span className="text-lg font-medium">Log Out</span>
 			</div>
 		</section>
 	);