diff --git a/main.js b/main.js
index 283bc17..0a88304 100644
--- a/main.js
+++ b/main.js
@@ -1,4 +1,4 @@
-const { app, BrowserWindow, ipcMain, shell } = require('electron')
+const { app, BrowserWindow, ipcMain, shell, clipboard } = require('electron')
 const Path = require('node:path')
 const URL = require('node:url')
 const p = require('node:util').promisify
@@ -137,6 +137,19 @@ async function writeElements(ev, elements) {
   }
 }
 
+async function createInvite() {
+  if (globalAccountID === null) throw new Error('account not loaded')
+  const { url } = await p(peer.invite.createForFriend)({
+    hubs: 1,
+    id: globalAccountID,
+  })
+  return url
+}
+
+function copyToClipboard(ev, text) {
+  clipboard.writeText(text)
+}
+
 let hasSubscribedToReadElements = false
 function subscribeToReadElements() {
   if (hasSubscribedToReadElements) return
@@ -294,6 +307,8 @@ if (!hasLock) {
   app.whenReady().then(() => {
     ipcMain.handle('loadAccount', loadAccount)
     ipcMain.handle('setProfileName', setProfileName)
+    ipcMain.handle('createInvite', createInvite)
+    ipcMain.handle('copyToClipboard', copyToClipboard)
     ipcMain.handle('writeElements', writeElements)
     ipcMain.handle('subscribeToReadElements', subscribeToReadElements)
     createWindow()
diff --git a/package-lock.json b/package-lock.json
index 19ab7b4..7b6ea8e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,15 +22,17 @@
         "ppppp-hub-client": "file:../hub-client",
         "ppppp-invite": "file:../invite",
         "ppppp-keypair": "file:../keypair",
+        "ppppp-net": "file:../net",
         "ppppp-promise": "file:../promise",
         "ppppp-set": "file:../set",
         "ppppp-sync": "file:../sync",
+        "pull-awaitable": "1.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-outside-click-handler": "1.3.0",
         "react-scripts": "5.0.1",
         "secret-handshake-ext": "0.0.11",
-        "secret-stack": "8.0.0",
-        "ssb-conn": "6.0.4",
+        "secret-stack": "8.1.0",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
@@ -67,7 +69,7 @@
         "pretty-quick": "^3.1.3",
         "rimraf": "^4.4.0",
         "secret-handshake-ext": "~0.0.11",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "ssb-box": "^1.0.1"
       },
       "engines": {
@@ -128,7 +130,7 @@
         "ppppp-keypair": "file:../keypair",
         "rimraf": "^4.4.0",
         "secret-handshake-ext": "0.0.10",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "ssb-box": "^1.0.1",
         "typescript": "^5.1.3"
       },
@@ -154,11 +156,12 @@
         "ppppp-dict": "file:../dict",
         "ppppp-goals": "file:../goals",
         "ppppp-keypair": "file:../keypair",
+        "ppppp-set": "file:../set",
         "prettier": "^2.6.2",
         "pretty-quick": "^3.1.3",
         "rimraf": "^4.4.0",
         "secret-handshake-ext": "0.0.11",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "ssb-box": "^1.0.1",
         "typescript": "^5.1.3"
       },
@@ -186,7 +189,7 @@
         "pretty-quick": "^3.1.3",
         "rimraf": "^4.4.0",
         "secret-handshake-ext": "0.0.10",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "ssb-box": "^1.0.1",
         "typescript": "^5.1.3"
       },
@@ -199,8 +202,10 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
+        "@types/ip": "1.1.3",
         "bs58": "^5.0.0",
         "debug": "^4.3.4",
+        "ip": "1.1.8",
         "promisify-tuple": "~1.2.0",
         "pull-notify": "~0.1.2",
         "pull-pair": "~1.1.0",
@@ -213,6 +218,8 @@
         "@types/pull-stream": "^3.6.2",
         "c8": "7",
         "husky": "^4.3.0",
+        "ppppp-net": "file:../net",
+        "ppppp-set": "file:../set",
         "prettier": "^2.6.2",
         "pretty-quick": "^3.1.3",
         "typescript": "^5.1.3"
@@ -226,7 +233,7 @@
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "multiserver-address": "~1.0.1",
+        "ip": "~1.1.8",
         "promisify-tuple": "1.2.0"
       },
       "devDependencies": {
@@ -234,13 +241,15 @@
         "c8": "^7.11.0",
         "husky": "^4.3.0",
         "ppppp-caps": "file:../caps",
+        "ppppp-hub-client": "file:../hub-client",
         "ppppp-keypair": "file:../keypair",
+        "ppppp-net": "file:../net",
         "ppppp-promise": "file:../promise",
         "prettier": "^2.6.2",
         "pretty-quick": "^3.1.3",
         "rimraf": "^5.0.1",
         "secret-handshake-ext": "0.0.11",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "typescript": "^5.1.3"
       },
       "engines": {
@@ -270,6 +279,48 @@
         "node": ">=16"
       }
     },
+    "../net": {
+      "name": "ppppp-net",
+      "version": "1.0.0",
+      "license": "MIT",
+      "dependencies": {
+        "@types/pull-stream": "^3.6.7",
+        "atomic-file-rw": "^0.3.0",
+        "debug": "^4.3.2",
+        "has-network2": ">=0.0.3",
+        "ip": "^1.1.5",
+        "obz": "~1.1.0",
+        "on-change-network-strict": "1.0.0",
+        "on-wakeup": "^1.0.1",
+        "promisify-tuple": "^1.0.1",
+        "pull-cat": "~1.1.11",
+        "pull-notify": "^0.1.2",
+        "pull-pause": "~0.0.2",
+        "pull-ping": "^2.0.3",
+        "pull-stream": "^3.6.14",
+        "statistics": "^3.3.0",
+        "ziii": "~1.0.2"
+      },
+      "devDependencies": {
+        "@types/debug": "^4.1.12",
+        "@types/ip": "^1.1.3",
+        "@types/node": "18",
+        "bs58": "^5.0.0",
+        "c8": "7",
+        "ppppp-caps": "file:../caps",
+        "ppppp-keypair": "file:../keypair",
+        "prettier": "^2.6.2",
+        "pretty-quick": "^3.1.3",
+        "rimraf": "^4.4.0",
+        "secret-handshake-ext": "0.0.12",
+        "secret-stack": "~8.1.0",
+        "ssb-box": "^1.0.1",
+        "typescript": "^5.1.3"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "../promise": {
       "name": "ppppp-promise",
       "version": "0.0.1",
@@ -292,7 +343,7 @@
         "pretty-quick": "^3.1.3",
         "rimraf": "^5.0.1",
         "secret-handshake-ext": "0.0.11",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "typescript": "^5.1.3"
       },
       "engines": {
@@ -312,7 +363,7 @@
         "ppppp-keypair": "file:../keypair",
         "rimraf": "^4.4.0",
         "secret-handshake-ext": "0.0.10",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "ssb-box": "^1.0.1",
         "typescript": "^5.1.3"
       },
@@ -349,7 +400,7 @@
         "pretty-quick": "^3.1.3",
         "rimraf": "^4.4.0",
         "secret-handshake-ext": "0.0.11",
-        "secret-stack": "~8.0.0",
+        "secret-stack": "~8.1.0",
         "ssb-box": "^1.0.1",
         "typescript": "^5.1.3"
       },
@@ -5713,6 +5764,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.find": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/array.prototype.find/-/array.prototype.find-2.2.2.tgz",
+      "integrity": "sha512-DRumkfW97iZGOfn+lIXbkVrXL04sfYKX+EfOodo8XboR5sxPDVvOjZTF/rysusa9lmhmSOeD6Vp6RKQP+eP4Tg==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.2.0",
+        "es-abstract": "^1.22.1",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array.prototype.findlastindex": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.3.tgz",
@@ -5851,15 +5916,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/atomic-file-rw": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/atomic-file-rw/-/atomic-file-rw-0.3.0.tgz",
-      "integrity": "sha512-XMFpe/ub9Mwdlyq3DUdOc/g2sdutDMdYw0XNFSvNGQpYdmxqVmLbeklu5KhemUYyrAj1kIrwoHOx6IxA3a7w3A==",
-      "dependencies": {
-        "idb-kv-store": "^4.5.0",
-        "mutexify": "^1.3.1"
-      }
-    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -6978,6 +7034,11 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/consolidated-events": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/consolidated-events/-/consolidated-events-2.0.2.tgz",
+      "integrity": "sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ=="
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -7765,11 +7826,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/discontinuous-range": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
-      "integrity": "sha512-c68LpLbO+7kP/b1Hr1qs8/BJ09F5khZGTxqxZuhzxpmwJKOgRFHJWIb9/KmqnqHhLdO55aOxFH/EGBvUQbL/RQ=="
-    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -7797,6 +7853,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/document.contains": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/document.contains/-/document.contains-1.0.2.tgz",
+      "integrity": "sha512-YcvYFs15mX8m3AO1QNQy3BlIpSMfNRj3Ujk2BEJxsZG+HZf7/hZ6jr7mDpXrF8q+ff95Vef5yjhiZxm8CGJr6Q==",
+      "dependencies": {
+        "define-properties": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/dom-accessibility-api": {
       "version": "0.5.16",
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
@@ -9894,6 +9961,14 @@
       "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
       "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g=="
     },
+    "node_modules/has": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.4.tgz",
+      "integrity": "sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==",
+      "engines": {
+        "node": ">= 0.4.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -9910,11 +9985,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/has-network2": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/has-network2/-/has-network2-0.0.3.tgz",
-      "integrity": "sha512-EvEZguA+LkyiS8G/Qks5I6imKnM2Z3NPN3eoQhviUQ7O6/d8nyZ7sDozBk6kTIA+Qj/S/V8ubRA1rqJcxc3qBQ=="
-    },
     "node_modules/has-property-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
@@ -10277,15 +10347,6 @@
       "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
       "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
     },
-    "node_modules/idb-kv-store": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/idb-kv-store/-/idb-kv-store-4.5.0.tgz",
-      "integrity": "sha512-snvtAQRforYUI+C2+45L2LBJy/0/uQUffxv8/uwiS98fSUoXHVrFPClgzWZWxT0drwkLHJRm9inZcYzTR42GLA==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "promisize": "^1.1.2"
-      }
-    },
     "node_modules/identity-obj-proxy": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
@@ -10535,11 +10596,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-canonical-base64": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-canonical-base64/-/is-canonical-base64-1.1.1.tgz",
-      "integrity": "sha512-o6t/DwgEapC0bsloqtegAQyZzQXaQ5+8fzsyf2KmLqupC2ifLFq/lMQiFCJeGpdSrK1o6GL+WW2lRU050lLlFg=="
-    },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@@ -10825,19 +10881,6 @@
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha512-cyA56iCMHAh5CdzjJIa4aohJyeO1YbwLi3Jc35MmRU6poroFjIGZzUzupGiRPOjgHg9TLu43xbpwXk523fMxKA=="
     },
-    "node_modules/is-valid-domain": {
-      "version": "0.0.20",
-      "resolved": "https://registry.npmjs.org/is-valid-domain/-/is-valid-domain-0.0.20.tgz",
-      "integrity": "sha512-Yd9oD7sgCycVvH8CHy5U4fLXibPwxVw2+diudYbT8ZfAiQDtW1H9WvPRR4+rtN9qOll+r+KAfO4SjO28OPpitA==",
-      "dependencies": {
-        "punycode": "^1.4.1"
-      }
-    },
-    "node_modules/is-valid-domain/node_modules/punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
-    },
     "node_modules/is-weakmap": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.1.tgz",
@@ -13674,11 +13717,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/moo": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/moo/-/moo-0.5.2.tgz",
-      "integrity": "sha512-iSAJLHYKnX41mKcJKjqvnAN9sf0LMDTXDEvFv+ffuRR9a1MIuXLjMNL6EsnDHSkKLTWNqQQ5uo61P4EbU4NU+Q=="
-    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -13720,14 +13758,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/multiserver-address": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/multiserver-address/-/multiserver-address-1.0.1.tgz",
-      "integrity": "sha512-IfZMAGs9onCLkYNSnNBri3JxuvhQYllMyh3W9ry86iEDcfW9uPVsHTHDsjDxQtL+dPq3byshmA+Y4LN2wLHwNw==",
-      "dependencies": {
-        "nearley": "^2.15.1"
-      }
-    },
     "node_modules/multiserver-scopes": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/multiserver-scopes/-/multiserver-scopes-2.0.0.tgz",
@@ -13736,14 +13766,6 @@
         "non-private-ip": "^2.0.0"
       }
     },
-    "node_modules/mutexify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/mutexify/-/mutexify-1.4.0.tgz",
-      "integrity": "sha512-pbYSsOrSB/AKN5h/WzzLRMFgZhClWccf2XIB4RSMC8JbquiB0e0/SH5AIfdQMdyHmYtv4seU7yV/TvAwPLJ1Yg==",
-      "dependencies": {
-        "queue-tick": "^1.0.0"
-      }
-    },
     "node_modules/muxrpc": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/muxrpc/-/muxrpc-8.0.0.tgz",
@@ -13799,32 +13821,6 @@
       "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
       "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
     },
-    "node_modules/nearley": {
-      "version": "2.20.1",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
-      "integrity": "sha512-+Mc8UaAebFzgV+KpI5n7DasuuQCHA89dmwm7JXw3TV43ukfNQ9DnBH3Mdb2g/I4Fdxc26pwimBWvjIw0UAILSQ==",
-      "dependencies": {
-        "commander": "^2.19.0",
-        "moo": "^0.5.0",
-        "railroad-diagrams": "^1.0.0",
-        "randexp": "0.4.6"
-      },
-      "bin": {
-        "nearley-railroad": "bin/nearley-railroad.js",
-        "nearley-test": "bin/nearley-test.js",
-        "nearley-unparse": "bin/nearley-unparse.js",
-        "nearleyc": "bin/nearleyc.js"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://nearley.js.org/#give-to-nearley"
-      }
-    },
-    "node_modules/nearley/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-    },
     "node_modules/negotiator": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
@@ -14095,11 +14091,6 @@
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
     },
-    "node_modules/on-change-network-strict": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/on-change-network-strict/-/on-change-network-strict-1.0.0.tgz",
-      "integrity": "sha512-ldHCpTJWgr5KUJy3/TVoSGNwBUA8BP9UFmd0iQqe4aGaXY4PJyzQPiVBIo8VBSlSoKyaJY3vcpW0hixZb6gPaA=="
-    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -14119,11 +14110,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/on-wakeup": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/on-wakeup/-/on-wakeup-1.0.1.tgz",
-      "integrity": "sha512-3ufOvnTvh39ah2/TT++HpLailHVmEVVrKtzKLKifAUyWbulKLGGJGOF7ywKC4k/iQGmn9KooV6WmQl/6BVwklA=="
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -15777,6 +15763,10 @@
       "resolved": "../keypair",
       "link": true
     },
+    "node_modules/ppppp-net": {
+      "resolved": "../net",
+      "link": true
+    },
     "node_modules/ppppp-promise": {
       "resolved": "../promise",
       "link": true
@@ -15871,19 +15861,6 @@
         "asap": "~2.0.6"
       }
     },
-    "node_modules/promisify-tuple": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/promisify-tuple/-/promisify-tuple-1.2.0.tgz",
-      "integrity": "sha512-DRI8QrLUzbQxgwLiwKhtVCpSqtAUnnyPaCi3cad2+0avb2o5UzobLWHkXUOAYQB8e4fSJVef22eVm77c/8n//g==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/promisize": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/promisize/-/promisize-1.1.2.tgz",
-      "integrity": "sha512-6/X05CD1iri6YyLy6TW7a23HY0igsrb/qetltYKfJznLfzmspWtN/cY/UR0By3M5i13hBDWfmM2P42ovKl3GAw=="
-    },
     "node_modules/prompts": {
       "version": "2.4.2",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.2.tgz",
@@ -15906,6 +15883,16 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-exact": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/prop-types-exact/-/prop-types-exact-1.2.0.tgz",
+      "integrity": "sha512-K+Tk3Kd9V0odiXFP9fwDHUYRyvK3Nun3GVyPapSIs5OBkITAm15W0CPFD/YKTkMUAbc0b9CUwRQp2ybiBIq+eA==",
+      "dependencies": {
+        "has": "^1.0.3",
+        "object.assign": "^4.1.0",
+        "reflect.ownkeys": "^0.2.0"
+      }
+    },
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -15941,6 +15928,14 @@
       "resolved": "https://registry.npmjs.org/pull-abortable/-/pull-abortable-4.1.1.tgz",
       "integrity": "sha512-/zz8tW+T5tvtDc4NQVZTp3lJZoGEpUb2VDV3R5Q2/9lavNTwHK+hC5yF/3Q3LMmdn5AluFy23RFoqXIoySPl1w=="
     },
+    "node_modules/pull-awaitable": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pull-awaitable/-/pull-awaitable-1.0.0.tgz",
+      "integrity": "sha512-tfufzU9wMd1rM38tcgunaKMUNGXMj1Qms1ygEw+ZerkMmLAwilEtMsyzrDSLhNlnfhSzHXovOarieSNrTD1ovQ==",
+      "dependencies": {
+        "pull-thenable": "~1.0.0"
+      }
+    },
     "node_modules/pull-box-stream": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/pull-box-stream/-/pull-box-stream-1.0.13.tgz",
@@ -15997,34 +15992,11 @@
       "resolved": "https://registry.npmjs.org/pull-map-last/-/pull-map-last-1.0.0.tgz",
       "integrity": "sha512-N2B3s6TYwQ0qvEaPe2qUt24jXd/QD8obkcqmPqupQ9oXLI87wbRFd0qEQIMMx/+qR/5KGBYIAAzYL9yeIUSnKQ=="
     },
-    "node_modules/pull-notify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/pull-notify/-/pull-notify-0.1.2.tgz",
-      "integrity": "sha512-oooAxYEUGNbOVsUrmqqTWWsAUMRIs4sYglnxgleiVcWyvrWgOuk/WUoZDajPTsYix2/rd+z5xSclzHLA7QygcQ==",
-      "dependencies": {
-        "pull-pushable": "^2.0.0"
-      }
-    },
     "node_modules/pull-pair": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/pull-pair/-/pull-pair-1.1.0.tgz",
       "integrity": "sha512-7VEFLxWnj2AKaN3AvtyaM508d1+56/ulSjDLu4j6kcd9DnEM6LfG8b1R9gCLqzIjJo5stFrWynVc6e451OW4LQ=="
     },
-    "node_modules/pull-pause": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/pull-pause/-/pull-pause-0.0.2.tgz",
-      "integrity": "sha512-yQs63NDgD/FeAsdF7INpy4uDolkstkS4Gx1Z3BvMR2gQS8RREJd2tsy6d/K6T+/CDStGnCQI7JLrkjz10YNiSA=="
-    },
-    "node_modules/pull-ping": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/pull-ping/-/pull-ping-2.0.3.tgz",
-      "integrity": "sha512-nbY4yHnMesJBrvkbhMim4VXUC9k1VCkgrkQu49pf8mxFbmb/U2KQrsuePvSmLjRL+VgkBVRSUXUoOY7DtSvhKw==",
-      "dependencies": {
-        "pull-pushable": "^2.0.0",
-        "pull-stream": "^3.4.5",
-        "statistics": "^3.3.0"
-      }
-    },
     "node_modules/pull-pushable": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/pull-pushable/-/pull-pushable-2.2.0.tgz",
@@ -16065,6 +16037,14 @@
       "resolved": "https://registry.npmjs.org/pull-stream/-/pull-stream-3.7.0.tgz",
       "integrity": "sha512-Eco+/R004UaCK2qEDE8vGklcTG2OeZSVm1kTUQNrykEjDwcFXDZhygFDsW49DbXyJMEhHeRL3z5cRVqPAhXlIw=="
     },
+    "node_modules/pull-thenable": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pull-thenable/-/pull-thenable-1.0.0.tgz",
+      "integrity": "sha512-gio2Yanuj5lcN8X+VXtx6F2iWxnhxfaHSKaSJHUzJMNNboEz48/+udzZFDaya8kAwj3DbuFFt1pbb8m1tIS6PQ==",
+      "dependencies": {
+        "quicktask": "~1.0.0"
+      }
+    },
     "node_modules/pull-through": {
       "version": "1.0.18",
       "resolved": "https://registry.npmjs.org/pull-through/-/pull-through-1.0.18.tgz",
@@ -16172,11 +16152,6 @@
         }
       ]
     },
-    "node_modules/queue-tick": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/queue-tick/-/queue-tick-1.0.1.tgz",
-      "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag=="
-    },
     "node_modules/quick-lru": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
@@ -16189,6 +16164,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/quicktask": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/quicktask/-/quicktask-1.0.1.tgz",
+      "integrity": "sha512-+jhR01aSsi6Iw9wbYumKusRK72QK1ub2oE0kOnRyMkMdD/rXMMGW/TVl5edjcLjuuIKP1ezkr+xQzUMD5/4JHw=="
+    },
     "node_modules/raf": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
@@ -16197,23 +16177,6 @@
         "performance-now": "^2.1.0"
       }
     },
-    "node_modules/railroad-diagrams": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
-      "integrity": "sha512-cz93DjNeLY0idrCNOH6PviZGRN9GJhsdm9hpn1YCS879fj4W+x5IFJhhkRZcwVgMmFF7R82UA/7Oh+R8lLZg6A=="
-    },
-    "node_modules/randexp": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
-      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
-      "dependencies": {
-        "discontinuous-range": "1.0.0",
-        "ret": "~0.1.10"
-      },
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -16434,6 +16397,49 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-outside-click-handler": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/react-outside-click-handler/-/react-outside-click-handler-1.3.0.tgz",
+      "integrity": "sha512-Te/7zFU0oHpAnctl//pP3hEAeobfeHMyygHB8MnjP6sX5OR8KHT1G3jmLsV3U9RnIYo+Yn+peJYWu+D5tUS8qQ==",
+      "dependencies": {
+        "airbnb-prop-types": "^2.15.0",
+        "consolidated-events": "^1.1.1 || ^2.0.0",
+        "document.contains": "^1.0.1",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "react": "^0.14 || >=15",
+        "react-dom": "^0.14 || >=15"
+      }
+    },
+    "node_modules/react-outside-click-handler/node_modules/airbnb-prop-types": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/airbnb-prop-types/-/airbnb-prop-types-2.16.0.tgz",
+      "integrity": "sha512-7WHOFolP/6cS96PhKNrslCLMYAI8yB1Pp6u6XmxozQOiZbsI5ycglZr5cHhBFfuRcQQjzCMith5ZPZdYiJCxUg==",
+      "dependencies": {
+        "array.prototype.find": "^2.1.1",
+        "function.prototype.name": "^1.1.2",
+        "is-regex": "^1.1.0",
+        "object-is": "^1.1.2",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.1.2",
+        "prop-types": "^15.7.2",
+        "prop-types-exact": "^1.2.0",
+        "react-is": "^16.13.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      },
+      "peerDependencies": {
+        "react": "^0.14 || ^15.0.0 || ^16.0.0-alpha"
+      }
+    },
+    "node_modules/react-outside-click-handler/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -16588,6 +16594,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/reflect.ownkeys": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
+      "integrity": "sha512-qOLsBKHCpSOFKK1NUOCGC5VyeufB6lEsFe92AL2bhIJsacZS1qdoOZSbPk3MYKuT2cFlRDnulKXuuElIrMjGUg=="
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -16841,14 +16852,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ret": {
-      "version": "0.1.15",
-      "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
-      "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
-      "engines": {
-        "node": ">=0.12"
-      }
-    },
     "node_modules/retry": {
       "version": "0.13.1",
       "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz",
@@ -17163,9 +17166,9 @@
       }
     },
     "node_modules/secret-stack": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/secret-stack/-/secret-stack-8.0.0.tgz",
-      "integrity": "sha512-lKtn6EkdfhoBQ3u50QZ1jwJM0ht76/z3xKlO9uLGOrcm01UCzkXjW1uzEOYM+Igd3Kdni1Zku8LNB9+ggyVdug==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/secret-stack/-/secret-stack-8.1.0.tgz",
+      "integrity": "sha512-5hRiMjAu+fpgzqU6JSPJrAqmsuS0IbY4XrTmnGXDfiVemjAmD4MiEGFUc5vlCLITucQQgDZX+7Vljhfmn1eopQ==",
       "dependencies": {
         "debug": "^4.3.0",
         "hoox": "0.0.1",
@@ -17181,11 +17184,6 @@
         "node": ">=16"
       }
     },
-    "node_modules/secret-stack-decorators": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/secret-stack-decorators/-/secret-stack-decorators-1.1.0.tgz",
-      "integrity": "sha512-wYl0Mcul/fuEbZwn9tN62c+W4LP2RPus/ilt3wdBNQqfBFSMlDXTLaIsrA4SEElb7JEBH4xzdQbOCnTvYHeWCA=="
-    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -17794,100 +17792,6 @@
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
       "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g=="
     },
-    "node_modules/ssb-conn": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/ssb-conn/-/ssb-conn-6.0.4.tgz",
-      "integrity": "sha512-rCjpBBPKx9fe3mmrPUcdVz3voE490SqE4BWkBkQuEBi9d/WEMnJymPSJklHN5jmW2Yv4cDIMhnvbfOqu3P18ag==",
-      "dependencies": {
-        "debug": "^4.3.1",
-        "has-network2": ">=0.0.3",
-        "ip": "^1.1.5",
-        "on-change-network-strict": "1.0.0",
-        "on-wakeup": "^1.0.1",
-        "pull-notify": "^0.1.2",
-        "pull-pause": "~0.0.2",
-        "pull-ping": "^2.0.3",
-        "pull-stream": "^3.6.14",
-        "secret-stack-decorators": "1.1.0",
-        "ssb-conn-db": "~1.0.5",
-        "ssb-conn-hub": "~1.2.0",
-        "ssb-conn-query": "~1.2.2",
-        "ssb-conn-staging": "~1.0.0",
-        "ssb-ref": "^2.14.3",
-        "ssb-typescript": "^2.8.0",
-        "statistics": "^3.3.0",
-        "ziii": "~1.0.2"
-      },
-      "peerDependencies": {
-        "secret-stack": ">=6.2.0"
-      }
-    },
-    "node_modules/ssb-conn-db": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/ssb-conn-db/-/ssb-conn-db-1.0.5.tgz",
-      "integrity": "sha512-2rbqjvlDMTke2/qgauA415QSQ4hUJziXHqcXuC2Yh1uPrCDXHXrp0dhCchn0b/taEeL0Ppqo/Tsy6szQdqlEDw==",
-      "dependencies": {
-        "atomic-file-rw": "^0.3.0",
-        "debug": "^4.3.1",
-        "multiserver-address": "~1.0.1",
-        "pull-notify": "~0.1.2",
-        "ssb-ref": ">=2.13.9"
-      }
-    },
-    "node_modules/ssb-conn-hub": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/ssb-conn-hub/-/ssb-conn-hub-1.2.1.tgz",
-      "integrity": "sha512-EazMSgPJSOZTp/NdhUOq4kduAliT9k0GNJvao3Muvqk4Y17V4yIwCKt8SENHI5BMz2ATrDmFLj9uf5z/83Txww==",
-      "dependencies": {
-        "debug": "^4.3.1",
-        "ip": "^1.1.5",
-        "multiserver": "^3.7.0",
-        "multiserver-address": "~1.0.1",
-        "promisify-tuple": "^1.0.1",
-        "pull-cat": "~1.1.11",
-        "pull-notify": "~0.1.1",
-        "pull-stream": "^3.6.14",
-        "ssb-ref": "^2.14.3"
-      }
-    },
-    "node_modules/ssb-conn-query": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/ssb-conn-query/-/ssb-conn-query-1.2.2.tgz",
-      "integrity": "sha512-pvCU8oxpX9sBap6oBrLUwDGAYnHSxkhYAYnj6RxGNotPKDIRZUBZB04yQ4nA1rHm7oHOnBgcuK0GRWls78pnkQ==",
-      "dependencies": {
-        "ssb-conn-db": "~1.0.3",
-        "ssb-conn-hub": "~1.2.0",
-        "ssb-conn-staging": "~1.0.0"
-      }
-    },
-    "node_modules/ssb-conn-staging": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/ssb-conn-staging/-/ssb-conn-staging-1.0.0.tgz",
-      "integrity": "sha512-NOy1qZoBkhH0XNzLteaaKKePXigEJSCntD4RPRU6vWLMlQ10+SzlIz4TWKgvEVx0LfCe6tEx/vhQf6vBWO/Ylw==",
-      "dependencies": {
-        "debug": "^4.1.1",
-        "multiserver-address": "~1.0.1",
-        "pull-cat": "~1.1.11",
-        "pull-notify": "~0.1.1",
-        "pull-stream": "^3.6.9"
-      }
-    },
-    "node_modules/ssb-ref": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/ssb-ref/-/ssb-ref-2.16.0.tgz",
-      "integrity": "sha512-ylyrfz9NLxwTCbeDDAdLo++O3elhNs6/gUqMhZ22F+gSOIjwXy2X7dpg5Q1YTH7uALOSu307Rpo1UfK9sj7Sjw==",
-      "dependencies": {
-        "ip": "^1.1.3",
-        "is-canonical-base64": "^1.1.1",
-        "is-valid-domain": "~0.0.1",
-        "multiserver-address": "^1.0.1"
-      }
-    },
-    "node_modules/ssb-typescript": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/ssb-typescript/-/ssb-typescript-2.8.0.tgz",
-      "integrity": "sha512-akqVsc2HNM0x5q4iN8v/t0jDuNOyU8E8UfyObqU4qWALIXLUptUQd1n03bWOcDn/+sjb2CLpjq584gDoQ4gEjw=="
-    },
     "node_modules/stable": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz",
@@ -18011,11 +17915,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/statistics": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/statistics/-/statistics-3.3.0.tgz",
-      "integrity": "sha512-9+dmo0XcSK1AU6/uNuSUV/9/KnGUT+7ZKeL+J4IWcjcczflFTWwYQaInBBSo2zyEFVkFd59bGVxzZ8SSBWC66g=="
-    },
     "node_modules/statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -20238,11 +20137,6 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
-    },
-    "node_modules/ziii": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/ziii/-/ziii-1.0.2.tgz",
-      "integrity": "sha512-q1FogtBIchy1W0fkxUpe6A4n4WUvAM+hAHN1J6LjBNCV42ZegeC5JSz0mcNv4qxnI0V4cL4FNeEhPMm97Ed0kA=="
     }
   }
 }
diff --git a/package.json b/package.json
index 18030de..14a0bb8 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "pull-awaitable": "1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-outside-click-handler": "1.3.0",
     "react-scripts": "5.0.1",
     "secret-handshake-ext": "0.0.11",
     "secret-stack": "8.1.0",
diff --git a/preload.js b/preload.js
index 3b5131b..f9f75e5 100644
--- a/preload.js
+++ b/preload.js
@@ -2,6 +2,8 @@ const { contextBridge, ipcRenderer } = require('electron/renderer')
 
 contextBridge.exposeInMainWorld('electronAPI', {
   loadAccount: () => ipcRenderer.invoke('loadAccount'),
+  createInvite: () => ipcRenderer.invoke('createInvite'),
+  copyToClipboard: (text) => ipcRenderer.invoke('copyToClipboard', text),
   setProfileName: (name) => ipcRenderer.invoke('setProfileName', name),
   writeElements: (actions) => ipcRenderer.invoke('writeElements', actions),
   onReadElements: (callback) => {
diff --git a/src/App.js b/src/App.js
index 75d7482..5456fd6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,7 +1,9 @@
 import { useState } from 'react'
 import { Excalidraw } from '@excalidraw/excalidraw'
-import MyAccount from './MyAccount'
 import debounce from 'debounce'
+import MyAccount from './MyAccount'
+import Button from './Button'
+import CreateInviteModal from './CreateInviteModal'
 import './App.css'
 
 const elemsPersisted = new Map()
@@ -9,6 +11,10 @@ let sceneInitialized = false
 
 function App() {
   const [excalidrawAPI, setExcalidrawAPI] = useState(null)
+  const [inviteModalOpen, setInviteModalOpen] = useState(true)
+  const [inviteCode, setInviteCode] = useState(null)
+  const openInviteModal = () => setInviteModalOpen(true)
+  const closeInviteModal = () => setInviteModalOpen(false)
 
   function loadExcalidraw(api) {
     if (excalidrawAPI) return
@@ -26,6 +32,14 @@ function App() {
     })
   }
 
+  function createInvite() {
+    setInviteCode(null)
+    openInviteModal()
+    window.electronAPI.createInvite().then((invite) => {
+      setInviteCode(invite)
+    })
+  }
+
   const updateElements = debounce((elems) => {
     if (!sceneInitialized) return
     const actions = []
@@ -42,11 +56,12 @@ function App() {
   }, 100)
 
   return (
-    <div className="flex flex-row items-stretch h-screen">
-      <div className="w-1/5 flex flex-col bg-gray-200 p-2">
+    <div className="flex flex-row items-stretch h-screen text-slate-900">
+      <div className="w-1/6 flex flex-col bg-gray-200 p-2">
         <MyAccount />
+        <Button onClick={createInvite}>Invite</Button>
       </div>
-      <div className="w-4/5">
+      <div className="w-5/6">
         <Excalidraw
           UIOptions={{
             canvasActions: {
@@ -66,6 +81,11 @@ function App() {
           excalidrawAPI={loadExcalidraw}
         />
       </div>
+      <CreateInviteModal
+        isOpen={inviteModalOpen}
+        onClose={closeInviteModal}
+        inviteCode={inviteCode}
+      />
     </div>
   )
 }
diff --git a/src/Button.js b/src/Button.js
new file mode 100644
index 0000000..cd701b8
--- /dev/null
+++ b/src/Button.js
@@ -0,0 +1,14 @@
+function Button({ children, onClick, disabled }) {
+  return (
+    <button
+      onClick={disabled ? undefined : onClick}
+      className={`${
+        disabled ? 'bg-slate-400 cursor-default' : 'bg-blue-500 hover:bg-blue-600'
+      } text-white font-bold rounded shadow px-2 py-1`}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default Button
diff --git a/src/CreateInviteModal.js b/src/CreateInviteModal.js
new file mode 100644
index 0000000..0b44c6b
--- /dev/null
+++ b/src/CreateInviteModal.js
@@ -0,0 +1,43 @@
+import Button from './Button'
+import Modal from './Modal'
+
+function CreateInviteModal({ isOpen, onClose, inviteCode }) {
+  const copyInviteToClipboard = () => {
+    window.electronAPI.copyToClipboard(inviteCode).then(() => {
+      onClose()
+    })
+  }
+
+  const copyButton = (
+    <Button
+      key="copybtn"
+      disabled={!inviteCode}
+      onClick={copyInviteToClipboard}
+    >
+      Copy to clipboard
+    </Button>
+  )
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      {inviteCode ? (
+        <>
+          This is an invite code that you can send to a friend to collaborate on
+          this drawing with you.
+          <div className="font-mono bg-slate-300 rounded my-4 text-wrap break-all px-1">
+            {inviteCode}
+          </div>
+          {copyButton}
+        </>
+      ) : (
+        <>
+          <div className="text-slate-500 h-14">Loading invite code...</div>
+          <div className="bg-slate-300 rounded my-4 h-64"></div>
+          {copyButton}
+        </>
+      )}
+    </Modal>
+  )
+}
+
+export default CreateInviteModal
diff --git a/src/Modal.js b/src/Modal.js
new file mode 100644
index 0000000..84ebc2f
--- /dev/null
+++ b/src/Modal.js
@@ -0,0 +1,27 @@
+import OutsideClickHandler from 'react-outside-click-handler'
+
+function Modal({ children, isOpen, onClose }) {
+  if (!isOpen) return null
+
+  const isWindows = navigator.userAgent.includes('Windows')
+
+  return (
+    <div className="bg-slate-800/50 absolute inset-0 z-10 grid place-items-center">
+      <OutsideClickHandler onOutsideClick={onClose}>
+        <div className="bg-slate-100 w-96 mx-auto min-h-20 rounded-md shadow-md flex flex-col px-4 pt-2 pb-4">
+          <div
+            className={`size-8 text-3xl rounded -mx-2 leading-7 text-center text-slate-800 cursor-default hover:bg-slate-300 ${
+              isWindows ? 'self-end' : 'self-start'
+            }`}
+            onClick={onClose}
+          >
+            &times;
+          </div>
+          {children}
+        </div>
+      </OutsideClickHandler>
+    </div>
+  )
+}
+
+export default Modal