diff --git a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
index 140c25fa..f85b6d91 100644
--- a/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
+++ b/matrix-meetings-widget/src/components/cockpit/CockpitPanel/CockpitPanel.tsx
@@ -70,7 +70,7 @@ export const CockpitPanel = withCurrentRoomMeeting(
             roomId={meeting.meetingId}
             titleId={titleId}
             uid={meeting.calendarUid}
-            showJoinButton={false}
+            hideJoinButton
           />
         </Box>
       </Stack>
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
index 7fba1745..75ff15d2 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetails.tsx
@@ -31,7 +31,7 @@ type MeetingDetailsProps = WithMeetingProps & {
 
   onClose?: () => void;
 
-  showJoinButton?: boolean;
+  hideJoinButton?: boolean;
 };
 
 export const MeetingDetails = withRoomIdMeeting(
@@ -40,7 +40,7 @@ export const MeetingDetails = withRoomIdMeeting(
     titleId,
     meetingTimeId,
     onClose,
-    showJoinButton = true,
+    hideJoinButton,
   }: MeetingDetailsProps) => {
     return (
       <div role="region" aria-label="Meeting details">
@@ -48,7 +48,7 @@ export const MeetingDetails = withRoomIdMeeting(
           meeting={meeting}
           onClose={onClose}
           titleId={titleId}
-          showJoinButton={showJoinButton}
+          hideJoinButton={hideJoinButton}
         />
         <Divider variant="middle" />
         <MeetingDetailsContent
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
index 80bc8c49..4d679c1e 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.test.tsx
@@ -100,16 +100,9 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should render without exploding', () => {
-    render(
-      <MeetingDetailsHeader
-        showJoinButton={true}
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
+      wrapper: Wrapper,
+    });
 
     expect(
       screen.getByRole('heading', { level: 3, name: /An important meeting/i })
@@ -123,11 +116,7 @@ describe('<MeetingDetailsHeader/>', () => {
 
   it('should have no accessibility violations', async () => {
     const { container } = render(
-      <MeetingDetailsHeader
-        showJoinButton
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
+      <MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />,
       { wrapper: Wrapper }
     );
 
@@ -135,16 +124,9 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should close the expended meeting dialog', async () => {
-    render(
-      <MeetingDetailsHeader
-        showJoinButton
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
+      wrapper: Wrapper,
+    });
 
     await userEvent.click(
       await screen.findByRole('button', { name: /Close/i }),
@@ -155,12 +137,9 @@ describe('<MeetingDetailsHeader/>', () => {
   });
 
   it('should hide join and close button in meeting details sidebar', async () => {
-    render(
-      <MeetingDetailsHeader showJoinButton={false} meeting={mockMeeting()} />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader hideJoinButton meeting={mockMeeting()} />, {
+      wrapper: Wrapper,
+    });
 
     expect(
       screen.queryByRole('button', { name: 'Join' })
@@ -209,7 +188,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -357,7 +335,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -442,7 +419,6 @@ describe('<MeetingDetailsHeader/>', () => {
   it('should skip editing the meeting if the user aborts the action', async () => {
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -516,7 +492,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -588,7 +563,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -661,7 +635,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -733,7 +706,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -789,7 +761,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!room-id',
           parentRoomId: '!parent-room-id',
@@ -842,16 +813,9 @@ describe('<MeetingDetailsHeader/>', () => {
       .observeRoomEvents('net.nordeck.meetings.meeting.close')
       .subscribe(acknowledgeAllEvents(widgetApi));
 
-    render(
-      <MeetingDetailsHeader
-        showJoinButton
-        meeting={mockMeeting()}
-        onClose={onClose}
-      />,
-      {
-        wrapper: Wrapper,
-      }
-    );
+    render(<MeetingDetailsHeader meeting={mockMeeting()} onClose={onClose} />, {
+      wrapper: Wrapper,
+    });
 
     await userEvent.click(
       await screen.findByRole('button', { name: /Delete/i })
@@ -887,7 +851,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: '!room-id',
@@ -947,7 +910,6 @@ describe('<MeetingDetailsHeader/>', () => {
 
     render(
       <MeetingDetailsHeader
-        showJoinButton
         meeting={mockMeeting({
           room_id: '!meeting-room-id',
           parentRoomId: undefined,
diff --git a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
index a4e448ad..d5b7662d 100644
--- a/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
+++ b/matrix-meetings-widget/src/components/meetings/MeetingDetails/MeetingDetailsHeader/MeetingDetailsHeader.tsx
@@ -67,12 +67,12 @@ export function MeetingDetailsHeader({
   meeting,
   onClose,
   titleId,
-  showJoinButton,
+  hideJoinButton,
 }: {
   meeting: Meeting;
   onClose?: DispatchWithoutAction;
   titleId?: string;
-  showJoinButton: boolean;
+  hideJoinButton?: boolean;
 }) {
   const widgetApi = useWidgetApi();
   const { t } = useTranslation();
@@ -191,7 +191,7 @@ export function MeetingDetailsHeader({
             {meeting?.title}
           </DialogTitle>
           <Box display="flex" flexWrap="wrap" alignItems="baseline" ml={3}>
-            {showJoinButton && (
+            {!hideJoinButton && (
               <MeetingDetailsJoinButton
                 aria-describedby={joinButtonTitleId}
                 meetingType={meeting.type}