diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
index 17b3b85b7..ed81908fa 100644
--- a/assets/css/opencast.scss
+++ b/assets/css/opencast.scss
@@ -40,6 +40,10 @@ $episode-background: $light-gray-color-20;
     visibility: hidden;
 }
 
+.button.wrap-button {
+    white-space: normal;
+}
+
 /* * * * * * * * * */
 /*   P A G I N G   */
 /* * * * * * * * * */
@@ -123,11 +127,8 @@ $episode-background: $light-gray-color-20;
 .oc--playercontainer {
     background: $episode-background;
     margin-top: 1em;
-    padding-right: 1.5em;
-    z-index: 1999;
     height: $item-height;
-
-   
+    width: 119px;
 
     .oc_playerframe {
         display: block;
@@ -219,31 +220,12 @@ $episode-background: $light-gray-color-20;
     }
 }
 
-.oc--metadata {
-    margin-right: 1em;
-    flex-basis: 100%;
-
-    &-title {
-        margin-top: 10px;
-        margin-bottom: 2px;
-    }
-
-    .tooltip {
-        margin-left: 0.5em;
-    }
-}
-
 .oc--metadata--empty {
     div {
         margin-bottom: 5px;
     }
 }
 
-.oc--metadata-title {
-    border-bottom: none;
-    display: inline-flex;
-}
-
 .oc--metadata-description {
     margin-top: 0.5em;
 }
@@ -294,7 +276,6 @@ $episode-background: $light-gray-color-20;
     }
 }
 
-
 .oc--episode-list--small {
     clear: both;
     padding-left: 0;
@@ -302,55 +283,120 @@ $episode-background: $light-gray-color-20;
     overflow: auto;
     height: auto;
 
-    .oc--flexplaycontainer {
-        width: 10em;
-        min-width: 10em;
-    }
 
-    .oc--flex-episode {
+    .oc--grid-episode {
         border-bottom: 1px solid $light-gray-color-40;
         padding: 5px 1em 5px 1em;
-        display: flex;
         position: relative;
         overflow: hidden;
         max-height: 70px;
 
+        display: grid;
+        grid-template-columns: auto auto minmax(auto, min-content) minmax(min-content,1fr) auto auto;
+
         .oc--playercontainer {
-            margin-top: 5px;
             background-color: transparent;
+            margin-top: 5px;
+            margin-right: 12px;
+
+            grid-column: 2;
+            grid-row: 1 / span 2;
+
+            img.oc--previewimage {
+                max-height: 60px;
+            }
+    
+            .oc--duration{
+                bottom: 0px;
+                right: 0px;
+            }
+    
+            .oc--views {
+                left: 0px;
+                bottom: 0px;
+            }
+    
+            .oc--image-button {
+                height: 40px;
+                opacity: 0.6;
+            }
         }
 
-        img.oc--previewimage {
-            max-height: 60px;
+        .oc--metadata-title {
+            grid-column: 3;
+            grid-row: 1;
+
+            margin: 10px 0 0 0;
+
+            overflow: hidden;
+
+            h2 {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
         }
 
-        .oc--duration{
-            bottom: 0px;
-            right: 0px;
+        .oc--date {
+            grid-column: 4;
+            grid-row: 1;
+
+            margin: 10px 0 0 0;
+
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
 
-        .oc--views {
-            left: 0px;
-            bottom: 0px;
+        .oc--tooltip {
+            grid-column: 5;
+            grid-row: 1;
+
+            .tooltip {
+                margin: 10px 5px 0 5px;
+            }
         }
 
-        .oc--image-button {
-            height: 40px;
+        .oc--tags {
+            grid-column: 3 / span 3;
+            grid-row: 2;
+
+            margin-right: 5px;
+
+            white-space: nowrap;
+            overflow: auto;
         }
 
-        .oc--date {
-            margin-top: 1px;
+        .oc--actions-container {
+            grid-column: 6;
+            grid-row: 1 / span 2;
         }
+    
+        .oc--metadata--empty {
+            grid-column: 3 / span 4;
+            grid-row: 1 / span 2;
 
-        .oc--metadata {
-            h2 {
-                margin-top: 5px;
+            h2, div {
                 margin-bottom: 5px;
             }
         }
+
+        .oc--flex-checkbox {
+            grid-column: 1;
+            grid-row: 1 / span 2;
+        }
     }
 
     .oc--sort-options {
+        grid-column: 6;
+        grid-row: 1 / span 2;
+
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        padding-left: 5px;
+        border-left: 1px solid $light-gray-color-40;
         align-self: center;
         white-space: nowrap;
 
@@ -450,6 +496,7 @@ h2.oc--loadingbar, .oc--loadingbar-title {
 
         display: flex;
         flex-direction: row;
+        overflow: auto;
 
         li {
             padding: none;
@@ -462,6 +509,7 @@ h2.oc--loadingbar, .oc--loadingbar-title {
     .oc--searchbar-input {
         padding: 8px;
         width: 100%;
+        min-width: 8em;
 
         input {
             &:focus {
@@ -661,7 +709,7 @@ h2.oc--loadingbar, .oc--loadingbar-title {
 .oc--admin--server-card-grid {
     margin: 10px 0px;
     display: grid;
-    grid-template-columns: repeat(auto-fit, 405px);
+    grid-template-columns: repeat(auto-fit, minmax(200px, 405px));
     grid-gap: 10px;
 }
 
@@ -840,6 +888,92 @@ label.oc--file-upload {
     }
 }
 
+@media only screen and (max-width: $major-breakpoint-large) {
+    .oc--episode-list--small {
+        grid-template-columns: auto 10em auto auto auto auto;
+        grid-template-rows: auto 1fr auto;
+
+        .oc--grid-episode {
+            max-height: 100px;
+
+            .oc--playercontainer {
+                grid-column: 2;
+                grid-row: 2 / span 2;
+
+                margin-top: 0;
+                padding-right: 11;
+            }
+
+            .oc--metadata-title {
+                grid-column: 2 / span 3;
+                grid-row: 1;
+
+                max-height: 1.4em;
+                margin-top: 4px;
+
+                h2 {
+                    margin-bottom: 0;
+                    overflow: auto;
+                }
+            }
+
+            .oc--date {
+                grid-column: 3 / span 3;
+                grid-row: 2;
+
+                margin-top: 0;
+
+                max-height: 2.8em;
+                white-space: normal;
+                overflow: hidden;
+            }
+
+            .oc--tags {
+                grid-column: 3 / span 3;
+                grid-row: 3;
+
+                max-height: 3em;
+                margin-bottom: 0;
+            }
+
+            .oc--actions-container {
+                grid-column: 6;
+                grid-row: 1 / span 3;
+            }
+
+            .oc--tooltip {
+                grid-column: 5;
+                grid-row: 1;
+
+                .tooltip {
+                    margin: 5px 5px 0 5px;
+                }
+            }
+
+            .oc--metadata--empty {
+                grid-row: 1 / span 3;
+            }
+        }
+    }
+}
+
+.oc--pagination-mobile {
+    @extend .oc--pagination;
+    visibility: hidden;
+    display: none;
+}
+
+@media only screen and (max-width: $major-breakpoint-small) {
+    .oc--pagination {
+        visibility: hidden;
+        display: none;
+    }
+    .oc--pagination-mobile {
+        visibility: visible;
+        display: flex;
+    }
+}
+
 /* * * * * * * * * * * * */
 /*   P L A Y L I S T S   */
 /* * * * * * * * * * * * */
@@ -862,7 +996,7 @@ label.oc--file-upload {
 .oc--tags {
 
     &-video {
-        margin-bottom: 10px;
+        margin-bottom: 8px;
 
         & > span {
             background-color: $light-gray-color-40;
diff --git a/vueapp/components/Config/EditServer.vue b/vueapp/components/Config/EditServer.vue
index ab2c6de27..d12a926a8 100644
--- a/vueapp/components/Config/EditServer.vue
+++ b/vueapp/components/Config/EditServer.vue
@@ -2,7 +2,7 @@
     <div>
         <StudipDialog
             :title="$gettext('Opencast Server Einstellungen')"
-            :confirmText="$gettext('Einstellungen speichern und überprüfen')"
+            :confirmText="$gettext('Speichern')"
             :closeText="$gettext('Schließen')"
             :disabled="disabled"
             height="600"
@@ -27,16 +27,19 @@
                     </fieldset>
 
                     <WorkflowOptions v-if="id != 'new'"/>
+
+                    <button v-if="config !== null"
+                        class="button trash" 
+                        type="button" 
+                        @click="deleteConfig" 
+                        :disabled="disabled"
+                    >
+                        Server entfernen
+                    </button>
                 </form>
 
                 <MessageList :float="true"/>
             </template>
-
-            <template v-slot:dialogButtons>
-                <button class="button trash" type="button" @click="deleteConfig" :disabled="disabled">
-                    Löschen
-                </button>
-            </template>
         </StudipDialog>
     </div>
 </template>
diff --git a/vueapp/components/PaginationButtons.vue b/vueapp/components/PaginationButtons.vue
index 4cf970695..6fc0692ce 100644
--- a/vueapp/components/PaginationButtons.vue
+++ b/vueapp/components/PaginationButtons.vue
@@ -52,6 +52,62 @@
             <option value="50">50</option>
         </select>
     </div>
+
+    <div class="oc--pagination-mobile">
+        <button v-if="paging.lastPage >= 0"
+            v-bind:disabled="paging.currPage <= 0"
+            @click="setPage(0)"
+            class="oc--paging-arrow"
+        >
+            <studip-icon
+                shape="arr_2left" :role="paging.currPage <= 0 ? 'inactive' : 'clickable'"
+            />
+        </button>
+
+        <button v-if="paging.lastPage >= 0"
+            v-bind:disabled="paging.currPage <= 0"
+            @click="setPage(paging.currPage-1)"
+            class="oc--paging-arrow"
+        >
+            <studip-icon
+                shape="arr_1left" :role="paging.currPage <= 0 ? 'inactive' : 'clickable'"
+            />
+        </button>
+
+        <button class="active">
+            {{ paging.currPage+1 }}
+        </button>
+
+        <button v-if="paging.lastPage >= 0"
+            v-bind:disabled="paging.currPage >= paging.lastPage"
+            @click="setPage(paging.currPage + 1)"
+            class="oc--paging-arrow"
+        >
+             <studip-icon
+                shape="arr_1right" :role="paging.currPage >= paging.lastPage ? 'inactive' : 'clickable'"
+            />
+        </button>
+
+        <button v-if="paging.lastPage >= 0"
+            v-bind:disabled="paging.currPage >= paging.lastPage"
+            @click="setPage(paging.lastPage)"
+            class="oc--paging-arrow"
+        >
+             <studip-icon
+                shape="arr_2right" :role="paging.currPage >= paging.lastPage ? 'inactive' : 'clickable'"
+            />
+        </button>
+
+        <select class="oc--pagination--limit"
+            v-model="limit"
+            :title="$gettext('Videos pro Seite')"
+        >
+            <option value="5">5</option>
+            <option value="15">15</option>
+            <option value="30">30</option>
+            <option value="50">50</option>
+        </select>
+    </div>
 </template>
 
 <script>
diff --git a/vueapp/components/Playlists/PlaylistVideos.vue b/vueapp/components/Playlists/PlaylistVideos.vue
index 4a9b017ae..32ed65299 100644
--- a/vueapp/components/Playlists/PlaylistVideos.vue
+++ b/vueapp/components/Playlists/PlaylistVideos.vue
@@ -6,7 +6,7 @@
             <input type="checkbox" :checked="selectAll" @click.stop="toggleAll">
 
             <StudipButton icon="trash" @click.prevent="removeVideosFromPlaylist">
-                {{ $gettext('Videos aus der Wiedergabeliste löschen') }}
+                {{ $gettext('Verknüpfungen aufheben') }}
             </StudipButton>
         </div>
 
diff --git a/vueapp/components/UserPlaylistSelectable.vue b/vueapp/components/UserPlaylistSelectable.vue
index ada45b4bd..67ecabbe4 100644
--- a/vueapp/components/UserPlaylistSelectable.vue
+++ b/vueapp/components/UserPlaylistSelectable.vue
@@ -2,7 +2,7 @@
     <form class="default">
         <fieldset>
             <legend>
-                {{ $gettext('Zu weiterer Wiedergabeliste hinzufügen') }}
+                {{ $gettext('Weitere Wiedergabelisten hinzufügen') }}
             </legend>
 
             <label>
@@ -22,7 +22,7 @@
                 icon="accept"
                 @click.prevent="returnSelectedPlaylist()"
             >
-                {{ $gettext('Video zur Wiedergabeliste hinzufügen') }}
+                {{ $gettext('Zur Wiedergabeliste hinzufügen') }}
             </StudipButton>
         </footer>
     </form>
diff --git a/vueapp/components/Videos/EmptyVideoCard.vue b/vueapp/components/Videos/EmptyVideoCard.vue
index 8b36750c9..b7bcd5181 100644
--- a/vueapp/components/Videos/EmptyVideoCard.vue
+++ b/vueapp/components/Videos/EmptyVideoCard.vue
@@ -1,19 +1,17 @@
 <template>
     <div>
-        <li class="oc--flex-episode">
-            <div class="oc--flexitem oc--flexplaycontainer">
-                <div class="oc--playercontainer">
-                    <a>
-                        <span class="oc--previewimage">
-                            <img class="oc--previewimage" :src="preview" height="200"/>
-                            <img class="oc--play-button" :src="play">
-                        </span>
-                    </a>
-                </div>
+        <li class="oc--grid-episode">
+            <div class="oc--playercontainer">
+                <a>
+                    <span class="oc--previewimage">
+                        <img class="oc--previewimage" :src="preview" height="200"/>
+                        <img class="oc--image-button oc--play-button" :src="play">
+                    </span>
+                </a>
             </div>
-            <div class="oc--metadata oc--metadata--empty">
+            <div class="oc--metadata--empty">
                 <div>
-                    <h2 class="oc--metadata-title oc--loadingbar">
+                    <h2 class="oc--loadingbar">
 
                     </h2>
                     <div class="oc--loadingbar" style="width: 350px;"></div>
diff --git a/vueapp/components/Videos/VideoCard.vue b/vueapp/components/Videos/VideoCard.vue
index 2effb7d43..9e7fc0d08 100644
--- a/vueapp/components/Videos/VideoCard.vue
+++ b/vueapp/components/Videos/VideoCard.vue
@@ -1,93 +1,79 @@
 <template>
     <div name="oc--episode">
-        <li v-if="event.refresh === undefined" :key="event.id" class="oc--flex-episode">
+        <li v-if="event.refresh === undefined" :key="event.id" class="oc--grid-episode">
             <div class="oc--flex-checkbox" v-if="playlistForVideos || playlistMode || isCourse">
                 <input type="checkbox" :checked="isChecked" @click.stop="toggleVideo">
             </div>
 
-            <div class="oc--flexitem oc--flexplaycontainer">
-                <div class="oc--playercontainer">
-                    <a v-if="event.publication && event.preview && event.available"
-                        @click="redirectAction(`/video/` + event.token)" target="_blank"
-                    >
-                        <span class="oc--previewimage">
-                            <img class="oc--previewimage"
-                                :src="event.preview.player ? event.preview.player : event.preview.search"
-                                @error="setDefaultImage(event)"
-                                height="200"
-                                :ref="event.id"
-                            />
-                            <studip-icon class="oc--image-button oc--play-button" shape="play" role="info_alt"></studip-icon>
-                            <span class="oc--views">
-                                <studip-icon shape="visibility-visible" role="info_alt"></studip-icon>
-                                {{ event.views }}
-                            </span>
-                            <span class="oc--duration">
-                                {{ getDuration }}
-                            </span>
+            <div class="oc--playercontainer">
+                <a v-if="event.publication && event.preview && event.available"
+                    @click="redirectAction(`/video/` + event.token)" target="_blank"
+                >
+                    <span class="oc--previewimage">
+                        <img class="oc--previewimage"
+                            :src="event.preview.player ? event.preview.player : event.preview.search"
+                            @error="setDefaultImage(event)"
+                            height="200"
+                            :ref="event.id"
+                        />
+                        <studip-icon class="oc--image-button oc--play-button" shape="play" role="info_alt"></studip-icon>
+                        <span class="oc--views">
+                            <studip-icon shape="visibility-visible" role="info_alt"></studip-icon>
+                            {{ event.views }}
                         </span>
-                    </a>
-                    <span v-else-if="!event.available" class="oc--unavailable">
-                        {{ $gettext("Video nicht verfügbar") }}
-                    </span>
-                    <a v-else-if="event.state == 'cutting'"
-                        @click="redirectAction(`/editor/` + event.token)"
-                        :title="$gettext('Dieses Video wartet auf den Schnitt. Hier gelangen sie direkt zum Schnitteditor!')"
-                    >
-                        <span class="oc--previewimage">
-                            <img class="oc--image-button" :src="cut">
+                        <span class="oc--duration">
+                            {{ getDuration }}
                         </span>
-                    </a>
-                    <span v-else-if="event.state == 'running'" class="oc--previewimage"
-                        :title="$gettext('Dieses Videos wird gerade von Opencast bearbeitet.')"
-                    >
-                        <studip-icon class="oc--image-button" shape="admin" role="status-yellow"></studip-icon>
-                    </span>
-                    <span v-else-if="event.state == 'failed'" class="oc--previewimage"
-                        :title="$gettext('Dieses Video hatte einen Verarbeitungsfehler. Bitte wenden sie sich an den Support!')"
-                    >
-                        <studip-icon class="oc--image-button" shape="exclaim" role="status-red"></studip-icon>
                     </span>
-                    <span v-else class="oc--previewimage">
-                        <img class="oc--previewimage" :src="preview" height="200"/>
-                        <!-- <p>No video uploaded</p> -->
+                </a>
+                <span v-else-if="!event.available" class="oc--unavailable">
+                    {{ $gettext("Video nicht verfügbar") }}
+                </span>
+                <a v-else-if="event.state == 'cutting'"
+                    @click="redirectAction(`/editor/` + event.token)"
+                    :title="$gettext('Dieses Video wartet auf den Schnitt. Hier gelangen sie direkt zum Schnitteditor!')"
+                >
+                    <span class="oc--previewimage">
+                        <img class="oc--image-button" :src="cut">
                     </span>
-                </div>
+                </a>
+                <span v-else-if="event.state == 'running'" class="oc--previewimage"
+                    :title="$gettext('Dieses Videos wird gerade von Opencast bearbeitet.')"
+                >
+                    <studip-icon class="oc--image-button" shape="admin" role="status-yellow"></studip-icon>
+                </span>
+                <span v-else-if="event.state == 'failed'" class="oc--previewimage"
+                    :title="$gettext('Dieses Video hatte einen Verarbeitungsfehler. Bitte wenden sie sich an den Support!')"
+                >
+                    <studip-icon class="oc--image-button" shape="exclaim" role="status-red"></studip-icon>
+                </span>
+                <span v-else class="oc--previewimage">
+                    <img class="oc--previewimage" :src="preview" height="200"/>
+                    <!-- <p>No video uploaded</p> -->
+                </span>
+            </div>
+
+            <div class="oc--metadata-title">
+                <h2>
+                    {{event.title}}
+                </h2>
             </div>
 
-            <div class="oc--metadata" :key="event.id">
-                <div>
-                    <div class="oc--metadata-title">
-                        <h2>
-                            {{event.title}}
-                        </h2>
-                        <div v-if="event.created && $filters.datetime(event.created)" class="oc--date">
-                            &nbsp;- {{ $filters.datetime(event.created) }} Uhr
-                        </div>
-                    </div>
-                    <div data-tooltip class="tooltip" v-if="getInfoText">
-                        <span class="tooltip-content" v-html="getInfoText"></span>
-                        <studip-icon shape="info-circle" role="active" :size="18"></studip-icon>
-                    </div>
-                    <div class="oc--tags oc--tags-video">
-                        <Tag v-for="tag in event.tags" v-bind:key="tag.id" :tag="tag.tag" />
-                    </div>
-                    <!--
-                    <div v-if="event.contributors">
-                        {{ event.author }} -
-                        {{ $gettext('Mitwirkende:') }}
-                        {{ event.contributors }}
-                    </div>
-                    <div v-else>
-                        {{ event.author }}
-                    </div>
-
-                    <div class="oc--metadata-description">
-                        {{ event.description }}
-                    </div>
-                    -->
+            <div v-if="event.created && $filters.datetime(event.created)" class="oc--date">
+                &nbsp;- {{ $filters.datetime(event.created) }} Uhr
+            </div>
+
+            <div class="oc--tooltip">
+                <div data-tooltip class="tooltip" v-if="getInfoText">
+                    <span class="tooltip-content" v-html="getInfoText"></span>
+                    <studip-icon shape="info-circle" role="active" :size="18"></studip-icon>
                 </div>
             </div>
+
+            <div class="oc--tags oc--tags-video">
+                <Tag v-for="tag in event.tags" v-bind:key="tag.id" :tag="tag.tag" />
+            </div>
+
             <div v-if="!playlistMode && menuItems.length > 0 && event.state != 'running'" class="oc--actions-container">
                 <StudipActionMenu :items="menuItems"
                     :collapseAt="menuItems.length > 1"
@@ -96,14 +82,18 @@
                 />
             </div>
 
-            <div v-if="playlistMode" class="oc--sort-options">
+            <div v-if="playlistMode && videoSortMode" class="oc--sort-options">
                 <studip-icon
+                    :style="{visibility: canMoveUp ? 'visible' : 'hidden'}"
                     shape="arr_2up" role="navigation"
-                    :hidden="!canMoveUp" @click="$emit('moveUp', event.token)" :title="$gettext('Element nach oben verschieben')"
+                    @click="$emit('moveUp', event.token)" 
+                    :title="$gettext('Element nach oben verschieben')"
                 />
                 <studip-icon
+                    :style="{visibility: canMoveDown ? 'visible' : 'hidden'}"
                     shape="arr_2down" role="navigation"
-                    :hidden="!canMoveDown" @click="$emit('moveDown', event.token)" :title="$gettext('Element nach unten verschieben')"
+                    @click="$emit('moveDown', event.token)" 
+                    :title="$gettext('Element nach unten verschieben')"
                 />
             </div>
         </li>
@@ -202,6 +192,7 @@ export default {
             'playlist',
             'playlists',
             'downloadSetting',
+            "videoSortMode",
         ]),
 
         downloadAllowed() {
diff --git a/vueapp/components/Videos/VideoUpload.vue b/vueapp/components/Videos/VideoUpload.vue
index cc8136555..c3a32c1f6 100644
--- a/vueapp/components/Videos/VideoUpload.vue
+++ b/vueapp/components/Videos/VideoUpload.vue
@@ -117,7 +117,7 @@
 
                         <div v-if="!files['presenter/source'].length && !uploadProgress">
                             <label class="oc--file-upload">
-                                <StudipButton icon="accept" @click.prevent="chooseFiles('oc-file-presenter')">
+                                <StudipButton class="wrap-button" icon="accept" @click.prevent="chooseFiles('oc-file-presenter')">
                                     {{ $gettext('Aufzeichnung des/der Vortragende*n hinzufügen') }}
                                 </StudipButton>
                                 <input type="file" class="video_upload" data-flavor="presenter/source"
@@ -144,7 +144,7 @@
 
                         <div v-if="!files['presentation/source'].length && !uploadProgress">
                             <label class="oc--file-upload">
-                                <StudipButton icon="accept"  @click.prevent="chooseFiles('oc-file-presentation')">
+                                <StudipButton class="wrap-button" icon="accept"  @click.prevent="chooseFiles('oc-file-presentation')">
                                     {{ $gettext('Aufzeichnung der Folien hinzufügen') }}
                                 </StudipButton>
                                 <input type="file" class="video_upload" data-flavor="presentation/source"
diff --git a/vueapp/components/Videos/VideosList.vue b/vueapp/components/Videos/VideosList.vue
index 54fc9e39d..3b2d1a4b5 100644
--- a/vueapp/components/Videos/VideosList.vue
+++ b/vueapp/components/Videos/VideosList.vue
@@ -15,7 +15,7 @@
         <PaginationButtons @changePage="changePage"/>
 
         <div v-if="isCourse && playlist && canEdit">
-            <StudipButton
+            <StudipButton class="wrap-button"
                 v-if="playlist.is_default != '1'"
                 @click.prevent="removePlaylistFromCourse(playlist.token, cid)"
             >