diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
new file mode 100644
index 0000000..bca3950
--- /dev/null
+++ b/app/components/ui/toast.tsx
@@ -0,0 +1,127 @@
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "app/utils/cn"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive:
+					"destructive group border-destructive bg-destructive text-destructive-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+)
+
+const Toast = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+		VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	)
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+			className,
+		)}
+		{...props}
+	/>
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold", className)}
+		{...props}
+	/>
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
+}
diff --git a/app/components/ui/toaster.tsx b/app/components/ui/toaster.tsx
new file mode 100644
index 0000000..7d045e3
--- /dev/null
+++ b/app/components/ui/toaster.tsx
@@ -0,0 +1,33 @@
+import {
+	Toast,
+	ToastClose,
+	ToastDescription,
+	ToastProvider,
+	ToastTitle,
+	ToastViewport,
+} from "app/components/ui/toast"
+import { useToast } from "app/components/ui/use-toast"
+
+export function Toaster() {
+	const { toasts } = useToast()
+
+	return (
+		<ToastProvider>
+			{toasts.map(function ({ id, title, description, action, ...props }) {
+				return (
+					<Toast key={id} {...props}>
+						<div className="grid gap-1">
+							{title && <ToastTitle>{title}</ToastTitle>}
+							{description && (
+								<ToastDescription>{description}</ToastDescription>
+							)}
+						</div>
+						{action}
+						<ToastClose />
+					</Toast>
+				)
+			})}
+			<ToastViewport />
+		</ToastProvider>
+	)
+}
diff --git a/app/components/ui/use-toast.ts b/app/components/ui/use-toast.ts
new file mode 100644
index 0000000..0c13b30
--- /dev/null
+++ b/app/components/ui/use-toast.ts
@@ -0,0 +1,189 @@
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type { ToastActionElement, ToastProps } from "app/components/ui/toast"
+
+const TOAST_LIMIT = 5
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+	id: string
+	title?: React.ReactNode
+	description?: React.ReactNode
+	action?: ToastActionElement
+}
+
+const actionTypes = {
+	ADD_TOAST: "ADD_TOAST",
+	UPDATE_TOAST: "UPDATE_TOAST",
+	DISMISS_TOAST: "DISMISS_TOAST",
+	REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+	count = (count + 1) % Number.MAX_VALUE
+	return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+	| {
+			type: ActionType["ADD_TOAST"]
+			toast: ToasterToast
+	  }
+	| {
+			type: ActionType["UPDATE_TOAST"]
+			toast: Partial<ToasterToast>
+	  }
+	| {
+			type: ActionType["DISMISS_TOAST"]
+			toastId?: ToasterToast["id"]
+	  }
+	| {
+			type: ActionType["REMOVE_TOAST"]
+			toastId?: ToasterToast["id"]
+	  }
+
+interface State {
+	toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+	if (toastTimeouts.has(toastId)) {
+		return
+	}
+
+	const timeout = setTimeout(() => {
+		toastTimeouts.delete(toastId)
+		dispatch({
+			type: "REMOVE_TOAST",
+			toastId: toastId,
+		})
+	}, TOAST_REMOVE_DELAY)
+
+	toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+	switch (action.type) {
+		case "ADD_TOAST":
+			return {
+				...state,
+				toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+			}
+
+		case "UPDATE_TOAST":
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === action.toast.id ? { ...t, ...action.toast } : t,
+				),
+			}
+
+		case "DISMISS_TOAST": {
+			const { toastId } = action
+
+			// ! Side effects ! - This could be extracted into a dismissToast() action,
+			// but I'll keep it here for simplicity
+			if (toastId) {
+				addToRemoveQueue(toastId)
+			} else {
+				state.toasts.forEach((toast) => {
+					addToRemoveQueue(toast.id)
+				})
+			}
+
+			return {
+				...state,
+				toasts: state.toasts.map((t) =>
+					t.id === toastId || toastId === undefined
+						? {
+								...t,
+								open: false,
+						  }
+						: t,
+				),
+			}
+		}
+		case "REMOVE_TOAST":
+			if (action.toastId === undefined) {
+				return {
+					...state,
+					toasts: [],
+				}
+			}
+			return {
+				...state,
+				toasts: state.toasts.filter((t) => t.id !== action.toastId),
+			}
+	}
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+	memoryState = reducer(memoryState, action)
+	listeners.forEach((listener) => {
+		listener(memoryState)
+	})
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+	const id = genId()
+
+	const update = (props: ToasterToast) =>
+		dispatch({
+			type: "UPDATE_TOAST",
+			toast: { ...props, id },
+		})
+	const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+	dispatch({
+		type: "ADD_TOAST",
+		toast: {
+			...props,
+			id,
+			open: true,
+			onOpenChange: (open) => {
+				if (!open) dismiss()
+			},
+		},
+	})
+
+	return {
+		id: id,
+		dismiss,
+		update,
+	}
+}
+
+function useToast() {
+	const [state, setState] = React.useState<State>(memoryState)
+
+	React.useEffect(() => {
+		listeners.push(setState)
+		return () => {
+			const index = listeners.indexOf(setState)
+			if (index > -1) {
+				listeners.splice(index, 1)
+			}
+		}
+	}, [state])
+
+	return {
+		...state,
+		toast,
+		dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+	}
+}
+
+export { useToast, toast }
diff --git a/app/root.tsx b/app/root.tsx
index 3b79c1e..8b30e23 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -17,6 +17,7 @@ import { useRevalidateOnFocus } from "~/hooks/revalidateOnFocus"
 import { ThemeProvider } from "./hooks/themeProvider"
 import acceptLanguage from "accept-language-parser"
 import { LocaleProvider } from "./hooks/locale"
+import { Toaster } from "~/components/ui/toaster"
 
 // Sets up Cron singletons to perform timed jobs on the server
 initJobs && initJobs()
@@ -88,6 +89,7 @@ export default function App() {
 						disableTransitionOnChange
 					>
 						<Layout user={user} />
+						<Toaster />
 					</ThemeProvider>
 					<Scripts />
 					<LiveReload />
diff --git a/app/routes/mission-board.history.tsx b/app/routes/mission-board.history.tsx
index d7618b1..536de50 100644
--- a/app/routes/mission-board.history.tsx
+++ b/app/routes/mission-board.history.tsx
@@ -12,7 +12,7 @@ import {
 	TableRow,
 } from "~/components/ui/table"
 import { cn } from "~/utils/cn"
-import type { ReactNode } from "react"
+import { useState, type ReactNode, useEffect } from "react"
 import {
 	CircumstanceTemplates,
 	getMissionTemplate,
@@ -21,7 +21,7 @@ import { t } from "~/data/localization.server"
 import { Img } from "~/components/Img"
 import { Button } from "~/components/ui/button"
 import { sideObjectiveToType } from "~/components/Mission"
-import { ChevronDown } from "lucide-react"
+import { Check, ChevronDown } from "lucide-react"
 import {
 	DropdownMenu,
 	DropdownMenuCheckboxItem,
@@ -31,6 +31,7 @@ import {
 import type { MissionInstance } from "@prisma/client"
 import { isKeyOf } from "~/utils/isKeyOf"
 import useLocale from "~/hooks/locale"
+import { useToast } from "~/components/ui/use-toast"
 
 let FILTERS = [
 	"circumstance",
@@ -183,29 +184,55 @@ let columns: Column[] = [
 			</span>
 		)
 	},
-	({ id }) => (
-		<Button
-			onClick={() => {
-				navigator.permissions
-					// @ts-expect-error - clipboard-write is not in the types?
-					.query({ name: "clipboard-write" })
-					.then((result) => {
-						if (result.state === "granted" || result.state === "prompt") {
-							navigator.clipboard.writeText(id).then(
-								() => {
-									/* clipboard successfully set */
-								},
-								() => {
-									/* clipboard write failed */
-								},
-							)
-						}
-					})
-			}}
-		>
-			Copy ID
-		</Button>
-	),
+	({ id }) => {
+		let [copied, setCopied] = useState(false)
+		let { toast } = useToast()
+
+		useEffect(() => {
+			let timeoutId: ReturnType<typeof setTimeout> | undefined
+			if (copied) {
+				timeoutId = setTimeout(() => {
+					setCopied(false)
+				}, 2500)
+			}
+			return () => {
+				if (timeoutId) {
+					clearInterval(timeoutId)
+				}
+			}
+		}, [copied])
+
+		if (copied) {
+			return (
+				<span className="flex gap-2 h-10 items-center">
+					<Check /> Copied
+				</span>
+			)
+		}
+
+		return (
+			<Button
+				onClick={() => {
+					navigator.clipboard.writeText(id).then(
+						() => {
+							setCopied(true)
+							toast({ title: "Copied to clipboard", description: id })
+						},
+						(error) => {
+							setCopied(false)
+							toast({
+								title: "Failed to copy",
+								description: error.message,
+								variant: "destructive",
+							})
+						},
+					)
+				}}
+			>
+				Copy ID
+			</Button>
+		)
+	},
 ]
 
 function SearchParamsDropdownMenu({
diff --git a/package-lock.json b/package-lock.json
index 073fa14..fcf0095 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
 				"@radix-ui/react-select": "^2.0.0",
 				"@radix-ui/react-separator": "^1.0.3",
 				"@radix-ui/react-slot": "^1.0.2",
+				"@radix-ui/react-toast": "^1.1.5",
 				"@remix-run/dev": "^1.19.1",
 				"@remix-run/node": "^1.19.1",
 				"@remix-run/react": "^1.19.1",
@@ -3787,6 +3788,40 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-toast": {
+			"version": "1.1.5",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.1.5.tgz",
+			"integrity": "sha512-fRLn227WHIBRSzuRzGJ8W+5YALxofH23y0MlPLddaIpLpCDqdE0NZlS2NRQDRiptfxDeeCjgFIpexB1/zkxDlw==",
+			"dependencies": {
+				"@babel/runtime": "^7.13.10",
+				"@radix-ui/primitive": "1.0.1",
+				"@radix-ui/react-collection": "1.0.3",
+				"@radix-ui/react-compose-refs": "1.0.1",
+				"@radix-ui/react-context": "1.0.1",
+				"@radix-ui/react-dismissable-layer": "1.0.5",
+				"@radix-ui/react-portal": "1.0.4",
+				"@radix-ui/react-presence": "1.0.1",
+				"@radix-ui/react-primitive": "1.0.3",
+				"@radix-ui/react-use-callback-ref": "1.0.1",
+				"@radix-ui/react-use-controllable-state": "1.0.1",
+				"@radix-ui/react-use-layout-effect": "1.0.1",
+				"@radix-ui/react-visually-hidden": "1.0.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0",
+				"react-dom": "^16.8 || ^17.0 || ^18.0"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-callback-ref": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
diff --git a/package.json b/package.json
index 037aab3..ed491ac 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
 		"@radix-ui/react-select": "^2.0.0",
 		"@radix-ui/react-separator": "^1.0.3",
 		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-toast": "^1.1.5",
 		"@remix-run/dev": "^1.19.1",
 		"@remix-run/node": "^1.19.1",
 		"@remix-run/react": "^1.19.1",