Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/App.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -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/pages/Login.tsx
===================================================================
--- frontend/src/pages/Login.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Login.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -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,11 @@
 			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(errorMessage);
+			toast.error(errorMessage);
 		}
 	};
Index: frontend/src/pages/Nav.tsx
===================================================================
--- frontend/src/pages/Nav.tsx	(revision 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Nav.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -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 4e5cf92d976588170fa715007a49de90e673172a)
+++ frontend/src/pages/Register.tsx	(revision b70fbeb1a16c9d900c276242b590510a38a98b4a)
@@ -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();
@@ -28,5 +30,4 @@
 	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");
@@ -53,6 +54,10 @@
 			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 || "Registration failed. Please try again.";
+			setError(errorMessage);
+			toast.error(errorMessage);
 		}
 	};
@@ -62,4 +67,5 @@
 			<h2 className="text-2xl mb-4">Register</h2>
 			<form className="bg-white p-6 rounded shadow-md w-80">
+				{error && <p className="text-red-500 mb-4">{error}</p>}
 				<div className="mb-4">
 					<label className="block text-gray-700 mb-2" htmlFor="username">
