diff --git a/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.tsx b/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.tsx
index e8b9fd2..c1decab 100644
--- a/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.tsx
+++ b/src/compositions/CalendarAnnouncementButtons/CalendarAnnouncementButtons.tsx
@@ -8,7 +8,7 @@ type CalendarAnnouncementButtonsProps = {
 
 export const CalendarAnnouncementButtons = ({calendar, announcements}: CalendarAnnouncementButtonsProps) => {
   return (
-    <>
+    <div className={styles.container}>
       { calendar &&
         <Button
           size={"md"}
@@ -29,6 +29,6 @@ export const CalendarAnnouncementButtons = ({calendar, announcements}: CalendarA
           >Vermeldungen</Button>
         </span>
       }
-    </>
+    </div>
   )
 }
\ No newline at end of file
diff --git a/src/compositions/CalendarAnnouncementButtons/styles.module.scss b/src/compositions/CalendarAnnouncementButtons/styles.module.scss
index db41048..65c475c 100644
--- a/src/compositions/CalendarAnnouncementButtons/styles.module.scss
+++ b/src/compositions/CalendarAnnouncementButtons/styles.module.scss
@@ -1,3 +1,17 @@
-.margin {
-  margin-left: 5px;
+.container {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
+.container a {
+  flex-shrink: 0;
+  width: inherit;
+}
+
+@media screen and (max-width: 576px) {
+  .container {
+    justify-content: flex-start;
+  }
 }
\ No newline at end of file