Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/src/App.tsx	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -1,3 +1,5 @@
 import { createBrowserRouter, Outlet, RouterProvider } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 import AllUsers from "./pages/AllUsers";
 import LandingPage from "./pages/LandingPage";
@@ -11,4 +13,16 @@
 		<div className="flex flex-col min-h-screen">
 			<Nav />
+			<ToastContainer
+				position="top-right"
+				autoClose={2000}
+				hideProgressBar={false}
+				newestOnTop={false}
+				closeOnClick
+				rtl={false}
+				pauseOnFocusLoss
+				draggable
+				pauseOnHover
+				theme="light"
+			/>
 			<main className="grow">
 				<Outlet />
Index: frontend/src/api/axiosInstance.ts
===================================================================
--- frontend/src/api/axiosInstance.ts	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/src/api/axiosInstance.ts	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -70,5 +70,7 @@
 			[401, 403].includes(error.response?.status) &&
 			!originalConfig._retry &&
-			originalConfig.url !== "/auth/refresh"
+			originalConfig.url !== "/auth/refresh" &&
+			originalConfig.url !== "/auth/login" &&
+			originalConfig.url !== "/auth/register"
 		) {
 			originalConfig._retry = true;
Index: frontend/src/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/src/pages/Login.tsx	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -1,4 +1,5 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -22,6 +23,10 @@
 			setUser(response.data.user);
 			navigate("/");
-		} catch (error) {
-			setError("Login failed. Please check your credentials.");
+			toast.success("Login successful!");
+		} catch (error: any) {
+			const errorMessage =
+				error.response?.data?.error ||
+				"Login failed. Please check your credentials.";
+			setError(`Login failed: ${errorMessage}`);
 		}
 	};
Index: frontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/src/pages/Nav.tsx	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -1,3 +1,4 @@
 import { Link } from "react-router-dom";
+import { toast } from "react-toastify";
 import axiosInstance, { baseURL } from "../api/axiosInstance";
 import Logo from "../assets/logo-finkwave.png";
@@ -12,6 +13,8 @@
 			await axiosInstance.post("/auth/logout");
 			setUser(undefined);
+			toast.success("Logout successful!");
 		} catch (error) {
 			console.error("Logout failed:", error);
+			toast.error("Logout failed!");
 		}
 	};
Index: frontend/src/pages/Register.tsx
===================================================================
--- frontend/src/pages/Register.tsx	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/src/pages/Register.tsx	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
 import axiosInstance, { scheduleTokenRefresh } from "../api/axiosInstance";
 import { useAuth } from "../context/authContext";
@@ -15,4 +16,5 @@
 		null,
 	);
+	const [error, setError] = useState<string | null>(null);
 
 	const navigate = useNavigate();
@@ -26,9 +28,21 @@
 	}, [previewProfilePhoto]);
 
+	const handleRemoveFile = () => {
+		if (previewProfilePhoto) {
+			URL.revokeObjectURL(previewProfilePhoto);
+		}
+		setProfilePhotoFile(null);
+		setPreviewProfilePhoto(null);
+	};
+
 	const handleRegister = async (e: React.FormEvent) => {
 		e.preventDefault();
-		// todo: add proper error handling
 		if (profilePhotoFile && profilePhotoFile.size > 5 * 1024 * 1024) {
 			alert("Max file size is 5MB");
+			return;
+		}
+
+		if (username === "" || password === "" || fullname === "" || email === "") {
+			setError("Please fill in all required fields.");
 			return;
 		}
@@ -53,6 +67,8 @@
 			setUser(response.data.user);
 			navigate("/");
-		} catch (error) {
-			console.error("Registration failed:", error);
+			toast.success("Registration successful!");
+		} catch (error: any) {
+			const errorMessage = error.response?.data?.error || "Please try again.";
+			setError(`Registration failed: ${errorMessage}`);
 		}
 	};
@@ -61,5 +77,6 @@
 		<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-80">
+			<form className="bg-white p-6 rounded shadow-md w-full max-w-md">
+				{error && <p className="text-red-500 mb-4">{error}</p>}
 				<div className="mb-4">
 					<label className="block text-gray-700 mb-2" htmlFor="username">
@@ -115,11 +132,20 @@
 						<label
 							htmlFor="profilePhoto"
-							className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors text-sm font-medium"
+							className="px-4 py-2 bg-blue-500 text-white rounded cursor-pointer hover:bg-blue-600 transition-colors text-sm font-medium text-center"
 						>
 							Choose File
 						</label>
-						<span className="text-gray-600 text-sm">
+						<span className="text-gray-600 text-sm flex-1">
 							{profilePhotoFile ? profilePhotoFile.name : "No file chosen"}
 						</span>
+						{profilePhotoFile && (
+							<button
+								type="button"
+								onClick={handleRemoveFile}
+								className="px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600 transition-colors text-sm font-medium"
+							>
+								Remove
+							</button>
+						)}
 					</div>
 					<input