diff --git a/pages/index.tsx b/pages/index.tsx
index 5209997..d712d12 100755
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -184,6 +184,7 @@ const Home: NextPage = () => {
         <title>Creating Generative SVG Grids</title>
         <meta name="description" content="Inspired from [Creating Generative SVG Grids](https://frontend.horse/articles/generative-grids/) by Alex Trost" />
         <link rel="icon" href="./favicon.ico" />
+        <link rel="manifest" href="./manifest.json" />
       </Head>
       <AppBar position="static" sx={{backgroundColor: '#dd8d0e'}}>
         <Toolbar>
diff --git a/public/icon-192.png b/public/icon-192.png
new file mode 100644
index 0000000..18dfd21
Binary files /dev/null and b/public/icon-192.png differ
diff --git a/public/icon-512.png b/public/icon-512.png
new file mode 100644
index 0000000..6a73fcb
Binary files /dev/null and b/public/icon-512.png differ
diff --git a/public/manifest.json b/public/manifest.json
new file mode 100644
index 0000000..4004f93
--- /dev/null
+++ b/public/manifest.json
@@ -0,0 +1,14 @@
+{
+  "short_name": "SVG Grids",
+  "name": "Creating Generative SVG Grids",
+  "theme_color": "#dd8d0e",
+  "background_color": "#33006c",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "icons": [
+    { "src": "./icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "./icon-512.png", "type": "image/png", "sizes": "512x512", "purpose": "any maskable" }
+  ]
+}