diff --git a/src/components/ConversationsOptionsList.vue b/src/components/ConversationsOptionsList.vue
index 37219c0f389..446793ff41c 100644
--- a/src/components/ConversationsOptionsList.vue
+++ b/src/components/ConversationsOptionsList.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<ul class="contacts-list">
-		<AppContentListItem
+		<ListItem
 			v-for="item of items"
 			:key="item.id"
 			:title="item.label"
@@ -32,20 +32,20 @@
 					:item="iconData(item)"
 					:disable-menu="true" />
 			</template>
-		</AppContentListItem>
+		</ListItem>
 	</ul>
 </template>
 
 <script>
 import ConversationIcon from './ConversationIcon'
-import AppContentListItem from './LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem'
+import ListItem from '@nextcloud/vue/dist/Components/ListItem'
 import { CONVERSATION } from '../constants'
 
 export default {
 	name: 'ConversationsOptionsList',
 	components: {
 		ConversationIcon,
-		AppContentListItem,
+		ListItem,
 	},
 	props: {
 		items: {
diff --git a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue b/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
deleted file mode 100644
index cfeb1027341..00000000000
--- a/src/components/LeftSidebar/ConversationsList/AppContentListItem/AppContentListItem.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<!--
-  - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
-  -
-  - @author Marco Ambrosini <marcoambrosini@pm.me>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
-	<nav-element
-		class="acli_wrapper"
-		v-bind="navElement">
-		<a
-			:id="anchorId"
-			:class="{ 'active' : isActive }"
-			href="#"
-			class="acli"
-			:aria-label="conversationLinkAriaLabel"
-			@click="onClick">
-			<!-- default slot for avatar or icon -->
-			<slot name="icon" />
-			<div class="acli__content">
-				<div class="acli__content__line-one">
-					<span class="acli__content__line-one__title">
-						{{ title }}
-					</span>
-					<span
-						v-if="{hasDetails}"
-						class="acli__content__line-one__details">
-						{{ details }}
-					</span>
-				</div>
-				<div class="acli__content__line-two">
-					<span class="acli__content__line-two__subtitle">
-						<slot name="subtitle" />
-					</span>
-					<span class="acli__content__line-two__counter">
-						<slot
-							name="counter" />
-					</span>
-				</div>
-			</div>
-		</a>
-		<Actions
-			v-if="hasActions"
-			container="#content-vue"
-			menu-align="right"
-			:aria-label="conversationSettingsAriaLabel"
-			class="actions">
-			<slot name="actions" />
-		</Actions>
-	</nav-element>
-</template>
-
-<script>
-import Actions from '@nextcloud/vue/dist/Components/Actions'
-
-export default {
-	name: 'AppContentListItem',
-
-	components: {
-		Actions,
-	},
-
-	props: {
-		/**
-		 * The details text displayed in the upper right part
-		 */
-		details: {
-			type: String,
-			default: '',
-		},
-		/**
-		 *  Title
-		 */
-		title: {
-			type: String,
-			required: true,
-		},
-		/**
-		* Pass in `true` if you want the matching behaviour to
-		* be non-inclusive: https://router.vuejs.org/api/#exact
-		*/
-		exact: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		* The route for the router link.
-		*/
-		to: {
-			type: [String, Object],
-			default: '',
-		},
-		/**
-		 * Id for the <a> element
-		 */
-		anchorId: {
-			type: String,
-			default: '',
-		},
-	},
-	computed: {
-		isActive() {
-			return this.to && this.$store.getters.getToken() === this.to.params.token
-		},
-		hasDetails() {
-			return (this.details !== '' && !this.$slots.counter)
-		},
-		hasActions() {
-			return (!!this.$slots.actions)
-		},
-		// This is used to decide which outer element type to use
-		// li or router-link
-		navElement() {
-			if (this.to !== '') {
-				return {
-					is: 'router-link',
-					tag: 'li',
-					to: this.to,
-					exact: this.exactRoute,
-				}
-			}
-			return {
-				is: 'li',
-			}
-		},
-
-		conversationLinkAriaLabel() {
-			return t('spreed', 'Conversation "{conversationName}"', { conversationName: this.title })
-		},
-
-		conversationSettingsAriaLabel() {
-			return t('spreed', 'Settings for conversation "{conversationName}"', { conversationName: this.title })
-		},
-	},
-	methods: {
-		// forward click event
-		onClick(event) {
-			this.$emit('click', event)
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-
-.acli_wrapper{
-	position: relative;
-	margin: 0 4px 0 8px;
-	.actions {
-		position: absolute;
-		top: 4px;
-		right: 4px;
-	}
-}
-
-// AppContentListItem
-.acli {
-	position: relative;
-	display: flex;
-	align-items: center;
-	flex: 0 0 auto;
-	justify-content: flex-start;
-	padding: 2px 2px 2px 8px;
-	height: 64px;
-	border-radius: 16px;
-	margin: 2px 0;
-	cursor: pointer;
-	&:hover,
-	&:focus  {
-		background-color: var(--color-background-hover);
-	}
-	&.active,
-	&:active,
-	&:active ~ .app-navigation-entry__utils {
-		background-color: var(--color-primary-light);
-	}
-
-	&__content {
-		width: 240px;
-		// same as the acli left padding for
-		// nice visual balance around the avatar
-		margin-left: 8px;
-
-		&__line-one {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			white-space: nowrap;
-
-			&__title {
-				overflow: hidden;
-				padding-right: 52px;
-				flex-grow: 1;
-				cursor: pointer;
-				text-overflow: ellipsis;
-				color: var(--color-main-text);
-
-			}
-			&__actions {
-				margin: -5px 0 -3px 0;
-				&.action-item {
-					position: absolute;
-					top: 7px;
-					right: 2px;
-				}
-			}
-		}
-
-		&__line-two {
-			display: flex;
-			align-items: flex-start;
-			justify-content: space-between;
-			white-space: nowrap;
-			width: 232px;
-
-			&__subtitle {
-				overflow: hidden;
-				flex-grow: 1;
-				padding-right: 4px;
-				cursor: pointer;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-				color: var(--color-text-lighter);
-			}
-			&__counter {
-				margin-right: 22px;
-			}
-		}
-	}
-}
-
-</style>
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
index bdeb3a3d27d..9a6b410901c 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.spec.js
@@ -85,7 +85,7 @@ describe('Conversation.vue', () => {
 			},
 		})
 
-		const el = wrapper.findComponent({ name: 'AppContentListItem' })
+		const el = wrapper.findComponent({ name: 'ListItem' })
 		expect(el.exists()).toBe(true)
 		expect(el.props('title')).toBe('conversation one')
 
@@ -109,7 +109,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.vm.$slots.subtitle[0].text.trim()).toBe(expectedText)
 		}
 
@@ -281,28 +281,27 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
-			const counter = el.vm.$slots.counter[0]
-			expect(counter.componentInstance.$el.textContent).toBe(expectedCounterText)
-			expect(counter.componentInstance.highlighted).toBe(expectedHighlighted)
+			expect(el.props('counterNumber')).toBe(expectedCounterText)
+			expect(el.props('counterHighlighted')).toBe(expectedHighlighted)
 		}
 
 		test('renders unread messages counter', () => {
 			item.unreadMessages = 5
-			testCounter(item, '5', false)
+			testCounter(item, 5, false)
 		})
 		test('renders unread mentions highlighted for non one-to-one conversations', () => {
 			item.unreadMessages = 5
 			item.unreadMention = true
-			testCounter(item, '5', true)
+			testCounter(item, 5, true)
 		})
 		test('renders unread mentions always highlighted for one-to-one conversations', () => {
 			item.unreadMessages = 5
 			item.unreadMention = false
 			item.type = CONVERSATION.TYPE.ONE_TO_ONE
-			testCounter(item, '5', true)
+			testCounter(item, 5, true)
 		})
 
 		test('does not render counter when no unread messages', () => {
@@ -318,7 +317,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			expect(el.vm.$slots.counter).not.toBeDefined()
@@ -359,7 +358,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			return findActionButton(el, actionName)
@@ -378,7 +377,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			await el.find('a').trigger('click')
@@ -524,7 +523,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			const action = findActionButton(el, 'Copy link')
@@ -553,7 +552,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			const action = findActionButton(el, 'Add to favorites')
@@ -584,7 +583,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			const action = findActionButton(el, 'Remove from favorites')
@@ -620,7 +619,7 @@ describe('Conversation.vue', () => {
 				},
 			})
 
-			const el = wrapper.findComponent({ name: 'AppContentListItem' })
+			const el = wrapper.findComponent({ name: 'ListItem' })
 			expect(el.exists()).toBe(true)
 
 			const actionButtons = wrapper.findAllComponents(ActionButton)
diff --git a/src/components/LeftSidebar/ConversationsList/Conversation.vue b/src/components/LeftSidebar/ConversationsList/Conversation.vue
index 854aabdf326..4f4e792766d 100644
--- a/src/components/LeftSidebar/ConversationsList/Conversation.vue
+++ b/src/components/LeftSidebar/ConversationsList/Conversation.vue
@@ -20,11 +20,14 @@
 -->
 
 <template>
-	<AppContentListItem
+	<ListItem
 		:title="item.displayName"
 		:anchor-id="`conversation_${item.token}`"
-		:to="item.token ? { name: 'conversation', params: { token: item.token }} : ''"
-		:class="{ 'has-unread-messages': item.unreadMessages }"
+		:active="isActive"
+		:to="to"
+		:bold="!!item.unreadMessages"
+		:counter-number="item.unreadMessages"
+		:counter-highlighted="counterShouldBePrimary"
 		@click="onClick">
 		<template #icon>
 			<ConversationIcon
@@ -41,12 +44,6 @@
 				{{ conversationInformation }}
 			</template>
 		</template>
-		<AppNavigationCounter v-if="item.unreadMessages"
-			slot="counter"
-			class="counter"
-			:highlighted="counterShouldBePrimary">
-			<strong>{{ item.unreadMessages }}</strong>
-		</AppNavigationCounter>
 		<template v-if="!isSearchResult" slot="actions">
 			<ActionButton v-if="canFavorite"
 				:icon="iconFavorite"
@@ -109,7 +106,7 @@
 				{{ t('spreed', 'Delete conversation') }}
 			</ActionButton>
 		</template>
-	</AppContentListItem>
+	</ListItem>
 </template>
 
 <script>
@@ -117,12 +114,11 @@ import { showError, showSuccess } from '@nextcloud/dialogs'
 import ActionButton from '@nextcloud/vue/dist/Components/ActionButton'
 import ActionSeparator from '@nextcloud/vue/dist/Components/ActionSeparator'
 import ActionCaption from '@nextcloud/vue/dist/Components/ActionCaption'
-import AppContentListItem from './AppContentListItem/AppContentListItem'
-import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 import EyeOutline from 'vue-material-design-icons/EyeOutline'
 import ConversationIcon from './../../ConversationIcon'
 import { generateUrl } from '@nextcloud/router'
 import { CONVERSATION, PARTICIPANT, ATTENDEE } from '../../../constants'
+import ListItem from '@nextcloud/vue/dist/Components/ListItem'
 
 export default {
 	name: 'Conversation',
@@ -130,8 +126,7 @@ export default {
 		ActionButton,
 		ActionSeparator,
 		ActionCaption,
-		AppContentListItem,
-		AppNavigationCounter,
+		ListItem,
 		ConversationIcon,
 		EyeOutline,
 	},
@@ -159,9 +154,11 @@ export default {
 			},
 		},
 	},
+
 	computed: {
+
 		counterShouldBePrimary() {
-			return this.item.unreadMention || (this.item.unreadMessages && this.item.type === CONVERSATION.TYPE.ONE_TO_ONE)
+			return this.item.unreadMention || (this.item.unreadMessages !== 0 && this.item.type === CONVERSATION.TYPE.ONE_TO_ONE)
 		},
 
 		linkToConversation() {
@@ -323,6 +320,18 @@ export default {
 
 			return author
 		},
+
+		to() {
+			return !this.isSearchResult ? { name: 'conversation', params: { token: this.item.token } } : ''
+		},
+
+		isActive() {
+			if (!this.isSearchResult) {
+				return this.$store.getters.getToken() === this.to.params.token
+			} else {
+				return false
+			}
+		},
 	},
 	methods: {
 		async copyLinkToConversation() {
@@ -396,33 +405,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .counter {
-	font-size: 12px;
-	/*
-	 * Always add the bubble
-	 */
-	padding: 4px 6px !important;
-	border-radius: 10px;
-
-	&:not(.app-navigation-entry__counter--highlighted) {
-		background-color: var(--color-background-darker);
-	}
-
-	span {
-		padding: 2px 6px;
-	}
-}
 
 ::v-deep .action-text__title {
 	margin-left: 12px;
 }
 
-.has-unread-messages {
-	::v-deep .acli__content__line-one__title {
-		font-weight: bold;
-	}
-}
-
 .critical {
 	::v-deep .action-button__text {
 		color: var(--color-error) !important;
diff --git a/src/components/LeftSidebar/LeftSidebar.vue b/src/components/LeftSidebar/LeftSidebar.vue
index bcdbf23b649..69131e761f4 100644
--- a/src/components/LeftSidebar/LeftSidebar.vue
+++ b/src/components/LeftSidebar/LeftSidebar.vue
@@ -474,7 +474,7 @@ export default {
 
 .new-conversation {
 	display: flex;
-	padding: 8px;
+	padding: 8px 0;
 	&--scrolled-down {
 		border-bottom: 1px solid var(--color-border);
 	}
@@ -486,6 +486,7 @@ export default {
 	width: 100% !important;
 	overflow-y: auto !important;
 	overflow-x: hidden !important;
+	padding: 0 4px;
 }
 
 </style>