Index: frontend/package-lock.json
===================================================================
--- frontend/package-lock.json	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/package-lock.json	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -15,4 +15,5 @@
 				"react-dom": "^19.2.0",
 				"react-router-dom": "^7.13.0",
+				"react-toastify": "^11.0.5",
 				"tailwindcss": "^4.1.18"
 			},
@@ -2152,4 +2153,13 @@
 			"funding": {
 				"url": "https://github.com/chalk/chalk?sponsor=1"
+			}
+		},
+		"node_modules/clsx": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=6"
 			}
 		},
@@ -3683,4 +3693,17 @@
 			}
 		},
+		"node_modules/react-toastify": {
+			"version": "11.0.5",
+			"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+			"integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+			"license": "MIT",
+			"dependencies": {
+				"clsx": "^2.1.1"
+			},
+			"peerDependencies": {
+				"react": "^18 || ^19",
+				"react-dom": "^18 || ^19"
+			}
+		},
 		"node_modules/resolve-from": {
 			"version": "4.0.0",
Index: frontend/package.json
===================================================================
--- frontend/package.json	(revision 77e572b1384712e7d7e1156b69cc0aa2ae48998f)
+++ frontend/package.json	(revision c1d2f0715ebdaf396e54dcc52c7463f8e0a280bd)
@@ -17,4 +17,5 @@
 		"react-dom": "^19.2.0",
 		"react-router-dom": "^7.13.0",
+		"react-toastify": "^11.0.5",
 		"tailwindcss": "^4.1.18"
 	},
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