diff --git a/src/static/js/ui/peer_name.mjs b/src/static/js/ui/peer_name.mjs
index e474bd7..407e568 100644
--- a/src/static/js/ui/peer_name.mjs
+++ b/src/static/js/ui/peer_name.mjs
@@ -1,5 +1,7 @@
 "use strict";
 
+const display_id_length = 7;
+
 function handle_toggle_id(event) {
 	event.target.closest(`.peer-name`)
 		.querySelector(`.peer-name-id`)
@@ -7,11 +9,20 @@ function handle_toggle_id(event) {
 }
 
 async function handle_copy_id(event) {
-	await navigator.clipboard.writeText(event.target
+	let peer_id = event.target
 		.closest(`.peer-name`)
-		.dataset.peer_id);
+		.dataset.peer_id;
+	await navigator.clipboard.writeText(peer_id);
 	
-	// TODO: Show notification here
+	event.target.replaceChildren(document.createTextNode(`Copied!`));
+	
+	setTimeout(() => {
+		event.target.replaceChildren(document.createTextNode(
+			peer_id.substring(0, display_id_length)
+		));
+	}, 1250);
+	
+	// TODO: Show a fancy notification here?
 }
 
 export default function peer_name(peer) {
@@ -27,7 +38,7 @@ export default function peer_name(peer) {
 	const peer_id = document.createElement("span");
 	peer_id.classList.add(`peer-name-id`, `invisible-gone`);
 	peer_id.appendChild(document.createTextNode(
-		peer.id.substring(0, 7)
+		peer.id.substring(0, display_id_length)
 	));
 	
 	peer_name.addEventListener("click", handle_toggle_id);