diff --git a/.gitignore b/.gitignore
index cbfbafb4..af03af5c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,8 +29,6 @@ tv-media/
 Videos
 Videos/
 *.tar*
-.vscode
-.vscode/
 home
 home/
 live1
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..432ea387
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "eslint.experimental.useFlatConfig": true,
+}
diff --git a/app.vue b/app.vue
index dbb45e44..548ef22f 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,7 @@
 <template>
-  <div>
-      <NuxtLayout>
-          <NuxtPage />
-      </NuxtLayout>
-  </div>
+    <div>
+        <NuxtLayout>
+            <NuxtPage />
+        </NuxtLayout>
+    </div>
 </template>
diff --git a/components/ConfigGui.vue b/components/ConfigGui.vue
index 070cb34f..e441b5e7 100644
--- a/components/ConfigGui.vue
+++ b/components/ConfigGui.vue
@@ -18,7 +18,7 @@
                     type="text"
                     placeholder="Type here"
                     class="input input-bordered w-full"
-                >
+                />
             </label>
 
             <label class="form-control w-full mt-5">
@@ -29,7 +29,7 @@
                     v-model="configStore.configGui[configStore.configID].preview_url"
                     type="text"
                     class="input input-bordered w-full"
-                >
+                />
             </label>
 
             <label class="form-control w-full mt-5">
@@ -40,7 +40,7 @@
                     v-model="configStore.configGui[configStore.configID].config_path"
                     type="text"
                     class="input input-bordered w-full"
-                >
+                />
             </label>
 
             <label class="form-control w-full mt-5">
@@ -51,7 +51,7 @@
                     v-model="configStore.configGui[configStore.configID].extra_extensions"
                     type="text"
                     class="input input-bordered w-full"
-                >
+                />
             </label>
 
             <label class="form-control w-full mt-5">
@@ -63,7 +63,7 @@
                     type="text"
                     class="input input-bordered w-full !bg-base-100"
                     disabled
-                >
+                />
             </label>
 
             <div class="join my-4">
diff --git a/components/ConfigPlayout.vue b/components/ConfigPlayout.vue
index 401e533a..db3a4ada 100644
--- a/components/ConfigPlayout.vue
+++ b/components/ConfigPlayout.vue
@@ -2,11 +2,11 @@
     <div class="max-w-[1200px] pe-8">
         <h2 class="pt-3 text-3xl">{{ $t('config.playoutConf') }}</h2>
         <form
-            v-if="configStore.configPlayout"
+            v-if="configStore.playout"
             class="mt-10 grid md:grid-cols-[180px_auto] gap-5"
             @submit.prevent="onSubmitPlayout"
         >
-            <template v-for="(item, key) in configStore.configPlayout" :key="key">
+            <template v-for="(item, key) in configStore.playout" :key="key">
                 <div class="text-xl pt-3 text-right">{{ setTitle(key.toString()) }}:</div>
                 <div class="md:pt-4">
                     <label
@@ -15,63 +15,65 @@
                         class="form-control w-full"
                         :class="[typeof prop === 'boolean' && 'flex-row', name.toString() !== 'help_text' && 'mt-2']"
                     >
-                        <div v-if="name.toString() !== 'help_text'" class="label">
-                            <span class="label-text !text-md font-bold">{{ name }}</span>
-                        </div>
-                        <div v-if="name.toString() === 'help_text'" class="whitespace-pre-line">
-                            {{ setHelp(key.toString(), prop) }}
-                        </div>
-                        <input
-                            v-else-if="name.toString() === 'sender_pass'"
-                            v-model="item[name]"
-                            type="password"
-                            :placeholder="$t('config.placeholderPass')"
-                            class="input input-sm input-bordered w-full"
-                        >
-                        <textarea
-                            v-else-if="name.toString() === 'output_param' || name.toString() === 'custom_filter'"
-                            v-model="item[name]"
-                            class="textarea textarea-bordered"
-                            rows="3"
-                        />
-                        <input
-                            v-else-if="typeof prop === 'number' && prop % 1 === 0"
-                            v-model="item[name]"
-                            type="number"
-                            class="input input-sm input-bordered w-full"
-                        >
-                        <input
-                            v-else-if="typeof prop === 'number'"
-                            v-model="item[name]"
-                            type="number"
-                            class="input input-sm input-bordered w-full"
-                            step="0.0001"
-                            style="max-width: 250px"
-                        >
-                        <input
-                            v-else-if="typeof prop === 'boolean'"
-                            v-model="item[name]"
-                            type="checkbox"
-                            class="checkbox checkbox-sm ms-2 mt-2"
-                        >
-                        <input
-                            v-else-if="name === 'ignore_lines'"
-                            v-model="formatIgnoreLines"
-                            type="text"
-                            class="input input-sm input-bordered w-full"
-                        >
-                        <input
-                            v-else
-                            :id="name"
-                            v-model="item[name]"
-                            type="text"
-                            class="input input-sm input-bordered w-full"
-                        >
+                        <template v-if="name.toString() !== 'startInSec' && name.toString() !== 'lengthInSec'">
+                            <div v-if="name.toString() !== 'help_text'" class="label">
+                                <span class="label-text !text-md font-bold">{{ name }}</span>
+                            </div>
+                            <div v-if="name.toString() === 'help_text'" class="whitespace-pre-line">
+                                {{ setHelp(key.toString(), prop) }}
+                            </div>
+                            <input
+                                v-else-if="name.toString() === 'sender_pass'"
+                                v-model="item[name]"
+                                type="password"
+                                :placeholder="$t('config.placeholderPass')"
+                                class="input input-sm input-bordered w-full"
+                            />
+                            <textarea
+                                v-else-if="name.toString() === 'output_param' || name.toString() === 'custom_filter'"
+                                v-model="item[name]"
+                                class="textarea textarea-bordered"
+                                rows="3"
+                            />
+                            <input
+                                v-else-if="typeof prop === 'number' && prop % 1 === 0"
+                                v-model="item[name]"
+                                type="number"
+                                class="input input-sm input-bordered w-full"
+                            />
+                            <input
+                                v-else-if="typeof prop === 'number'"
+                                v-model="item[name]"
+                                type="number"
+                                class="input input-sm input-bordered w-full"
+                                step="0.0001"
+                                style="max-width: 250px"
+                            />
+                            <input
+                                v-else-if="typeof prop === 'boolean'"
+                                v-model="item[name]"
+                                type="checkbox"
+                                class="checkbox checkbox-sm ms-2 mt-2"
+                            />
+                            <input
+                                v-else-if="name === 'ignore_lines'"
+                                v-model="formatIgnoreLines"
+                                type="text"
+                                class="input input-sm input-bordered w-full"
+                            />
+                            <input
+                                v-else
+                                :id="name"
+                                v-model="item[name]"
+                                type="text"
+                                class="input input-sm input-bordered w-full"
+                            />
+                        </template>
                     </label>
                 </div>
             </template>
             <div class="mt-5 mb-10">
-                <button class="btn btn-primary" type="submit">Save</button>
+                <button class="btn btn-primary" type="submit">{{ $t('config.save') }}</button>
             </div>
         </form>
     </div>
@@ -95,11 +97,11 @@ const showModal = ref(false)
 
 const formatIgnoreLines = computed({
     get() {
-        return configStore.configPlayout.logging.ignore_lines.join(';')
+        return configStore.playout.logging.ignore_lines.join(';')
     },
 
     set(value) {
-        configStore.configPlayout.logging.ignore_lines = value.split(';')
+        configStore.playout.logging.ignore_lines = value.split(';')
     },
 })
 
@@ -162,7 +164,7 @@ function setHelp(key: string, text: string): string {
 }
 
 async function onSubmitPlayout() {
-    const update = await configStore.setPlayoutConfig(configStore.configPlayout)
+    const update = await configStore.setPlayoutConfig(configStore.playout)
 
     if (update.status === 200) {
         indexStore.msgAlert('success', 'Update playout config success!', 2)
diff --git a/components/ConfigUser.vue b/components/ConfigUser.vue
index 8471a086..b949d3a7 100644
--- a/components/ConfigUser.vue
+++ b/components/ConfigUser.vue
@@ -3,8 +3,8 @@
         <h2 class="pt-3 text-3xl">{{ $t('user.title') }}</h2>
         <div class="flex flex-col xs:flex-row gap-2 w-full mb-5 mt-10">
             <div class="grow">
-                <select class="select select-bordered w-full max-w-xs" v-model="selected" @change="onChange($event)">
-                    <option v-for="item in users">{{ item.username }}</option>
+                <select v-model="selected" class="select select-bordered w-full max-w-xs" @change="onChange($event)">
+                    <option v-for="item in users" :key="item.username">{{ item.username }}</option>
                 </select>
             </div>
             <div class="flex-none join">
@@ -22,9 +22,9 @@
                     <span class="label-text">{{ $t('user.name') }}</span>
                 </div>
                 <input
+                    v-model="configStore.configUser.username"
                     type="text"
                     class="input input-bordered w-full !bg-base-100"
-                    v-model="configStore.configUser.username"
                     disabled
                 />
             </label>
@@ -33,33 +33,21 @@
                 <div class="label">
                     <span class="label-text">{{ $t('user.mail') }}</span>
                 </div>
-                <input
-                    type="email"
-                    class="input input-bordered w-full"
-                    v-model="configStore.configUser.mail"
-                />
+                <input v-model="configStore.configUser.mail" type="email" class="input input-bordered w-full" />
             </label>
 
             <label class="form-control w-full max-w-md mt-3">
                 <div class="label">
                     <span class="label-text">{{ $t('user.newPass') }}</span>
                 </div>
-                <input
-                    type="password"
-                    class="input input-bordered w-full"
-                    v-model="newPass"
-                />
+                <input v-model="newPass" type="password" class="input input-bordered w-full" />
             </label>
 
             <label class="form-control w-full max-w-md mt-3">
                 <div class="label">
                     <span class="label-text">{{ $t('user.confirmPass') }}</span>
                 </div>
-                <input
-                    type="password"
-                    class="input input-bordered w-full"
-                    v-model="confirmPass"
-                />
+                <input v-model="confirmPass" type="password" class="input input-bordered w-full" />
             </label>
 
             <div>
@@ -74,42 +62,34 @@
                 <div class="label">
                     <span class="label-text">{{ $t('user.name') }}</span>
                 </div>
-                <input type="text" class="input input-bordered w-full" v-model="user.username" />
+                <input v-model="user.username" type="text" class="input input-bordered w-full" />
             </label>
 
             <label class="form-control w-full mt-3">
                 <div class="label">
                     <span class="label-text">{{ $t('user.mail') }}</span>
                 </div>
-                <input type="email" class="input input-bordered w-full" v-model="user.mail" />
+                <input v-model="user.mail" type="email" class="input input-bordered w-full" />
             </label>
 
             <label class="form-control w-full mt-3">
                 <div class="label">
                     <span class="label-text">{{ $t('user.password') }}</span>
                 </div>
-                <input
-                    type="password"
-                    class="input input-bordered w-full"
-                    v-model="user.password"
-                />
+                <input v-model="user.password" type="password" class="input input-bordered w-full" />
             </label>
 
             <label class="form-control w-full mt-3">
                 <div class="label">
                     <span class="label-text">{{ $t('user.confirmPass') }}</span>
                 </div>
-                <input
-                    type="password"
-                    class="input input-bordered w-full"
-                    v-model="user.confirm"
-                />
+                <input v-model="user.confirm" type="password" class="input input-bordered w-full" />
             </label>
 
             <div class="form-control mt-3">
                 <label class="label cursor-pointer w-1/2">
                     <span class="label-text">{{ $t('user.admin') }}</span>
-                    <input type="checkbox" class="checkbox" v-model.number="user.admin" />
+                    <input v-model.number="user.admin" type="checkbox" class="checkbox" />
                 </label>
             </div>
         </div>
@@ -243,7 +223,7 @@ async function addUser(add: boolean) {
 }
 
 async function onSubmitUser() {
-    if (newPass && newPass.value === confirmPass.value) {
+    if (newPass.value && newPass.value === confirmPass.value) {
         configStore.configUser.password = newPass.value
     }
 
diff --git a/components/GenericModal.vue b/components/GenericModal.vue
index 56cac411..8b6a3eb6 100644
--- a/components/GenericModal.vue
+++ b/components/GenericModal.vue
@@ -5,7 +5,7 @@
                 <div class="flex gap-2">
                     <div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
                     <button v-if="hideButtons" class="btn btn-sm w-8 h-8 rounded-full" @click="modalAction(false)">
-                        <i class="bi bi-x-lg"/>
+                        <i class="bi bi-x-lg" />
                     </button>
                 </div>
 
diff --git a/components/HeaderMenu.vue b/components/HeaderMenu.vue
index dbbbf0a9..37dd793d 100644
--- a/components/HeaderMenu.vue
+++ b/components/HeaderMenu.vue
@@ -1,11 +1,11 @@
 <template>
     <div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
         <NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
-            <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" >
+            <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
         </NuxtLink>
         <div class="navbar-end w-1/5 grow">
             <label class="swap swap-rotate me-2 md:hidden">
-                <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
+                <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" />
                 <SvgIcon name="swap-on" classes="w-5 h-5" />
                 <SvgIcon name="swap-off" classes="w-5 h-5" />
             </label>
@@ -81,7 +81,7 @@
                 </li>
                 <li class="p-0">
                     <label class="swap swap-rotate">
-                        <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
+                        <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" />
                         <SvgIcon name="swap-on" classes="w-5 h-5" />
                         <SvgIcon name="swap-off" classes="w-5 h-5" />
                     </label>
diff --git a/components/PlayerControl.vue b/components/PlayerControl.vue
index 910f5abf..76ab3f8f 100644
--- a/components/PlayerControl.vue
+++ b/components/PlayerControl.vue
@@ -61,8 +61,10 @@
                                 {{ filename(playlistStore.currentClip) }}
                             </div>
                             <div class="grow">
-                                <strong>{{ $t('player.duration') }}:</strong> {{ secToHMS(playlistStore.currentClipDuration) }} |
-                                <strong>{{ $t('player.in') }}:</strong> {{ secToHMS(playlistStore.currentClipIn) }} | <strong>{{ $t('player.out') }}:</strong>
+                                <strong>{{ $t('player.duration') }}:</strong>
+                                {{ secToHMS(playlistStore.currentClipDuration) }} |
+                                <strong>{{ $t('player.in') }}:</strong> {{ secToHMS(playlistStore.currentClipIn) }} |
+                                <strong>{{ $t('player.out') }}:</strong>
                                 {{ secToHMS(playlistStore.currentClipOut) }}
                             </div>
                             <div class="h-1/3">
diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue
index 103fe2fc..116e5e80 100644
--- a/components/PlaylistGenerator.vue
+++ b/components/PlaylistGenerator.vue
@@ -17,7 +17,7 @@
                         aria-label="Simple"
                         checked
                         @change="advancedGenerator = false"
-                    >
+                    />
                     <div role="tabpanel" class="tab-content w-full pt-3">
                         <div class="w-full">
                             <div class="grid">
@@ -78,7 +78,7 @@
                                                         )
                                                     )
                                                 "
-                                            >
+                                            />
                                         </div>
                                     </div>
                                 </li>
@@ -93,7 +93,7 @@
                         class="tab"
                         aria-label="Advanced"
                         @change=";(advancedGenerator = true), resetCheckboxes()"
-                    >
+                    />
                     <div role="tabpanel" class="tab-content pt-3">
                         <div class="w-full">
                             <div class="grid grid-cols-[auto_48px] px-3 pt-0">
@@ -121,7 +121,7 @@
                                         title="Add time block"
                                         @click="addTemplate()"
                                     >
-                                        <i class="bi bi-folder-plus"/>
+                                        <i class="bi bi-folder-plus" />
                                     </button>
                                 </div>
                             </div>
@@ -180,7 +180,7 @@
                                                 v-model="item.start"
                                                 type="text"
                                                 class="input input-sm input-bordered join-item px-2 text-center"
-                                            >
+                                            />
                                             <div
                                                 class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
                                             >
@@ -190,7 +190,7 @@
                                                 v-model="item.duration"
                                                 type="text"
                                                 class="input input-sm input-bordered join-item px-2 text-center"
-                                            >
+                                            />
                                             <button
                                                 class="btn btn-sm input-bordered join-item"
                                                 :class="item.shuffle ? 'bg-base-100' : 'bg-base-300'"
@@ -247,7 +247,7 @@
                             type="checkbox"
                             class="checkbox checkbox-xs rounded"
                             @change="resetCheckboxes()"
-                        >
+                        />
                     </label>
                 </div>
                 <div class="join ms-2">
@@ -291,12 +291,14 @@ const advancedGenerator = ref(false)
 const selectedFolders = ref([] as string[])
 const generateFromAll = ref(false)
 const template = ref({
-    sources: [{
-        start: configStore.configPlayout.playlist.day_start,
-        duration: '02:00:00',
-        shuffle: false,
-        paths: [],
-    }],
+    sources: [
+        {
+            start: configStore.playout.playlist.day_start,
+            duration: '02:00:00',
+            shuffle: false,
+            paths: [],
+        },
+    ],
 } as Template)
 
 const templateBrowserSortOptions = {
@@ -331,12 +333,7 @@ async function generatePlaylist() {
         body,
     })
         .then((response: any) => {
-            playlistStore.playlist = processPlaylist(
-                configStore.startInSec,
-                configStore.playlistLength,
-                response.program,
-                false
-            )
+            playlistStore.playlist = processPlaylist(playlistStore.listDate, response.program, false)
             indexStore.msgAlert('success', 'Generate Playlist done...', 2)
         })
         .catch((e: any) => {
@@ -379,7 +376,7 @@ function addFolderToTemplate(event: any, item: TemplateItem) {
 
     event.item.remove()
 
-    const storagePath = configStore.configPlayout.storage.path
+    const storagePath = configStore.playout.storage.path
     const navPath = mediaStore.folderCrumbs[mediaStore.folderCrumbs.length - 1].path
     const sourcePath = `${storagePath}/${navPath}/${mediaStore.folderList.folders[o].name}`.replace(/\/[/]+/g, '/')
 
@@ -404,7 +401,10 @@ function addTemplate() {
 
     if (last) {
         const t = $dayjs(`2000-01-01T${last.duration}`)
-        start = $dayjs(`2000-01-01T${last.start}`).add(t.hour(), 'hour').add(t.minute(), 'minute').add(t.second(), 'second')
+        start = $dayjs(`2000-01-01T${last.start}`)
+            .add(t.hour(), 'hour')
+            .add(t.minute(), 'minute')
+            .add(t.second(), 'second')
     }
 
     template.value.sources.push({
diff --git a/components/PlaylistTable.vue b/components/PlaylistTable.vue
index e1ec5d50..be718f1a 100644
--- a/components/PlaylistTable.vue
+++ b/components/PlaylistTable.vue
@@ -72,6 +72,7 @@
                                 playlistStore.playoutIsRunning &&
                                 listDate === todayDate &&
                                 index === playlistStore.currentClipIndex,
+                            '!bg-amber-600/40': element.overtime,
                         }"
                     >
                         <td class="ps-4 py-2 text-left">{{ secondsToTime(element.begin) }}</td>
@@ -96,7 +97,7 @@
                                 type="checkbox"
                                 :checked="element.category && element.category === 'advertisement' ? true : false"
                                 @change="setCategory($event, element)"
-                            >
+                            />
                         </td>
                         <td class="py-2 text-center hover:text-base-content/70">
                             <button @click="editItem(index)">
@@ -193,7 +194,7 @@ function addClip(event: any) {
 
     event.item.remove()
 
-    const storagePath = configStore.configPlayout.storage.path
+    const storagePath = configStore.playout.storage.path
     const sourcePath = `${storagePath}/${mediaStore.folderTree.source}/${mediaStore.folderTree.files[o].name}`.replace(
         /\/[/]+/g,
         '/'
@@ -208,12 +209,7 @@ function addClip(event: any) {
         duration: mediaStore.folderTree.files[o].duration,
     })
 
-    playlistStore.playlist = processPlaylist(
-        configStore.startInSec,
-        configStore.playlistLength,
-        playlistStore.playlist,
-        false
-    )
+    playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, false)
 
     nextTick(() => {
         const newNode = document.getElementById(`clip-${n}`)
@@ -225,12 +221,7 @@ function addClip(event: any) {
 function moveItemInArray(event: any) {
     playlistStore.playlist.splice(event.newIndex, 0, playlistStore.playlist.splice(event.oldIndex, 1)[0])
 
-    playlistStore.playlist = processPlaylist(
-        configStore.startInSec,
-        configStore.playlistLength,
-        playlistStore.playlist,
-        false
-    )
+    playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, false)
 
     removeBG(event.item)
 }
diff --git a/components/SystemStats.vue b/components/SystemStats.vue
index f84d8a06..30696142 100644
--- a/components/SystemStats.vue
+++ b/components/SystemStats.vue
@@ -3,7 +3,7 @@
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
-                <br >
+                <br />
                 {{ sysStat.system.kernel }}
             </span>
         </div>
@@ -16,8 +16,12 @@
         <div class="p-4 border border-primary">
             <div class="text-xl">{{ $t('system.cpu') }}</div>
             <div class="grid grid-cols-2">
-                <div><strong>{{ $t('system.cores') }}:</strong> {{ sysStat.cpu.cores }}</div>
-                <div><strong>{{ $t('system.usage') }}:</strong> {{ sysStat.cpu.usage.toFixed(2) }}%</div>
+                <div>
+                    <strong>{{ $t('system.cores') }}:</strong> {{ sysStat.cpu.cores }}
+                </div>
+                <div>
+                    <strong>{{ $t('system.usage') }}:</strong> {{ sysStat.cpu.usage.toFixed(2) }}%
+                </div>
             </div>
         </div>
         <div class="p-4 border border-primary">
@@ -31,15 +35,23 @@
         <div class="p-4 border border-primary">
             <div class="text-xl">{{ $t('system.memory') }}</div>
             <div class="grid grid-cols-2">
-                <div><strong>{{ $t('system.total') }}:</strong> {{ fileSize(sysStat.memory.total) }}</div>
-                <div><strong>{{ $t('system.usage') }}:</strong> {{ fileSize(sysStat.memory.used) }}</div>
+                <div>
+                    <strong>{{ $t('system.total') }}:</strong> {{ fileSize(sysStat.memory.total) }}
+                </div>
+                <div>
+                    <strong>{{ $t('system.usage') }}:</strong> {{ fileSize(sysStat.memory.used) }}
+                </div>
             </div>
         </div>
         <div class="p-4 border border-primary">
             <div class="text-xl">{{ $t('system.swap') }}</div>
             <div class="grid grid-cols-2">
-                <div><strong>{{ $t('system.total') }}:</strong> {{ fileSize(sysStat.swap.total) }}</div>
-                <div><strong>{{ $t('system.usage') }}:</strong> {{ fileSize(sysStat.swap.used) }}</div>
+                <div>
+                    <strong>{{ $t('system.total') }}:</strong> {{ fileSize(sysStat.swap.total) }}
+                </div>
+                <div>
+                    <strong>{{ $t('system.usage') }}:</strong> {{ fileSize(sysStat.swap.used) }}
+                </div>
             </div>
         </div>
         <div class="p-4 border border-primary">
@@ -47,19 +59,29 @@
                 {{ $t('system.network') }} <span v-if="sysStat.network" class="fs-6">{{ sysStat.network?.name }}</span>
             </div>
             <div class="grid grid-cols-2">
-                <div><strong>{{ $t('system.in') }}:</strong> {{ fileSize(sysStat.network?.current_in) }}</div>
-                <div><strong>{{ $t('system.out') }}:</strong> {{ fileSize(sysStat.network?.current_out) }}</div>
+                <div>
+                    <strong>{{ $t('system.in') }}:</strong> {{ fileSize(sysStat.network?.current_in) }}
+                </div>
+                <div>
+                    <strong>{{ $t('system.out') }}:</strong> {{ fileSize(sysStat.network?.current_out) }}
+                </div>
                 <div>{{ fileSize(sysStat.network?.total_in) }}</div>
                 <div>{{ fileSize(sysStat.network?.total_out) }}</div>
             </div>
         </div>
         <div v-if="sysStat.storage?.path" class="p-4 border border-primary">
             <div class="text-xl">{{ $t('system.storage') }}</div>
-            <div v-if="sysStat.storage"><strong>{{ $t('system.device') }}:</strong> {{ sysStat.storage?.path }}</div>
+            <div v-if="sysStat.storage">
+                <strong>{{ $t('system.device') }}:</strong> {{ sysStat.storage?.path }}
+            </div>
 
             <div v-if="sysStat.storage" class="grid grid-cols-2">
-                <div><strong>{{ $t('system.size') }}:</strong> {{ fileSize(sysStat.storage?.total) }}</div>
-                <div><strong>{{ $t('system.used') }}:</strong> {{ fileSize(sysStat.storage?.used) }}</div>
+                <div>
+                    <strong>{{ $t('system.size') }}:</strong> {{ fileSize(sysStat.storage?.total) }}
+                </div>
+                <div>
+                    <strong>{{ $t('system.used') }}:</strong> {{ fileSize(sysStat.storage?.used) }}
+                </div>
             </div>
         </div>
         <div v-else class="col-6 bg-primary p-2 border" />
diff --git a/composables/helper.ts b/composables/helper.ts
index 19207a3c..1b53d1d7 100644
--- a/composables/helper.ts
+++ b/composables/helper.ts
@@ -181,15 +181,22 @@ export const playlistOperations = () => {
         return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '')
     }
 
-    function processPlaylist(dayStart: number, length: number, list: PlaylistItem[], forSave: boolean) {
-        if (!dayStart) {
-            dayStart = 0
-        }
+    function processPlaylist(date: string, list: PlaylistItem[], forSave: boolean) {
+        const configStore = useConfig()
+
+        let begin = configStore.playout.playlist.startInSec
 
-        let begin = dayStart
         const newList = []
 
         for (const item of list) {
+            if (configStore.playout.playlist.startInSec === begin) {
+                if (!forSave) {
+                    item.date = date
+                } else {
+                    delete item.date
+                }
+            }
+
             if (!item.uid) {
                 item.uid = genUID()
             }
@@ -208,18 +215,17 @@ export const playlistOperations = () => {
                 delete item.custom_filter
             }
 
-            if (begin + (item.out - item.in) > length + dayStart) {
-                item.class = 'overLength'
-
+            if (
+                begin >= configStore.playout.playlist.startInSec + configStore.playout.playlist.lengthInSec &&
+                !configStore.playout.playlist.infinit
+            ) {
                 if (forSave) {
-                    item.out = length + dayStart - begin
+                    break
+                } else {
+                    item.overtime = true
                 }
             }
 
-            if (forSave && begin >= length + dayStart) {
-                break
-            }
-
             newList.push(item)
 
             begin += item.out - item.in
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 2876666b..ce1d7689 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -13,8 +13,10 @@ export default withNuxt(
     // }
     {
         rules: {
-            "@typescript-eslint/no-explicit-any": "off",
-            "vue/no-v-html": "off",
+            '@typescript-eslint/no-explicit-any': 'off',
+            'no-control-regex': 'off',
+            'vue/html-self-closing': 'off',
+            'vue/no-v-html': 'off',
         },
     }
 )
diff --git a/lang/de-DE.js b/lang/de-DE.js
index 39d4da18..d080e2b4 100644
--- a/lang/de-DE.js
+++ b/lang/de-DE.js
@@ -144,7 +144,8 @@ export default {
         help: 'Hilfe',
         generalText: `Manchmal kann es vorkommen, dass eine Datei beschädigt, aber noch abspielbar ist, was einen Streaming-Fehler bei allen folgenden Dateien verursachen kann. Die einzige Möglichkeit, dies zu beheben, besteht darin, ffplayout anzuhalten und neu zu starten. Wir sagen hier nur, wann es gestoppt werden muss, der Startvorgang ist Ihnen überlassen. Der beste Weg ist ein systemd-Dienst unter Linux.
         'stop_threshold' wird ffplayout stoppen, wenn es zeitlich über diesem Wert liegt. Eine Zahl kleiner als 3 kann zu unerwarteten Fehlern führen.`,
-        rpcText: 'Führe einen JSON-RPC-Server aus, um Informationen über die Wiedergabe und einige Kontrollfunktionen zu erhalten.',
+        rpcText:
+            'Führe einen JSON-RPC-Server aus, um Informationen über die Wiedergabe und einige Kontrollfunktionen zu erhalten.',
         mailText: `Senden Sie Fehlermeldungen an die E-Mail-Adresse, z. B. fehlende Playlist, ungültiges json-Format, fehlender Clip-Pfad. Lassen Sie den Empfänger leer, wenn Sie keine Benachrichtigung benötigen. 'mail_level' kann INFO, WARNING oder ERROR sein. 'interval' bedeutet Sekunden, bis eine neue E-Mail gesendet wird.`,
         logText: `Wenn 'log_to_file' true ist, wird in eine Datei protokolliert, wenn false, in die Konsole. 'backup_count' gibt an, wie lange die Log-Dateien in Tagen gespeichert werden. 'local_time' auf false setzt die Log-Zeitstempel auf UTC. Pfad zu /var/log/ nur, wenn Sie dies als Daemon ausführen.
         'level' kann DEBUG, INFO, WARNING, ERROR sein. 'ffmpeg_level' kann INFO, WARNING, ERROR sein. 'detect_silence' protokolliert eine Fehlermeldung, wenn die Audiospur während des Validierungsprozesses 15 Sekunden lang still ist.`,
@@ -180,5 +181,5 @@ export default {
         mismatch: 'Passwort stimmt nicht überein!',
         updateSuccess: 'Benutzerprofil erfolgreich aktualisiert!',
         updateFailed: 'Fehler beim Aktualisieren des Benutzerprofils!',
-        },
+    },
 }
diff --git a/package-lock.json b/package-lock.json
index 9f987594..35a4d589 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ffplayout-frontend",
-      "version": "0.8.0",
+      "version": "0.8.1",
       "hasInstallScript": true,
       "dependencies": {
         "@nuxtjs/color-mode": "^3.4.0",
diff --git a/package.json b/package.json
index 74e354ff..0d40175e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ffplayout-frontend",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "description": "Web GUI for ffplayout",
   "author": "Jonathan Baecker",
   "private": true,
diff --git a/pages/index.vue b/pages/index.vue
index 0145d277..c0680210 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,13 +6,13 @@
                 <NuxtLink :to="localePath({ name: 'player' })" class="btn join-item btn-primary px-2">
                     {{ $t('button.player') }}
                 </NuxtLink>
-                <NuxtLink :to="localePath({ name: 'media' })"  class="btn join-item btn-primary px-2">
+                <NuxtLink :to="localePath({ name: 'media' })" class="btn join-item btn-primary px-2">
                     {{ $t('button.media') }}
                 </NuxtLink>
-                <NuxtLink :to="localePath({ name: 'message' })"  class="btn join-item btn-primary px-2">
+                <NuxtLink :to="localePath({ name: 'message' })" class="btn join-item btn-primary px-2">
                     {{ $t('button.message') }}
                 </NuxtLink>
-                <NuxtLink :to="localePath({ name: 'logging' })"  class="btn join-item btn-primary px-2">
+                <NuxtLink :to="localePath({ name: 'logging' })" class="btn join-item btn-primary px-2">
                     {{ $t('button.logging') }}
                 </NuxtLink>
                 <NuxtLink
@@ -38,7 +38,7 @@
                     </option>
                 </select>
                 <label class="join-item btn btn-primary swap swap-rotate me-2">
-                    <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" >
+                    <input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" />
                     <SvgIcon name="swap-on" classes="w-5 h-5" />
                     <SvgIcon name="swap-off" classes="w-5 h-5" />
                 </label>
@@ -54,7 +54,7 @@
                     :placeholder="$t('input.username')"
                     class="input input-bordered w-full"
                     required
-                >
+                />
 
                 <input
                     v-model="formPassword"
@@ -62,7 +62,7 @@
                     :placeholder="$t('input.password')"
                     class="input input-bordered w-full mt-5"
                     required
-                >
+                />
 
                 <div class="w-full mt-4 grid grid-flow-row-dense grid-cols-12 grid-rows-1 gap-2">
                     <div class="col-span-3">
diff --git a/pages/media.vue b/pages/media.vue
index 49dcf596..6c480667 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -205,7 +205,7 @@
         >
             <div class="w-[1024px] max-w-full aspect-video">
                 <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
-                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" >
+                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
             </div>
         </GenericModal>
 
@@ -214,7 +214,7 @@
                 <div class="label">
                     <span class="label-text">{{ $t('media.newFile') }}</span>
                 </div>
-                <input v-model="renameNewName" type="text" class="input input-bordered w-full" >
+                <input v-model="renameNewName" type="text" class="input input-bordered w-full" />
             </label>
         </GenericModal>
 
@@ -223,7 +223,7 @@
                 <div class="label">
                     <span class="label-text">{{ $t('media.foldername') }}</span>
                 </div>
-                <input v-model="folderName.name" type="text" class="input input-bordered w-full" >
+                <input v-model="folderName.name" type="text" class="input input-bordered w-full" />
             </label>
         </GenericModal>
 
@@ -236,7 +236,7 @@
                     :accept="extensions"
                     multiple
                     @change="onFileChange"
-                >
+                />
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
@@ -257,7 +257,7 @@
                     <div class="label">
                         <span class="label-text">{{ $t('media.uploading') }}:</span>
                     </div>
-                    <input v-model="uploadTask" type="text" class="input input-sm input-bordered w-full" disabled >
+                    <input v-model="uploadTask" type="text" class="input input-sm input-bordered w-full" disabled />
                 </label>
             </div>
         </GenericModal>
@@ -313,7 +313,7 @@ const lastPath = ref('')
 const xhr = ref(new XMLHttpRequest())
 
 onMounted(async () => {
-    let config_extensions = configStore.configPlayout.storage.extensions
+    let config_extensions = configStore.playout.storage.extensions
     let extra_extensions = configStore.configGui[configStore.configID].extra_extensions
 
     if (typeof config_extensions === 'string') {
@@ -428,7 +428,7 @@ function setPreviewData(path: string) {
             ? 'application/x-mpegURL'
             : `video/${ext}`
 
-    if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) {
+    if (configStore.playout.storage.extensions.includes(`${ext}`)) {
         isVideo.value = true
         previewOpt.value = {
             liveui: false,
diff --git a/pages/message.vue b/pages/message.vue
index ec4a800c..ec9b7d9d 100644
--- a/pages/message.vue
+++ b/pages/message.vue
@@ -58,7 +58,7 @@
                                         type="text"
                                         placeholder="X"
                                         required
-                                    >
+                                    />
                                 </label>
                             </div>
 
@@ -73,7 +73,7 @@
                                         type="text"
                                         placeholder="Y"
                                         required
-                                    >
+                                    />
                                 </label>
                             </div>
                         </div>
@@ -86,7 +86,7 @@
                                         v-model="form.showBox"
                                         type="checkbox"
                                         class="checkbox checkbox-xs rounded-sm"
-                                    >
+                                    />
                                 </label>
                             </div>
 
@@ -99,7 +99,7 @@
                                     type="color"
                                     class="input input-sm input-bordered w-full p-1"
                                     required
-                                >
+                                />
                             </label>
                         </div>
                         <label class="form-control w-full xs:mt-[68px]">
@@ -114,7 +114,7 @@
                                 step="0.01"
                                 class="input input-sm input-bordered w-full"
                                 required
-                            >
+                            />
                         </label>
                     </div>
                     <div class="grid xs:grid-cols-[150px_150px_auto] gap-4 mt-2">
@@ -128,7 +128,7 @@
                                     type="number"
                                     class="input input-sm input-bordered w-full"
                                     required
-                                >
+                                />
                             </label>
 
                             <label class="form-control w-full mt-2">
@@ -140,7 +140,7 @@
                                     type="color"
                                     class="input input-sm input-bordered w-full p-1"
                                     required
-                                >
+                                />
                             </label>
                         </div>
                         <div>
@@ -153,7 +153,7 @@
                                     type="number"
                                     class="input input-sm input-bordered w-full"
                                     required
-                                >
+                                />
                             </label>
                             <label class="form-control w-full mt-2">
                                 <div class="label">
@@ -167,7 +167,7 @@
                                     max="1"
                                     step="0.01"
                                     required
-                                >
+                                />
                             </label>
                         </div>
 
@@ -181,7 +181,7 @@
                                     type="text"
                                     class="input input-sm input-bordered w-full"
                                     required
-                                >
+                                />
                             </label>
                             <label class="form-control w-full xs:max-w-[150px] mt-2">
                                 <div class="label">
@@ -192,7 +192,7 @@
                                     type="number"
                                     class="input input-sm input-bordered w-full"
                                     required
-                                >
+                                />
                             </label>
                         </div>
                     </div>
@@ -209,7 +209,7 @@
                 <div class="label">
                     <span class="label-text">{{ $t('message.name') }}</span>
                 </div>
-                <input v-model="newPresetName" type="text" class="input input-bordered w-full" >
+                <input v-model="newPresetName" type="text" class="input input-bordered w-full" />
             </label>
         </GenericModal>
 
diff --git a/pages/player.vue b/pages/player.vue
index d0e88392..96d86390 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -44,7 +44,7 @@
                 <i class="bi-files" />
             </button>
             <button
-                v-if="!configStore.configPlayout.playlist.loop"
+                v-if="!configStore.playout.playlist.loop"
                 class="btn btn-sm btn-primary join-item"
                 :title="$t('player.loop')"
                 @click="loopClips()"
@@ -72,7 +72,11 @@
             >
                 <i class="bi-sort-down-alt" />
             </button>
-            <button class="btn btn-sm btn-primary join-item" :title="$t('player.reset')" @click=";(playlistStore.playlist.length = 0), getPlaylist()">
+            <button
+                class="btn btn-sm btn-primary join-item"
+                :title="$t('player.reset')"
+                @click=";(playlistStore.playlist.length = 0), getPlaylist()"
+            >
                 <i class="bi-arrow-counterclockwise" />
             </button>
             <button
@@ -99,7 +103,7 @@
         >
             <div class="w-[1024px] max-w-full aspect-video">
                 <VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
-                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" >
+                <img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
             </div>
         </GenericModal>
 
@@ -109,14 +113,14 @@
                     <div class="label">
                         <span class="label-text">In</span>
                     </div>
-                    <input v-model.number="newSource.in" type="number" class="input input-sm input-bordered w-full" >
+                    <input v-model.number="newSource.in" type="number" class="input input-sm input-bordered w-full" />
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Out</span>
                     </div>
-                    <input v-model.number="newSource.out" type="number" class="input input-sm input-bordered w-full" >
+                    <input v-model.number="newSource.out" type="number" class="input input-sm input-bordered w-full" />
                 </label>
 
                 <label class="form-control w-full mt-3">
@@ -127,34 +131,34 @@
                         v-model.number="newSource.duration"
                         type="number"
                         class="input input-sm input-bordered w-full"
-                    >
+                    />
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Source</span>
                     </div>
-                    <input v-model="newSource.source" type="text" class="input input-sm input-bordered w-full" >
+                    <input v-model="newSource.source" type="text" class="input input-sm input-bordered w-full" />
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Audio</span>
                     </div>
-                    <input v-model="newSource.audio" type="text" class="input input-sm input-bordered w-full" >
+                    <input v-model="newSource.audio" type="text" class="input input-sm input-bordered w-full" />
                 </label>
 
                 <label class="form-control w-full mt-3">
                     <div class="label">
                         <span class="label-text">Custom Filter</span>
                     </div>
-                    <input v-model="newSource.custom_filter" type="text" class="input input-sm input-bordered w-full" >
+                    <input v-model="newSource.custom_filter" type="text" class="input input-sm input-bordered w-full" />
                 </label>
 
                 <div class="form-control">
                     <label class="cursor-pointer label">
                         <span class="label-text">Advertisement</span>
-                        <input type="checkbox" class="checkbox checkbox-sm" @click="isAd" >
+                        <input type="checkbox" class="checkbox checkbox-sm" @click="isAd" />
                     </label>
                 </div>
             </div>
@@ -166,11 +170,11 @@
                 class="file-input file-input-sm file-input-bordered w-full"
                 multiple
                 @change="onFileChange"
-            >
+            />
         </GenericModal>
 
         <GenericModal :show="showCopyModal" :title="`Copy Program ${listDate}`" :modal-action="savePlaylist">
-            <input v-model="targetDate" type="date" class="input input-sm input-bordered w-full" >
+            <input v-model="targetDate" type="date" class="input input-sm input-bordered w-full" />
         </GenericModal>
 
         <GenericModal :show="showDeleteModal" title="Delete Program" :modal-action="deletePlaylist">
@@ -271,7 +275,7 @@ function closePlayer() {
 
 function setPreviewData(path: string) {
     let fullPath = path
-    const storagePath = configStore.configPlayout.storage.path
+    const storagePath = configStore.playout.storage.path
     const lastIndex = storagePath.lastIndexOf('/')
 
     if (!path.includes('/')) {
@@ -301,7 +305,7 @@ function setPreviewData(path: string) {
             ? 'application/x-mpegURL'
             : `video/${ext}`
 
-    if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) {
+    if (configStore.playout.storage.extensions.includes(`${ext}`)) {
         isVideo.value = true
         previewOpt.value = {
             liveui: false,
@@ -327,20 +331,10 @@ function processSource(process: boolean) {
     if (process) {
         if (editId.value === -1) {
             playlistStore.playlist.push(newSource.value)
-            playlistStore.playlist = processPlaylist(
-                configStore.startInSec,
-                configStore.playlistLength,
-                playlistStore.playlist,
-                false
-            )
+            playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, false)
         } else {
             playlistStore.playlist[editId.value] = newSource.value
-            playlistStore.playlist = processPlaylist(
-                configStore.startInSec,
-                configStore.playlistLength,
-                playlistStore.playlist,
-                false
-            )
+            playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, false)
         }
     }
 
@@ -399,7 +393,7 @@ function loopClips() {
         }
     }
 
-    playlistStore.playlist = processPlaylist(configStore.startInSec, configStore.playlistLength, tempList, false)
+    playlistStore.playlist = processPlaylist(listDate.value, tempList, false)
 }
 
 function onFileChange(evt: any) {
@@ -455,12 +449,7 @@ async function savePlaylist(save: boolean) {
             return
         }
 
-        playlistStore.playlist = processPlaylist(
-            configStore.startInSec,
-            configStore.playlistLength,
-            playlistStore.playlist,
-            true
-        )
+        playlistStore.playlist = processPlaylist(listDate.value, playlistStore.playlist, true)
         const saveList = playlistStore.playlist.map(({ begin, ...item }) => item)
 
         await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/`, {
diff --git a/plugins/lodash.client.ts b/plugins/lodash.client.ts
index 28a17cbf..5ddac11e 100644
--- a/plugins/lodash.client.ts
+++ b/plugins/lodash.client.ts
@@ -2,14 +2,14 @@ import lodash from 'lodash'
 import type { LoDashStatic } from 'lodash'
 
 declare module '#app' {
-	interface NuxtApp {
-		$_: LoDashStatic;
-	}
+    interface NuxtApp {
+        $_: LoDashStatic
+    }
 }
 declare module '@vue/runtime-core' {
-	interface ComponentCustomProperties {
-		$_: LoDashStatic;
-	}
+    interface ComponentCustomProperties {
+        $_: LoDashStatic
+    }
 }
 
 export default defineNuxtPlugin((nuxtApp) => {
diff --git a/plugins/vue-datepicker.client.ts b/plugins/vue-datepicker.client.ts
index c549371b..915f9293 100644
--- a/plugins/vue-datepicker.client.ts
+++ b/plugins/vue-datepicker.client.ts
@@ -1,4 +1,4 @@
-import VueDatePicker from '@vuepic/vue-datepicker';
+import VueDatePicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
 export default defineNuxtPlugin((nuxtApp) => {
diff --git a/stores/config.ts b/stores/config.ts
index a733b2fc..8fe68f4e 100644
--- a/stores/config.ts
+++ b/stores/config.ts
@@ -10,9 +10,8 @@ export const useConfig = defineStore('config', {
         contentType: { 'content-type': 'application/json;charset=UTF-8' },
         configGui: [] as GuiConfig[],
         configGuiRaw: [] as GuiConfig[],
-        startInSec: 0,
         playlistLength: 86400.0,
-        configPlayout: {} as any,
+        playout: {} as any,
         currentUser: '',
         configUser: {} as User,
         utcOffset: 0,
@@ -41,7 +40,7 @@ export const useConfig = defineStore('config', {
                 method: 'GET',
                 headers: authStore.authHeader,
             })
-                .then(response => {
+                .then((response) => {
                     statusCode = response.status
 
                     return response
@@ -128,19 +127,14 @@ export const useConfig = defineStore('config', {
             })
                 .then((response) => response.json())
                 .then((data) => {
-                    if (data.playlist.day_start) {
-                        this.startInSec = timeToSeconds(data.playlist.day_start)
-                    }
-
-                    if (data.playlist.length) {
-                        this.playlistLength = timeToSeconds(data.playlist.length)
-                    }
+                    data.playlist.startInSec = timeToSeconds(data.playlist.day_start ?? 0)
+                    data.playlist.lengthInSec = timeToSeconds(data.playlist.length ?? this.playlistLength)
 
                     if (data.storage.extensions) {
                         data.storage.extensions = data.storage.extensions.join(',')
                     }
 
-                    this.configPlayout = data
+                    this.playout = data
                 })
                 .catch(() => {
                     indexStore.msgAlert('error', 'No playout config found!', 3)
@@ -151,8 +145,9 @@ export const useConfig = defineStore('config', {
             const authStore = useAuth()
             const channel = this.configGui[this.configID].id
 
-            this.startInSec = timeToSeconds(obj.playlist.day_start)
             this.playlistLength = timeToSeconds(obj.playlist.length)
+            this.playout.playlist.startInSec = timeToSeconds(obj.playlist.day_start)
+            this.playout.playlist.lengthInSec = timeToSeconds(obj.playlist.length)
 
             if (typeof obj.storage.extensions === 'string') {
                 obj.storage.extensions = obj.storage.extensions.replace(' ', '').split(/,|;/)
diff --git a/stores/playlist.ts b/stores/playlist.ts
index 4e45ce16..97f7743e 100644
--- a/stores/playlist.ts
+++ b/stores/playlist.ts
@@ -7,7 +7,6 @@ import { defineStore } from 'pinia'
 dayjs.extend(utc)
 dayjs.extend(timezone)
 
-// const { timeToSeconds } = stringFormatter()
 const { processPlaylist } = playlistOperations()
 
 export const usePlaylist = defineStore('playlist', {
@@ -34,15 +33,8 @@ export const usePlaylist = defineStore('playlist', {
             const authStore = useAuth()
             const configStore = useConfig()
             const indexStore = useIndex()
-            let statusCode = 0
-
-            // const timeInSec = timeToSeconds(dayjs().utcOffset(configStore.utcOffset).format('HH:mm:ss'))
             const channel = configStore.configGui[configStore.configID].id
-            // let dateToday = dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD')
-
-            // if (configStore.startInSec > timeInSec) {
-            //     dateToday = dayjs(dateToday).utcOffset(configStore.utcOffset).subtract(1, 'day').format('YYYY-MM-DD')
-            // }
+            let statusCode = 0
 
             await fetch(`/api/playlist/${channel}?date=${date}`, {
                 method: 'GET',
@@ -55,32 +47,29 @@ export const usePlaylist = defineStore('playlist', {
                 })
                 .then((data) => {
                     if (data.program) {
-                        const programData = processPlaylist(
-                            configStore.startInSec,
-                            configStore.playlistLength,
-                            data.program,
-                            false
-                        )
+                        const programData = processPlaylist(date, data.program, false)
 
                         if (
                             this.playlist.length > 0 &&
+                            programData.length > 0 &&
+                            this.playlist[0].date === date &&
                             $_.differenceWith(this.playlist, programData, (a, b) => {
                                 return $_.isEqual($_.omit(a, ['uid']), $_.omit(b, ['uid']))
                             }).length > 0
                         ) {
                             indexStore.msgAlert('warning', $i18n.t('player.unsavedProgram'), 3)
-                        } else if (this.playlist.length === 0) {
-                            this.playlist = programData
+                        } else {
+                            this.playlist = programData ?? []
                         }
                     }
                 })
                 .catch((e) => {
-                    if (statusCode > 0 && statusCode !== 204) {
+                    if (statusCode >= 400) {
                         indexStore.msgAlert('error', e, 3)
-                    }
-
-                    if (this.playlist.length > 0) {
+                    } else if (this.playlist.length > 0 && this.playlist[0].date === date) {
                         indexStore.msgAlert('warning', $i18n.t('player.unsavedProgram'), 3)
+                    } else {
+                        this.playlist = []
                     }
                 })
         },
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7efdf040..9b035ebc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,7 @@ module.exports = {
             },
             boxShadow: {
                 '3xl': '0 1em 5em rgba(0, 0, 0, 0.3)',
-                'glow': '0 0 10px rgba(0, 0, 0, 0.3)',
+                glow: '0 0 10px rgba(0, 0, 0, 0.3)',
             },
             colors: {
                 'my-gray': 'var(--my-gray)',
diff --git a/types/index.d.ts b/types/index.d.ts
index 50105d60..ae7162e1 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -48,6 +48,7 @@ declare global {
     }
 
     interface PlaylistItem {
+        date?: string
         uid: string
         begin: number
         source: string
@@ -57,7 +58,7 @@ declare global {
         audio?: string
         category?: string
         custom_filter?: string
-        class?: string
+        overtime?: boolean
     }
 
     interface FileObject {
@@ -112,6 +113,6 @@ declare global {
         network?: { name: string; current_in: number; current_out: number; total_in: number; total_out: number }
         storage?: { path: string; total: number; used: number }
         swap: { total: number; used: number; free: number }
-        system: { name?: string; kernel?: string; version?: string, ffp_version?: string }
+        system: { name?: string; kernel?: string; version?: string; ffp_version?: string }
     }
 }