diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index f593f510d82..e61c6b48084 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -25,7 +25,8 @@
 			<button v-if="hasPreviousPage && gridWidth > 0 && isStripe && showVideoOverlay"
 				class="grid-navigation grid-navigation__previous"
 				@click="handleClickPrevious">
-				<ChevronLeft :size="24" />
+				<ChevronLeft decorative
+					:size="24" />
 			</button>
 			<div
 				ref="grid"
@@ -80,7 +81,7 @@
 			<button v-if="hasNextPage && gridWidth > 0 && isStripe && showVideoOverlay"
 				class="grid-navigation grid-navigation__next"
 				@click="handleClickNext">
-				<ChevronRight :size="24" />
+				<ChevronRight decorative :size="24" />
 			</button>
 		</div>
 		<LocalVideo
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index f79133d74ff..917d7eeb7ab 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -100,6 +100,7 @@
 				:open="showQualityWarningTooltip">
 				<NetworkStrength2Alert
 					slot="trigger"
+					decorative
 					fill-color="#e9322d"
 					title=""
 					:size="24"
diff --git a/src/components/CallView/shared/Video.vue b/src/components/CallView/shared/Video.vue
index 10300dc4717..6c17f358841 100644
--- a/src/components/CallView/shared/Video.vue
+++ b/src/components/CallView/shared/Video.vue
@@ -67,7 +67,10 @@
 			<div v-if="showPlaceholderForPromoted"
 				:key="'placeholderForPromoted'"
 				class="placeholder-for-promoted">
-				<AccountCircle v-if="isPromoted || isSelected" fill-color="#FFFFFF" :size="36" />
+				<AccountCircle v-if="isPromoted || isSelected"
+					decorative
+					fill-color="#FFFFFF"
+					:size="36" />
 			</div>
 		</transition-group>
 		<VideoBottomBar v-bind="$props"
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index d2af36a9b94..c5d38ed4e42 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -28,7 +28,8 @@
 				icon=""
 				:aria-label="t('spreed','Create a new group conversation')"
 				@click="showModal">
-				<Plus size="24" />
+				<Plus size="24"
+					decorative />
 			</Button>
 			<p>{{ t('spreed','Create a new group conversation') }}</p>
 		</Popover>
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 3696adda75d..2d4f5844bd1 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -44,7 +44,7 @@
 			tabindex="1"
 			:aria-label="removeAriaLabel"
 			class="remove-file primary">
-			<Close class="remove-file__icon" @click="$emit('remove-file', id)" />
+			<Close class="remove-file__icon" decorative @click="$emit('remove-file', id)" />
 		</button>
 		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
 	</file-preview>
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 7405d0d59af..38498ddf122 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -51,6 +51,16 @@ get the messagesList array and loop through the list to generate the messages.
 				type="messages"
 				:count="15" />
 		</template>
+		<transition name="fade">
+			<button v-show="!isScrolledToBottom"
+				:aria-label="scrollTobottomAriaLabel"
+				class="scroll-to-bottom"
+				@click="scrollToBottom">
+				<ChevronDown decorative
+					:size="24"
+					fill-color="#fff" />
+			</button>
+		</transition>
 	</div>
 </template>
 
@@ -65,12 +75,14 @@ import isInLobby from '../../mixins/isInLobby'
 import debounce from 'debounce'
 import { EventBus } from '../../services/EventBus'
 import LoadingPlaceholder from '../LoadingPlaceholder'
+import ChevronDown from 'vue-material-design-icons/ChevronDown'
 
 export default {
 	name: 'MessagesList',
 	components: {
 		LoadingPlaceholder,
 		MessagesGroup,
+		ChevronDown,
 	},
 
 	mixins: [
@@ -200,6 +212,14 @@ export default {
 		chatIdentifier() {
 			return this.token + ':' + this.isParticipant + ':' + this.isInLobby
 		},
+
+		scrollToBottomAriaLabel() {
+			return t('spreed', 'Scroll to bottom')
+		},
+
+		scroller() {
+			return document.querySelector('.scroller')
+		},
 	},
 
 	watch: {
@@ -503,17 +523,16 @@ export default {
 
 		debounceHandleScroll: debounce(function() {
 			this.handleScroll()
-		}, 600),
+		}, 200),
 		/**
 		 * When the div is scrolled, this method checks if it's been scrolled to the top
 		 * or to the bottom of the list bottom.
 		 */
 		async handleScroll() {
-			const scroller = document.querySelector('.scroller')
-			const scrollHeight = scroller.scrollHeight
-			const scrollTop = scroller.scrollTop
+			const scrollHeight = this.scroller.scrollHeight
+			const scrollTop = this.scroller.scrollTop
 			const scrollOffset = scrollHeight - scrollTop
-			const elementHeight = scroller.clientHeight
+			const elementHeight = this.scroller.clientHeight
 			const tolerance = 10
 			if (scrollOffset < elementHeight + tolerance && scrollOffset > elementHeight - tolerance) {
 				this.isScrolledToBottom = true
@@ -549,8 +568,9 @@ export default {
 		 */
 		scrollToBottom() {
 			this.$nextTick(function() {
-				document.querySelector('.scroller').scrollTop = document.querySelector('.scroller').scrollHeight
+				this.scroller.scrollTop = this.scroller.scrollHeight
 			})
+			this.isScrolledToBottom = true
 		},
 
 		/**
@@ -581,9 +601,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../assets/variables.scss';
+
 .scroller {
 	flex: 1 0;
 	overflow-y: auto;
+	scroll-behavior: smooth;
 	&__loading {
 		height: 50px;
 		display: flex;
@@ -591,4 +614,23 @@ export default {
 	}
 }
 
+.scroll-to-bottom {
+	position: absolute;
+	width: 44px;
+	height: 44px;
+
+	background-color: var(--color-primary-element);
+	bottom: 76px;
+	right: 24px;
+	z-index: 2;
+	padding: 0;
+	margin: 0;
+	&:hover,
+	&:focus {
+		background-color: var(--color-primary-element-light);
+		opacity: 1 !important;
+		border: none;
+	}
+}
+
 </style>
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 44709a76d59..ca4ba11bfcf 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -66,7 +66,8 @@
 							:aria-label="t('spreed', 'Add emoji')"
 							:aria-haspopup="true">
 							<EmoticonOutline
-								:size="20" />
+								:size="20"
+								decorative />
 						</button>
 					</EmojiPicker>
 				</div>
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
index 2f3bfc34045..2997bca7a96 100644
--- a/src/components/UploadEditor.vue
+++ b/src/components/UploadEditor.vue
@@ -45,7 +45,10 @@
 				<button :aria-label="addMoreAriaLabel"
 					class="add-more__button primary"
 					@click="clickImportInput">
-					<Plus :size="48" class="upload-editor__plus-icon" />
+					<Plus
+						decorative
+						:size="48"
+						class="upload-editor__plus-icon" />
 				</button>
 			</div>
 		</transition-group>