diff --git a/index.html b/index.html
index 4f038d1..ae8097a 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,23 @@
 				else
 					alert("Couldn't copy link to clipboard");
 			}
+
+			var promptEvent;
+			onbeforeinstallprompt = function(event) {
+				document.getElementById("add-to-home-screen").style.display = "flex";
+				promptEvent = event;
+
+				event.preventDefault();
+			}
+
+			function install() {
+				promptEvent.prompt()
+					.then(response => {
+						if (response.outcome === "accepted") {
+							document.getElementById("add-to-home-screen").style.display = "none";
+						}
+					});
+			}
 		</script>
 	</head>
 	<body>
@@ -44,7 +61,7 @@
 			<summary>Write a message</summary>
 			<textarea id="message" placeholder="(Optional) Message to send"></textarea>
 		</details>
-		<button id="send" onclick="submit()">Submit</button>
+		<button id="send" class="primary" onclick="submit()">Submit</button>
 		<br>
 		<button onclick="copyLink()">
 			<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" style="transform: rotate(45deg);">
@@ -53,6 +70,10 @@
 			Copy WhatsApp link
 		</button>
 		<br>
+		<div id="add-to-home-screen">
+			<span>Add to your home screen</span>
+			<button class="primary" onclick="install()">Add</button>
+		</div>
 		<p id="desc">
 			By default, WhatsApp does not allow you to message
 			users who are not in your contacts list. This website
diff --git a/style.css b/style.css
index d87e79c..060b7a1 100644
--- a/style.css
+++ b/style.css
@@ -10,15 +10,15 @@ h1 {
 	margin-bottom: 0;
 	opacity: 0.7;
 }
-p {
+p, summary {
 	opacity: 0.5;
 	font-size: 0.85rem;
-	max-width: 400px;
+}
+p {
 	margin: 1rem auto;
+	max-width: 400px;
 }
 summary {
-	opacity: 0.5;
-	font-size: 0.85rem;
 	margin: 0.5rem auto;
 	cursor: pointer;
 	user-select: none;
@@ -27,10 +27,6 @@ summary:focus {
 	outline: none;
 	opacity: 0.7;
 }
-#desc {
-	margin-top: 2rem;
-	font-size: 0.75rem;
-}
 .icon {
 	width: 1.25rem;
 	height: 1.25rem;
@@ -67,7 +63,6 @@ input:focus, textarea:focus {
 button {
 	background-color: inherit;
 	border: none;
-	margin: 0.25rem 0;
 	opacity: 0.5;
 	cursor: pointer;
 	transition: all 150ms;
@@ -77,19 +72,40 @@ button:hover, button:focus {
 	outline: none;
 }
 
-#send {
+button.primary {
 	background-color: #1DAA61;
 	color: white;
 	border: none;
 	padding: 0.5rem 2rem;
-	margin-top: 1rem;
 	border-radius: 4px;
 	opacity: 1;
 }
-#send:active {
+button.primary:active {
 	background-color: #18864D;
 }
-#send:focus {
+button.primary:focus {
 	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
 }
 
+#send {
+	margin-top: 1rem;
+	margin: 0.25rem 0;
+}
+#add-to-home-screen {
+	background-color: white;
+	padding: 0.5rem 1rem;
+	margin: 2rem;
+	border-radius: 4px;
+	max-width: 400px;
+	display: none; /* Shown through JS */
+	justify-content: space-between;
+	align-items: center;
+	font-size: 0.85rem;
+	color: #757575;
+	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+}
+#desc {
+	margin-top: 2rem;
+	font-size: 0.75rem;
+}
+
