diff --git a/src/assets/buttons.scss b/src/assets/buttons.scss
deleted file mode 100644
index 1718a8db78..0000000000
--- a/src/assets/buttons.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * @copyright Copyright (c) 2020 Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @author Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @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/>.
- *
- */
-
-@import 'variables';
-
-.nc-button {
-	width: $clickable-area;
-	height: $clickable-area;
-	flex-shrink: 0;
-	border: 0;
-	padding: 0;
-	z-index: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin: 0;
-	&:not(.primary) {
-		background-color: transparent;
-	}
-	&__main {
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-hover);
-		}
-		&:disabled {
-			&:hover {
-				background-color: var(--color-primary-element);
-			}
-		}
-	}
-	// Used on top of gray background such as hovered messages
-	&__main--dark {
-		&:hover,
-		&:focus {
-			background-color: var(--color-background-darker);
-		}
-	}
-
-}
diff --git a/src/components/ConversationSettings/ConversationPermissionsSettings.vue b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
index 5dec2e2ab8..ff5515d820 100644
--- a/src/components/ConversationSettings/ConversationPermissionsSettings.vue
+++ b/src/components/ConversationSettings/ConversationPermissionsSettings.vue
@@ -236,8 +236,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/buttons';
-
 ::v-deep .mx-input {
 	margin: 0;
 }
diff --git a/src/components/Description/Description.vue b/src/components/Description/Description.vue
index 17f53b55e6..6d9cb9dff6 100644
--- a/src/components/Description/Description.vue
+++ b/src/components/Description/Description.vue
@@ -243,7 +243,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../assets/variables';
-@import '../../assets/buttons';
 
 .description {
 	display: flex;
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 69fa93422e..eb32cc13d3 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -79,14 +79,13 @@ the main body of the message as well as a quote.
 						@focus="showReloadButton = true"
 						@mouseleave="showReloadButton = true"
 						@blur="showReloadButton = true">
-						<Button v-if="sendingErrorCanRetry && showReloadButton"
-							class="nc-button nc-button__main--dark"
+						<ButtonVue v-if="sendingErrorCanRetry && showReloadButton"
 							:aria-label="sendingErrorIconTooltip"
 							@click="handleRetry">
 							<template #icon>
 								<Reload :size="16" />
 							</template>
-						</Button>
+						</ButtonVue>
 						<AlertCircle v-else
 							:size="16" />
 					</div>
@@ -170,6 +169,7 @@ the main body of the message as well as a quote.
 </template>
 
 <script>
+import ButtonVue from '@nextcloud/vue/dist/Components/Button'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import CallButton from '../../../TopBar/CallButton.vue'
 import DeckCard from './MessagePart/DeckCard.vue'
@@ -204,6 +204,7 @@ export default {
 	},
 
 	components: {
+		ButtonVue,
 		CallButton,
 		Quote,
 		RichText,
@@ -782,7 +783,6 @@ export default {
 
 <style lang="scss" scoped>
 @import '../../../../assets/variables';
-@import '../../../../assets/buttons';
 
 .message:hover .normal-message-body {
 	border-radius: 8px;
diff --git a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
index 5425986d2a..80d98a7516 100644
--- a/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
+++ b/src/components/NewMessageForm/AudioRecorder/AudioRecorder.vue
@@ -330,8 +330,6 @@ export default {
 
 <style lang="scss" scoped>
 
-@import '../../../assets/buttons';
-
 .audio-recorder {
 	display: flex;
 	// Audio record button
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 462840628d..792dcfe365 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -561,7 +561,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/buttons';
+@import '../../assets/variables';
 
 .wrapper {
 	display: flex;
diff --git a/src/components/PermissionsEditor/PermissionsEditor.vue b/src/components/PermissionsEditor/PermissionsEditor.vue
index c1daeff226..a3a7318910 100644
--- a/src/components/PermissionsEditor/PermissionsEditor.vue
+++ b/src/components/PermissionsEditor/PermissionsEditor.vue
@@ -220,13 +220,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../assets/buttons';
-
-.nc-button {
-	width: 100%;
-	margin-top: 12px;
-}
-
 .wrapper {
 	padding: 0 24px 24px 24px;
 }