diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
index 9cd155097ffc..1aba4981a8fe 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.html
@@ -91,8 +91,8 @@
                         </div>
                     }
 
-                    @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
-                        <div class="d-block d-sm-none">
+                    @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation) && isMobile) {
+                        <div>
                             @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                                 <div class="pt-2">
                                     <button class="btn btn-md btn-primary" (click)="createEditModal.open()" jhiTranslate="artemisApp.metis.newAnnouncement"></button>
@@ -109,7 +109,7 @@
                         </div>
                     }
                 </div>
-                @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation)) {
+                @if (_activeConversation && newPost && canCreateNewMessageInConversation(_activeConversation) && !isMobile) {
                     <div class="d-none d-sm-block">
                         @if (getAsChannel(_activeConversation)?.isAnnouncementChannel) {
                             <div class="pt-2">
diff --git a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
index 2590612104b4..5a73e05471c2 100644
--- a/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
+++ b/src/main/webapp/app/overview/course-conversations/layout/conversation-messages/conversation-messages.component.ts
@@ -12,6 +12,7 @@ import {
     ViewChild,
     ViewChildren,
     ViewEncapsulation,
+    inject,
 } from '@angular/core';
 import { faCircleNotch, faEnvelope, faSearch, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Conversation, ConversationDTO } from 'app/entities/metis/conversation/conversation.model';
@@ -27,6 +28,8 @@ import { MetisConversationService } from 'app/shared/metis/metis-conversation.se
 import { OneToOneChat, isOneToOneChatDTO } from 'app/entities/metis/conversation/one-to-one-chat.model';
 import { canCreateNewMessageInConversation } from 'app/shared/metis/conversations/conversation-permissions.utils';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { LayoutService } from 'app/shared/breakpoints/layout.service';
+import { CustomBreakpointNames } from 'app/shared/breakpoints/breakpoints.service';
 
 @Component({
     selector: 'jhi-conversation-messages',
@@ -77,6 +80,9 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
     faSearch = faSearch;
     faEnvelope = faEnvelope;
     faCircleNotch = faCircleNotch;
+    isMobile = false;
+
+    private layoutService: LayoutService = inject(LayoutService);
 
     constructor(
         public metisService: MetisService, // instance from course-conversations.component
@@ -88,6 +94,14 @@ export class ConversationMessagesComponent implements OnInit, AfterViewInit, OnD
         this.subscribeToSearch();
         this.subscribeToMetis();
         this.subscribeToActiveConversation();
+        this.isMobile = this.layoutService.isBreakpointActive(CustomBreakpointNames.extraSmall);
+
+        this.layoutService
+            .subscribeToLayoutChanges()
+            .pipe(takeUntil(this.ngUnsubscribe))
+            .subscribe(() => {
+                this.isMobile = this.layoutService.isBreakpointActive(CustomBreakpointNames.extraSmall);
+            });
         this.cdr.detectChanges();
     }