diff --git a/apps/web/components/login.tsx b/apps/web/components/login.tsx
index d8748d3d2..147d1cb99 100644
--- a/apps/web/components/login.tsx
+++ b/apps/web/components/login.tsx
@@ -7,6 +7,7 @@ import { getCsrfToken, signIn } from "next-auth/react";
 import { ErrorCode } from "@documenso/lib/auth";
 import { useState } from "react";
 import { useRouter } from "next/router";
+import { toast, Toaster } from "react-hot-toast";
 
 interface LoginValues {
   email: string;
@@ -38,11 +39,25 @@ export default function Login() {
       callbackUrl,
       redirect: false,
     });
-    if (!res) setErrorMessage("error");
+    if (!res) {
+      setErrorMessage("error");
+      toast.error("Something went wrong.");
+    }
     // we're logged in! let's do a hard refresh to the desired url
-    else if (!res.error) router.push(callbackUrl);
+    else if (!res.error) {
+      router.push(callbackUrl).then(() => {
+        toast.success("Login successful");
+      });
+      // toast.error("error");
+    }
     // fallback if error not found
-    else setErrorMessage("something_went_wrong");
+    else {
+      if (res.status == 401) {
+        toast.error("Invalid email or password.");
+      } else {
+        toast.error("Could not login.");
+      }
+    }
   };
 
   return (
@@ -141,6 +156,7 @@ export default function Login() {
           </FormProvider>
         </div>
       </div>
+      <Toaster position="top-center" />
     </>
   );
 }
diff --git a/apps/web/components/navigation.tsx b/apps/web/components/navigation.tsx
index 7224b63c1..3b7535fa3 100644
--- a/apps/web/components/navigation.tsx
+++ b/apps/web/components/navigation.tsx
@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { signOut, useSession } from "next-auth/react";
 import avatarFromInitials from "avatar-from-initials";
+import { toast, Toaster } from "react-hot-toast";
 
 import {
   Bars3Icon,
@@ -48,9 +49,11 @@ const userNavigation = [
   {
     name: "Sign out",
     href: "",
-    click: (e: any) => {
+    click: async (e: any) => {
       e.preventDefault();
-      signOut({ callbackUrl: "/login" });
+      const res: any = await signOut({ callbackUrl: "/login" }).finally(() => {
+        if (!res?.error) toast.success("Logout successful");
+      });
     },
     icon: ArrowRightOnRectangleIcon,
   },
@@ -226,6 +229,7 @@ export default function TopNavigation() {
           </>
         )}
       </Disclosure>
+      <Toaster position="top-center"></Toaster>
     </>
   );
 }
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
index b5bf1628c..ef8e5afb6 100644
--- a/apps/web/next.config.js
+++ b/apps/web/next.config.js
@@ -10,6 +10,7 @@ const nextConfig = {
 const withTM = require("next-transpile-modules")([
   "@documenso/prisma",
   "@documenso/lib",
+  "@documenso/ui",
 ]);
 const plugins = [];
 plugins.push(withTM);
diff --git a/apps/web/package.json b/apps/web/package.json
index 5d9cc78e9..16f949cc0 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@documenso/prisma": "*",
+    "@documenso/ui": "*",
     "@headlessui/react": "^1.7.4",
     "@heroicons/react": "^2.0.13",
     "@tailwindcss/forms": "^0.5.3",
diff --git a/packages/lib/classNames.ts b/packages/lib/classNames.ts
new file mode 100644
index 000000000..fa17f266a
--- /dev/null
+++ b/packages/lib/classNames.ts
@@ -0,0 +1,3 @@
+export default function classNames(...classes: unknown[]) {
+  return classes.filter(Boolean).join(" ");
+}
diff --git a/packages/lib/index.ts b/packages/lib/index.ts
index 44733e19a..2314cf225 100644
--- a/packages/lib/index.ts
+++ b/packages/lib/index.ts
@@ -1 +1,2 @@
 export { coloredConsole } from "./coloredConsole";
+export { default as classNames } from "./classNames";
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
new file mode 100644
index 000000000..b89b15e28
--- /dev/null
+++ b/packages/ui/components/index.ts
@@ -0,0 +1 @@
+export {  }
\ No newline at end of file