diff --git a/app/src/routes/join.tsx b/app/src/routes/join.tsx
index e584761..958314f 100644
--- a/app/src/routes/join.tsx
+++ b/app/src/routes/join.tsx
@@ -1,6 +1,5 @@
 import { Navigate, useParams } from "@solidjs/router";
 import { createResource, JSX, Match, Switch } from "solid-js";
-import { useAppContext } from "../components/AppContext";
 import { setupCrackle } from "../useCrackle";
 
 async function decodeKeyPackage(encodedInvite: string) {
@@ -20,8 +19,6 @@ export default function Join() {
     return <Navigate href="/" />;
   }
 
-  const [app, setApp] = useAppContext();
-
   const [keyPackage] = createResource(parameters.package, decodeKeyPackage);
 
   const [configuration] = createResource(async () => {
@@ -56,6 +53,9 @@ export default function Join() {
     if (keys === undefined)
       throw new Error("Expected key package to be loaded");
 
+    const group = await handle.createGroup(keys.friend, name);
+    console.debug("Created group", group);
+
     // const groupId = app.client.create_group();
     // /** @type {Group} */
     // const group = {
@@ -126,7 +126,7 @@ export default function Join() {
           autocomplete="username"
           required
           disabled={configuration.loading}
-          value={configuration()?.user?.name}
+          value={configuration()?.defaultUser?.name}
         />
 
         <button type="submit" name="accept">
diff --git a/app/src/service-worker/schema.d.ts b/app/src/service-worker/schema.d.ts
index 329a706..0a21e5b 100644
--- a/app/src/service-worker/schema.d.ts
+++ b/app/src/service-worker/schema.d.ts
@@ -1,18 +1,37 @@
 import { DBSchema } from "idb";
+import { Friend } from "meal-core";
+
+//TODO maybe rename user into alias as there can be multiple
+export type User = {
+  /**
+   * The user's name. Is optional to appear as unknown if users want to keep their identity private.
+   * Additionally this is used as the default name. The user can choose a different name per group.
+   */
+  name?: string;
+};
+
+export type Group = {
+  id: string;
+  /**
+   * The users appearance in the group. The user can chose a different appearance per group.
+   */
+  user: User;
+  friend: Friend;
+  messages: string[];
+};
 
 interface Schema extends DBSchema {
   configuration: {
-    user?: {
-      /**
-       * The user's name. Is optional to appear as unknown if users want to keep their identity private.
-       * Additionally this is used as the default name. The user can choose a different name per group.
-       */
-      name?: string;
-    };
+    /**
+     * The default user used for creating groups. The user can chose a different appearance per group.
+     */
+    defaultUser?: User;
     /**
      * A user can be onboarded but not have a name to allow for anonymous usage.
      * That is why the name can not be used to indicate if the user is onboarded.
      */
     isOnboarded: boolean;
   };
+
+  groups: Group;
 }
diff --git a/app/src/service-worker/serviceWorker.ts b/app/src/service-worker/serviceWorker.ts
index d08ab9e..85f50ea 100644
--- a/app/src/service-worker/serviceWorker.ts
+++ b/app/src/service-worker/serviceWorker.ts
@@ -1,8 +1,8 @@
 import { precacheAndRoute } from "workbox-precaching";
 import { openDB } from "idb";
-import init, { Client, Friend } from "meal-core";
+import init, { Client, DecodedPackage, Friend } from "meal-core";
 import { expose } from "../crackle";
-import { Schema } from "./schema";
+import { Group, Schema } from "./schema";
 
 /**
  * @import { Schema } from "./schema"
@@ -75,10 +75,7 @@ async function persistClient(client: Client) {
   const writeStream = await fileHandle.createWritable();
 
   const serializedClient = client.serialize();
-  if (serializedClient.buffer instanceof SharedArrayBuffer)
-    throw new Error(
-      "Did not expect a SharedArrayBuffer. Cannot write shared buffer to file"
-    );
+  assertNotShared(serializedClient);
 
   try {
     await writeStream.write(serializedClient.buffer);
@@ -126,6 +123,30 @@ async function updateClient(client: Client) {
 
 /** The url for messages endpoint. Don't forget the trailing slash. */
 const messagesUrl = new URL("/messages/", self.location.origin);
+async function sendGroupInvite(
+  friendId: string,
+  welcomePackage: Uint8Array<ArrayBuffer>
+) {
+  const url = new URL(friendId, messagesUrl);
+  // 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);
+}
+function assertNotShared(
+  data: Uint8Array<ArrayBufferLike>
+): asserts data is Uint8Array<ArrayBuffer> {
+  if (data.buffer instanceof SharedArrayBuffer)
+    throw new Error("Uint8Array uses a SharedArrayBuffer");
+}
 
 const handler = {
   async getIsOnboarded() {
@@ -162,7 +183,9 @@ const handler = {
     ]);
 
     //TODO fix invite storage/memory leak from creating and adding new key packages without removing them
-    const invite_payload = client.create_invite(configuration.user?.name);
+    const invite_payload = client.create_invite(
+      configuration.defaultUser?.name
+    );
 
     // Persisting the client does not block us from responding
     void updateClient(client);
@@ -184,10 +207,36 @@ const handler = {
   async createGroup(friend: Friend, name: string) {
     const client = await getClient;
     // const { client: newClient, group_id } = create_group(client);
-    const group_id = client.create_group();
-    await updateClient(client);
-    //TODO persist group with id from core
-    //TODO return group
+    const groupId = client.create_group();
+    void updateClient(client);
+    const group: Group = {
+      id: groupId,
+      user: { name },
+      friend,
+      messages: [],
+    };
+
+    const database = await openDatabase;
+    const transaction = database.transaction("groups", "readwrite");
+    const store = transaction.objectStore("groups");
+    store.add(group);
+
+    return group;
+  },
+
+  //TODO there might be overhead in passing the key package between contexts
+  async inviteToGroup(
+    friendId: string,
+    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);
   },
 };
 
diff --git a/core/src/lib.rs b/core/src/lib.rs
index 44d9e60..9c1f67a 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -39,16 +39,16 @@ pub struct Client {
     provider: Provider,
 }
 
-#[derive(Tsify, serde::Serialize)]
-#[tsify(into_wasm_abi)]
+#[derive(Tsify, serde::Serialize, serde::Deserialize)]
+#[tsify(into_wasm_abi, from_wasm_abi)]
 pub struct DecodedPackage {
     /// The friend that sent the key package
     pub friend: Friend,
     key_package: KeyPackage,
 }
 
-#[derive(Tsify, serde::Serialize)]
-#[tsify(into_wasm_abi)]
+#[derive(Tsify, serde::Serialize, serde::Deserialize)]
+#[tsify(into_wasm_abi, from_wasm_abi)]
 pub struct Friend {
     pub id: String,
     pub name: Option<String>,
@@ -109,7 +109,7 @@ enum ApplicationMessage {
         /// The client id of the sender that send the welcome message
         id: String,
         /// The name of the user using the client that send the welcome message
-        name: Option<String>,
+        user_name: Option<String>,
     },
 }
 // #[wasm_bindgen]
@@ -235,7 +235,7 @@ impl Client {
         // Create introduction message as welcome does not include enough information that are needed on the application layer
         let introduction = ApplicationMessage::Introduction {
             id: self.id.clone(),
-            name: self.user.name.clone(),
+            user_name: self.user.name.clone(),
         };
         let data = postcard::to_allocvec(&introduction).unwrap();
         let message = group
@@ -320,8 +320,10 @@ impl Client {
             todo!("Handle processed message content");
         };
 
-        let ApplicationMessage::Introduction { id, name } =
-            postcard::from_bytes(&content.into_bytes()).unwrap();
+        let ApplicationMessage::Introduction {
+            id,
+            user_name: name,
+        } = postcard::from_bytes(&content.into_bytes()).unwrap();
 
         // Need to create id before moving group into map
         let js_group_id = BASE64_URL_SAFE_NO_PAD.encode(group.group_id().as_slice());
diff --git a/core/src/v2/serializable.rs b/core/src/v2/serializable.rs
index 43a0ef6..3de4d73 100644
--- a/core/src/v2/serializable.rs
+++ b/core/src/v2/serializable.rs
@@ -12,10 +12,12 @@ use nanoid::nanoid;
 use openmls::prelude::*;
 use openmls_basic_credential::SignatureKeyPair;
 use serde::{Deserialize, Serialize};
+use tls_codec::Serialize as _;
 use wasm_bindgen::{JsError, prelude::wasm_bindgen};
 
 use crate::{
-    CIPHERSUITE, DecodedPackage, Friend, ID_LENGTH, encode_application_id, v2::provider::Provider,
+    ApplicationMessage, CIPHERSUITE, DecodedPackage, Friend, ID_LENGTH, encode_application_id,
+    v2::provider::Provider,
 };
 
 #[derive(Serialize, Deserialize)]
@@ -31,6 +33,10 @@ pub enum CreateGroupError {
     IdCollision,
 }
 
+#[derive(Debug, thiserror::Error)]
+#[error("Group not found")]
+pub struct GroupNotFound;
+
 #[derive(Serialize, Deserialize)]
 #[wasm_bindgen]
 pub struct Client {
@@ -167,4 +173,47 @@ impl Client {
         self.groups.insert(group_id.clone());
         Ok(js_group_id)
     }
+
+    /// Creates a group using the package decoded in when reading the invite.
+    /// Returns the serialized welcome message.
+    /// Don't use "package" as a parameter name as it is reserved in JavaScript and will make
+    /// the wasm bindgen code fail.
+    pub fn invite(
+        &mut self,
+        group_id: &str,
+        key_package: DecodedPackage,
+        user_name: Option<String>,
+    ) -> Result<Vec<u8>, JsError> {
+        let bytes = BASE64_URL_SAFE_NO_PAD.decode(group_id).unwrap();
+        let group_id = GroupId::from_slice(&bytes);
+        let package = key_package.key_package;
+        let storage = self.provider.storage();
+
+        let mut group = MlsGroup::load(storage, &group_id)?.ok_or_else(|| GroupNotFound)?;
+
+        //TODO support multi user groups
+        // We don't need the out message because there is no other group members
+        // that need to be "informed" of the change (the commit message)
+        let (_out_message, welcome, _group_info) =
+            group.add_members(&self.provider, &self.user.signature_key, &[package])?;
+
+        // Process it on our end
+        group.merge_pending_commit(&self.provider)?;
+        // Create introduction message as welcome does not include enough information that are needed on the application layer
+        let introduction = ApplicationMessage::Introduction {
+            id: self.id.to_string(),
+            user_name,
+        };
+
+        let data = postcard::to_allocvec(&introduction).unwrap();
+        let message = group.create_message(&self.provider, &self.user.signature_key, &data)?;
+
+        //TODO the introduction has to be sent to all group members when we support multi user groups
+        // Batch send messages
+        //TODO test without vector and U8 slice variant
+        let mut vector = Vec::new();
+        vector.push(welcome);
+        vector.push(message);
+        Ok(TlsSliceU8(&vector).tls_serialize_detached()?)
+    }
 }