diff --git a/components/ConfigUser.vue b/components/ConfigUser.vue
index c86a7a09..8d5ff6b5 100644
--- a/components/ConfigUser.vue
+++ b/components/ConfigUser.vue
@@ -1,124 +1,137 @@
 <template>
-    <div class="max-w-[1200px] pe-8">
+    <div class="w-full max-w-[800px] pe-8">
         <h2 class="pt-3 text-3xl">User Configuration</h2>
-        <div class="flex w-full mt-5">
-            <div class="col-sm-2"></div>
-            <div class="col-sm-4 ms-1">
-                <select class="form-select" v-model="selected" @change="onChange($event)">
+        <div class="flex 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>
             </div>
-            <div class="col px-0">
-                <div class="float-end">
-                    <button
-                        class="btn btn-primary me-2"
-                        title="Add new User"
-                        data-bs-toggle="modal"
-                        data-bs-target="#userModal"
-                    >
-                        Add User
-                    </button>
-                    <button class="btn btn-primary" @click="deleteUser()">Delete</button>
-                </div>
+            <div class="flex-none join">
+                <button class="join-item btn btn-primary" title="Add new User" @click="showUserModal = true">
+                    Add User
+                </button>
+                <button class="join-item btn btn-primary" title="Delete selected user" @click="deleteUser()">
+                    Delete
+                </button>
             </div>
         </div>
         <form v-if="configStore.configUser" @submit.prevent="onSubmitUser">
-            <div class="mb-3 row">
-                <label for="userName" class="col-sm-2 col-form-label">Username</label>
-                <div class="col-sm-10">
-                    <input
-                        type="text"
-                        class="form-control"
-                        id="userName"
-                        v-model="configStore.configUser.username"
-                        disabled
-                    />
+            <label class="form-control w-full max-w-md">
+                <div class="label">
+                    <span class="label-text">Username</span>
                 </div>
-            </div>
-            <div class="mb-3 row">
-                <label for="userMail" class="col-sm-2 col-form-label">mail</label>
-                <div class="col-sm-10">
-                    <input type="email" class="form-control" id="userMail" v-model="configStore.configUser.mail" />
+                <input
+                    type="text"
+                    placeholder="Name"
+                    class="input input-bordered w-full !bg-base-100"
+                    v-model="configStore.configUser.username"
+                    disabled
+                />
+            </label>
+
+            <label class="form-control w-full max-w-md mt-3">
+                <div class="label">
+                    <span class="label-text">Mail</span>
                 </div>
-            </div>
-            <div class="mb-3 row">
-                <label for="userPass1" class="col-sm-2 col-form-label">New Password</label>
-                <div class="col-sm-10">
-                    <input type="password" class="form-control" id="userPass1" v-model="newPass" />
+                <input
+                    type="email"
+                    placeholder="mail"
+                    class="input input-bordered w-full"
+                    v-model="configStore.configUser.mail"
+                />
+            </label>
+
+            <label class="form-control w-full max-w-md mt-3">
+                <div class="label">
+                    <span class="label-text">New Password</span>
                 </div>
-            </div>
-            <div class="mb-3 row">
-                <label for="userPass2" class="col-sm-2 col-form-label">Confirm Password</label>
-                <div class="col-sm-10">
-                    <input type="password" class="form-control" id="userPass2" v-model="confirmPass" />
-                </div>
-            </div>
-            <div class="row">
-                <div class="col-1" style="min-width: 85px">
-                    <button class="btn btn-primary" type="submit">Save</button>
+                <input
+                    type="password"
+                    placeholder="New password"
+                    class="input input-bordered w-full"
+                    v-model="newPass"
+                />
+            </label>
+
+            <label class="form-control w-full max-w-md mt-3">
+                <div class="label">
+                    <span class="label-text">Confirm Password</span>
                 </div>
+                <input
+                    type="password"
+                    placeholder="Confirm password"
+                    class="input input-bordered w-full"
+                    v-model="confirmPass"
+                />
+            </label>
+
+            <div>
+                <button class="btn btn-primary mt-5" type="submit">Save</button>
             </div>
         </form>
     </div>
 
-    <div id="userModal" ref="userModal" class="modal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h1 class="modal-title fs-5" id="userModalLabel">Add User</h1>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
+    <div
+        v-if="showUserModal"
+        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-full max-w-[500px] h-[576px] rounded-md p-5 shadow-xl">
+            <div class="font-bold text-lg">Add user</div>
+
+            <form @reset="clearUser" @submit.prevent="addUser">
+                <label class="form-control w-full mt-7">
+                    <div class="label">
+                        <span class="label-text">Username</span>
+                    </div>
+                    <input type="text" placeholder="Name" class="input input-bordered w-full" v-model="user.username" />
+                </label>
+
+                <label class="form-control w-full mt-3">
+                    <div class="label">
+                        <span class="label-text">Mail</span>
+                    </div>
+                    <input type="email" placeholder="Mail" class="input input-bordered w-full" v-model="user.mail" />
+                </label>
+
+                <label class="form-control w-full mt-3">
+                    <div class="label">
+                        <span class="label-text">Password</span>
+                    </div>
+                    <input
+                        type="password"
+                        placeholder="Password"
+                        class="input input-bordered w-full"
+                        v-model="user.password"
+                    />
+                </label>
+
+                <label class="form-control w-full mt-3">
+                    <div class="label">
+                        <span class="label-text">Confirm Password</span>
+                    </div>
+                    <input
+                        type="password"
+                        placeholder="Password"
+                        class="input input-bordered w-full"
+                        v-model="user.confirm"
+                    />
+                </label>
+
+                <div class="form-control mt-3">
+                    <label class="label cursor-pointer w-20">
+                        <span class="label-text">Admin</span>
+                        <input type="checkbox" class="checkbox" v-model.number="user.admin" />
+                    </label>
                 </div>
-                <form @reset="clearUser" @submit.prevent="addUser">
-                    <div class="modal-body">
-                        <label for="name-input" class="form-label">Username</label>
-                        <input
-                            type="text"
-                            class="form-control"
-                            id="name-input"
-                            aria-describedby="Username"
-                            v-model.number="user.username"
-                            required
-                        />
-                        <label for="mail-input" class="form-label mt-2">Mail</label>
-                        <input
-                            type="email"
-                            class="form-control"
-                            id="mail-input"
-                            aria-describedby="Mail Address"
-                            v-model.number="user.mail"
-                            required
-                        />
-                        <label for="pass-input" class="form-label mt-2">Password</label>
-                        <input
-                            type="password"
-                            class="form-control"
-                            id="pass-input"
-                            aria-describedby="Password"
-                            v-model.string="user.password"
-                            required
-                        />
-                        <label for="confirm-input" class="form-label mt-2">Confirm Password</label>
-                        <input
-                            type="password"
-                            class="form-control"
-                            id="confirm-input"
-                            aria-describedby="Confirm Password"
-                            v-model.string="user.confirm"
-                            required
-                        />
-                        <div class="form-check mt-3">
-                            <input class="form-check-input" type="checkbox" id="isAdmin" v-model.number="user.admin" />
-                            <label class="form-check-label" for="isAdmin">Admin</label>
-                        </div>
+
+                <div class="flex justify-end mt-2">
+                    <div class="join">
+                        <button class="btn join-item" type="reset">Cancel</button>
+                        <button class="btn join-item" type="submit">Ok</button>
                     </div>
-                    <div class="modal-footer">
-                        <button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
-                            Cancel
-                        </button>
-                        <button type="submit" class="btn btn-primary">Ok</button>
-                    </div>
-                </form>
-            </div>
+                </div>
+            </form>
         </div>
     </div>
 </template>
@@ -128,11 +141,9 @@ const authStore = useAuth()
 const configStore = useConfig()
 const indexStore = useIndex()
 
-const { $bootstrap } = useNuxtApp()
-
 const selected = ref(null)
 const users = ref([] as User[])
-const userModal = ref()
+const showUserModal = ref(false)
 const newPass = ref('')
 const confirmPass = ref('')
 
@@ -211,6 +222,8 @@ async function clearUser() {
     user.value.confirm = ''
     user.value.admin = false
     user.value.role_id = 2
+
+    showUserModal.value = false
 }
 
 async function addUser() {
@@ -223,9 +236,7 @@ async function addUser() {
     delete user.value.admin
 
     if (user.value.password === user.value.confirm) {
-        // @ts-ignore
-        const modal = $bootstrap.Modal.getOrCreateInstance(userModal.value)
-        modal.hide()
+        showUserModal.value = false
 
         authStore.inspectToken()
         const update = await configStore.addNewUser(user.value)
diff --git a/components/Menu.vue b/components/Menu.vue
index 2a97b9da..7a5bcd80 100644
--- a/components/Menu.vue
+++ b/components/Menu.vue
@@ -23,13 +23,20 @@
                 </div>
                 <ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
                     <li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
-                        <details v-if="item.name === 'channel' && configStore.configGui.length > 1">
+                        <NuxtLink :to="item.link" class="h-[27px] text-base" exactActiveClass="is-active">
+                            <span>
+                                {{ item.name }}
+                            </span>
+                        </NuxtLink>
+                    </li>
+                    <li v-if="configStore.configGui.length > 1">
+                        <details>
                             <summary>
-                                <NuxtLink :to="item.link" class="h-[19px] text-base">
+                                <div class="h-[19px] text-base">
                                     <span>
-                                        {{ item.name }}
+                                        Channels
                                     </span>
-                                </NuxtLink>
+                                </div>
                             </summary>
                             <ul class="p-2">
                                 <li v-for="(channel, index) in configStore.configGui" :key="index">
@@ -39,11 +46,6 @@
                                 </li>
                             </ul>
                         </details>
-                        <NuxtLink v-else :to="item.link" class="h-[27px] text-base" exactActiveClass="is-active">
-                            <span>
-                                {{ item.name }}
-                            </span>
-                        </NuxtLink>
                     </li>
                     <li class="bg-base-100 rounded-md">
                         <button class="h-[27px]" exactActiveClass="is-active" @click="logout()">Logout</button>
@@ -54,15 +56,21 @@
         <div class="navbar-end hidden md:flex w-4/5 min-w-[600px]">
             <ul class="menu menu-sm menu-horizontal px-1">
                 <li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
+                    <NuxtLink :to="item.link" class="px-2 h-[27px] relative text-base" activeClass="is-active">
+                        <span>
+                            {{ item.name }}
+                        </span>
+                    </NuxtLink>
+                </li>
+                <li v-if="configStore.configGui.length > 1">
                     <details
-                        v-if="item.name === 'channel' && configStore.configGui.length > 1"
                         tabindex="0"
                         @focusout="closeDropdown"
                     >
                         <summary>
-                            <div class="h-[19px] text-base" activeClass="is-active">
+                            <div class="h-[19px] text-base">
                                 <span>
-                                    {{ item.name }}
+                                    Channels
                                 </span>
                             </div>
                         </summary>
@@ -72,11 +80,6 @@
                             </li>
                         </ul>
                     </details>
-                    <NuxtLink v-else :to="item.link" class="px-2 h-[27px] relative text-base" activeClass="is-active">
-                        <span>
-                            {{ item.name }}
-                        </span>
-                    </NuxtLink>
                 </li>
                 <li class="bg-base-100 rounded-md p-0">
                     <button class="h-[27px] pt-[6px]" @click="logout()">Logout</button>
@@ -97,7 +100,6 @@ const menuItems = ref([
     { name: 'Media', link: '/media' },
     { name: 'Message', link: '/message' },
     { name: 'Logging', link: '/logging' },
-    { name: 'channel', link: '#' },
     { name: 'Configure', link: '/configure' },
 ])
 
diff --git a/pages/configure.vue b/pages/configure.vue
index 86df22cc..3cdad2b6 100644
--- a/pages/configure.vue
+++ b/pages/configure.vue
@@ -1,22 +1,22 @@
 <template>
     <div class="flex w-full h-full">
-        <div class="flex-none w-[70px] me-3 px-1 pt-7">
+        <div class="flex-none w-[70px] join join-vertical me-3 px-1 pt-7">
             <button
-                class="w-full btn btn-sm btn-primary duration-500"
+                class="join-item w-full btn btn-sm btn-primary duration-500"
                 :class="activeConf === 1 && 'btn-secondary'"
                 @click="activeConf = 1"
             >
                 GUI
             </button>
             <button
-                class="w-full btn btn-sm btn-primary mt-1 duration-500"
+                class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
                 :class="activeConf === 2 && 'btn-secondary'"
                 @click="activeConf = 2"
             >
                 Playout
             </button>
             <button
-                class="w-full btn btn-sm btn-primary mt-1 duration-500"
+                class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
                 :class="activeConf === 3 && 'btn-secondary'"
                 @click="activeConf = 3"
             >
diff --git a/pages/logging.vue b/pages/logging.vue
index 87bd2096..b0336801 100644
--- a/pages/logging.vue
+++ b/pages/logging.vue
@@ -1,15 +1,12 @@
 <template>
-    <div>
-        <Menu />
-        <div class="date-container">
-            <div class="date-div">
-                <input type="date" class="form-control" v-model="listDate" />
-            </div>
-        </div>
-        <div class="log-container mt-2">
-            <div class="log-content" v-html="formatLog(currentLog)" />
+    <div class="date-container">
+        <div class="date-div">
+            <input type="date" class="form-control" v-model="listDate" />
         </div>
     </div>
+    <div class="log-container mt-2">
+        <div class="log-content" v-html="formatLog(currentLog)" />
+    </div>
 </template>
 
 <script setup lang="ts">