diff --git a/src/app.html b/src/app.html
index 9d66f04..f75d156 100644
--- a/src/app.html
+++ b/src/app.html
@@ -3,14 +3,51 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon-32x32.png" />
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-        <link href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap" rel="stylesheet">
+		<link rel="manifest" href="/site.webmanifest" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="viewport" content="width=device-width" />
 		<title>Estimation Poker</title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" style="margin: 0; font-family: Arial, sans-serif;">
+	<body data-sveltekit-preload-data="hover" style="margin: 0; font-family: Arial, sans-serif">
 		<div style="display: contents">%sveltekit.body%</div>
+
+		<script>
+			let deferredPrompt;
+			const installButton = document.getElementById('install-app-btn-container');
+
+			window.addEventListener('beforeinstallprompt', (e) => {
+				// Prevent the mini-infobar from appearing on mobile
+				e.preventDefault();
+				// Stash the event so it can be triggered later.
+				deferredPrompt = e;
+				// Update UI notify the user they can install the PWA
+				installButton.style.display = 'block';
+			});
+
+			installButton.addEventListener('click', async (e) => {
+				// Hide our user interface that shows our A2HS button
+				installButton.style.display = 'none';
+				// Show the prompt
+				deferredPrompt.prompt();
+				// Wait for the user to respond to the prompt
+				const { outcome } = await deferredPrompt.userChoice;
+				if (outcome === 'accepted') {
+					console.log('User accepted the A2HS prompt');
+				} else {
+					console.log('User dismissed the A2HS prompt');
+				}
+				deferredPrompt = null;
+			});
+
+			window.addEventListener('appinstalled', (evt) => {
+				console.log('a2hs', 'appinstalled', evt);
+			});
+		</script>
 	</body>
 </html>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 872b19a..56a0093 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	<div class="topbar-items"><h1><a href="/">Estimation Poker</a></h1></div>
 	<p id="install-app-btn-container" class="topbar-items">
 		<button id="install-offline-app" class="button button-black">
-			<span>Install the app (you can even use it offline!)</span>
+			<span>Install the app</span>
 		</button>
 	</p>
 </header>
@@ -118,7 +118,7 @@
 		color: #81796c;
 	}
 
-	/* .button {
+	.button {
 		appearance: none;
 		border: 1px solid rgba(27, 31, 35, 0.15);
 		border-radius: 6px;
@@ -158,7 +158,7 @@
 		outline: none;
 	}
 
-	.button-green {
+	/* .button-green {
 		background-color: #2ea44f;
 	}
 
@@ -178,7 +178,7 @@
 	.button-green:active {
 		background-color: #298e46;
 		box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
-	}
+	} */
 
 	.button-black {
 		background-color: #423e37;
@@ -188,7 +188,7 @@
 		background-color: #2e2b26;
 	}
 
-	.button-blue {
+	/* .button-blue {
 		background-color: #388697;
 	}
 
diff --git a/static/service-worker.js b/static/service-worker.js
new file mode 100644
index 0000000..71baa8f
--- /dev/null
+++ b/static/service-worker.js
@@ -0,0 +1,8 @@
+self.addEventListener('install', (event) => {
+  console.log('[Service Worker] Installing Service Worker ...', event);
+});
+
+self.addEventListener('activate', (event) => {
+  console.log('[Service Worker] Activating Service Worker ...', event);
+  return self.clients.claim();
+});
diff --git a/static/site.webmanifest b/static/site.webmanifest
index 9ecc661..5e46fea 100644
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@@ -1 +1,13 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#8D6A9F","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+	"name": "Estimation Poker",
+	"short_name": "Estimation Poker",
+	"description": "A cool estimation poker app",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"start_url": "/",
+	"theme_color": "#8D6A9F",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}
