diff --git a/assets/fonts/DigitalNumbers-Regular.woff b/assets/fonts/DigitalNumbers-Regular.woff
new file mode 100644
index 00000000..7111cec8
Binary files /dev/null and b/assets/fonts/DigitalNumbers-Regular.woff differ
diff --git a/assets/fonts/DigitalNumbers-Regular.woff2 b/assets/fonts/DigitalNumbers-Regular.woff2
deleted file mode 100644
index 1a66c767..00000000
Binary files a/assets/fonts/DigitalNumbers-Regular.woff2 and /dev/null differ
diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss
deleted file mode 100644
index 59d3da97..00000000
--- a/assets/scss/_variables.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-$gray-800: #3a3f44 !default;
-$gray-900: #262a2c !default;
-
-$primary: $gray-800 !default;
-$secondary: $gray-900 !default;
-
-$accent: #ff9c36;
-$bg-primary: #212529;
-$bg-secondary: #1d2024;
-$link-color: #c4c4c4;
-$link-color-hover: #e7e7e7;
-$item-hover: rgba(31, 31, 31, 0.8);
-$border-color: black;
-$overlay-bg: rgba(61, 61, 61, 0.534);
-
-$success: #438d3c;
-$danger: #972929;
-$warning: #a78c14;
-$alert-color: #ffffff;
-
-$control-button-play: #43c32e;
-$control-button-play-hover: #339924;
-$control-button-stop: #d01111;
-$control-button-stop-hover: #a70e0e;
-$control-button-restart: #d1c410;
-$control-button-restart-hover: #b4a90e;
-$control-button-control: #06aad3;
-$control-button-control-hover: #068bac;
-
-$log-time: #666864;
-$log-number: #e2c317;
-$log-addr: #ad7fa8;
-$log-cmd: #6c95c2;
-$log-content: #ececec;
-$log-info: #8ae234;
-$log-warning: #ff8700;
-$log-error: #d32828;
-$log-debug: #6e99c7;
-$log-decoder: #56efff;
-$log-encoder: #45ccee;
-$log-server: #23cbdd;
-
-$theme-colors: (
-    'primary': $primary,
-    'secondary': $secondary,
-);
-
-$b-radius: 3px;
diff --git a/assets/scss/main.scss b/assets/scss/main.scss
index 8f2783d3..057abcc6 100644
--- a/assets/scss/main.scss
+++ b/assets/scss/main.scss
@@ -1,4 +1,3 @@
-@import '_variables.scss';
 @import 'bootstrap-icons/font/bootstrap-icons.css';
 
 #__nuxt,
@@ -10,101 +9,12 @@ main > div {
 }
 
 @font-face {
-    font-family: 'DigitalNumbers-Regular';
-    src: url('@/assets/fonts/DigitalNumbers-Regular.woff2') format('woff2');
+    font-family: 'DigitalNumbers';
+    src: url('@/assets/fonts/DigitalNumbers-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
 }
 
-.media-alert {
-    position: absolute;
-    top: 80px;
-    right: 12px;
-    max-width: 400px;
-    max-height: 60px;
-    z-index: 11;
-}
-
-.bg-warning {
-    background-color: $warning;
-}
-
-.date-div {
-    width: 250px;
-    height: 37px;
-    float: right;
-    margin-right: 12px;
-}
-
-.browser-item {
-    background: none;
-    border: none;
-    margin: 0;
-    padding: 0 0 0 .5em;
-    min-height: 26px;
-    min-height: 26px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.browser-div {
-    background-color: $gray-900;
-    border: 1px solid $border-color;
-    border-radius: 3px;
-}
-
-.media-browser-scroll {
-    height: calc(100% - 3px);
-    overflow: auto;
-    scrollbar-width: medium;
-}
-
-.browser-container .player-browser-scroll {
-    position: relative;
-    height: calc(100% - 50px);
-    min-height: 400px;
-}
-
-.browser-icons {
-    margin-right: 0.5em;
-}
-
-.browser-icons-col {
-    max-width: 10px;
-}
-
-.browser-play-col {
-    max-width: 30px;
-    text-align: center;
-    margin: 0;
-    padding: 0;
-}
-
-.browser-dur-col {
-    min-width: 95px;
-    margin: 0;
-    padding: 0 10px 0 0;
-}
-
-.browser-item-text {
-    display: inline-block;
-    max-width: 95%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.media-button {
-    float: right;
-    margin: 1em 0.8em 0 0;
-}
-
-.splitpanes__pane {
-    background-color: rgba(34, 34, 34, 0.233);
-    position: relative;
-}
-
 .splitpanes--horizontal > .splitpanes__splitter {
     position: relative;
     border-top: 1px solid var(--my-gray);
@@ -144,27 +54,3 @@ main > div {
     transition: background-color 0.3s;
     margin-left: -1px;
 }
-
-.list-row .grabbing {
-    cursor: -webkit-grabbing;
-    cursor: grabbing;
-}
-
-.loading-overlay {
-    background-color: $overlay-bg;
-    z-index: 11;
-    position: absolute;
-    width: calc(100% - 25px);
-    height: calc(100% - 36px);
-
-    .spinner-border {
-        position: absolute;
-        margin: auto;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        width: 3rem;
-        height: 3rem;
-    }
-}
diff --git a/components/Alert.vue b/components/Alert.vue
index 6e2c6762..8b5d1697 100644
--- a/components/Alert.vue
+++ b/components/Alert.vue
@@ -1,15 +1,94 @@
 <template>
-        <div
-            v-if="indexStore.showAlert"
-            class="alert show alert-dismissible fade media-alert position-fixed"
-            :class="indexStore.alertVariant"
-            role="alert"
-        >
-            {{ indexStore.alertMsg }}
-            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="indexStore.showAlert=false"></button>
-        </div>
+    <div
+        v-if="indexStore.showAlert"
+        role="alert"
+        class="alert fixed top-20 right-3 z-40 w-auto min-w-64 max-w-[90%] md:max-w-[50%] xl:max-w-[40%]"
+        :class="`alert-${indexStore.alertVariant}`"
+    >
+        <div v-html="alertIcon(indexStore.alertVariant)" />
+        {{ indexStore.alertMsg }}
+    </div>
+
+    <!-- HACK: init alerts to get the right colors, can be remove when bug is fixed -->
+    <div class="alert alert-success w-auto max-w-[700px] justify-start py-2 rounded hidden">
+        <div v-html="alertIcon('success')" />
+        <span class="truncate w-full">bla bla bla</span>
+    </div>
+    <div class="alert alert-warning w-auto max-w-[700px] justify-start py-2 rounded hidden">
+        <div v-html="alertIcon('warning')" />
+        <span class="truncate w-full">bla bla bla</span>
+    </div>
+    <div class="alert alert-info w-auto max-w-[700px] justify-start py-2 rounded hidden">
+        <div v-html="alertIcon('info')" />
+        <span class="truncate w-full">bla bla bla</span>
+    </div>
+    <div class="alert alert-error w-auto max-w-[700px] justify-start py-2 rounded hidden">
+        <div v-html="alertIcon('error')" />
+        <span class="truncate w-full">bla bla bla</span>
+    </div>
 </template>
 
 <script setup lang="ts">
 const indexStore = useIndex()
+
+function alertIcon(variance: string) {
+    switch (variance) {
+        case 'error':
+            return `<svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="stroke-current shrink-0 h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>`
+        case 'success':
+            return ` <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="stroke-current shrink-0 h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>`
+        case 'warning':
+            return `<svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="stroke-current shrink-0 h-6 w-6"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                    />
+                </svg>`
+        default:
+            return ` <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    class="stroke-current shrink-0 w-6 h-6"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                    />
+                </svg>`
+    }
+}
 </script>
diff --git a/components/ConfigGui.vue b/components/ConfigGui.vue
index 39690609..e169bb76 100644
--- a/components/ConfigGui.vue
+++ b/components/ConfigGui.vue
@@ -114,9 +114,9 @@ async function onSubmitGui() {
     const update = await configStore.setGuiConfig(configStore.configGui[configStore.configID])
 
     if (update.status) {
-        indexStore.msgAlert('alert-success', 'Update GUI config success!', 2)
+        indexStore.msgAlert('success', 'Update GUI config success!', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Update GUI config failed!', 2)
+        indexStore.msgAlert('error', 'Update GUI config failed!', 2)
     }
 }
 
@@ -125,7 +125,7 @@ async function deleteChannel() {
     const id = config[configStore.configID].id
 
     if (id === 1) {
-        indexStore.msgAlert('alert-warning', 'First channel can not be deleted!', 2)
+        indexStore.msgAlert('warning', 'First channel can not be deleted!', 2)
         return
     }
 
@@ -140,9 +140,9 @@ async function deleteChannel() {
     await configStore.getPlayoutConfig()
 
     if (response.status === 200) {
-        indexStore.msgAlert('alert-success', 'Delete GUI config success!', 2)
+        indexStore.msgAlert('success', 'Delete GUI config success!', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Delete GUI config failed!', 2)
+        indexStore.msgAlert('error', 'Delete GUI config failed!', 2)
     }
 }
 </script>
diff --git a/components/ConfigPlayout.vue b/components/ConfigPlayout.vue
index 179de8d7..4ddc2181 100644
--- a/components/ConfigPlayout.vue
+++ b/components/ConfigPlayout.vue
@@ -99,7 +99,7 @@ async function onSubmitPlayout() {
     const update = await configStore.setPlayoutConfig(configStore.configPlayout)
 
     if (update.status === 200) {
-        indexStore.msgAlert('alert-success', 'Update playout config success!', 2)
+        indexStore.msgAlert('success', 'Update playout config success!', 2)
 
         const channel = configStore.configGui[configStore.configID].id
 
@@ -113,7 +113,7 @@ async function onSubmitPlayout() {
             }
         })
     } else {
-        indexStore.msgAlert('alert-error', 'Update playout config failed!', 2)
+        indexStore.msgAlert('error', 'Update playout config failed!', 2)
     }
 }
 
diff --git a/components/ConfigUser.vue b/components/ConfigUser.vue
index aac813ed..2ee869f7 100644
--- a/components/ConfigUser.vue
+++ b/components/ConfigUser.vue
@@ -183,20 +183,20 @@ async function getUserConfig() {
 
 async function deleteUser() {
     if (configStore.configUser.username === configStore.currentUser) {
-        indexStore.msgAlert('alert-error', 'Delete current user not possible!', 2)
+        indexStore.msgAlert('error', 'Delete current user not possible!', 2)
     } else {
         await fetch(`/api/user/${configStore.configUser.username}`, {
             method: 'DELETE',
             headers: authStore.authHeader,
         })
             .then(async () => {
-                indexStore.msgAlert('alert-success', 'Delete user done!', 2)
+                indexStore.msgAlert('success', 'Delete user done!', 2)
 
                 await configStore.getUserConfig()
                 await getUsers()
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete user error: ${e}`, 2)
+                indexStore.msgAlert('error', `Delete user error: ${e}`, 2)
             })
     }
 }
@@ -226,17 +226,17 @@ async function addUser(add: boolean) {
             showUserModal.value = false
 
             if (update.status === 200) {
-                indexStore.msgAlert('alert-success', 'Add user success!', 2)
+                indexStore.msgAlert('success', 'Add user success!', 2)
 
                 await getUsers()
                 await getUserConfig()
             } else {
-                indexStore.msgAlert('alert-error', 'Add user failed!', 2)
+                indexStore.msgAlert('error', 'Add user failed!', 2)
             }
 
             clearUser()
         } else {
-            indexStore.msgAlert('alert-error', 'Password mismatch!', 2)
+            indexStore.msgAlert('error', 'Password mismatch!', 2)
         }
     } else {
         showUserModal.value = false
@@ -253,9 +253,9 @@ async function onSubmitUser() {
     const update = await configStore.setUserConfig(configStore.configUser)
 
     if (update.status === 200) {
-        indexStore.msgAlert('alert-success', 'Update user profile success!', 2)
+        indexStore.msgAlert('success', 'Update user profile success!', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Update user profile failed!', 2)
+        indexStore.msgAlert('error', 'Update user profile failed!', 2)
     }
 
     newPass.value = ''
diff --git a/components/Control.vue b/components/Control.vue
index 07a56001..8ac14407 100644
--- a/components/Control.vue
+++ b/components/Control.vue
@@ -2,7 +2,7 @@
     <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">
+                <div class="bg-base-100 w-full h-full rounded shadow">
                     <div class="w-full h-full p-2">
                         <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
                         <VideoPlayer
@@ -33,7 +33,7 @@
             >
                 <div class="col-span-1 p-1">
                     <div
-                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
+                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center shadow"
                     >
                         {{ timeStr }}
                     </div>
@@ -41,14 +41,14 @@
 
                 <div class="col-span-1 p-1 min-h-[50%]">
                     <div
-                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
+                        class="w-full h-full bg-base-100 rounded font-['DigitalNumbers'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center shadow"
                     >
                         {{ secToHMS(playlistStore.remainingSec >= 0 ? playlistStore.remainingSec : 0) }}
                     </div>
                 </div>
 
                 <div class="col-span-1 xs:col-span-2 p-1">
-                    <div class="w-full h-full bg-base-100 rounded flex items-center p-3">
+                    <div class="w-full h-full bg-base-100 rounded flex items-center p-3 shadow">
                         <div class="w-full h-full flex flex-col">
                             <div v-if="playlistStore.ingestRuns" class="h-1/3 font-bold truncate" title="Live Ingest">
                                 Live Ingest
@@ -78,7 +78,7 @@
             </div>
 
             <div class="order-2 xl:order-3 p-1">
-                <div class="bg-base-100 h-full flex justify-center rounded">
+                <div class="bg-base-100 h-full flex justify-center rounded shadow">
                     <div class="w-full h-full grid grid-cols-3">
                         <div class="text-center">
                             <div class="w-full h-1/2 aspect-square p-2">
@@ -116,7 +116,7 @@
                             <div class="w-full h-1/2 aspect-square p-2">
                                 <button
                                     title="Reset Playout State"
-                                    class="btn btn-primary h-full w-full text-7xl text-cyan-600"
+                                    class="btn btn-primary h-full w-full text-6xl text-cyan-600"
                                     @click="controlPlayout('reset')"
                                 >
                                     <i class="bi-arrow-repeat" />
@@ -128,7 +128,7 @@
                             <div class="w-full h-1/2 aspect-square p-2">
                                 <button
                                     title="Restart Playout Service"
-                                    class="btn btn-primary h-full w-full text-7xl text-yellow-500"
+                                    class="btn btn-primary h-full w-full text-6xl text-yellow-500"
                                     @click="controlProcess('restart')"
                                 >
                                     <i class="bi-arrow-clockwise" />
diff --git a/components/Menu.vue b/components/Menu.vue
index 7db66e69..a6f4d477 100644
--- a/components/Menu.vue
+++ b/components/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="navbar bg-base-100 min-h-[52px] p-0">
+    <div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
         <NuxtLink class="navbar-brand p-2" href="/">
             <img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
         </NuxtLink>
diff --git a/components/Modal.vue b/components/Modal.vue
index fa4b0124..1f7ad4e4 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -1,15 +1,20 @@
 <template>
     <div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
         <div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
-            <div class="font-bold text-lg">{{ title }}</div>
+            <div class="inline-block">
+                <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></button>
+                </div>
 
-            <div class="grow mt-3">
-                <slot>
-                    <div v-html="text" />
-                </slot>
+                <div class="grow mt-3">
+                    <slot>
+                        <div v-html="text" />
+                    </slot>
+                </div>
             </div>
 
-            <div class="flex justify-end mt-3">
+            <div v-if="!hideButtons" class="flex justify-end mt-3">
                 <div class="join">
                     <button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
                         Cancel
@@ -42,5 +47,9 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    hideButtons: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
diff --git a/components/PlaylistGenerator.vue b/components/PlaylistGenerator.vue
index e04040c4..d92c92e2 100644
--- a/components/PlaylistGenerator.vue
+++ b/components/PlaylistGenerator.vue
@@ -1,12 +1,10 @@
 <template>
-    <div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
-        <div
-            class="flex flex-col bg-base-100 w-[800px] min-w-[400px] max-w-[90%] h-auto min-h-[600px] max-h-[80%] rounded-md p-5 shadow-xl"
-        >
+    <div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30 overflow-y-auto">
+        <div class="flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90%] h-[680px] rounded-md p-5 shadow-xl">
             <div class="font-bold text-lg">Generate Program</div>
 
-            <div class="h-[600px] mt-3">
-                <div role="tablist" class="tabs tabs-lifted h-full">
+            <div class="h-[calc(100%-95px)] mt-3">
+                <div role="tablist" class="tabs tabs-bordered">
                     <input
                         type="radio"
                         name="my_tabs_2"
@@ -16,14 +14,17 @@
                         @change="advancedGenerator = false"
                         checked
                     />
-                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4">
-                        <div class="h-full">
-                            <nav class="breadcrumbs px-3">
+                    <div role="tabpanel" class="tab-content pt-3">
+                        <div class="w-full">
+                            <nav class="breadcrumbs px-3 pt-0">
                                 <ul>
-                                    <li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
+                                    <li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
                                         <button
-                                            v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
-                                            @click="mediaStore.getTree(crumb.path)"
+                                            v-if="
+                                                mediaStore.folderCrumbs.length > 1 &&
+                                                mediaStore.folderCrumbs.length - 1 > index
+                                            "
+                                            @click="mediaStore.getTree(crumb.path, true)"
                                         >
                                             <i class="bi-folder-fill me-1" />
                                             {{ crumb.text }}
@@ -32,32 +33,31 @@
                                     </li>
                                 </ul>
                             </nav>
-                            <ul class="bg-base-300 h-[500px] overflow-auto m-1 py-1">
+                            <ul class="h-[475px] border border-my-gray rounded overflow-auto bg-base-300 m-1 py-1">
                                 <li
-                                    class="list-group-item browser-item even:bg-base-200 px-2"
+                                    class="even:bg-base-200 px-2 w-full"
                                     v-for="folder in mediaStore.folderList.folders"
                                     :key="folder.uid"
                                 >
-                                    <div class="grid grid-cols-[auto_40px]">
-                                        <div class="col browser-item-text">
-                                            <button
-                                                @click="
-                                                    ;[
-                                                        (selectedFolders = []),
-                                                        mediaStore.getTree(
-                                                            `/${mediaStore.folderList.source}/${folder.name}`.replace(
-                                                                /\/[/]+/g,
-                                                                '/'
-                                                            ),
-                                                            true
+                                    <div class="grid grid-cols-[auto_24px]">
+                                        <button
+                                            class="truncate text-left"
+                                            @click="
+                                                ;[
+                                                    (selectedFolders = []),
+                                                    mediaStore.getTree(
+                                                        `/${mediaStore.folderList.source}/${folder.name}`.replace(
+                                                            /\/[/]+/g,
+                                                            '/'
                                                         ),
-                                                    ]
-                                                "
-                                            >
-                                                <i class="bi-folder-fill" />
-                                                {{ folder.name }}
-                                            </button>
-                                        </div>
+                                                        true
+                                                    ),
+                                                ]
+                                            "
+                                        >
+                                            <i class="bi-folder-fill" />
+                                            {{ folder.name }}
+                                        </button>
                                         <div v-if="!generateFromAll" class="text-center">
                                             <input
                                                 class="checkbox checkbox-xs rounded"
@@ -87,145 +87,138 @@
                         aria-label="Advanced"
                         @change=";(advancedGenerator = true), resetCheckboxes()"
                     />
-                    <div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
-                        <div>
-                            <div class="row">
-                                <div class="col col-10">
-                                    <nav aria-label="breadcrumb">
-                                        <ol class="breadcrumb border-0">
-                                            <li
-                                                class="breadcrumb-item"
-                                                v-for="(crumb, index) in mediaStore.folderCrumbs"
-                                                :key="index"
-                                                :active="index === mediaStore.folderCrumbs.length - 1"
-                                                @click.prevent="mediaStore.getTree(crumb.path, true)"
+                    <div role="tabpanel" class="tab-content pt-3">
+                        <div class="w-full">
+                            <div class="grid grid-cols-2 px-3 pt-0">
+                                <nav class="breadcrumbs pt-0">
+                                    <ul>
+                                        <li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
+                                            <button
+                                                v-if="
+                                                    mediaStore.folderCrumbs.length > 1 &&
+                                                    mediaStore.folderCrumbs.length - 1 > index
+                                                "
+                                                @click="mediaStore.getTree(crumb.path, true)"
                                             >
-                                                <a
-                                                    v-if="
-                                                        mediaStore.folderCrumbs.length > 1 &&
-                                                        mediaStore.folderCrumbs.length - 1 > index
-                                                    "
-                                                    href="#"
-                                                >
-                                                    {{ crumb.text }}
-                                                </a>
-                                                <span v-else>{{ crumb.text }}</span>
-                                            </li>
-                                        </ol>
-                                    </nav>
-                                </div>
-                                <div class="col d-flex justify-content-end">
-                                    <button type="button" class="btn btn-primary p-2 py-0 m-1" @click="addTemplate()">
+                                                <i class="bi-folder-fill me-1" />
+                                                {{ crumb.text }}
+                                            </button>
+                                            <span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
+                                        </li>
+                                    </ul>
+                                </nav>
+                                <div class="flex justify-end">
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-primary"
+                                        title="Add time block"
+                                        @click="addTemplate()"
+                                    >
                                         <i class="bi bi-folder-plus"></i>
                                     </button>
                                 </div>
                             </div>
-                            <div class="row">
-                                <div class="col col-5 browser-col">
-                                    <Sortable
-                                        :list="mediaStore.folderList.folders"
-                                        :options="templateBrowserSortOptions"
-                                        item-key="uid"
-                                        class="list-group media-browser-scroll browser-div"
-                                        tag="ul"
-                                    >
-                                        <template #item="{ element, index }">
-                                            <li
-                                                :id="`adv_folder_${index}`"
-                                                class="draggable list-group-item browser-item"
-                                                :key="element.uid"
+                            <div
+                                class="h-[475px] border border-my-gray rounded grid grid-cols-[300px_auto] bg-base-300 m-1"
+                            >
+                                <Sortable
+                                    :list="mediaStore.folderList.folders"
+                                    :options="templateBrowserSortOptions"
+                                    item-key="uid"
+                                    class="overflow-auto border-e border-my-gray py-1"
+                                    tag="ul"
+                                >
+                                    <template #item="{ element, index }">
+                                        <li
+                                            :id="`adv_folder_${index}`"
+                                            class="even:bg-base-200 draggable px-2 w-full"
+                                            :key="element.uid"
+                                        >
+                                            <button
+                                                class="w-full truncate text-left"
+                                                @click="
+                                                    ;[
+                                                        (selectedFolders = []),
+                                                        mediaStore.getTree(
+                                                            `/${mediaStore.folderList.source}/${element.name}`.replace(
+                                                                /\/[/]+/g,
+                                                                '/'
+                                                            ),
+                                                            true
+                                                        ),
+                                                    ]
+                                                "
                                             >
-                                                <div class="row">
-                                                    <div class="col-1 browser-icons-col">
-                                                        <i class="bi-folder-fill browser-icons" />
-                                                    </div>
-                                                    <div class="col browser-item-text">
-                                                        <a
-                                                            class="link-light"
-                                                            href="#"
-                                                            @click="
-                                                                ;[
-                                                                    (selectedFolders = []),
-                                                                    mediaStore.getTree(
-                                                                        `/${mediaStore.folderList.source}/${element.name}`.replace(
-                                                                            /\/[/]+/g,
-                                                                            '/'
-                                                                        ),
-                                                                        true
-                                                                    ),
-                                                                ]
-                                                            "
-                                                        >
-                                                            {{ element.name }}
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </li>
-                                        </template>
-                                    </Sortable>
-                                </div>
-                                <div class="col template-col">
-                                    <ul class="list-group media-browser-scroll">
-                                        <li v-for="item in template.sources" :key="item.start" class="list-group-item">
-                                            <div class="input-group mb-3">
-                                                <span class="input-group-text">Start</span>
-                                                <input
-                                                    type="test"
-                                                    class="form-control"
-                                                    aria-label="Start"
-                                                    v-model="item.start"
-                                                />
-                                                <span class="input-group-text">Duration</span>
-                                                <input
-                                                    type="test"
-                                                    class="form-control"
-                                                    aria-label="Duration"
-                                                    v-model="item.duration"
-                                                />
-                                                <input
-                                                    type="checkbox"
-                                                    class="btn-check"
-                                                    :id="`shuffle-${item.start}`"
-                                                    autocomplete="off"
-                                                    v-model="item.shuffle"
-                                                />
-                                                <label class="btn btn-outline-primary" :for="`shuffle-${item.start}`">
-                                                    Shuffle
-                                                </label>
-                                            </div>
-
-                                            <Sortable
-                                                :list="item.paths"
-                                                item-key="index"
-                                                class="list-group w-100 border"
-                                                :style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
-                                                tag="ul"
-                                                :options="templateTargetSortOptions"
-                                                @add="addFolderToTemplate($event, item)"
-                                            >
-                                                <template #item="{ element, index }">
-                                                    <li
-                                                        :id="`path_${index}`"
-                                                        class="draggable grabbing list-group-item py-0"
-                                                        :key="index"
-                                                    >
-                                                        {{ element.split(/[\\/]+/).pop() }}
-                                                    </li>
-                                                </template>
-                                            </Sortable>
-
-                                            <div class="col d-flex justify-content-end">
-                                                <button
-                                                    type="button"
-                                                    class="btn btn-primary p-2 py-0 m-1"
-                                                    @click="removeTemplate(item)"
-                                                >
-                                                    <i class="bi-trash" />
-                                                </button>
-                                            </div>
+                                                <i class="bi-folder-fill" />
+                                                {{ element.name }}
+                                            </button>
                                         </li>
-                                    </ul>
-                                </div>
+                                    </template>
+                                </Sortable>
+                                <ul class="overflow-auto p-2">
+                                    <li
+                                        v-for="item in template.sources"
+                                        :key="item.start"
+                                        class="flex flex-col gap-1 justify-center items-center border border-my-gray rounded p-1"
+                                    >
+                                        <div class="grid grid-cols-[50px_67px_70px_67px_50px] join">
+                                            <div
+                                                class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
+                                            >
+                                                Start:
+                                            </div>
+                                            <input
+                                                type="text"
+                                                class="input input-sm input-bordered join-item px-2 text-center"
+                                                v-model="item.start"
+                                            />
+                                            <div
+                                                class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
+                                            >
+                                                Duration:
+                                            </div>
+                                            <input
+                                                type="text"
+                                                class="input input-sm input-bordered join-item px-2 text-center"
+                                                v-model="item.duration"
+                                            />
+                                            <button
+                                                class="btn btn-sm input-bordered join-item"
+                                                :class="item.shuffle ? 'bg-base-100' : 'bg-base-300'"
+                                                @click="item.shuffle = !item.shuffle"
+                                            >
+                                                {{ item.shuffle ? 'Shuffle' : 'Sorted' }}
+                                            </button>
+                                        </div>
+
+                                        <Sortable
+                                            :list="item.paths"
+                                            item-key="index"
+                                            class="w-full border border-my-gray rounded"
+                                            :style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
+                                            tag="ul"
+                                            :options="templateTargetSortOptions"
+                                            @add="addFolderToTemplate($event, item)"
+                                        >
+                                            <template #item="{ element, index }">
+                                                <li :id="`path_${index}`" class="draggable grabbing py-0 even:bg-base-200 px-2" :key="index">
+                                                    <i class="bi-folder-fill" />
+                                                    {{ element.split(/[\\/]+/).pop() }}
+                                                </li>
+                                            </template>
+                                        </Sortable>
+
+                                        <div class="w-full flex justify-end">
+                                            <button
+                                                type="button"
+                                                class="btn btn-sm bg-base-100"
+                                                @click="removeTemplate(item)"
+                                            >
+                                                <i class="bi-trash" />
+                                            </button>
+                                        </div>
+                                    </li>
+                                </ul>
                             </div>
                         </div>
                     </div>
@@ -236,14 +229,18 @@
                 <div v-if="!advancedGenerator" class="form-control">
                     <label class="label cursor-pointer w-12">
                         <span class="label-text">All</span>
-                        <input type="checkbox" v-model="generateFromAll" class="checkbox checkbox-xs rounded" @change="resetCheckboxes()" />
+                        <input
+                            type="checkbox"
+                            v-model="generateFromAll"
+                            class="checkbox checkbox-xs rounded"
+                            @change="resetCheckboxes()"
+                        />
                     </label>
                 </div>
                 <div class="join ms-2">
                     <button
                         type="button"
                         class="btn btn-sm btn-primary join-item"
-                        data-bs-dismiss="modal"
                         @click="resetCheckboxes(), resetTemplate(), close()"
                     >
                         Cancel
@@ -251,7 +248,6 @@
                     <button
                         type="button"
                         class="btn btn-sm btn-primary join-item"
-                        data-bs-dismiss="modal"
                         @click="generatePlaylist(), close()"
                     >
                         Ok
@@ -262,6 +258,8 @@
     </div>
 </template>
 <script setup lang="ts">
+const { $dayjs } = useNuxtApp()
+
 const authStore = useAuth()
 const configStore = useConfig()
 const indexStore = useIndex()
@@ -281,7 +279,6 @@ defineProps({
 })
 
 const advancedGenerator = ref(false)
-const playlistIsLoading = ref(false)
 const selectedFolders = ref([] as string[])
 const generateFromAll = ref(false)
 const template = ref({
@@ -299,7 +296,7 @@ const templateTargetSortOptions = {
 }
 
 async function generatePlaylist() {
-    playlistIsLoading.value = true
+    playlistStore.isLoading = true
     let body = null as BodyObject | null
 
     if (selectedFolders.value.length > 0 && !generateFromAll.value) {
@@ -326,17 +323,17 @@ async function generatePlaylist() {
                 response.program,
                 false
             )
-            indexStore.msgAlert('alert-success', 'Generate Playlist done...', 2)
+            indexStore.msgAlert('success', 'Generate Playlist done...', 2)
         })
         .catch((e: any) => {
-            indexStore.msgAlert('alert-error', e.data ? e.data : e, 4)
+            indexStore.msgAlert('error', e.data ? e.data : e, 4)
         })
 
     // reset selections
     resetCheckboxes()
     resetTemplate()
 
-    playlistIsLoading.value = false
+    playlistStore.isLoading = false
 }
 
 function setSelectedFolder(event: any, folder: string) {
diff --git a/components/SystemStats.vue b/components/SystemStats.vue
index 9ab2610e..43a8d03f 100644
--- a/components/SystemStats.vue
+++ b/components/SystemStats.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left">
+    <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow">
         <div class="p-4 bg-base-100">
             <span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
             <span v-if="sysStat.system.kernel">
diff --git a/layouts/default.vue b/layouts/default.vue
index 4f27636b..05f1a58f 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="min-h-screen bg-base-200">
-        <div v-if="authStore.isLogin && route.name !== 'index'">
+        <div v-if="authStore.isLogin && route.name !== 'index'" class="sticky top-0 z-10">
             <Menu />
         </div>
 
@@ -18,12 +18,5 @@ const authStore = useAuth()
 
 const route = useRoute()
 
-onMounted(() => {
-    // @ts-ignore
-    // new $bootstrap.Tooltip(document.body, {
-    //     selector: "[data-tooltip=tooltip]",
-    //     container: "body"
-    // })
-})
 await configStore.nuxtClientInit()
 </script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 35277947..404d4d2b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -61,13 +61,6 @@ export default defineNuxtConfig({
     },
 
     vite: {
-        css: {
-            preprocessorOptions: {
-                scss: {
-                    additionalData: '@import "@/assets/scss/_variables.scss";',
-                },
-            },
-        },
         build: {
             chunkSizeWarningLimit: 800000,
         },
diff --git a/package-lock.json b/package-lock.json
index a58ee488..4dd869e3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@nuxtjs/color-mode": "^3.3.3",
         "@pinia/nuxt": "^0.5.1",
         "@popperjs/core": "^2.11.8",
+        "@vuepic/vue-datepicker": "^8.4.0",
         "@vueuse/nuxt": "^10.9.0",
         "bootstrap-icons": "^1.11.3",
         "cookie-universal-nuxt": "^2.2.2",
@@ -4801,6 +4802,20 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
       "integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
     },
+    "node_modules/@vuepic/vue-datepicker": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz",
+      "integrity": "sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==",
+      "dependencies": {
+        "date-fns": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "vue": ">=3.2.0"
+      }
+    },
     "node_modules/@vueuse/components": {
       "version": "10.9.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
@@ -6711,6 +6726,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.10",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
diff --git a/package.json b/package.json
index df3fea48..177bb27c 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "@nuxtjs/color-mode": "^3.3.3",
     "@pinia/nuxt": "^0.5.1",
     "@popperjs/core": "^2.11.8",
+    "@vuepic/vue-datepicker": "^8.4.0",
     "@vueuse/nuxt": "^10.9.0",
     "bootstrap-icons": "^1.11.3",
     "cookie-universal-nuxt": "^2.2.2",
diff --git a/pages/index.vue b/pages/index.vue
index 65fef5b6..f9e36976 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -15,6 +15,21 @@
                     Configure
                 </NuxtLink>
                 <button class="btn join-item btn-primary" @click="logout()">Logout</button>
+                <label class="join-item btn btn-primary swap swap-rotate me-2">
+                    <input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
+
+                    <svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+                        <path
+                            d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
+                        />
+                    </svg>
+
+                    <svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+                        <path
+                            d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
+                        />
+                    </svg>
+                </label>
             </div>
         </div>
         <div v-else class="w-96 min-w-full flex flex-col justify-center items-center px-4">
@@ -45,7 +60,7 @@
                         <div
                             v-if="showLoginError"
                             role="alert"
-                            class="alert alert-error w-auto rounded z-2 h-12 p-[0.7rem]"
+                            class="alert error w-auto rounded z-2 h-12 p-[0.7rem]"
                         >
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -70,8 +85,10 @@
 </template>
 
 <script setup lang="ts">
+const colorMode = useColorMode()
 const authStore = useAuth()
 const configStore = useConfig()
+const indexStore = useIndex()
 
 const formError = ref('')
 const showLoginError = ref(false)
@@ -103,6 +120,16 @@ async function login() {
     }
 }
 
+function toggleDarkTheme() {
+    indexStore.darkMode = !indexStore.darkMode
+
+    if (indexStore.darkMode) {
+        colorMode.preference = 'dark'
+    } else {
+        colorMode.preference = 'light'
+    }
+}
+
 async function logout() {
     try {
         authStore.removeToken()
diff --git a/pages/logging.vue b/pages/logging.vue
index 0bdb0a27..da29e4cb 100644
--- a/pages/logging.vue
+++ b/pages/logging.vue
@@ -1,7 +1,18 @@
 <template>
     <div class="flex justify-end p-3 h-14">
         <div>
-            <input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
+            <VueDatePicker
+                    v-model="listDate"
+                    :clearable="false"
+                    :hide-navigation="['time']"
+                    :action-row="{ showCancel: false, showSelect: false, showPreview: false }"
+                    :format="calendarFormat"
+                    model-type="yyyy-MM-dd"
+                    auto-apply
+                    :dark="colorMode.value === 'dark'"
+                    input-class-name="input input-sm !input-bordered !w-[230px] text-right !pe-3"
+                    required
+                />
         </div>
     </div>
     <div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
@@ -12,6 +23,8 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
+const colorMode = useColorMode()
+
 useHead({
     title: 'Logging | ffplayout',
 })
@@ -33,6 +46,10 @@ watch([listDate, configID], () => {
     getLog()
 })
 
+const calendarFormat = (date: Date) => {
+    return $dayjs(date).format('dddd DD. MMM YYYY')
+}
+
 async function getLog() {
     let date = listDate.value
 
@@ -54,49 +71,49 @@ async function getLog() {
 }
 </script>
 
-<style lang="scss">
+<style>
 .log-time {
-    color: $log-time;
+    color: #666864;
 }
 
 .log-number {
-    color: $log-number;
+    color: #e2c317;
 }
 
 .log-addr {
-    color: $log-addr;
+    color: #ad7fa8;
     font-weight: 500;
 }
 
 .log-cmd {
-    color: $log-cmd;
+    color: #6c95c2;
 }
 
 .log-info {
-    color: $log-info;
+    color: #8ae234;
 }
 
 .log-warning {
-    color: $log-warning;
+    color: #ff8700;
 }
 
 .log-error {
-    color: $log-error;
+    color: #d32828;
 }
 
 .log-debug {
-    color: $log-debug;
+    color: #6e99c7;
 }
 
 .log-decoder {
-    color: $log-decoder;
+    color: #56efff;
 }
 
 .log-encoder {
-    color: $log-encoder;
+    color: #45ccee;
 }
 
 .log-server {
-    color: $log-server;
+    color: #23cbdd;
 }
 </style>
diff --git a/pages/media.vue b/pages/media.vue
index 9804b0cf..37e03fc2 100644
--- a/pages/media.vue
+++ b/pages/media.vue
@@ -21,15 +21,15 @@
             </ul>
         </nav>
 
-        <div class="h-[calc(100%-34px)] bg-base-100">
+        <div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
             <div
                 v-if="mediaStore.isLoading"
-                class="w-[calc(100%-16px)] h-[calc(100%-174px)] absolute z-10 flex justify-center bg-base-100/70"
+                class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
             >
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
-            <splitpanes :horizontal="horizontal" class="border border-my-gray rounded">
-                <pane min-size="14" max-size="80" size="24" class="h-full pb-1">
+            <splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
+                <pane min-size="14" max-size="80" size="20" class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-t' : 'rounded-s'">
                     <ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
                         <li
                             v-if="mediaStore.folderTree.parent_folders.length > 0"
@@ -69,7 +69,7 @@
                         </li>
                     </ul>
                 </pane>
-                <pane class="h-full pb-1">
+                <pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
                     <ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
                         <li
                             class="grid grid-cols-[auto_28px] px-2 gap-1"
@@ -155,15 +155,16 @@
                 </pane>
             </splitpanes>
         </div>
-    </div>
-    <div class="flex justify-end pe-10 mt-7">
-        <div class="join">
-            <button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
-                <i class="bi-folder-plus" />
-            </button>
-            <button class="btn btn-sm btn-primary join-item" title="Upload File" @click="showUploadModal = true">
-                <i class="bi-upload" />
-            </button>
+
+        <div class="flex justify-end py-4 pe-2">
+            <div class="join">
+                <button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
+                    <i class="bi-folder-plus" />
+                </button>
+                <button class="btn btn-sm btn-primary join-item" title="Upload File" @click="showUploadModal = true">
+                    <i class="bi-upload" />
+                </button>
+            </div>
         </div>
     </div>
 
@@ -366,7 +367,7 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
                 mediaStore.getTree(mediaStore.folderTree.source)
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
+                indexStore.msgAlert('error', `Delete error: ${e}`, 3)
             })
     }
 }
@@ -428,12 +429,12 @@ async function deleteFileOrFolder(del: boolean) {
         })
             .then(async (response) => {
                 if (response.status !== 200) {
-                    indexStore.msgAlert('alert-error', `${await response.text()}`, 5)
+                    indexStore.msgAlert('error', `${await response.text()}`, 5)
                 }
                 mediaStore.getTree(mediaStore.folderTree.source)
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete error: ${e}`, 5)
+                indexStore.msgAlert('error', `Delete error: ${e}`, 5)
             })
     }
 
@@ -461,7 +462,7 @@ async function renameFile(ren: boolean) {
                 mediaStore.getTree(mediaStore.folderTree.source)
             })
             .catch((e) => {
-                indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
+                indexStore.msgAlert('error', `Delete error: ${e}`, 3)
             })
     }
 
@@ -482,7 +483,7 @@ async function createFolder(create: boolean) {
         lastPath.value = mediaStore.folderTree.source
 
         if (mediaStore.folderTree.folders.includes(folderName.value)) {
-            indexStore.msgAlert('alert-warning', `Folder "${folderName.value.name}" exists already!`, 2)
+            indexStore.msgAlert('warning', `Folder "${folderName.value.name}" exists already!`, 2)
 
             return
         }
@@ -493,11 +494,11 @@ async function createFolder(create: boolean) {
             body: JSON.stringify({ source: path }),
         })
             .then(() => {
-                indexStore.msgAlert('alert-success', 'Folder create done...', 2)
+                indexStore.msgAlert('success', 'Folder create done...', 2)
             })
             .catch((e: string) => {
-                indexStore.msgAlert('alert-error', `Folder create error: ${e}`, 3)
-                indexStore.alertVariant = 'alert-error'
+                indexStore.msgAlert('error', `Folder create error: ${e}`, 3)
+                indexStore.alertVariant = 'error'
             })
 
         mediaStore.getTree(lastPath.value)
@@ -536,7 +537,7 @@ async function upload(file: any): Promise<null | undefined> {
         }
 
         xhr.value.upload.onerror = () => {
-            indexStore.msgAlert('alert-error', `Upload error: ${xhr.value.status}`, 3)
+            indexStore.msgAlert('error', `Upload error: ${xhr.value.status}`, 3)
 
             resolve(undefined)
         }
@@ -563,7 +564,7 @@ async function uploadFiles(upl: boolean) {
             currentNumber.value = i + 1
 
             if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
-                indexStore.msgAlert('alert-warning', 'File exists already!', 3)
+                indexStore.msgAlert('warning', 'File exists already!', 3)
             } else {
                 await upload(file)
             }
diff --git a/pages/message.vue b/pages/message.vue
index f351d4c0..6e8d17c4 100644
--- a/pages/message.vue
+++ b/pages/message.vue
@@ -352,9 +352,9 @@ async function savePreset() {
         })
 
         if (response.status === 200) {
-            indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
+            indexStore.msgAlert('success', 'Save Preset done!', 2)
         } else {
-            indexStore.msgAlert('alert-error', 'Save Preset failed!', 2)
+            indexStore.msgAlert('error', 'Save Preset failed!', 2)
         }
     }
 }
@@ -390,10 +390,10 @@ async function createNewPreset() {
     })
 
     if (response.status === 200) {
-        indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
+        indexStore.msgAlert('success', 'Save Preset done!', 2)
         getPreset(-1)
     } else {
-        indexStore.msgAlert('alert-error', 'Save Preset failed!', 2)
+        indexStore.msgAlert('error', 'Save Preset failed!', 2)
     }
 }
 
@@ -431,9 +431,9 @@ async function submitMessage() {
     })
 
     if (response.status === 200) {
-        indexStore.msgAlert('alert-success', 'Sending success...', 2)
+        indexStore.msgAlert('success', 'Sending success...', 2)
     } else {
-        indexStore.msgAlert('alert-error', 'Sending failed...', 2)
+        indexStore.msgAlert('error', 'Sending failed...', 2)
     }
 }
 </script>
diff --git a/pages/player.vue b/pages/player.vue
index fdaa8f0b..64221253 100644
--- a/pages/player.vue
+++ b/pages/player.vue
@@ -3,15 +3,31 @@
         <Control />
         <div class="flex justify-end p-1">
             <div>
-                <input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
+                <VueDatePicker
+                    v-model="listDate"
+                    :clearable="false"
+                    :hide-navigation="['time']"
+                    :action-row="{ showCancel: false, showSelect: false, showPreview: false }"
+                    :format="calendarFormat"
+                    model-type="yyyy-MM-dd"
+                    auto-apply
+                    :dark="colorMode.value === 'dark'"
+                    input-class-name="input input-sm !input-bordered !w-[230px] text-right !pe-3"
+                    required
+                />
             </div>
         </div>
-        <div class="p-1 min-h-[500px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
-            <splitpanes class="border border-my-gray rounded">
-                <pane class="h-full" min-size="0" max-size="80" size="20">
+        <div class="p-1 min-h-[260px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
+            <splitpanes class="border border-my-gray rounded shadow">
+                <pane
+                    class="relative h-full !bg-base-300 rounded-s"
+                    min-size="0"
+                    max-size="80"
+                    :size="width > 768 ? '20' : '0'"
+                >
                     <div
                         v-if="mediaStore.isLoading"
-                        class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
+                        class="h-full w-full absolute z-10 flex justify-center bg-base-100/70"
                     >
                         <span class="loading loading-spinner loading-lg" />
                     </div>
@@ -34,7 +50,7 @@
                         </div>
                     </div>
 
-                    <ul class="h-[calc(100%-40px)] overflow-auto m-1">
+                    <ul class="h-[calc(100%-48px)] overflow-auto m-1">
                         <li class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
                             <button
                                 class="truncate"
@@ -48,10 +64,11 @@
                             <template #item="{ element, index }">
                                 <li
                                     :id="`file_${index}`"
-                                    class="draggable px-1 grid grid-cols-[auto_110px]"
+                                    class="px-1 grid grid-cols-[auto_110px]"
+                                    :class="{ 'grabbing cursor-grab': width > 768 }"
                                     :key="element.name"
                                 >
-                                    <div class="truncate cursor-grab">
+                                    <div class="truncate">
                                         <i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
                                         <i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
                                         <i
@@ -77,9 +94,15 @@
                     </ul>
                 </pane>
                 <pane>
-                    <div class="w-full h-full">
+                    <div class="relative w-full h-full !bg-base-300 rounded-e">
                         <div
-                            class="grid grid-cols-[70px_auto_50px_70px_70px_70px_30px_60px_80px] bg-base-100 py-2 px-3 border-b border-my-gray"
+                            v-if="playlistStore.isLoading"
+                            class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
+                        >
+                            <span class="loading loading-spinner loading-lg" />
+                        </div>
+                        <div
+                            class="grid grid-cols-[70px_auto_50px_70px_45px] md:grid-cols-[70px_auto_50px_70px_70px_70px_30px_45px_50px] bg-base-100 rounded-tr-lg py-2 px-3 border-b border-my-gray"
                         >
                             <div>Start</div>
                             <div>File</div>
@@ -91,19 +114,12 @@
                             <div class="text-center">Edit</div>
                             <div class="hidden md:flex justify-center">Delete</div>
                         </div>
-                        <div
-                            v-if="playlistIsLoading"
-                            class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
-                        >
-                            <span class="loading loading-spinner loading-lg" />
-                        </div>
-                        <div id="scroll-container" class="h-full overflow-auto">
+                        <div id="scroll-container" class="h-[calc(100%-44px)] overflow-auto">
                             <Sortable
                                 :list="playlistStore.playlist"
                                 item-key="uid"
-                                class=""
                                 :style="`height: ${
-                                    playlistStore.playlist ? playlistStore.playlist.length * 38 + 76 : 300
+                                    playlistStore.playlist ? playlistStore.playlist.length * 38 + 38 : 300
                                 }px`"
                                 tag="ul"
                                 :options="playlistSortOptions"
@@ -113,16 +129,18 @@
                                 <template #item="{ element, index }">
                                     <li
                                         :id="`clip_${index}`"
-                                        class="draggable bg-base-300 even:bg-base-100 grid grid-cols-[70px_auto_50px_70px_70px_70px_30px_60px_80px] h-[38px] px-3 py-[8px]"
+                                        class="draggable grid grid-cols-[70px_auto_50px_70px_45px] md:grid-cols-[70px_auto_50px_70px_70px_70px_30px_45px_50px] h-[38px] px-3 py-[8px]"
                                         :class="
                                             index === playlistStore.currentClipIndex && listDate === todayDate
-                                                ? 'active-playlist-clip'
-                                                : ''
+                                                ? 'bg-lime-500/30'
+                                                : 'bg-base-300 even:bg-base-100'
                                         "
                                         :key="element.uid"
                                     >
                                         <div>{{ secondsToTime(element.begin) }}</div>
-                                        <div class="grabbing truncate cursor-grab">{{ filename(element.source) }}</div>
+                                        <div class="truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
+                                            {{ filename(element.source) }}
+                                        </div>
                                         <div class="text-center">
                                             <button @click=";(showPreviewModal = true), setPreviewData(element.source)">
                                                 <i class="bi-play-fill" />
@@ -148,7 +166,9 @@
                                                 <i class="bi-pencil-square" />
                                             </button>
                                         </div>
-                                        <div class="text-center hidden md:flex justify-center">
+                                        <div
+                                            class="text-center hidden md:flex justify-center hover:text-base-content/70"
+                                        >
                                             <button @click="deletePlaylistItem(index)">
                                                 <i class="bi-x-circle-fill" />
                                             </button>
@@ -162,7 +182,7 @@
             </splitpanes>
         </div>
 
-        <div class="join flex justify-end m-3">
+        <div class="h-16 join flex justify-end p-3">
             <button class="btn btn-sm btn-primary join-item" title="Copy Playlist" @click="showCopyModal = true">
                 <i class="bi-files" />
             </button>
@@ -209,7 +229,12 @@
             </button>
         </div>
 
-        <Modal :show="showPreviewModal" :title="`Preview: ${previewName}`" :modal-action="closePlayer">
+        <Modal
+            :show="showPreviewModal"
+            :title="`Preview: ${previewName}`"
+            :hide-buttons="true"
+            :modal-action="closePlayer"
+        >
             <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" />
@@ -300,7 +325,9 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
 
+const colorMode = useColorMode()
 const { $_, $dayjs } = useNuxtApp()
+const { width } = useWindowSize({ initialWidth: 800 })
 const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
 const { processPlaylist, genUID } = playlistOperations()
 const contentType = { 'content-type': 'application/json;charset=UTF-8' }
@@ -319,7 +346,6 @@ const { configID } = storeToRefs(useConfig())
 const { listDate } = storeToRefs(usePlaylist())
 
 const fileImport = ref()
-const playlistIsLoading = ref(false)
 const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const targetDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
 const editId = ref(-1)
@@ -339,6 +365,7 @@ const isVideo = ref(false)
 
 const browserSortOptions = {
     group: { name: 'playlist', pull: 'clone', put: false },
+    handle: '.grabbing',
     sort: false,
 }
 const playlistSortOptions = {
@@ -382,10 +409,14 @@ function scrollTo(index: number) {
     }
 }
 
+const calendarFormat = (date: Date) => {
+    return $dayjs(date).format('dddd DD. MMM YYYY')
+}
+
 async function getPlaylist() {
-    playlistIsLoading.value = true
+    playlistStore.isLoading = true
     await playlistStore.getPlaylist(listDate.value)
-    playlistIsLoading.value = false
+    playlistStore.isLoading = false
 
     if (listDate.value === todayDate.value) {
         scrollTo(playlistStore.currentClipIndex)
@@ -607,11 +638,11 @@ async function importPlaylist(imp: boolean) {
         const formData = new FormData()
         formData.append(textFile.value[0].name, textFile.value[0])
 
-        playlistIsLoading.value = true
+        playlistStore.isLoading = true
         await $fetch(
             `/api/file/${configStore.configGui[configStore.configID].id}/import/?file=${
                 textFile.value[0].name
-            }&date=${listDate}`,
+            }&date=${listDate.value}`,
             {
                 method: 'PUT',
                 headers: authStore.authHeader,
@@ -619,15 +650,15 @@ async function importPlaylist(imp: boolean) {
             }
         )
             .then(() => {
-                indexStore.msgAlert('alert-success', 'Import success!', 2)
+                indexStore.msgAlert('success', 'Import success!', 2)
                 playlistStore.getPlaylist(listDate.value)
             })
             .catch((e: string) => {
-                indexStore.msgAlert('alert-error', e, 4)
+                indexStore.msgAlert('error', e, 4)
             })
     }
 
-    playlistIsLoading.value = false
+    playlistStore.isLoading = false
     textFile.value = null
     fileImport.value.value = null
 }
@@ -658,13 +689,13 @@ async function savePlaylist(save: boolean) {
             }),
         })
             .then((response: any) => {
-                indexStore.msgAlert('alert-success', response, 2)
+                indexStore.msgAlert('success', response, 2)
             })
             .catch((e: any) => {
                 if (e.status === 409) {
-                    indexStore.msgAlert('alert-warning', e.data, 2)
+                    indexStore.msgAlert('warning', e.data, 2)
                 } else {
-                    indexStore.msgAlert('alert-error', e, 4)
+                    indexStore.msgAlert('error', e, 4)
                 }
             })
     }
@@ -674,140 +705,14 @@ async function deletePlaylist(del: boolean) {
     showDeleteModal.value = false
 
     if (del) {
-        await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate}`, {
+        await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate.value}`, {
             method: 'DELETE',
             headers: { ...contentType, ...authStore.authHeader },
         }).then(() => {
             playlistStore.playlist = []
 
-            indexStore.msgAlert('alert-warning', 'Playlist deleted...', 2)
+            indexStore.msgAlert('warning', 'Playlist deleted...', 2)
         })
     }
 }
 </script>
-
-<style lang="scss" scoped>
-.filename,
-.browser-item {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-}
-
-.loading-overlay {
-    width: 100%;
-    height: 100%;
-}
-
-.player-container {
-    position: relative;
-    width: 100%;
-    max-width: 100%;
-    height: calc(100% - 140px);
-}
-
-.playlist-container {
-    height: 100%;
-    border: 1px solid $border-color;
-    border-top: none;
-    border-left: none;
-    border-radius: $b-radius;
-}
-
-.player-container .media-browser-scroll {
-    height: calc(100% - 39px);
-}
-
-.active-playlist-clip {
-    background-color: #565e6a !important;
-}
-
-.list-row {
-    height: calc(100% - 480px);
-    min-height: 300px;
-}
-
-.pane-row {
-    margin: 0;
-}
-
-.playlist-container {
-    width: 100%;
-    height: 100%;
-}
-
-.timecode {
-    min-width: 65px;
-    max-width: 90px;
-}
-
-.playlist-input {
-    min-width: 42px;
-    max-width: 60px;
-}
-
-.playlist-list-group,
-#playlist-group {
-    height: 100%;
-}
-
-.playlist-item {
-    height: 38px;
-}
-
-.playlist-item:nth-of-type(odd) {
-    background-color: #3b424a;
-}
-
-.playlist-item:hover {
-    background-color: #1c1e22;
-}
-
-.overLength {
-    background-color: #ed890641 !important;
-}
-
-#generateModal .modal-body {
-    height: 600px;
-}
-
-.browser-col,
-.template-col {
-    height: 532px;
-}
-
-#generateModal {
-    --bs-modal-width: 800px;
-}
-
-#generateModal .media-browser-scroll {
-    height: calc(100% - 35px);
-}
-
-#generateModal .browser-div li:nth-of-type(odd) {
-    background-color: #3b424a;
-}
-
-.select-all-div {
-    margin-right: 20px;
-}
-
-.active-playlist-clip {
-    background-color: #405f51 !important;
-}
-</style>
-<style>
-@media (max-width: 575px) {
-    .mobile-hidden {
-        display: none;
-    }
-
-    /*.splitpanes__splitter {
-        display: none !important;
-    }*/
-
-    .playlist-pane {
-        width: 100% !important;
-    }
-}
-</style>
diff --git a/plugins/dayjs.ts b/plugins/dayjs.ts
index 43e06fef..d4deaf02 100644
--- a/plugins/dayjs.ts
+++ b/plugins/dayjs.ts
@@ -1,8 +1,15 @@
 import dayjs from 'dayjs'
 import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+import LocalizedFormat from 'dayjs/plugin/localizedFormat.js'
 import timezone from 'dayjs/plugin/timezone.js'
 import utc from 'dayjs/plugin/utc.js'
 
+// import 'dayjs/locale/de'
+// import 'dayjs/locale/en'
+// import 'dayjs/locale/es'
+// import 'dayjs/locale/pt'
+// import 'dayjs/locale/ru'
+
 declare module '#app' {
     interface NuxtApp {
         $dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
@@ -16,6 +23,7 @@ declare module '@vue/runtime-core' {
 
 export default defineNuxtPlugin((nuxtApp) => {
     dayjs.extend(customParseFormat)
+    dayjs.extend(LocalizedFormat)
     dayjs.extend(timezone)
     dayjs.extend(utc)
 
diff --git a/plugins/vue-datepicker.client.ts b/plugins/vue-datepicker.client.ts
new file mode 100644
index 00000000..c549371b
--- /dev/null
+++ b/plugins/vue-datepicker.client.ts
@@ -0,0 +1,6 @@
+import VueDatePicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css'
+
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.component('VueDatePicker', VueDatePicker)
+})
diff --git a/stores/config.ts b/stores/config.ts
index 8a795627..a733b2fc 100644
--- a/stores/config.ts
+++ b/stores/config.ts
@@ -74,7 +74,7 @@ export const useConfig = defineStore('config', {
                         },
                     ]
 
-                    indexStore.msgAlert('alert-error', e, 3)
+                    indexStore.msgAlert('error', e, 3)
                 })
         },
 
@@ -143,7 +143,7 @@ export const useConfig = defineStore('config', {
                     this.configPlayout = data
                 })
                 .catch(() => {
-                    indexStore.msgAlert('alert-error', 'No playout config found!', 3)
+                    indexStore.msgAlert('error', 'No playout config found!', 3)
                 })
         },
 
diff --git a/stores/index.ts b/stores/index.ts
index 6c65562a..4668783b 100644
--- a/stores/index.ts
+++ b/stores/index.ts
@@ -4,7 +4,7 @@ export const useIndex = defineStore('index', {
     state: () => ({
         darkMode: false,
         showAlert: false,
-        alertVariant: 'alert-success',
+        alertVariant: 'success',
         alertMsg: '',
     }),
 
@@ -17,9 +17,9 @@ export const useIndex = defineStore('index', {
 
             setTimeout(() => {
                 this.showAlert = false
-                this.alertVariant = 'alert-success'
+                this.alertVariant = 'success'
                 this.alertMsg = ''
-            }, seconds * 1000);
+            }, seconds * 1000)
         },
     },
 })
diff --git a/stores/media.ts b/stores/media.ts
index bcaf9957..0e78c52f 100644
--- a/stores/media.ts
+++ b/stores/media.ts
@@ -15,7 +15,10 @@ export const useMedia = defineStore('media', {
     getters: {},
     actions: {
         async getTree(path: string, foldersOnly: boolean = false) {
-            this.isLoading = true
+            if (!foldersOnly) {
+                this.isLoading = true
+            }
+
             const authStore = useAuth()
             const configStore = useConfig()
             const indexStore = useIndex()
@@ -30,11 +33,10 @@ export const useMedia = defineStore('media', {
                 body: JSON.stringify({ source: path, folders_only: foldersOnly }),
             })
                 .then((response) => {
-
                     if (response.status === 200) {
                         return response.json()
                     } else {
-                        indexStore.msgAlert('alert-error', 'Storage not exist!', 3)
+                        indexStore.msgAlert('error', 'Storage not exist!', 3)
 
                         return {
                             source: '',
@@ -63,19 +65,19 @@ export const useMedia = defineStore('media', {
 
                     if (foldersOnly) {
                         this.folderCrumbs = crumbs
-                        data.parent_folders = data.parent_folders.map((i: any) => ({uid: genUID(), name: i}))
-                        data.folders = data.folders.map((i: any) => ({uid: genUID(), name: i}))
+                        data.parent_folders = data.parent_folders.map((i: any) => ({ uid: genUID(), name: i }))
+                        data.folders = data.folders.map((i: any) => ({ uid: genUID(), name: i }))
                         this.folderList = data
                     } else {
                         this.currentPath = path
                         this.crumbs = crumbs
-                        data.parent_folders = data.parent_folders.map((i: any) => ({uid: genUID(), name: i}))
-                        data.folders = data.folders.map((i: any) => ({uid: genUID(), name: i}))
+                        data.parent_folders = data.parent_folders.map((i: any) => ({ uid: genUID(), name: i }))
+                        data.folders = data.folders.map((i: any) => ({ uid: genUID(), name: i }))
                         this.folderTree = data
                     }
                 })
 
-                this.isLoading = false
+            this.isLoading = false
         },
     },
 })
diff --git a/stores/playlist.ts b/stores/playlist.ts
index 52c6e34b..e8f8e684 100644
--- a/stores/playlist.ts
+++ b/stores/playlist.ts
@@ -13,6 +13,7 @@ const { processPlaylist } = playlistOperations()
 export const usePlaylist = defineStore('playlist', {
     state: () => ({
         playlist: [] as PlaylistItem[],
+        isLoading: false,
         listDate: dayjs().format('YYYY-MM-DD'),
         progressValue: 0,
         currentClip: 'No clip is playing',
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 67be6251..d8a25964 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 20px rgba(0, 0, 0, 0.3)',
+                'glow': '0 0 10px rgba(0, 0, 0, 0.3)',
             },
             colors: {
                 'my-gray': 'var(--my-gray)',