diff --git a/components/PlayerControl.vue b/components/PlayerControl.vue
index 09a45046..3b9b6570 100644
--- a/components/PlayerControl.vue
+++ b/components/PlayerControl.vue
@@ -2,8 +2,8 @@
     <div class="w-full">
         <div class="grid grid-cols-1 md:grid-cols-[auto_512px] xl:grid-cols-[512px_auto_450px]">
             <div class="order-1 p-1">
-                <div class="bg-base-100 w-full h-full rounded shadow">
-                    <div class="w-full h-full p-2">
+                <div class="bg-base-100 w-full h-full rounded shadow flex items-center p-2">
+                    <div class="w-full aspect-video">
                         <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
                         <VideoPlayer
                             v-else-if="configStore.configGui[configStore.configID]"
@@ -58,7 +58,11 @@
                                 class="h-1/3 font-bold text truncate"
                                 :title="playlistStore.currentClipTitle || filename(playlistStore.currentClip)"
                             >
-                                {{ playlistStore.currentClipTitle || filename(playlistStore.currentClip) || $t('control.noClip') }}
+                                {{
+                                    playlistStore.currentClipTitle ||
+                                    filename(playlistStore.currentClip) ||
+                                    $t('control.noClip')
+                                }}
                             </div>
                             <div class="grow">
                                 <strong>{{ $t('player.duration') }}:</strong>
diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue
index 3514603b..02d3cb04 100644
--- a/components/PlaylistTable.vue
+++ b/components/PlaylistTable.vue
@@ -20,7 +20,7 @@
                             {{ $t('player.file') }}
                         </div>
                     </th>
-                    <th class="w-[90px] p-0 text-center">
+                    <th class="w-[85px] p-0 text-center">
                         <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
                             {{ $t('player.play') }}
                         </div>
@@ -45,7 +45,7 @@
                             {{ $t('player.ad') }}
                         </div>
                     </th>
-                    <th class="w-[95px] p-0 text-center">
+                    <th class="w-[85px] p-0 text-center">
                         <div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
                             {{ $t('player.edit') }}
                         </div>
@@ -76,9 +76,7 @@
                         class="draggable border-t border-b border-base-content/20 duration-1000 transition-all"
                         :class="{
                             '!bg-lime-500/30':
-                                playlistStore.playoutIsRunning &&
-                                listDate === todayDate &&
-                                index === currentClipIndex,
+                                playlistStore.playoutIsRunning && listDate === todayDate && index === currentClipIndex,
                             '!bg-amber-600/40': element.overtime,
                         }"
                     >
@@ -185,7 +183,7 @@ function scrollTo(index: number) {
 
 function classSwitcher() {
     if (playlistStore.playlist.length === 0) {
-        sortContainer.value.sortable.el.classList.add('is-empty')
+        sortContainer.value?.sortable.el.classList.add('is-empty')
     } else {
         const lastItem = playlistStore.playlist[playlistStore.playlist.length - 1]
 
@@ -193,11 +191,11 @@ function classSwitcher() {
             configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec >
             lastItem.begin + lastItem.out - lastItem.in
         ) {
-            sortContainer.value.sortable.el.classList.add('add-space')
+            sortContainer.value?.sortable.el.classList.add('add-space')
         } else {
-            sortContainer.value.sortable.el.classList.remove('add-space')
+            sortContainer.value?.sortable.el.classList.remove('add-space')
         }
-        sortContainer.value.sortable.el.classList.remove('is-empty')
+        sortContainer.value?.sortable.el.classList.remove('is-empty')
     }
 }
 
@@ -207,7 +205,7 @@ async function getPlaylist() {
     playlistStore.isLoading = false
 
     if (listDate.value === todayDate.value) {
-        await until(currentClipIndex).toMatch(v => v > 0, { timeout: 1500 })
+        await until(currentClipIndex).toMatch((v) => v > 0, { timeout: 1500 })
         scrollTo(currentClipIndex.value)
     } else {
         scrollTo(0)
@@ -324,7 +322,15 @@ function deletePlaylistItem(index: number) {
     padding-bottom: 0.5rem;
 }
 
-#playlist-container .sortable-ghost td:nth-last-child(-n + 5) {
+#playlist-container .sortable-ghost td:nth-last-child(3) {
     display: table-cell !important;
 }
+
+@media (min-width: 1280px) {
+    #playlist-container .sortable-ghost td:nth-last-child(5),
+    #playlist-container .sortable-ghost td:nth-last-child(4),
+    #playlist-container .sortable-ghost td:nth-last-child(-n + 2) {
+        display: table-cell !important;
+    }
+}
 </style>
diff --git a/pages/media.vue b/pages/media.vue
index b39df865..42cc0e3d 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -48,7 +48,7 @@
                                             class="grid grid-cols-[auto_30px] border-b border-base-content/20"
                                             :class="
                                                 filename(mediaStore.folderTree.source) === folder.name &&
-                                                'bg-base-300 rounded'
+                                                '!bg-secondary text-black'
                                             "
                                             @drop="handleDrop($event, folder, true)"
                                             @dragover="handleDragOver"