diff --git a/client/src/app/shared/components/sorting-list/sorting-list.component.html b/client/src/app/shared/components/sorting-list/sorting-list.component.html
index a26cfc724..84a8259b8 100644
--- a/client/src/app/shared/components/sorting-list/sorting-list.component.html
+++ b/client/src/app/shared/components/sorting-list/sorting-list.component.html
@@ -1,5 +1,5 @@
 <div cdkDropList class="os-card" (cdkDropListDropped)="drop($event)">
-    <div class= "box line" *ngIf="!array.length">
+    <div class="box line" *ngIf="!array.length">
         <span translate>No data</span>
     </div>
     <div class="box line" *ngFor="let item of array; let i = index" cdkDrag>
diff --git a/client/src/app/shared/components/sorting-list/sorting-list.component.scss b/client/src/app/shared/components/sorting-list/sorting-list.component.scss
index 3eb0fc8bf..af2500602 100644
--- a/client/src/app/shared/components/sorting-list/sorting-list.component.scss
+++ b/client/src/app/shared/components/sorting-list/sorting-list.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../assets/styles/drag.scss';
+
 .box {
     width: 100%;
     border-bottom: solid 1px #ccc;
@@ -5,21 +7,6 @@
     font-size: 14px;
 }
 
-.cdk-drag-preview {
-    box-sizing: border-box;
-    border-radius: 4px;
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
-        0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-placeholder {
-    opacity: 0;
-}
-
-.cdk-drag-animating {
-    transition: transform 125ms ease-in-out;
-}
-
 .box:last-child {
     border: none;
 }
diff --git a/client/src/app/site/projector/components/projector-detail/projector-detail.component.html b/client/src/app/site/projector/components/projector-detail/projector-detail.component.html
index 9a6f74e74..bd574f893 100644
--- a/client/src/app/site/projector/components/projector-detail/projector-detail.component.html
+++ b/client/src/app/site/projector/components/projector-detail/projector-detail.component.html
@@ -12,56 +12,65 @@
                 <os-projector [projector]="projector"></os-projector>
             </div>
         </a>
-    </div>
-    <div class="column-right" *osPerms="'core.can_manage_projector'">
-        <div class="control-group">
-            <div class="button-size">{{ projector.scroll }}</div>
-            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
-                <mat-icon>arrow_upward</mat-icon>
+        <!-- Controls under the projector preview -->
+        <div class="control-group projector-controls">
+            <!-- scaling indicator -->
+            <div class="button-size">{{ projector.scale }}</div>
+
+            <!-- scale up -->
+            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
+                <mat-icon>zoom_in</mat-icon>
             </button>
+
+            <!-- scale down -->
+            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
+                <mat-icon>zoom_out</mat-icon>
+            </button>
+
+            <!-- scroll indicator -->
+            <div class="button-size">{{ projector.scroll }}</div>
+
+            <!-- scroll down -->
             <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Down)">
                 <mat-icon>arrow_downward</mat-icon>
             </button>
+
+            <!-- scroll up -->
+            <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Up)">
+                <mat-icon>arrow_upward</mat-icon>
+            </button>
+
+            <!-- refresh button -->
             <button type="button" mat-icon-button (click)="scroll(scrollScaleDirection.Reset)">
                 <mat-icon>refresh</mat-icon>
             </button>
         </div>
-        <div class="control-group">
-            <div class="button-size">{{ projector.scale }}</div>
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Up)">
-                <mat-icon>zoom_in</mat-icon>
-            </button>
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Down)">
-                <mat-icon>zoom_out</mat-icon>
-            </button>
-            <button type="button" mat-icon-button (click)="scale(scrollScaleDirection.Reset)">
-                <mat-icon>refresh</mat-icon>
-            </button>
-        </div>
-        <hr>
-        <div class="control-group">
-            <button type="button" mat-button (click)="projectPreviousSlide()" [disabled]="projector?.elements_history.length === 0">
+    </div>
+    <div class="column-right" *osPerms="'core.can_manage_projector'">
+        <div class="control-group slide-controls">
+            <button
+                type="button"
+                mat-button
+                (click)="projectPreviousSlide()"
+                [disabled]="projector?.elements_history.length === 0"
+            >
                 <mat-icon>arrow_back</mat-icon>
                 <span translate>Previous</span>
             </button>
-            <button type="button" mat-button (click)="projectNextSlide()" [disabled]="projector?.elements_preview.length === 0">
+            <button
+                type="button"
+                mat-button
+                (click)="projectNextSlide()"
+                [disabled]="projector?.elements_preview.length === 0"
+            >
                 <span translate>Next</span>
                 <mat-icon>arrow_forward</mat-icon>
             </button>
-        </div>
-
-        <div class="queue" *ngIf="projector.elements_history.length">
-            <h5 translate>History</h5>
-            <p *ngFor="let elements of projector.elements_history">
-                {{ getSlideTitle(elements[0]) }}
-            </p>
+            <hr />
         </div>
 
         <div>
-            <h5 translate>Current</h5>
-
             <div *ngIf="projector.non_stable_elements.length">
-                <h4 translate>Slides</h4>
                 <mat-list>
                     <mat-list-item *ngFor="let element of projector.non_stable_elements" class="projected">
                         <button type="button" mat-icon-button (click)="unprojectCurrent(element)">
@@ -72,99 +81,142 @@
                 </mat-list>
             </div>
 
-            <div *ngIf="countdowns.length">
-                <h4>
-                    <span translate>Countdowns</span>
-                    <button type="button" mat-icon-button disableRipple routerLink="/projectors/countdowns">
-                        <mat-icon>edit</mat-icon>
-                    </button>
-                </h4>
-                <mat-list>
-                    <mat-list-item *ngFor="let countdown of countdowns" [ngClass]="{'projected': isProjected(countdown)}">
-                        <button type="button" mat-icon-button (click)="project(countdown)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        {{ countdown.description }}
-                    </mat-list-item>
-                </mat-list>
-            </div>
+            <!-- Expandable elements -->
+            <mat-accordion multi="true">
+                <!-- Queue -->
+                <mat-expansion-panel *ngIf="projector.elements_preview.length" [expanded]="true">
+                    <mat-expansion-panel-header>
+                        <span translate>Queue</span>
+                    </mat-expansion-panel-header>
 
-            <div *ngIf="messages.length">
-                <h4>
-                    <span translate>Messages</span>
-                    <button type="button" mat-icon-button disableRipple routerLink="/projectors/messages">
-                        <mat-icon>edit</mat-icon>
-                    </button>
-                </h4>
-                <mat-list>
-                    <mat-list-item *ngFor="let message of messages"  [ngClass]="{'projected': isProjected(message)}">
-                        <button type="button" mat-icon-button (click)="project(message)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        <span>{{ message.getPreview(40) }}</span>
-                    </mat-list-item>
-                </mat-list>
-            </div>
-
-            <div>
-                <h4>Current list of speakers overlay</h4>
-                <mat-list>
-                    <mat-list-item [ngClass]="{'projected': isClosProjected(true)}">
-                        <button type="button" mat-icon-button (click)="toggleClos(true)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        <span translate>Current list of speakers overlay</span>
-                    </mat-list-item>
-                </mat-list>
-            </div>
-
-            <div *ngIf="!isClosProjected(false)">
-                <h4>Current list of speakers slide</h4>
-                <mat-list>
-                    <mat-list-item>
-                        <button type="button" mat-icon-button (click)="toggleClos(false)">
-                            <mat-icon>videocam</mat-icon>
-                        </button>
-                        <span translate>Current list of speakers slide</span>
-                    </mat-list-item>
-                </mat-list>
-            </div>
-        </div>
-
-        <div>
-            <h4>Current speaker chyron</h4>
-            <mat-list>
-                <mat-list-item [ngClass]="{'projected': isChyronProjected()}">
-                    <button type="button" mat-icon-button (click)="toggleChyron()">
-                        <mat-icon>videocam</mat-icon>
-                    </button>
-                    <span translate>Current speaker chyron</span>
-                </mat-list-item>
-            </mat-list>
-        </div>
-
-        <div class="queue" *ngIf="projector.elements_preview.length">
-            <h5 translate>Queue</h5>
-            <div cdkDropList class="drop-list" (cdkDropListDropped)="onSortingChange($event)">
-                <div class="list-entry" *ngFor="let element of projector.elements_preview; let i = index" cdkDrag>
-                    <div class="drag-handle" cdkDragHandle>
-                        <mat-icon>drag_indicator</mat-icon>
-                    </div>
-                    <div class="name">
-                        {{ i+1 }}.&nbsp;<span>{{ getSlideTitle(element) }}</span>
-                    </div>
-                    <div class="button-right">
-                        <div>
-                            <button type="button" mat-button (click)="projectNow(i)">
-                                <span translate>Project now</span>
-                            </button>
-                            <button type="button" mat-icon-button (click)="removePreviewElement(i)">
-                                <mat-icon>close</mat-icon>
-                            </button>
+                    <div
+                        cdkDropList
+                        class="drop-list"
+                        [cdkDropListDisabled]="!editQueue"
+                        (cdkDropListDropped)="onSortingChange($event)"
+                    >
+                        <div
+                            class="drop-list-entry"
+                            *ngFor="let element of projector.elements_preview; let i = index"
+                            cdkDrag
+                        >
+                            <div class="drag-handle" cdkDragHandle *ngIf="editQueue">
+                                <mat-icon>drag_indicator</mat-icon>
+                            </div>
+                            <div class="drag-handle" *ngIf="!editQueue">
+                                <button type="button" mat-mini-fab (click)="projectNow(i)">
+                                    <mat-icon>videocam</mat-icon>
+                                </button>
+                            </div>
+                            <div class="name">
+                                {{ i + 1 }}.&nbsp;<span>{{ getSlideTitle(element) }}</span>
+                            </div>
+                            <div class="button-right" *ngIf="editQueue">
+                                <div>
+                                    <button type="button" mat-icon-button (click)="removePreviewElement(i)">
+                                        <mat-icon>close</mat-icon>
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
-                </div>
-            </div>
+                    <mat-action-row>
+                        <button type="button" mat-icon-button (click)="editQueue = !editQueue">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </mat-action-row>
+                </mat-expansion-panel>
+
+                <!-- Previous Slides -->
+                <mat-expansion-panel *ngIf="projector.elements_history.length">
+                    <mat-expansion-panel-header>
+                        <span translate>History</span>
+                    </mat-expansion-panel-header>
+                    <p *ngFor="let elements of projector.elements_history; let i = index">
+                        {{ i + 1 }}. {{ getSlideTitle(elements[0]) }}
+                    </p>
+                </mat-expansion-panel>
+
+                <!-- countdowns -->
+                <mat-expansion-panel *ngIf="countdowns.length">
+                    <mat-expansion-panel-header>
+                        <span translate>Countdowns</span>
+                    </mat-expansion-panel-header>
+                    <mat-list>
+                        <mat-list-item
+                            *ngFor="let countdown of countdowns"
+                            [ngClass]="{ projected: isProjected(countdown) }"
+                        >
+                            <button type="button" mat-icon-button (click)="project(countdown)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            {{ countdown.description }}
+                        </mat-list-item>
+                    </mat-list>
+                    <mat-action-row>
+                        <button type="button" mat-icon-button routerLink="/projectors/countdowns">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </mat-action-row>
+                </mat-expansion-panel>
+
+                <!-- messages -->
+                <mat-expansion-panel *ngIf="messages.length">
+                    <mat-expansion-panel-header>
+                        <span translate>Messages</span>
+                    </mat-expansion-panel-header>
+                    <mat-list>
+                        <mat-list-item *ngFor="let message of messages" [ngClass]="{ projected: isProjected(message) }">
+                            <button type="button" mat-icon-button (click)="project(message)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span>{{ message.getPreview(40) }}</span>
+                        </mat-list-item>
+                    </mat-list>
+                    <mat-action-row>
+                        <button type="button" mat-icon-button routerLink="/projectors/messages">
+                            <mat-icon>edit</mat-icon>
+                        </button>
+                    </mat-action-row>
+                </mat-expansion-panel>
+
+                <!-- Current List of Speakers -->
+                <mat-expansion-panel>
+                    <mat-expansion-panel-header>
+                        <span translate>Current list of speakers</span>
+                    </mat-expansion-panel-header>
+
+                    <!-- Overlay -->
+                    <mat-list>
+                        <mat-list-item [ngClass]="{ projected: isClosProjected(true) }">
+                            <button type="button" mat-icon-button (click)="toggleClos(true)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span translate>Current list of speakers overlay</span>
+                        </mat-list-item>
+                    </mat-list>
+
+                    <!-- Current Speaker -->
+                    <mat-list *ngIf="!isClosProjected(false)">
+                        <mat-list-item>
+                            <button type="button" mat-icon-button (click)="toggleClos(false)">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span translate>Current list of speakers slide</span>
+                        </mat-list-item>
+                    </mat-list>
+
+                    <!-- Chyron -->
+                    <mat-list>
+                        <mat-list-item [ngClass]="{ projected: isChyronProjected() }">
+                            <button type="button" mat-icon-button (click)="toggleChyron()">
+                                <mat-icon>videocam</mat-icon>
+                            </button>
+                            <span translate>Current speaker chyron</span>
+                        </mat-list-item>
+                    </mat-list>
+                </mat-expansion-panel>
+            </mat-accordion>
         </div>
     </div>
 </div>
diff --git a/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss b/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
index 4c029feee..edaa9456c 100644
--- a/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
+++ b/client/src/app/site/projector/components/projector-detail/projector-detail.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../assets/styles/drag.scss';
+
 #projector {
     width: 100%; /*1000px;*/
     border: 1px solid lightgrey;
@@ -25,8 +27,7 @@
 }
 
 .control-group {
-    text-align: center;
-    color: rgba(0, 0, 0, 0.54);
+    color: rgba(0, 0, 0, 0.5);
 
     .button-size {
         width: 40px;
@@ -34,64 +35,60 @@
     }
 }
 
-h4 {
-    margin-top: 5px;
+.slide-controls {
+    text-align: center;
+}
 
-    button {
-        width: 20px;
-        height: 20px;
+.projector-controls {
+    text-align: right;
+}
+
+.drop-list {
+    width: 100%;
+    display: block;
+    overflow: hidden;
+}
+
+.drop-list-entry {
+    display: table;
+    min-height: 50px;
+    width: 100%;
+    border-bottom: solid 1px #ccc;
+    color: rgba(0, 0, 0, 0.87);
+
+    .drag-handle {
+        display: table-cell;
+        padding: 0 10px;
+        line-height: 0px;
+        vertical-align: middle;
+        width: 25px;
+        color: slategrey;
+        cursor: move;
     }
-}
 
-h5 {
-    margin-bottom: 0;
-}
+    .name {
+        display: table-cell;
+        vertical-align: middle;
+    }
 
-.queue {
-    margin-top: 15px;
+    .button-right {
+        display: table-cell;
+        padding-right: 10px;
+        vertical-align: middle;
+        width: auto;
+        white-space: nowrap;
 
-    .drop-list {
-        width: 100%;
-        display: block;
-        overflow: hidden;
-
-        .list-entry {
-            display: table;
-            min-height: 50px;
-            width: 100%;
-            border-bottom: solid 1px #ccc;
-            color: rgba(0, 0, 0, 0.87);
-
-            .drag-handle {
-                display: table-cell;
-                padding: 0 10px;
-                line-height: 0px;
-                vertical-align: middle;
-                width: 25px;
-                color: slategrey;
-                cursor: move;
-            }
-
-            .name {
-                display: table-cell;
-                vertical-align: middle;
-            }
-
-            .button-right {
-                display: table-cell;
-                padding-right: 10px;
-                vertical-align: middle;
-                width: auto;
-                white-space: nowrap;
-
-                div {
-                    float: right;
-                }
-            }
-        }
-
-        .list-entry:last-child {
-            border: none;
+        div {
+            float: right;
         }
     }
 }
+
+.drop-list-entry:last-child {
+    border: none;
+}
+
+// move away from preview.
+.drop-list.cdk-drop-list-dragging .drop-list-entry:not(.cdk-drag-placeholder) {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
diff --git a/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts b/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
index ee07e2215..de2a25e7b 100644
--- a/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
+++ b/client/src/app/site/projector/components/projector-detail/projector-detail.component.ts
@@ -43,6 +43,11 @@ export class ProjectorDetailComponent extends BaseViewComponent implements OnIni
 
     public messages: ViewProjectorMessage[] = [];
 
+    /**
+     * true if the queue might be altered
+     */
+    public editQueue = false;
+
     /**
      * @param titleService
      * @param translate
diff --git a/client/src/assets/styles/drag.scss b/client/src/assets/styles/drag.scss
new file mode 100644
index 000000000..cddb5f38d
--- /dev/null
+++ b/client/src/assets/styles/drag.scss
@@ -0,0 +1,29 @@
+//shared CSS rules that are required for all components that implement drag and drop
+/**
+ * Moving list entries away from preview cannot be stored in this scss file, cause the naming
+ * of the css classes is relevant. Use it like the following.
+ *
+ * transform can somehow not be stored as css variable
+ *
+ * @example
+ * ```css
+ * .drop-list.cdk-drop-list-dragging .list-entry:not(.cdk-drag-placeholder) {
+ *     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+ * }
+ */
+
+.cdk-drag-preview {
+    box-sizing: border-box;
+    border-radius: 4px;
+    background-color: white;
+    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14),
+        0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+    opacity: 0;
+}
+
+.cdk-drag-animating {
+    transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}