diff --git a/css/app-sidebar.scss b/css/app-sidebar.scss
index 0ced50c3cf..df00cff9eb 100644
--- a/css/app-sidebar.scss
+++ b/css/app-sidebar.scss
@@ -1,934 +1,169 @@
 /*!
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-.app-calendar .app-sidebar,
-.event-popover .event-popover__inner {
-	.editor-invitee-list-empty-message,
-	.editor-reminders-list-empty-message,
-	.editor-invitee-list-no-email-configured-message {
-		margin-top: 20px;
+.modal-container {
+	width: 900px !important;
 
-		&__icon {
-			background-size: 50px;
-			height: 50px;
-			width: 50px;
-			margin: 0 auto;
-			opacity: .5;
-		}
-
-		&__caption {
-			margin-top: 8px;
-			text-align: center;
-			color: var(--color-text-lighter);
-		}
-	}
+	&__content {
+		padding: calc(var(--default-grid-baseline) * 4);
 
-	.editor-invitee-list-no-email-configured-message {
-		&__icon {
-			font-size: 50px;
-			line-height: 1em;
-			user-select: none;
-		}
 	}
+}
 
-	.editor-reminders-list-new-button {
-		width: 100%;
-		background-position-x: 8px;
-	}
-
-	.app-sidebar-header {
-		&__action {
-			margin-top: 0 !important;
-			max-height: none !important;
-			flex-wrap: wrap;
-
-			div {
-				flex-shrink: 0;
-			}
-		}
-
-		&__desc {
-			// We use our custom header layout for the sidebar editor
-			height: 0 !important;
-			padding: 0 !important;
-			margin: 0 !important;
-
-			// But keep the three-dot menu in the front
-			.app-sidebar-header__menu {
-				z-index: 1;
-			}
-		}
-
-		&__description {
-			flex-direction: column;
-
-			// Close button should be aligned with calendar picker (header)
-			padding-top: 5px;
-		}
-	}
-
-	.app-sidebar-tab {
-		// Make the whole sidebar scrollable instead of just the active tab
-		overflow: unset !important;
-		max-height: unset !important;
-		height: auto !important;
-
-		&__buttons {
-			position: fixed;
-			bottom: var(--body-container-margin);;
-			z-index: 2;
-			width: calc(27vw - 11px);
-			min-width: 300px - 11px;
-			max-width: 500px - 11px;
-			background-color: var(--color-main-background);
-			border-radius: 0 0 var(--body-container-radius) 0;
-			padding: 0 8px 6px 0;
-
-			button {
-				width: 100%;
-				height: 44px;
-			}
-		}
-		&__content {
-			margin-bottom: 120px;
-		}
-	}
-
-	.app-sidebar-tabs {
-		// Fix empty content in case of invalid event URLs
-		.empty-content {
-			height: 100vh;
-			padding: 0 20px;
-		}
-	}
-
-	.property-title-time-picker-loading-placeholder {
-		width: 100%;
-
-		&__icon {
-			margin: 0 auto;
-			height: 62px;
-			width: 62px;
-			background-size: 62px;
-		}
-	}
-
-	.app-sidebar__loading-indicator {
-		width: 100%;
-		margin-top: 20vh;
-
-		&__icon {
-			margin: 0 auto;
-			height: 44px;
-			width: 44px;
-			background-size: 44px;
-		}
-	}
-
-	.repeat-option-set {
-		.repeat-option-set-section {
-			&:not(:first-of-type) {
-				margin-top: 20px
-			}
-
-			&--on-the-select {
-				display: flex;
-				align-items: center;
-
-				.v-select {
-					width: 100%;
-					min-width: 100px !important; // Set a lower min-width
-				}
-			}
-
-			&__title {
-				list-style: none;
-			}
-
-			&__grid {
-				display: grid;
-				grid-gap: 0;
-
-				.repeat-option-set-section-grid-item {
-					padding: 8px;
-					border: 1px solid var(--color-border-dark);
-					text-align: center;
-					margin: 0;
-					border-radius: 0;
-				}
-			}
-		}
-
-		&--weekly,
-		&--monthly {
-			.repeat-option-set-section {
-				&__grid {
-					grid-template-columns: repeat(7, auto);
-				}
-			}
-		}
-
-		&--yearly {
-			.repeat-option-set-section {
-				&__grid {
-					grid-template-columns: repeat(4, auto);
-				}
-			}
-		}
-
-		&--interval-freq {
-			display: flex;
-			align-items: center;
-
-			.multiselect {
-				min-width: 100px;
-				width: 25%;
-			}
-		}
-
-		&--end {
-			margin-top: 20px;
-			display: flex;
-			align-items: center;
-
-			.repeat-option-end {
-				&__label,
-				&__end-type-select {
-					display: block;
-					min-width: 160px;
-					width: 25%;
-				}
-
-				&__until {
-					min-width: 75px;
-					width: 50%
-				}
-
-				&__count {
-					min-width: 75px;
-					width: 25%;
-				}
-			}
-		}
-
-		&__label {
-			margin-right: auto;
-		}
-	}
+.top-actions {
+	display: flex;
+	list-style-type: none;
+	padding-right: calc(var(--default-grid-baseline) * 4);
+	margin-top: calc(var(--default-grid-baseline) * -3);
 
-	.repeat-option-warning {
-		text-align: center;
+	&-wrapper {
+		display: flex;
+		justify-content: space-between;
 	}
+}
 
-	.property-title-time-picker {
-		width: 100%;
-
-		&--readonly {
-			display: flex;
-			align-items: center;
-		}
-
-		&__icon {
-			width: 34px;
-			height: 34px;
-			margin-left: -5px;
-			margin-right: 5px;
-		}
+.top-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 4);
+}
+.app-edit-full-tab {
+	&__content {
+		display: flex;
+		flex-direction: row;
+		margin: calc(var(--default-grid-baseline) * 4) 0;
+		gap: calc(var(--default-grid-baseline) * 12);
 
-		&__time-pickers,
-		&__all-day {
+		&-left, &-right {
 			display: flex;
-			align-items: center;
-		}
-
-		&__time-pickers {
-			flex-wrap: wrap;
-			justify-content: space-between;
-			gap: 5px;
-
-			.mx-datepicker {
-				flex: 1 auto;
-
-				.mx-input-append {
-					background-color: transparent !important;
-				}
-			}
-
-			&--readonly {
-				justify-content: start;
-
-				.property-title-time-picker-read-only-wrapper {
-					display: flex;
-					align-items: center;
-					padding: 8px 7px;
-					background-color: var(--color-main-background);
-					color: var(--color-main-text);
-					outline: none;
-
-					&--start-date {
-						padding-right: 0;
-					}
-
-					&--end-date {
-						padding-left: 0;
-					}
-
-					&__icon {
-						margin-left: 8px;
-						height: 16px;
-						width: 16px;
-						opacity: .3;
-
-						&--highlighted {
-							opacity: .7;
-						}
-
-						&:focus,
-						&:hover {
-							opacity: 1;
-						}
-					}
-				}
-			}
-		}
-
-		&__all-day {
-			padding-left: 3px;
-			margin-top: 5px;
-
-			// Reduce the height just a little bit (from 44px) to save some space
-			.checkbox-radio-switch__label {
-				min-height: 32px;
-			}
-		}
-
-		.datetime-picker-inline-icon {
-			margin-top: 17px;
-			opacity: .3;
-			border: none;
-			background-color: transparent;
-			border-radius: 0;
-			padding: 6px !important;
-
-			&--highlighted {
-				opacity: .7;
-			}
-
-			&:focus,
-			&:hover {
-				opacity: 1;
-			}
+			flex-direction: column;
+			flex-basis: 50%;
+			flex-shrink: 1;
+			gap: calc(var(--default-grid-baseline) * 4);
 		}
 	}
 
-	.property-alarm-list {
-		width: 100%;
-	}
-
-	.property-alarm-item {
+	&__lower {
 		display: flex;
-		align-items: center;
-		min-height: 44px;
-
-		&__icon {
-			align-self: flex-start;
-
-			&--hidden {
-				visibility: hidden;
-			}
-
-			.icon {
-				width: 34px;
-				height: 44px;
-				margin-left: -5px;
-				margin-right: 5px;
-				// TODO: enable me again if the other icons on the details tab have an opacity too
-				// opacity: .7;
-			}
-		}
-
-		&__label {
-			padding: 0 7px;
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			align-self: center;
-		}
-
-		&__options {
-			margin-left: auto;
-			display: flex;
-			align-items: center;
-			white-space: nowrap;
-		}
-
-		&__edit {
-			display: flex;
-			align-items: center;
-			width: 100%;
-			min-width: 0;
-			padding-right: 8px;
-
-			input[type=number] {
-				width: 4em;
-			}
-
-			.multiselect {
-				flex: 1 auto;
-				height: 34px;
-				min-width: 0;
-			}
-
-			.mx-datepicker {
-				flex: 1 auto;
-			}
-
-			&--timed {
-			}
-
-			&--all-day {
-				flex-wrap: wrap;
-				margin-bottom: 5px;
-				gap: 0 5px;
-
-				&__distance,
-				&__time {
-					display: flex;
-					flex: 1;
-					align-items: center;
-				}
-
-				&__distance {
-					.multiselect {
-						width: 6em;
-					}
-				}
-
-				&__time {
-					&__before-at-label {
-						flex: 0 0 auto;
-						margin-right: 5px;
-					}
-
-					.mx-datepicker {
-						width: 7em;
-					}
-				}
-			}
-
-			&--absolute {
-				.mx-datepicker {
-					width: unset;
-				}
-			}
-		}
+		margin: calc(var(--default-grid-baseline) * 4) 0;
+		gap: calc(var(--default-grid-baseline) * 12);
+		justify-content: stretch;
 	}
+}
 
-	.property-repeat {
-		width: 100%;
-
-		&__summary {
-			display: flex;
-			align-items: center;
-
-			&__icon {
-				width: 34px;
-				height: 34px;
-				margin-left: -5px;
-				margin-right: 5px;
-			}
-
-			&__content {
-				flex: 1 auto;
-				padding: 8px 7px;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-		}
-
-		&__options {
-			margin-bottom: 5px;
-		}
-	}
+.property-text {
+	display: flex;
+	gap: calc(var(--default-grid-baseline) * 4);
+	margin: 0;
+	flex-grow: 1;
 
-	.resource-list-item,
-	.invitees-list-item {
+	&-wrapper {
 		display: flex;
-		align-items: center;
-		min-height: 44px;
-
-		&__displayname {
-			margin-left: 8px;
-		}
-
-		&__actions {
-			margin-left: auto;
-		}
-
-		&__organizer-hint {
-			color: var(--color-text-maxcontrast);
-			font-weight: 300;
-			margin-left: 5px;
-		}
+		gap: calc(var(--default-grid-baseline) * 4);
+		justify-content: stretch;
 	}
 
-	.resource-search {
-		&__capacity {
-			display: flex;
-			align-items: center;
-
-			&__actions {
-				margin-left: 5px;
-			}
-		}
+	.property-text__input, textarea, input {
+		width: 100%;
+		height: 68px;
 	}
+}
 
-	.avatar-participation-status {
-		position: relative;
-		height: 38px;
-		width: 38px;
-
-		&__indicator {
-			position: absolute;
-			bottom: 0;
-			right: 0;
-			background-size: 10px;
-			height: 15px;
-			width: 15px;
-			border-radius: 50%;
-		}
-
-		&__indicator.accepted {
-			background-color: #2fb130;
-		}
-
-		&__indicator.declined {
-			background-color: #ff0000;
-		}
-
-		&__indicator.tentative {
-			background-color: #ffa704;
-		}
-
-		&__indicator.delegated,
-		&__indicator.no-response {
-			background-color: grey;
-		}
-	}
+.property-title-time-picker {
+	display: flex;
+	justify-content: stretch;
 
-	.property-text,
-	.property-select,
-	.property-color,
-	.property-select-multiple,
-	.property-title,
-	.resource-capacity,
-	.resource-room-type {
+	&__time-pickers {
+		flex-grow: 1;
 		display: flex;
-		width: 100%;
-		align-items: flex-start;
-
-		&__icon,
-		&__info {
-			height: 34px;
-			width: 34px;
-		}
-
-		&__icon {
-			&--hidden {
-				visibility: hidden;
-			}
-		}
-
-		&__info {
-			display: flex;
-			justify-content: center;
-			flex-shrink: 0;
-			opacity: .5;
-		}
+		gap: calc(var(--default-grid-baseline) * 4);
 
-		&__info:hover {
-			opacity: 1;
-		}
-
-		&__icon {
-			flex-shrink: 0;
-			margin-left: -5px;
-			margin-right: 5px;
-		}
-
-		&__input {
-			flex-grow: 2;
-
-			textarea,
-			input,
-			div.v-select {
-				width: 100%;
-			}
-
-			textarea {
-				max-height: calc(100vh - 500px);
-				vertical-align: top;
-				margin: 0;
-			}
-
-			&--readonly {
-				div {
-					width: calc(100% - 8px); /* for typical (thin) scrollbar size */
-					white-space: pre-line;
-					padding: 8px 7px;
-					background-color: var(--color-main-background);
-					color: var(--color-main-text);
-					outline: none;
-					overflow-y: scroll;
-					word-break: break-word; /* allows breaking on long URLs */
-					max-height: 30vh;
-				}
-			}
-
-			&--readonly-calendar-picker {
-				div.calendar-picker-option {
-					padding: 8px 7px;
-				}
-			}
+		.date-time-picker {
+			flex-grow: 1;
 		}
 	}
+}
 
-	.property-text,
-	.property-select,
-	.property-color,
-	.property-select-multiple,
-	.property-title,
-	.property-repeat,
-	.resource-capacity,
-	.resource-room-type {
-		margin-bottom: 5px;
-
-		&--readonly {
-			margin-bottom: 0;
-		}
-	}
+.property-select, .property-select-multiple, .property-color, .property-repeat__summary {
+	display: flex;
+	align-content: center;
+	align-items: center;
+	gap: calc(var(--default-grid-baseline) * 4);
+	justify-content: flex-start;
 
-	.property-select,
-	.property-select-multiple {
-		align-items: center;
+	&__input {
+		width: unset !important;
+		flex-grow: 1;
 
 		.v-select {
-			min-width: unset !important;
-		}
-	}
-
-	.property-color {
-		&__input {
-			display: flex;
-			gap: 5px;
-			margin-bottom: 5px;
-
-			&--readonly {
-				// Align with other (text based) fields
-				margin: 3px 0 3px 7px;
-			}
-		}
-
-		&__color-preview {
-			$size: 44px;
-			width: $size !important;
-			height: $size !important;
-			border-radius: $size;
-		}
-	}
-
-	.property-text {
-		&__icon {
-			// Prevent icon misalignment on vertically growing inputs
-			height: unset;
-			align-self: flex-start;
-			padding-top: 12px;
-		}
-
-		&--readonly {
-			.property-text__icon {
-				padding-top: 10px;
-			}
-		}
-
-		&__input {
-			&--readonly {
-				// Reduce line height but still keep first row aligned to the icon
-				line-height: 1;
-				padding-top: calc(var(--default-line-height) / 2 - 0.5lh);
-			}
-
-			textarea {
-				resize: none;
-			}
-		}
-	}
-
-	.property-select-multiple {
-		.property-select-multiple__input.property-select-multiple__input--readonly {
 			width: 100%;
-
-			.property-select-multiple-colored-tag-wrapper {
-				align-items: center;
-				overflow: hidden;
-				max-width: 100%;
-				position: relative;
-				padding: 3px 5px;
-
-				.multiselect__tag {
-					line-height: 20px;
-					padding: 1px 5px;
-					background-image: none;
-					display: inline-flex;
-					align-items: center;
-					border-radius: 3px;
-					max-width: fit-content;
-					margin: 3px;
-				}
-			}
-		}
-	}
-
-	.property-title {
-		&__input, input {
-			font-weight: bold;
-			&__rtl{
-				text-align: right;
-			}
-		}
-
-		&__input--readonly {
-			font-size: 18px;
-		}
-	}
-
-	// Normalize gaps between all properties. We use outer margins between each row so a padding
-	// around inputs (from core) is not required.
-	.property-title,
-	.property-title-time-picker {
-		input {
-			margin: 0;
-		}
-	}
-
-	.resource-room-type {
-		margin-bottom: 5px;
-	}
-
-}
-
-.event-popover .event-popover__inner {
-	.event-popover__response-buttons {
-		margin-top: 8px;
-		margin-bottom: 0;
-	}
-
-	.property-text,
-	.property-title-time-picker {
-		&__icon {
 			margin: 0 !important;
 		}
 	}
 }
 
-.timezone-popover-wrapper {
-	.popover__inner {
-		padding: 20px;
-	}
-
-	&__title {
-		margin-bottom: 8px;
-	}
-
-	&__timezone-select {
-		min-width: 200px;
-	}
-}
-
-.event-popover {
-	// Don't cut popovers above popovers (e.g. date time picker)
-	.v-popper__inner {
-		overflow: unset !important;
-	}
-
-	.event-popover__inner {
-		text-align: left;
-		max-width: 480px;
-		width: 480px;
-		padding: 5px 10px 10px 10px;
-
-		.empty-content {
-			margin-top: 0 !important;
-			padding: 50px 0;
-		}
-
-		.property-title-time-picker:not(.property-title-time-picker--readonly) {
-			margin-bottom: 12px;
-		}
-
-		.event-popover__invitees {
-			.avatar-participation-status__text {
-				bottom: 22px;
-			}
-		}
-
-		.event-popover__buttons {
-			margin-top: 8px;
-		}
-
-		.event-popover__top-actions {
-			display: flex;
-			gap: var(--default-grid-baseline);
-			position: absolute !important;
-			top: var(--default-grid-baseline) !important;
-			z-index: 100 !important;
-			opacity: .7 !important;
-			border-radius: 22px !important;
-			align-items: center;
-
-			&--right{
-				right: var(--default-grid-baseline) !important;
-			}
-
-			&--left{
-				left: var(--default-grid-baseline) !important;
-			}
-
-			.action-item.action-item--single {
-				width: 44px !important;
-				height: 44px !important;
-			}
-		}
+.app-edit-full-tab-attendees, .app-edit-full-tab-resources {
+	display: flex;
+	flex-direction: row;
+	gap: calc(var(--default-grid-baseline) * 4);
+	flex-grow: 1;
+	align-content: flex-start;
+	align-items: flex-start;
 
-		.popover-loading-indicator {
-			width: 100%;
+	&__icon {
+		& > *:not([align-self="center"]) {
+			align-self: flex-start !important;
 
-			&__icon {
-				margin: 0 auto;
-				height: 62px;
-				width: 62px;
-				background-size: 62px;
+			svg {
+				margin-top: calc(var(--default-grid-baseline) * 2);
 			}
 		}
 	}
 
-	&[x-out-of-boundaries] {
-		margin-top: 75px;
-	}
-}
-
-.event-popover[x-placement^='bottom'] {
-	.popover__arrow {
-		border-bottom-color: var(--color-background-dark);
-	}
-}
-
-.calendar-picker-option {
-	display: flex;
-	align-items: center;
-	overflow: hidden;
-
-	&__color-indicator {
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		border: none;
-		margin-right: 8px;
-		flex-basis: 12px;
-		flex-shrink: 0;
-	}
-
-	&__label {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
+	&__content {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--default-grid-baseline) * 2);
+		height: 100%;
 		flex-grow: 1;
 	}
-
-	&__avatar {
-		flex-basis: 18px;
-		flex-shrink: 0;
-	}
 }
 
-.property-select-multiple-colored-tag {
-	width: 100%;
-	display: flex;
-	align-items: center;
-
-	&__color-indicator {
-		width: 12px;
-		height: 12px;
-		border-radius: 50%;
-		border: none;
-		margin-right: 8px;
-		flex-shrink: 0;
-	}
-
-	.icon {
-		margin-left: 4px;
-		scale: 0.8;
-	}
+.app-edit-full-tab-attendees__content {
+	justify-content: space-between;
 }
 
-.resource-list-button-group,
-.invitees-list-button-group {
-	width: 100%;
+.invitees-list {
 	display: flex;
-	justify-content: space-between;
-	align-items: center;
-
-	// Only apply the margin if at least one button is being rendered
-	&:not(:empty) {
-		margin-top: 20px;
-	}
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 2);
 }
 
-.vs__dropdown-option span {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
 
-.resource-search-list-item,
-.invitees-search-list-item {
+.resource-search {
 	display: flex;
-	align-items: center;
-	width: 100%;
-	text-align: start;
-	// Account for avatar width (because it is position: relative)
-
-	padding-inline-end: 32px;	
+	flex-direction: column;
+	gap: calc(var(--default-grid-baseline) * 2);
+	margin: 0 0 calc(var(--default-grid-baseline) * 4);
 
-	&__label {
-		width: 100%;
-		padding: 0 8px;
-
-		&__availability {
-			color: var(--color-text-maxcontrast);
-		}
-
-		div {
-			overflow: hidden;
-			text-overflow: ellipsis;
-			white-space: nowrap;
-		}
+	&__capacity {
+		display: flex;
+		align-items: center;
 
-		div:nth-child(1) {
-			color: var(--color-main-text)
+		.input-field {
+			margin-block-start: 0;
 		}
+	}
 
-		div:nth-child(2) {
-			color: var(--color-text-lighter);
-			line-height: 1;
-		}
+	.v-select {
+		width: 100%;
+		margin: 0 !important;
 	}
 }
 
-.resource-search__multiselect,
-.invitees-search__multiselect {
-	width: 100%;
+.editor-reminders-list-empty-message__caption {
+	text-align: center;
+	margin: 0 0 calc(var(--default-grid-baseline) * 4);
 }
diff --git a/src/components/CalendarGrid.vue b/src/components/CalendarGrid.vue
index d948deeeeb..3762697cd9 100644
--- a/src/components/CalendarGrid.vue
+++ b/src/components/CalendarGrid.vue
@@ -175,7 +175,7 @@ export default {
 			// We do not allow drag and drop when the editor is open.
 			return this.isAuthenticatedUser
 				&& this.$route?.name !== 'EditPopoverView'
-				&& this.$route?.name !== 'EditSidebarView'
+				&& this.$route?.name !== 'EditFullView'
 		},
 	},
 	watch: {
@@ -250,9 +250,9 @@ export default {
 					this.saveNewView(to.params.view)
 				}
 
-				if ((from.name === 'NewPopoverView' || from.name === 'NewSidebarView')
+				if ((from.name === 'NewPopoverView' || from.name === 'NewFullView')
 				&& to.name !== 'NewPopoverView'
-				&& to.name !== 'NewSidebarView') {
+				&& to.name !== 'NewFullView') {
 					const calendarApi = this.$refs.fullCalendar.getApi()
 					calendarApi.unselect()
 				}
@@ -263,7 +263,7 @@ export default {
 			// Trigger the select event programmatically on initial page load to show the new event
 			// in the grid. Wait for the next tick because the ref isn't available right away.
 			await this.$nextTick()
-			if (['NewPopoverView', 'NewSidebarView'].includes(this.$route.name)) {
+			if (['NewPopoverView', 'NewFullView'].includes(this.$route.name)) {
 				const start = new Date(parseInt(this.$route.params.dtstart) * 1000)
 				const end = new Date(parseInt(this.$route.params.dtend) * 1000)
 				if (!isNaN(start.getTime()) && !isNaN(end.getTime())) {
diff --git a/src/components/Editor/Attachments/AttachmentsList.vue b/src/components/Editor/Attachments/AttachmentsList.vue
index 4445efe27d..fc3f51c122 100644
--- a/src/components/Editor/Attachments/AttachmentsList.vue
+++ b/src/components/Editor/Attachments/AttachmentsList.vue
@@ -283,7 +283,7 @@ export default {
 		span {
 			width: 34px;
 			height: 34px;
-			margin-left: -10px;
+			margin-left: -15px;
 			margin-right: 5px;
 		}
 
diff --git a/src/components/Editor/Properties/PropertyTitle.vue b/src/components/Editor/Properties/PropertyTitle.vue
index a16a122ca5..c7c16c22c5 100644
--- a/src/components/Editor/Properties/PropertyTitle.vue
+++ b/src/components/Editor/Properties/PropertyTitle.vue
@@ -51,3 +51,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+input {
+	width: 100% !important;
+}
+</style>
diff --git a/src/components/Editor/SaveButtons.vue b/src/components/Editor/SaveButtons.vue
index 3c7e3a21bd..57df89a9c7 100644
--- a/src/components/Editor/SaveButtons.vue
+++ b/src/components/Editor/SaveButtons.vue
@@ -12,7 +12,7 @@
 			{{ $t('calendar', 'More details') }}
 		</NcButton>
 		<NcButton v-if="showSaveButton"
-			type="primary"
+			type="secondary"
 			:disabled="disabled"
 			@click="saveThisOnly">
 			<template #icon>
@@ -21,7 +21,7 @@
 			{{ $t('calendar', 'Save') }}
 		</NcButton>
 		<NcButton v-if="showUpdateButton"
-			type="primary"
+			type="secondary"
 			:disabled="disabled"
 			@click="saveThisOnly">
 			<template #icon>
@@ -36,7 +36,7 @@
 			{{ $t('calendar', 'Update this and all future') }}
 		</NcButton>
 		<NcButton v-if="showUpdateOnlyThisButton"
-			type="primary"
+			type="secondary"
 			:disabled="disabled"
 			@click="saveThisOnly">
 			{{ $t('calendar', 'Update this occurrence') }}
diff --git a/src/fullcalendar/interaction/eventClick.js b/src/fullcalendar/interaction/eventClick.js
index b02e1074e3..e9ffe66024 100644
--- a/src/fullcalendar/interaction/eventClick.js
+++ b/src/fullcalendar/interaction/eventClick.js
@@ -59,13 +59,13 @@ function handleEventClick(event, router, route, window, isWidget = false) {
 		return
 	}
 	let desiredRoute = settingsStore.skipPopover
-		? 'EditSidebarView'
+		? 'EditFullView'
 		: 'EditPopoverView'
 
 	// Don't show the popover if the window size is too small (less then its max width of 450 px + a bit)
 	// The mobile breakpoint of the reworked modals is 1024 px / 2 so simply use that.
 	if (window.innerWidth <= 1024 / 2 && desiredRoute === 'EditPopoverView') {
-		desiredRoute = 'EditSidebarView'
+		desiredRoute = 'EditFullView'
 	}
 
 	const name = getPrefixedRoute(route.name, desiredRoute)
@@ -75,7 +75,7 @@ function handleEventClick(event, router, route, window, isWidget = false) {
 	})
 
 	// Don't push new route when day didn't change
-	if ((getPrefixedRoute(route.name, 'EditPopoverView') === route.name || getPrefixedRoute(route.name, 'EditSidebarView') === route.name)
+	if ((getPrefixedRoute(route.name, 'EditPopoverView') === route.name || getPrefixedRoute(route.name, 'EditFullView') === route.name)
 		&& params.object === route.params.object
 		&& params.recurrenceId === route.params.recurrenceId) {
 		return
diff --git a/src/fullcalendar/interaction/select.js b/src/fullcalendar/interaction/select.js
index f1d4f3d493..9bb8ebbee8 100644
--- a/src/fullcalendar/interaction/select.js
+++ b/src/fullcalendar/interaction/select.js
@@ -20,17 +20,17 @@ export default function(router, route, window) {
 
 	return function({ start, end, allDay }) {
 		let name = settingsStore.skipPopover
-			? 'NewSidebarView'
+			? 'NewFullView'
 			: 'NewPopoverView'
 
 		// Don't show the popover if the window size is too small (less then its max width of 450 px + a bit)
 		// The mobile breakpoint of the reworked modals is 1024 px / 2 so simply use that.
 		if (window.innerWidth <= 1024 / 2 && name === 'NewPopoverView') {
-			name = 'NewSidebarView'
+			name = 'NewFullView'
 		}
 
 		// If we are already in a new event view, don't change it
-		if (['NewSidebarView', 'NewPopoverView'].includes(route.name)) {
+		if (['NewFullView', 'NewPopoverView'].includes(route.name)) {
 			name = route.name
 		}
 
diff --git a/src/mixins/EditorMixin.js b/src/mixins/EditorMixin.js
index fbc1488b8a..89ec88130c 100644
--- a/src/mixins/EditorMixin.js
+++ b/src/mixins/EditorMixin.js
@@ -677,7 +677,7 @@ export default {
 	 * @param {Function} next Function to be called when ready to load the next view
 	 */
 	async beforeRouteEnter(to, from, next) {
-		if (to.name === 'NewSidebarView' || to.name === 'NewPopoverView') {
+		if (to.name === 'NewFullView' || to.name === 'NewPopoverView') {
 			next(async vm => {
 				vm.resetState()
 
@@ -752,7 +752,7 @@ export default {
 	 */
 	async beforeRouteUpdate(to, from, next) {
 		// If we are in the New Event dialog, we want to update the selected time
-		if (to.name === 'NewSidebarView' || to.name === 'NewPopoverView') {
+		if (to.name === 'NewFullView' || to.name === 'NewPopoverView') {
 			// If allDay, dtstart and dtend are the same there is no need to update.
 			// This is usally the case when navigating through the calendar while the editor is open
 			if (to.params.allDay === from.params.allDay
@@ -837,7 +837,7 @@ export default {
 
 		try {
 			if ((from.name !== 'NewPopoverView' || to.name !== 'EditPopoverView')
-			&& (from.name !== 'NewPopoverView' || to.name !== 'EditSideBarView')) {
+			&& (from.name !== 'NewPopoverView' || to.name !== 'EditFullView')) {
 				await this.save()
 			}
 			next()
diff --git a/src/router.js b/src/router.js
index 3147ee59c1..a005413738 100644
--- a/src/router.js
+++ b/src/router.js
@@ -9,7 +9,7 @@ import { getRootUrl, generateUrl } from '@nextcloud/router'
 
 import Calendar from './views/Calendar.vue'
 import EditSimple from './views/EditSimple.vue'
-import EditSidebar from './views/EditSidebar.vue'
+import EditFull from './views/EditFull.vue'
 import {
 	getDefaultEndDateForNewEvent,
 	getDefaultStartDateForNewEvent,
@@ -40,9 +40,9 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/p/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
-					name: 'PublicEditSidebarView',
-					component: EditSidebar,
+					path: '/p/:tokens/:view/:firstDay/view/full/:object/:recurrenceId',
+					name: 'PublicEditFullView',
+					component: EditFull,
 				},
 			],
 		},
@@ -57,9 +57,9 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/embed/:tokens/:view/:firstDay/view/sidebar/:object/:recurrenceId',
-					name: 'EmbedEditSidebarView',
-					component: EditSidebar,
+					path: '/embed/:tokens/:view/:firstDay/view/full/:object/:recurrenceId',
+					name: 'EmbedEditFullView',
+					component: EditFull,
 				},
 			],
 		},
@@ -117,9 +117,9 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/:view/:firstDay/edit/sidebar/:object/:recurrenceId',
-					name: 'EditSidebarView',
-					component: EditSidebar,
+					path: '/:view/:firstDay/edit/full/:object/:recurrenceId',
+					name: 'EditFullView',
+					component: EditFull,
 				},
 				{
 					path: '/:view/:firstDay/new/popover/:allDay/:dtstart/:dtend',
@@ -127,9 +127,9 @@ const router = new Router({
 					component: EditSimple,
 				},
 				{
-					path: '/:view/:firstDay/new/sidebar/:allDay/:dtstart/:dtend',
-					name: 'NewSidebarView',
-					component: EditSidebar,
+					path: '/:view/:firstDay/new/full/:allDay/:dtstart/:dtend',
+					name: 'NewFullView',
+					component: EditFull,
 				},
 			],
 		},
diff --git a/src/views/Calendar.vue b/src/views/Calendar.vue
index c84a7cde57..ebc8527e45 100644
--- a/src/views/Calendar.vue
+++ b/src/views/Calendar.vue
@@ -172,7 +172,7 @@ export default {
 				&& !this.isEmbedded
 				&& !this.isWidget
 				&& this.$route?.name !== 'EditPopoverView'
-				&& this.$route?.name !== 'EditSidebarView'
+				&& this.$route?.name !== 'EditFullView'
 		},
 		isSelectable() {
 			return !this.isPublicShare && !this.isEmbedded && !this.isWidget
diff --git a/src/views/EditSidebar.vue b/src/views/EditFull.vue
similarity index 58%
rename from src/views/EditSidebar.vue
rename to src/views/EditFull.vue
index ffec6df233..7d554322b9 100644
--- a/src/views/EditSidebar.vue
+++ b/src/views/EditFull.vue
@@ -4,12 +4,10 @@
 -->
 
 <template>
-	<NcAppSidebar name=""
-		:force-menu="true"
-		@close="cancel">
+	<NcModal @close="cancel">
 		<template v-if="isLoading">
-			<div class="app-sidebar__loading-indicator">
-				<div class="icon icon-loading app-sidebar-tab-loading-indicator__icon" />
+			<div class="app-edit-full__loading-indicator">
+				<div class="icon icon-loading app-edit-full-tab-loading-indicator__icon" />
 			</div>
 		</template>
 		<template v-else-if="isError">
@@ -20,47 +18,46 @@
 			</NcEmptyContent>
 		</template>
 
-		<template v-if="!isLoading && !isError && !isNew"
-			#secondary-actions>
-			<NcActionLink v-if="!hideEventExport && hasDownloadURL"
-				:href="downloadURL">
-				<template #icon>
-					<Download :size="20" decorative />
-				</template>
-				{{ $t('calendar', 'Export') }}
-			</NcActionLink>
-			<NcActionButton v-if="!canCreateRecurrenceException && !isReadOnly" @click="duplicateEvent()">
-				<template #icon>
-					<ContentDuplicate :size="20" decorative />
-				</template>
-				{{ $t('calendar', 'Duplicate') }}
-			</NcActionButton>
-			<NcActionButton v-if="canDelete && !canCreateRecurrenceException" @click="deleteAndLeave(false)">
-				<template #icon>
-					<Delete :size="20" decorative />
-				</template>
-				{{ $t('calendar', 'Delete') }}
-			</NcActionButton>
-			<NcActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(false)">
-				<template #icon>
-					<Delete :size="20" decorative />
-				</template>
-				{{ $t('calendar', 'Delete this occurrence') }}
-			</NcActionButton>
-			<NcActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(true)">
-				<template #icon>
-					<Delete :size="20" decorative />
-				</template>
-				{{ $t('calendar', 'Delete this and all future') }}
-			</NcActionButton>
-		</template>
+		<div v-if="!isLoading && !isError" class="top-wrapper">
+			<div class="top-actions-wrapper">
+				<CalendarPickerHeader :value="selectedCalendar"
+					:calendars="calendars"
+					:is-read-only="isReadOnly || !canModifyCalendar"
+					@update:value="changeCalendar" />
 
-		<template v-if="!isLoading && !isError"
-			#description>
-			<CalendarPickerHeader :value="selectedCalendar"
-				:calendars="calendars"
-				:is-read-only="isReadOnly || !canModifyCalendar"
-				@update:value="changeCalendar" />
+				<div v-if="!isLoading && !isError && !isNew" class="top-actions">
+					<NcActionLink v-if="!hideEventExport && hasDownloadURL" :href="downloadURL">
+						<template #icon>
+							<Download :size="20" decorative />
+						</template>
+						{{ $t('calendar', 'Export') }}
+					</NcActionLink>
+					<NcActionButton v-if="!canCreateRecurrenceException && !isReadOnly" @click="duplicateEvent()">
+						<template #icon>
+							<ContentDuplicate :size="20" decorative />
+						</template>
+						{{ $t('calendar', 'Duplicate') }}
+					</NcActionButton>
+					<NcActionButton v-if="canDelete && !canCreateRecurrenceException" @click="deleteAndLeave(false)">
+						<template #icon>
+							<Delete :size="20" decorative />
+						</template>
+						{{ $t('calendar', 'Delete') }}
+					</NcActionButton>
+					<NcActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(false)">
+						<template #icon>
+							<Delete :size="20" decorative />
+						</template>
+						{{ $t('calendar', 'Delete this occurrence') }}
+					</NcActionButton>
+					<NcActionButton v-if="canDelete && canCreateRecurrenceException" @click="deleteAndLeave(true)">
+						<template #icon>
+							<Delete :size="20" decorative />
+						</template>
+						{{ $t('calendar', 'Delete this and all future') }}
+					</NcActionButton>
+				</div>
+			</div>
 
 			<PropertyTitle :value="title"
 				:is-read-only="isReadOnly"
@@ -81,190 +78,171 @@
 				@update-end-timezone="updateEndTimezone"
 				@toggle-all-day="toggleAllDay" />
 
-			<PropertyText class="property-location"
-				:is-read-only="isReadOnly"
-				:prop-model="rfcProps.location"
-				:value="location"
-				:linkify-links="true"
-				@update:value="updateLocation" />
-			<PropertyText class="property-description"
-				:is-read-only="isReadOnly"
-				:prop-model="rfcProps.description"
-				:value="description"
-				:linkify-links="true"
-				@update:value="updateDescription" />
-
 			<InvitationResponseButtons v-if="isViewedByAttendee"
 				:attendee="userAsAttendee"
 				:calendar-id="calendarId"
 				:narrow="true"
 				:grow-horizontally="true"
 				@close="closeEditorAndSkipAction" />
-		</template>
+		</div>
 
-		<NcAppSidebarTab v-if="!isLoading && !isError"
-			id="app-sidebar-tab-details"
-			class="app-sidebar-tab"
+		<div v-if="!isLoading && !isError"
+			id="app-edit-full-tab-details"
+			class="app-edit-full-tab"
 			:name="$t('calendar', 'Details')"
 			:order="0">
-			<template #icon>
-				<InformationOutline :size="20" decorative />
-			</template>
-			<div class="app-sidebar-tab__content">
-				<PropertySelect :is-read-only="isReadOnly"
-					:prop-model="rfcProps.status"
-					:value="status"
-					@update:value="updateStatus" />
-				<PropertySelect :is-read-only="isReadOnly"
-					:prop-model="rfcProps.accessClass"
-					:value="accessClass"
-					@update:value="updateAccessClass" />
-				<PropertySelect :is-read-only="isReadOnly"
-					:prop-model="rfcProps.timeTransparency"
-					:value="timeTransparency"
-					@update:value="updateTimeTransparency" />
+			<div class="app-edit-full-tab__content">
+				<div class="app-edit-full-tab__content-left">
+					<PropertyText :is-read-only="isReadOnly"
+						:prop-model="rfcProps.location"
+						:value="location"
+						:linkify-links="true"
+						@update:value="updateLocation" />
+					<PropertySelect :is-read-only="isReadOnly"
+						:prop-model="rfcProps.status"
+						:value="status"
+						@update:value="updateStatus" />
+					<PropertySelect :is-read-only="isReadOnly"
+						:prop-model="rfcProps.accessClass"
+						:value="accessClass"
+						@update:value="updateAccessClass" />
+					<PropertySelect :is-read-only="isReadOnly"
+						:prop-model="rfcProps.timeTransparency"
+						:value="timeTransparency"
+						@update:value="updateTimeTransparency" />
 
-				<PropertySelectMultiple :colored-options="true"
-					:is-read-only="isReadOnly"
-					:prop-model="rfcProps.categories"
-					:value="categories"
-					@add-single-value="addCategory"
-					@remove-single-value="removeCategory" />
+					<PropertySelectMultiple :colored-options="true"
+						:is-read-only="isReadOnly"
+						:prop-model="rfcProps.categories"
+						:value="categories"
+						@add-single-value="addCategory"
+						@remove-single-value="removeCategory" />
+				</div>
 
-				<PropertyColor :calendar-color="selectedCalendarColor"
-					:is-read-only="isReadOnly"
-					:prop-model="rfcProps.color"
-					:value="color"
-					@update:value="updateColor" />
+				<div class="app-edit-full-tab__content-right">
+					<PropertyText :is-read-only="isReadOnly"
+						:prop-model="rfcProps.description"
+						:value="description"
+						:linkify-links="true"
+						@update:value="updateDescription" />
+					<PropertyColor :calendar-color="selectedCalendarColor"
+						:is-read-only="isReadOnly"
+						:prop-model="rfcProps.color"
+						:value="color"
+						@update:value="updateColor" />
 
-				<AlarmList :calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnly" />
+					<AlarmList :calendar-object-instance="calendarObjectInstance"
+						:is-read-only="isReadOnly" />
 
-				<!-- TODO: If not editing the master item, force updating this and all future   -->
-				<!-- TODO: You can't edit recurrence-rule of no-range recurrence-exception -->
-				<Repeat :calendar-object-instance="calendarObjectInstance"
-					:recurrence-rule="calendarObjectInstance.recurrenceRule"
-					:is-read-only="isReadOnly"
-					:is-editing-master-item="isEditingMasterItem"
-					:is-recurrence-exception="isRecurrenceException"
-					@force-this-and-all-future="forceModifyingFuture" />
+					<!-- TODO: If not editing the master item, force updating this and all future   -->
+					<!-- TODO: You can't edit recurrence-rule of no-range recurrence-exception -->
+					<Repeat :calendar-object-instance="calendarObjectInstance"
+						:recurrence-rule="calendarObjectInstance.recurrenceRule"
+						:is-read-only="isReadOnly"
+						:is-editing-master-item="isEditingMasterItem"
+						:is-recurrence-exception="isRecurrenceException"
+						@force-this-and-all-future="forceModifyingFuture" />
 
-				<AttachmentsList v-if="!isLoading"
-					:calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnly" />
+					<AttachmentsList v-if="!isLoading"
+						:calendar-object-instance="calendarObjectInstance"
+						:is-read-only="isReadOnly" />
 
-				<NcModal v-if="showModal && !isPrivate()"
-					:name="t('calendar', 'Managing shared access')"
-					@close="closeAttachmentsModal">
-					<div class="modal-content">
-						<div v-if="showPreloader" class="modal-content-preloader">
-							<div :style="`width:${sharedProgress}%`" />
-						</div>
-						<div class="modal-h">
-							{{ n('calendar', 'User requires access to your file', 'Users require access to your file', showModalUsers.length) }}
-						</div>
-						<div class="users">
-							<NcListItemIcon v-for="attendee in showModalUsers"
-								:key="attendee.uri"
-								class="user-list-item"
-								:name="attendee.commonName"
-								:subtitle="emailWithoutMailto(attendee.uri)"
-								:is-no-user="true" />
-						</div>
-						<div class="modal-subtitle">
-							{{ n('calendar', 'Attachment requires shared access', 'Attachments requiring shared access', showModalNewAttachments.length) }}
-						</div>
-						<div class="attachments">
-							<NcListItemIcon v-for="attachment in showModalNewAttachments"
-								:key="attachment.xNcFileId"
-								class="attachment-list-item"
-								:name="getBaseName(attachment.fileName)"
-								:url="getPreview(attachment)"
-								:force-display-actions="false" />
-						</div>
-						<div class="modal-footer">
-							<div class="modal-footer-checkbox">
-								<NcCheckboxRadioSwitch v-if="!isPrivate()" :checked.sync="doNotShare">
-									{{ t('calendar', 'Deny access') }}
-								</NcCheckboxRadioSwitch>
+					<NcModal v-if="showModal && !isPrivate()"
+						:name="t('calendar', 'Managing shared access')"
+						@close="closeAttachmentsModal">
+						<div class="modal-content">
+							<div v-if="showPreloader" class="modal-content-preloader">
+								<div :style="`width:${sharedProgress}%`" />
+							</div>
+							<div class="modal-h">
+								{{ n('calendar', 'User requires access to your file', 'Users require access to your file', showModalUsers.length) }}
 							</div>
-							<div class="modal-footer-buttons">
-								<NcButton @click="closeAttachmentsModal">
-									{{ t('calendar', 'Cancel') }}
-								</NcButton>
-								<NcButton type="primary"
-									:disabled="showPreloader"
-									@click="acceptAttachmentsModal(thisAndAllFuture)">
-									{{ t('calendar', 'Invite') }}
-								</NcButton>
+							<div class="users">
+								<NcListItemIcon v-for="attendee in showModalUsers"
+									:key="attendee.uri"
+									class="user-list-item"
+									:name="attendee.commonName"
+									:subtitle="emailWithoutMailto(attendee.uri)"
+									:is-no-user="true" />
+							</div>
+							<div class="modal-subtitle">
+								{{ n('calendar', 'Attachment requires shared access', 'Attachments requiring shared access', showModalNewAttachments.length) }}
+							</div>
+							<div class="attachments">
+								<NcListItemIcon v-for="attachment in showModalNewAttachments"
+									:key="attachment.xNcFileId"
+									class="attachment-list-item"
+									:name="getBaseName(attachment.fileName)"
+									:url="getPreview(attachment)"
+									:force-display-actions="false" />
+							</div>
+							<div class="modal-footer">
+								<div class="modal-footer-checkbox">
+									<NcCheckboxRadioSwitch v-if="!isPrivate()" :checked.sync="doNotShare">
+										{{ t('calendar', 'Deny access') }}
+									</NcCheckboxRadioSwitch>
+								</div>
+								<div class="modal-footer-buttons">
+									<NcButton @click="closeAttachmentsModal">
+										{{ t('calendar', 'Cancel') }}
+									</NcButton>
+									<NcButton type="primary"
+										:disabled="showPreloader"
+										@click="acceptAttachmentsModal(thisAndAllFuture)">
+										{{ t('calendar', 'Invite') }}
+									</NcButton>
+								</div>
 							</div>
 						</div>
-					</div>
-				</NcModal>
+					</NcModal>
+				</div>
 			</div>
-			<SaveButtons v-if="showSaveButtons"
-				class="app-sidebar-tab__buttons"
-				:can-create-recurrence-exception="canCreateRecurrenceException"
-				:is-new="isNew"
-				:is-read-only="isReadOnly"
-				:force-this-and-all-future="forceThisAndAllFuture"
-				@save-this-only="prepareAccessForAttachments(false)"
-				@save-this-and-all-future="prepareAccessForAttachments(true)" />
-		</NcAppSidebarTab>
-		<NcAppSidebarTab v-if="!isLoading && !isError"
-			id="app-sidebar-tab-attendees"
-			class="app-sidebar-tab"
-			:name="$t('calendar', 'Attendees')"
-			:order="1">
-			<template #icon>
-				<AccountMultiple :size="20" decorative />
-			</template>
-			<div class="app-sidebar-tab__content">
-				<InviteesList v-if="!isLoading"
-					:calendar="selectedCalendar"
-					:calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnlyOrViewing"
-					:is-shared-with-me="isSharedWithMe"
-					:show-header="false"
-					@update-dates="updateDates" />
+		</div>
+		<hr>
+		<div class="app-edit-full-tab__lower">
+			<div v-if="!isLoading && !isError"
+				class="app-edit-full-tab-attendees"
+				:name="$t('calendar', 'Attendees')"
+				:order="1">
+				<div class="app-edit-full-tab-attendees__icon">
+					<AccountMultiple :size="20" decorative />
+				</div>
+				<div class="app-edit-full-tab-attendees__content">
+					<InviteesList v-if="!isLoading"
+						:calendar="selectedCalendar"
+						:calendar-object-instance="calendarObjectInstance"
+						:is-read-only="isReadOnlyOrViewing"
+						:is-shared-with-me="isSharedWithMe"
+						:show-header="false"
+						@update-dates="updateDates" />
+				</div>
 			</div>
-			<SaveButtons v-if="showSaveButtons"
-				class="app-sidebar-tab__buttons"
-				:can-create-recurrence-exception="canCreateRecurrenceException"
-				:is-new="isNew"
-				:is-read-only="isReadOnly"
-				:force-this-and-all-future="forceThisAndAllFuture"
-				@save-this-only="prepareAccessForAttachments(false)"
-				@save-this-and-all-future="prepareAccessForAttachments(true)" />
-		</NcAppSidebarTab>
-		<NcAppSidebarTab v-if="!isLoading && !isError && showResources"
-			id="app-sidebar-tab-resources"
-			class="app-sidebar-tab"
-			:name="$t('calendar', 'Resources')"
-			:order="3">
-			<template #icon>
-				<MapMarker :size="20" decorative />
-			</template>
-			<div class="app-sidebar-tab__content">
-				<ResourceList v-if="!isLoading"
-					:calendar-object-instance="calendarObjectInstance"
-					:is-read-only="isReadOnly" />
+			<div v-if="!isLoading && !isError && showResources"
+				class="app-edit-full-tab-resources"
+				:name="$t('calendar', 'Resources')"
+				:order="3">
+				<div class="app-edit-full-tab-resources__icon">
+					<MapMarker :size="20" decorative />
+				</div>
+				<div class="app-edit-full-tab-resources__content">
+					<ResourceList v-if="!isLoading"
+						:calendar-object-instance="calendarObjectInstance"
+						:is-read-only="isReadOnly" />
+				</div>
 			</div>
-			<SaveButtons v-if="showSaveButtons"
-				class="app-sidebar-tab__buttons"
-				:can-create-recurrence-exception="canCreateRecurrenceException"
-				:is-new="isNew"
-				:is-read-only="isReadOnly"
-				:force-this-and-all-future="forceThisAndAllFuture"
-				@save-this-only="prepareAccessForAttachments(false)"
-				@save-this-and-all-future="prepareAccessForAttachments(true)" />
-		</NcAppSidebarTab>
-	</NcAppSidebar>
+		</div>
+		<SaveButtons v-if="showSaveButtons"
+			class="app-edit-full-tab__buttons"
+			:can-create-recurrence-exception="canCreateRecurrenceException"
+			:is-new="isNew"
+			:is-read-only="isReadOnly"
+			:force-this-and-all-future="forceThisAndAllFuture"
+			@save-this-only="prepareAccessForAttachments(false)"
+			@save-this-and-all-future="prepareAccessForAttachments(true)" />
+	</NcModal>
 </template>
 <script>
 import {
-	NcAppSidebar,
-	NcAppSidebarTab,
 	NcActionLink,
 	NcActionButton,
 	NcEmptyContent,
@@ -314,15 +292,13 @@ import useCalendarObjectInstanceStore from '../store/calendarObjectInstance.js'
 import { mapStores, mapState } from 'pinia'
 
 export default {
-	name: 'EditSidebar',
+	name: 'EditFull',
 	components: {
 		ResourceList,
 		PropertyColor,
 		PropertySelectMultiple,
 		SaveButtons,
 		AlarmList,
-		NcAppSidebar,
-		NcAppSidebarTab,
 		NcActionLink,
 		NcActionButton,
 		NcEmptyContent,
@@ -615,68 +591,3 @@ export default {
 	},
 }
 </script>
-
-<style lang="scss" scoped>
-.modal-content {
-	padding: 16px;
-	position: relative;
-
-	.modal-content-preloader {
-		position: absolute;
-		top:0;
-		left:0;
-		right:0;
-		height: 6px;
-
-		div {
-			position: absolute;
-			top:0;
-			left: 0;
-			background: var(--color-primary-element);
-			height: 6px;
-			transition: width 0.3s linear;
-		}
-	}
-}
-.modal-subtitle {
-	font-weight: bold;
-	font-size: 16px;
-	margin-top: 16px;
-}
-.modal-h {
-	font-size: 24px;
-	font-weight: bold;
-	margin: 10px 0;
-}
-.modal-footer {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-
-	.modal-footer-buttons {
-		display: flex;
-
-		:first-child {
-			margin-right: 6px;
-		}
-	}
-}
-.attachments, .users {
-	display: flex;
-	flex-wrap: wrap;
-}
-.attachment-list-item, .user-list-item {
-	width: 50%
-}
-.attachment-icon {
-	width: 40px;
-	height: auto;
-	border-radius: var(--border-radius);
-}
-.property-location {
-	margin-top: 10px;
-}
-.property-description {
-	margin-bottom: 10px;
-}
-</style>
diff --git a/src/views/EditSimple.vue b/src/views/EditSimple.vue
index e94654cc45..9f1eed4f35 100644
--- a/src/views/EditSimple.vue
+++ b/src/views/EditSimple.vue
@@ -338,10 +338,10 @@ export default {
 
 			const params = Object.assign({}, this.$route.params)
 			if (this.isNew) {
-				this.$router.push({ name: 'NewSidebarView', params })
+				this.$router.push({ name: 'NewFullView', params })
 			} else {
 				this.$router.push({
-					name: getPrefixedRoute(this.$route.name, 'EditSidebarView'),
+					name: getPrefixedRoute(this.$route.name, 'EditFullView'),
 					params,
 				})
 			}
diff --git a/tests/javascript/unit/fullcalendar/interaction/eventClick.test.js b/tests/javascript/unit/fullcalendar/interaction/eventClick.test.js
index 8806065257..54367b664f 100644
--- a/tests/javascript/unit/fullcalendar/interaction/eventClick.test.js
+++ b/tests/javascript/unit/fullcalendar/interaction/eventClick.test.js
@@ -42,7 +42,7 @@ describe('fullcalendar/eventClick test suite', () => {
 		getPrefixedRoute
 			.mockReturnValueOnce('EditPopoverView')
 			.mockReturnValueOnce('EditPopoverView')
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -55,7 +55,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'CalendarView', 'EditPopoverView')
 		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'CalendarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'CalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'CalendarView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(1)
 		expect(router.push.mock.calls[0][0]).toEqual({
@@ -77,9 +77,9 @@ describe('fullcalendar/eventClick test suite', () => {
 		const window = { innerWidth: 1920 }
 
 		getPrefixedRoute
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 			.mockReturnValueOnce('EditPopoverView')
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -90,13 +90,13 @@ describe('fullcalendar/eventClick test suite', () => {
 			}
 		}})
 
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'CalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'CalendarView', 'EditFullView')
 		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'CalendarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'CalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'CalendarView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(1)
 		expect(router.push.mock.calls[0][0]).toEqual({
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -114,9 +114,9 @@ describe('fullcalendar/eventClick test suite', () => {
 		const window = { innerWidth: 500 }
 
 		getPrefixedRoute
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 			.mockReturnValueOnce('EditPopoverView')
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -127,13 +127,13 @@ describe('fullcalendar/eventClick test suite', () => {
 			}
 		}})
 
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'CalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'CalendarView', 'EditFullView')
 		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'CalendarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'CalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'CalendarView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(1)
 		expect(router.push.mock.calls[0][0]).toEqual({
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -151,9 +151,9 @@ describe('fullcalendar/eventClick test suite', () => {
 		const window = { innerWidth: 1920 }
 
 		getPrefixedRoute
-			.mockReturnValueOnce('PublicEditSidebarView')
+			.mockReturnValueOnce('PublicEditFullView')
 			.mockReturnValueOnce('PublicEditPopoverView')
-			.mockReturnValueOnce('PublicEditSidebarView')
+			.mockReturnValueOnce('PublicEditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -164,13 +164,13 @@ describe('fullcalendar/eventClick test suite', () => {
 				}
 			}})
 
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'PublicCalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'PublicCalendarView', 'EditFullView')
 		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'PublicCalendarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'PublicCalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'PublicCalendarView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(1)
 		expect(router.push.mock.calls[0][0]).toEqual({
-			name: 'PublicEditSidebarView',
+			name: 'PublicEditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -188,9 +188,9 @@ describe('fullcalendar/eventClick test suite', () => {
 		const window = { innerWidth: 1920 }
 
 		getPrefixedRoute
-			.mockReturnValueOnce('EmbedEditSidebarView')
+			.mockReturnValueOnce('EmbedEditFullView')
 			.mockReturnValueOnce('EmbedEditPopoverView')
-			.mockReturnValueOnce('EmbedEditSidebarView')
+			.mockReturnValueOnce('EmbedEditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -201,13 +201,13 @@ describe('fullcalendar/eventClick test suite', () => {
 				}
 			}})
 
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'EmbedCalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'EmbedCalendarView', 'EditFullView')
 		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'EmbedCalendarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'EmbedCalendarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'EmbedCalendarView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(1)
 		expect(router.push.mock.calls[0][0]).toEqual({
-			name: 'EmbedEditSidebarView',
+			name: 'EmbedEditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -222,7 +222,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -232,9 +232,9 @@ describe('fullcalendar/eventClick test suite', () => {
 		const window = { innerWidth: 1920 }
 
 		getPrefixedRoute
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 			.mockReturnValueOnce('EditPopoverView')
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -245,9 +245,9 @@ describe('fullcalendar/eventClick test suite', () => {
 				}
 			}})
 
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'EditSidebarView', 'EditSidebarView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'EditSidebarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'EditSidebarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'EditFullView', 'EditFullView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'EditFullView', 'EditPopoverView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'EditFullView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(0)
 	})
@@ -258,7 +258,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -270,7 +270,7 @@ describe('fullcalendar/eventClick test suite', () => {
 		getPrefixedRoute
 			.mockReturnValueOnce('EditPopoverView')
 			.mockReturnValueOnce('EditPopoverView')
-			.mockReturnValueOnce('EditSidebarView')
+			.mockReturnValueOnce('EditFullView')
 
 		const eventClickFunction = eventClick(router, route, window)
 		eventClickFunction({ event: {
@@ -281,9 +281,9 @@ describe('fullcalendar/eventClick test suite', () => {
 				}
 			}})
 
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'EditSidebarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'EditSidebarView', 'EditPopoverView')
-		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'EditSidebarView', 'EditSidebarView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(1, 'EditFullView', 'EditPopoverView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(2, 'EditFullView', 'EditPopoverView')
+		expect(getPrefixedRoute).toHaveBeenNthCalledWith(3, 'EditFullView', 'EditFullView')
 
 		expect(router.push.mock.calls.length).toEqual(0)
 	})
@@ -294,7 +294,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -334,7 +334,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -364,7 +364,7 @@ describe('fullcalendar/eventClick test suite', () => {
 			}})
 
 		expect(isPublicOrEmbeddedRoute).toHaveBeenCalledTimes(1)
-		expect(isPublicOrEmbeddedRoute).toHaveBeenNthCalledWith(1, 'EditSidebarView')
+		expect(isPublicOrEmbeddedRoute).toHaveBeenNthCalledWith(1, 'EditFullView')
 
 		expect(generateUrl).toHaveBeenCalledTimes(0)
 		expect(window.location).toEqual(oldLocation)
@@ -376,7 +376,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'EditSidebarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -414,7 +414,7 @@ describe('fullcalendar/eventClick test suite', () => {
 		expect(showInfo).toHaveBeenNthCalledWith(1, 'translated hint')
 
 		expect(isPublicOrEmbeddedRoute).toHaveBeenCalledTimes(1)
-		expect(isPublicOrEmbeddedRoute).toHaveBeenNthCalledWith(1, 'EditSidebarView')
+		expect(isPublicOrEmbeddedRoute).toHaveBeenNthCalledWith(1, 'EditFullView')
 
 		expect(generateUrl).toHaveBeenCalledTimes(0)
 		expect(window.location).toEqual(oldLocation)
@@ -445,7 +445,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 	it('should not save the event when new side bar view is open and then clicked in a saved event', () => {
 		const fromRoute = {
-			name: 'NewSideBarView',
+			name: 'NewFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -453,7 +453,7 @@ describe('fullcalendar/eventClick test suite', () => {
 			}
 		}
 		const toRoute = {
-			name: 'EditSideBarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -499,7 +499,7 @@ describe('fullcalendar/eventClick test suite', () => {
 			}
 		}
 		const toRoute = {
-			name: 'EditSideBarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -537,7 +537,7 @@ describe('fullcalendar/eventClick test suite', () => {
 
 	it('show save event', () => {
 		const fromRoute = {
-			name: 'EditSideBarView',
+			name: 'EditFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
@@ -545,7 +545,7 @@ describe('fullcalendar/eventClick test suite', () => {
 			}
 		}
 		const toRoute = {
-			name: 'NewSideBarView',
+			name: 'NewFullView',
 			params: {
 				object: 'object123',
 				otherParam: '456',
diff --git a/tests/javascript/unit/fullcalendar/interaction/select.test.js b/tests/javascript/unit/fullcalendar/interaction/select.test.js
index 17f519cff3..2d58b1e15e 100644
--- a/tests/javascript/unit/fullcalendar/interaction/select.test.js
+++ b/tests/javascript/unit/fullcalendar/interaction/select.test.js
@@ -56,7 +56,7 @@ describe('fullcalendar/select test suite', () => {
 
 		expect(router.push).toHaveBeenCalledTimes(1)
 		expect(router.push).toHaveBeenNthCalledWith(1, {
-			name: 'NewSidebarView',
+			name: 'NewFullView',
 			params: {
 				otherParam: '456',
 				allDay: '1',
@@ -83,7 +83,7 @@ describe('fullcalendar/select test suite', () => {
 
 		expect(router.push).toHaveBeenCalledTimes(1)
 		expect(router.push).toHaveBeenNthCalledWith(1, {
-			name: 'NewSidebarView',
+			name: 'NewFullView',
 			params: {
 				otherParam: '456',
 				allDay: '1',
@@ -125,7 +125,7 @@ describe('fullcalendar/select test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'NewSidebarView',
+			name: 'NewFullView',
 			params: {
 				otherParam: '456',
 				allDay: '1',
@@ -151,7 +151,7 @@ describe('fullcalendar/select test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'NewSidebarView',
+			name: 'NewFullView',
 			params: {
 				otherParam: '456',
 				allDay: '1',
@@ -238,7 +238,7 @@ describe('fullcalendar/select test suite', () => {
 
 		const router = { push: jest.fn() }
 		const route = {
-			name: 'NewSidebarView',
+			name: 'NewFullView',
 			params: {
 				otherParam: '456',
 				allDay: '1',
@@ -257,7 +257,7 @@ describe('fullcalendar/select test suite', () => {
 
 		expect(router.push).toHaveBeenCalledTimes(1)
 		expect(router.push).toHaveBeenNthCalledWith(1, {
-			name: 'NewSidebarView',
+			name: 'NewFullView',
 			params: {
 				otherParam: '456',
 				allDay: '0',