diff --git a/app/src/index.tsx b/app/src/index.tsx
index 34347c4..e47e8ff 100644
--- a/app/src/index.tsx
+++ b/app/src/index.tsx
@@ -13,13 +13,14 @@ import Camera from "./components/Camera";
 import Preview from "./components/Preview";
 import Debug from "./routes/debug";
 import { version } from "../../package.json";
+import { ROUTES } from "./routes";
 
 declare const __GIT_COMMIT_HASH__: string;
 render(
   () => (
     <AppContextProvider>
       <Router>
-        <Route path="/" component={Index}>
+        <Route path={ROUTES.INDEX} component={Index}>
           <Route
             component={() => (
               <Show when={window.isSecureContext}>
@@ -27,12 +28,12 @@ render(
               </Show>
             )}
           />
-          <Route path="preview" component={Preview} />
+          <Route path={ROUTES.PREVIEW} component={Preview} />
         </Route>
-        <Route path="/invite" component={Invite} />
-        <Route path="/join/:package" component={Join} />
-        <Route path="/chat/:groupId" component={Chat} />
-        <Route path="/debug" component={Debug} />
+        <Route path={ROUTES.INVITE} component={Invite} />
+        <Route path={ROUTES.join()} component={Join} />
+        <Route path={ROUTES.chat()} component={Chat} />
+        <Route path={ROUTES.DEBUG} component={Debug} />
       </Router>
 
       <span class="absolute bottom-4 left-4 text-xs text-reduced-contrast-on-surface-variant pointer-events-none">
diff --git a/app/src/routes/index.ts b/app/src/routes/index.ts
new file mode 100644
index 0000000..7529ce9
--- /dev/null
+++ b/app/src/routes/index.ts
@@ -0,0 +1,9 @@
+export const ROUTES = {
+  INDEX: "/",
+  INVITE: "/invite",
+  PREVIEW: "preview",
+  join: (invitePackage: string = ":package") =>
+    `/join/${invitePackage}` as const,
+  chat: (groupId: string = ":groupId") => `/chat/${groupId}` as const,
+  DEBUG: "/debug",
+} as const;
diff --git a/app/src/routes/join.tsx b/app/src/routes/join.tsx
index 958314f..476bb8d 100644
--- a/app/src/routes/join.tsx
+++ b/app/src/routes/join.tsx
@@ -1,6 +1,7 @@
-import { Navigate, useParams } from "@solidjs/router";
+import { Navigate, useNavigate, useParams } from "@solidjs/router";
 import { createResource, JSX, Match, Switch } from "solid-js";
 import { setupCrackle } from "../useCrackle";
+import { ROUTES } from ".";
 
 async function decodeKeyPackage(encodedInvite: string) {
   const handle = await setupCrackle;
@@ -26,6 +27,8 @@ export default function Join() {
     return await handle.getConfiguration();
   });
 
+  const navigate = useNavigate();
+
   async function handleDecision(
     event: Parameters<JSX.EventHandler<HTMLFormElement, SubmitEvent>>[0]
   ) {
@@ -56,36 +59,8 @@ export default function Join() {
     const group = await handle.createGroup(keys.friend, name);
     console.debug("Created group", group);
 
-    // const groupId = app.client.create_group();
-    // /** @type {Group} */
-    // const group = {
-    //   id: groupId,
-    //   friend: keys.friend,
-    //   messages: [],
-    // };
-
-    // Add group to store https://docs.solidjs.com/concepts/stores#appending-new-values
-    // setApp("groups", app.groups.length, group);
-
-    // // Need to extract id before key package is consumed or it will error
-    // const url = new URL(group.friend.id, messagesUrl);
-
-    // const welcomePackage = app.client.invite(groupId, keys);
-    // // Send welcome to peer
-    // const request = new Request(url, {
-    //   method: "post",
-    //   headers: {
-    //     //https://www.rfc-editor.org/rfc/rfc9420.html#name-the-message-mls-media-type
-    //     "Content-Type": "message/mls",
-    //   },
-    //   body: welcomePackage,
-    // });
-
-    // //TODO error handling
-    // await fetch(request);
-
-    // // Navigate to the chat
-    // navigate(`/chat/${groupId}`);
+    await handle.inviteToGroup(group.id, keys);
+    navigate(ROUTES.chat(group.id));
   }
 
   //TODO show confirm dialog if they want to stay anonymous
diff --git a/app/src/service-worker/serviceWorker.ts b/app/src/service-worker/serviceWorker.ts
index 85f50ea..596d6d7 100644
--- a/app/src/service-worker/serviceWorker.ts
+++ b/app/src/service-worker/serviceWorker.ts
@@ -225,18 +225,14 @@ const handler = {
   },
 
   //TODO there might be overhead in passing the key package between contexts
-  async inviteToGroup(
-    friendId: string,
-    groupId: string,
-    keyPackage: DecodedPackage
-  ) {
+  async inviteToGroup(groupId: string, keyPackage: DecodedPackage) {
     const client = await getClient;
     const welcomePackage = client.invite(groupId, keyPackage);
     // Persist client change even if the buffer is shared
     void updateClient(client);
 
     assertNotShared(welcomePackage);
-    await sendGroupInvite(friendId, welcomePackage);
+    await sendGroupInvite(keyPackage.friend.id, welcomePackage);
   },
 };