diff --git a/appinfo/routes.php b/appinfo/routes.php
index eddd1a5ee3..9bcbcf8a60 100644
--- a/appinfo/routes.php
+++ b/appinfo/routes.php
@@ -490,6 +490,46 @@
 			'url' => '/api/follow-up/check-message-ids',
 			'verb' => 'POST',
 		],
+		[
+			'name' => 'snippet#getOwnSnippets',
+			'url' => '/api/snippets',
+			'verb' => 'GET',
+		],
+		[
+			'name' => 'snippet#getSharedSnippets',
+			'url' => '/api/snippets/share',
+			'verb' => 'GET',
+		],
+		[
+			'name' => 'snippet#getShares',
+			'url' => '/api/snippets/share/shares',
+			'verb' => 'GET',
+		],
+		[
+			'name' => 'snippet#create',
+			'url' => '/api/snippets',
+			'verb' => 'POST',
+		],
+		[
+			'name' => 'snippet#update',
+			'url' => '/api/snippets',
+			'verb' => 'PUT',
+		],
+		[
+			'name' => 'snippet#delete',
+			'url' => '/api/snippets',
+			'verb' => 'DELETE',
+		],
+		[
+			'name' => 'snippet#share',
+			'url' => '/api/snippets/share',
+			'verb' => 'POST',
+		],
+		[
+			'name' => 'snippet#deleteShare',
+			'url' => '/api/snippets/share',
+			'verb' => 'DELETE',
+		],
 	],
 	'resources' => [
 		'accounts' => ['url' => '/api/accounts'],
diff --git a/lib/Controller/SnippetController.php b/lib/Controller/SnippetController.php
index 93b6ae38f8..c9c6ec64c2 100644
--- a/lib/Controller/SnippetController.php
+++ b/lib/Controller/SnippetController.php
@@ -15,6 +15,7 @@
 use OCA\Mail\Http\TrapError;
 use OCA\Mail\Service\SnippetService;
 use OCP\AppFramework\Controller;
+use OCP\AppFramework\Db\DoesNotExistException;
 use OCP\AppFramework\Http;
 use OCP\AppFramework\Http\Attribute\NoAdminRequired;
 use OCP\IRequest;
@@ -96,7 +97,24 @@ public function update(int $snippetId, string $title, string $content): JsonResp
 		return JsonResponse::success($snippet, Http::STATUS_OK);
 	}
 
+	public function delete($snippetId): JsonResponse {
+		try {
+			$this->snippetService->delete($snippetId, $this->uid);
+			return JsonResponse::success();
+		} catch (DoesNotExistException $e) {
+			return JsonResponse::fail('Snippet not found', Http::STATUS_NOT_FOUND);
+		}
+	}
 
+	/**
+	 * @NoAdminRequired
+	 * @param int $snippetId
+	 * @param string $shareWith
+	 * @param string $type
+	 *
+	 * @return JsonResponse
+	 */
+	#[TrapError]
 	public function share(int $snippetId, string $shareWith, string $type): JsonResponse {
 		$snippet = $this->snippetService->find($snippetId, $this->uid);
 
@@ -117,4 +135,36 @@ public function share(int $snippetId, string $shareWith, string $type): JsonResp
 
 	}
 
+	public function getShares($id): JsonResponse {
+		$snippet = $this->snippetService->find($snippetId, $this->uid);
+
+		if ($snippet === null) {
+			return JsonResponse::error('Snippet not found', Http::STATUS_NOT_FOUND);
+		}
+
+		$shares = $this->snippetService->getShares($this->uid, $snippetId);
+
+		return JsonResponse::success($shares);
+	}
+
+	/**
+	 * @NoAdminRequired
+	 * @param int $snippetId
+	 * @param string $shareWith
+	 *
+	 * @return JsonResponse
+	 */
+	#[TrapError]
+	public function deleteShare(int $snippetId, string $shareWith): JsonResponse {
+		$snippet = $this->snippetService->find($snippetId, $this->uid);
+
+		if ($snippet === null) {
+			return JsonResponse::error('Snippet not found', Http::STATUS_NOT_FOUND);
+		}
+
+		$this->snippetService->unshare($snippetId, $shareWith);
+
+		return JsonResponse::success();
+	}
+
 }
diff --git a/lib/Db/SnippetShareMapper.php b/lib/Db/SnippetShareMapper.php
index 9af37c0741..3386a0326b 100644
--- a/lib/Db/SnippetShareMapper.php
+++ b/lib/Db/SnippetShareMapper.php
@@ -82,7 +82,7 @@ public function findAllShares(string $owner): array {
 	 *
 	 * @return SnippetShare[]
 	 */
-	public function findSnippetShares(string $owner, string $snippetId): array {
+	public function findSnippetShares(string $owner, int $snippetId): array {
 		$qb = $this->db->getQueryBuilder();
 		$qb->select('sshare.*')
 			->from($this->getTableName(), 'sshare')
@@ -90,7 +90,7 @@ public function findSnippetShares(string $owner, string $snippetId): array {
 				$qb->expr()->eq('s.owner', $qb->createNamedParameter($owner, IQueryBuilder::PARAM_STR))
 			)
 			->andWhere(
-				$qb->expr()->eq('sshare.snippet_id', $qb->createNamedParameter($snippetId, IQueryBuilder::PARAM_STR))
+				$qb->expr()->eq('sshare.snippet_id', $qb->createNamedParameter($snippetId, IQueryBuilder::PARAM_INT))
 			);
 
 		return $this->findEntities($qb);
diff --git a/lib/Service/SnippetService.php b/lib/Service/SnippetService.php
index cc40ceccb5..d791c88207 100644
--- a/lib/Service/SnippetService.php
+++ b/lib/Service/SnippetService.php
@@ -49,10 +49,11 @@ public function findAll(string $userId): array {
 
 	/**
 	 * @param string
+	 * @return Snippet[]
 	 */
 	public function findAllSharedWithMe(string $userId): array {
 		$groups = $this->groupManager->getUserGroupIds($userId);
-		return $this->snippetShareMapper->findSharedWithMe($userId, $groups);
+		return $this->snippetMapper->findSharedWithMe($userId, $groups);
 	}
 	/**
 	 * @param int $snippetId
@@ -103,7 +104,13 @@ public function delete(int $snippetId, string $userId): void {
 		$this->snippetMapper->delete($snippet);
 	}
 
-	//TODO: run owner check on controller level
+
+	/**
+	 * @param int $snippetId
+	 * @param string $shareWith
+	 * @throws DoesNotExistException
+	 * @throws NotPermittedException
+	 */
 	public function share(int $snippetId, string $shareWith): void {
 
 		$sharee = $this->userManager->get($shareWith);
@@ -120,6 +127,16 @@ public function share(int $snippetId, string $shareWith): void {
 		$this->snippetShareMapper->insert($share);
 	}
 
+	public function getShares(string $uid, int $snippetId): array {
+		return $this->snippetShareMapper->findSnippetShares($uid, $snippetId);
+	}
+
+	/**
+	 * @param int $snippetId
+	 * @param string $groupId
+	 * @throws DoesNotExistException
+	 * @throws NotPermittedException
+	 */
 	public function shareWithGroup(int $snippetId, string $groupId): void {
 		if (!$this->groupManager->groupExists($groupId)) {
 			throw new DoesNotExistException('Group does not exist');
@@ -134,6 +151,11 @@ public function shareWithGroup(int $snippetId, string $groupId): void {
 		$this->snippetShareMapper->insert($share);
 	}
 
+	/**
+	 * @param int $snippetId
+	 * @param string $shareWith
+	 * @throws DoesNotExistException
+	 */
 	public function unshare(int $snippetId, string $shareWith): void {
 		$share = $this->snippetShareMapper->find($snippetId, $shareWith);
 		$this->snippetShareMapper->delete($share);
diff --git a/src/components/AppSettingsMenu.vue b/src/components/AppSettingsMenu.vue
index a62928d796..8e31368674 100755
--- a/src/components/AppSettingsMenu.vue
+++ b/src/components/AppSettingsMenu.vue
@@ -293,9 +293,10 @@
 			</NcAppSettingsSection>
 			<NcAppSettingsSection id="snippets" :name="t('mail', 'Snippets')">
 				<h6>{{ t('mail','My snippets') }}</h6>
-				<ListItem />
+				<List snippets="mySnippets" />
 				<h6>{{ t('mail','Shared with me') }}</h6>
-				<ListItem />
+				<List snippets="shareSnippet"
+					:shared="true" />
 			</NcAppSettingsSection>
 		</NcAppSettingsDialog>
 	</div>
@@ -319,7 +320,7 @@ import TrustedSenders from './TrustedSenders.vue'
 import InternalAddress from './InternalAddress.vue'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 import { mapGetters } from 'vuex'
-import ListItem from './snippets/ListItem.vue'
+import List from './snippets/List.vue'
 
 export default {
 	name: 'AppSettingsMenu',
@@ -338,7 +339,7 @@ export default {
 		CompactMode,
 		VerticalSplit,
 		HorizontalSplit,
-		ListItem,
+		List,
 	},
 	mixins: [isMobile],
 	props: {
@@ -407,6 +408,12 @@ export default {
 		layoutMode() {
 			return this.$store.getters.getPreference('layout-mode', 'vertical-split')
 		},
+		mySnippets() {
+			return this.$store.getters.getSnippets()
+		},
+		shareSnippet() {
+			return this.$store.getters.getSharedSnippets()
+		},
 	},
 	watch: {
 		showSettings(value) {
diff --git a/src/components/Composer.vue b/src/components/Composer.vue
index 8357ce8048..edd76170aa 100644
--- a/src/components/Composer.vue
+++ b/src/components/Composer.vue
@@ -243,6 +243,7 @@
 				:placeholder="t('mail', 'Write message …')"
 				:focus="isReply || !isFirstOpen"
 				:bus="bus"
+				:snippets="snippets"
 				@input="onEditorInput"
 				@ready="onEditorReady"
 				@mention="handleMention"
@@ -889,6 +890,11 @@ export default {
 
 			return missingCertificates
 		},
+
+		snippets() {
+			return this.$store.getters.getSharedSnippets.map(snippet => ({ title: snippet.title, content: snippet.content }))
+				.concat(this.$store.getters.getMySnippets.map(snippet => ({ title: snippet.title, content: snippet.content })))
+		},
 	},
 	watch: {
 		'$route.params.threadId'() {
@@ -987,6 +993,10 @@ export default {
 		if (this.sendAt && this.isSendAtCustom) {
 			this.selectedDate = new Date(this.sendAt)
 		}
+		if (this.snippets.length === 0) {
+			this.$store.dispatch('fetchSharedSnippets')
+			this.$store.dispatch('fetchMySnippets')
+		}
 	},
 	beforeDestroy() {
 		window.removeEventListener('mailvelope', this.onMailvelopeLoaded)
diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue
index 35dca92b4a..ed01e459be 100644
--- a/src/components/TextEditor.vue
+++ b/src/components/TextEditor.vue
@@ -78,6 +78,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		snippets: {
+			type: Array,
+			default: () => [],
+		},
 	},
 	data() {
 		const plugins = [
diff --git a/src/components/snippets/List.vue b/src/components/snippets/List.vue
index e7e9f3fd3f..77d8978af2 100644
--- a/src/components/snippets/List.vue
+++ b/src/components/snippets/List.vue
@@ -3,22 +3,28 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
+	<div>
+		<ListItem v-for="snippet in snippets" :key="snippet.id" :snippet="snippet" />
+		<span v-if="!snippets.length"> {{ t('mail', 'No snippets available') }} </span>
+	</div>
 </template>
 
 <script>
-
+import ListItem from './ListItem.vue'
 export default {
 	name: 'List',
 	components: {
-
+		ListItem,
 	},
 	props: {
-	},
-	data() {
-	},
-	mounted() {
-	},
-	updated() {
+		shared: {
+			type: Boolean,
+			default: false,
+		},
+		snippets: {
+			type: Array,
+			required: true,
+		},
 	},
 	methods: {
 	},
diff --git a/src/components/snippets/ListItem.vue b/src/components/snippets/ListItem.vue
index b55a36328f..de478b0e51 100644
--- a/src/components/snippets/ListItem.vue
+++ b/src/components/snippets/ListItem.vue
@@ -11,7 +11,7 @@
 			{{ snippet.preview }}
 		</p>
 
-		<NcSelect v-model="snippet.sharedWith"
+		<NcSelect v-if="!shared"
 			class="snippet-list-item__shares"
 			:options="['hamzamahjoubi', 'user1', 'user2']"
 			@change="shareSnippet(snippet.id, snippet.sharedWith)" />
@@ -37,6 +37,7 @@
 
 <script>
 import { NcActions, NcActionButton, NcSelect, NcDialog, NcTextArea, NcInputField } from '@nextcloud/vue'
+import { getShares } from '../../service/SnippetService.js'
 import IconCancel from '@mdi/svg/svg/cancel.svg?raw'
 import IconCheck from '@mdi/svg/svg/check.svg?raw'
 
@@ -51,16 +52,19 @@ export default {
 		NcInputField,
 	},
 	props: {
+		snippet: {
+			type: Object,
+			required: true,
+		},
+		shared: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
-			snippet: { // snippet is not defined
-				id: 1,
-				title: 'This is a title',
-				preview: 'This is a preview',
-				shared: false,
-				sharedWith: 'hamzamahjoubi',
-			},
+			shares: null,
+			localSnippet: Object.assign({}, this.snippet),
 			editModalOpen: false,
 			buttons: [
 				{
@@ -72,12 +76,15 @@ export default {
 					label: 'Ok',
 					type: 'primary',
 					icon: IconCheck,
-					callback: () => { console.log('Pressed "Ok"') },
+					callback: () => { this.$store.dispatch('patchSnippet', this.localSnippet) },
 				},
 			],
 		}
 	},
-	mounted() {
+	async mounted() {
+		if (!this.shared) {
+			this.shares = await getShares()
+		}
 	},
 	updated() {
 	},
diff --git a/src/service/SnippetService.js b/src/service/SnippetService.js
new file mode 100644
index 0000000000..5d51f463a2
--- /dev/null
+++ b/src/service/SnippetService.js
@@ -0,0 +1,90 @@
+/**
+ * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { generateUrl } from '@nextcloud/router'
+import axios from '@nextcloud/axios'
+
+/**
+ * @return {Promise<object[]>}
+ */
+export async function fetchMySnippets() {
+	const url = generateUrl('/apps/mail/api/snippets')
+	const response = await axios.get(url)
+	return response.data.data
+}
+
+/**
+ * @return {Promise<object[]>}
+ */
+export async function fetchSharedSnippets() {
+	const url = generateUrl('/apps/mail/api/snippets/share')
+	const response = await axios.get(url)
+	return response.data.data
+}
+
+/**
+ *
+ * @param {object} snippet
+ * @param {string} snippet.title
+ * @param {string} snippet.content
+ * @return {Promise<object>}
+ */
+
+export async function createSnippet(snippet) {
+	const url = generateUrl('/apps/mail/api/snippets')
+	const response = await axios.post(url, { title: snippet.title, content: snippet.content })
+	return response.data.data
+}
+
+/**
+ * @param {object} snippet
+ * @param {number} snippet.id
+ * @param {string} snippet.title
+ * @param {string} snippet.content
+ * @return {Promise<void>}
+ */
+export async function updateSnippet(snippet) {
+	const url = generateUrl('/apps/mail/api/snippets', { id: snippet.id, title: snippet.title, content: snippet.content })
+	await axios.put(url)
+}
+
+/**
+ * @param {number} id
+ * @return {Promise<void>}
+ */
+export async function deleteSnippet(id) {
+	const url = generateUrl('/apps/mail/api/snippets', { id })
+	await axios.delete(url)
+}
+
+/**
+ * @param {number} id
+ * @param {string} shareWith
+ * @param {string} type
+ * @return {Promise<void>}
+ */
+export async function shareSnippet(id, shareWith, type) {
+	const url = generateUrl('/apps/mail/api/snippets/share', { id, shareWith, type })
+	await axios.post(url)
+}
+
+/**
+ * @param {number} snippetId
+ * @return {Promise<void>}
+ */
+export async function getShares(snippetId) {
+	const url = generateUrl('/apps/mail/api/snippets/share/shares', { snippetId })
+	const response = await axios.get(url)
+	return response.data.data
+}
+/**
+ * @param {number} snippetId
+ * @param {string} shareWith
+ * @return {Promise<void>}
+ */
+export async function unshareSnippet(snippetId, shareWith) {
+	const url = generateUrl('/apps/mail/api/snippets/share', { snippetId, shareWith })
+	await axios.delete(url)
+}
diff --git a/src/store/actions.js b/src/store/actions.js
index a6324b58cf..03e0af34da 100644
--- a/src/store/actions.js
+++ b/src/store/actions.js
@@ -104,6 +104,7 @@ import * as SmimeCertificateService from '../service/SmimeCertificateService.js'
 import useOutboxStore from './outboxStore.js'
 import * as FollowUpService from '../service/FollowUpService.js'
 import { addInternalAddress, removeInternalAddress } from '../service/InternalAddressService.js'
+import { createSnippet, fetchMySnippets, fetchSharedSnippets, deleteSnippet, updateSnippet } from '../service/SnippetService.js'
 
 const sliceToPage = slice(0, PAGE_SIZE)
 
@@ -1542,4 +1543,39 @@ export default {
 			await dispatch('clearFollowUpReminder', { envelope })
 		}
 	},
+
+	async fetchMySnippets({ commit }) {
+		return handleHttpAuthErrors(commit, async () => {
+			const snippets = await fetchMySnippets()
+			commit('setMySnippets', snippets)
+		})
+	},
+
+	async fetchSharedSnippets({ commit }) {
+		return handleHttpAuthErrors(commit, async () => {
+			const snippets = await fetchSharedSnippets()
+			commit('setSharedSnippets', snippets)
+		})
+	},
+
+	async createSnippet({ commit }, { name, content }) {
+		return handleHttpAuthErrors(commit, async () => {
+			const snippet = await createSnippet(name, content)
+			commit('addSnippet', snippet)
+		})
+	},
+	async deleteSnippet({ commit }, snippet) {
+		return handleHttpAuthErrors(commit, async () => {
+			await deleteSnippet(snippet.id)
+			commit('deleteSnippet', snippet)
+		})
+	},
+
+	async patchSnippet({ commit }, snippet) {
+		return handleHttpAuthErrors(commit, async () => {
+			await updateSnippet(snippet)
+			commit('patchSnippet', snippet)
+		})
+	},
+
 }
diff --git a/src/store/getters.js b/src/store/getters.js
index f0b8351b88..5d0a3c7770 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -160,4 +160,6 @@ export const getters = {
 	getInternalAddresses: (state) => state.internalAddress?.filter(internalAddress => internalAddress !== undefined),
 	hasCurrentUserPrincipalAndCollections: (state) => state.hasCurrentUserPrincipalAndCollections,
 	showSettingsForAccount: (state) => (accountId) => state.showAccountSettings === accountId,
+	getMySnippets: (state) => state.mySnippets,
+	getSharedSnippets: (state) => state.sharedSnippets,
 }
diff --git a/src/store/index.js b/src/store/index.js
index 55bfb36d5a..a79008ca78 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -109,6 +109,8 @@ export default new Store({
 				internalAddress: [],
 				hasCurrentUserPrincipalAndCollections: false,
 				showAccountSettings: null,
+				mySnippets: [],
+				sharedSnippets: [],
 			},
 			getters,
 			mutations,
diff --git a/src/store/mutations.js b/src/store/mutations.js
index 60214361e5..d69be6e095 100644
--- a/src/store/mutations.js
+++ b/src/store/mutations.js
@@ -519,4 +519,24 @@ export default {
 	showSettingsForAccount(state, accountId) {
 		state.showAccountSettings = accountId
 	},
+	setMySnippets(state, snippets) {
+		state.snippets = snippets
+	},
+	setSharedSnippets(state, snippets) {
+		state.sharedSnippets = snippets
+	},
+	addSnippet(state, snippet) {
+		state.snippets.push(snippet)
+	},
+	deleteSnippet(state, snippetId) {
+		const index = state.snippets.findIndex(snippet => snippet.id === snippetId)
+		state.snippets.splice(index, 1)
+	},
+	patchSnippet(state, snippet) {
+		const index = state.snippets.findIndex(s => s.id === snippet.id)
+		if (index !== -1) {
+			state.snippets.splice(index, 1, snippet)
+		}
+	},
+
 }