diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 6bcf58cd..170a9cac 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -28,19 +28,19 @@
 				<div class="flex flex-col gap-1 mt-1">
 					<router-link
 						:to="{ name: 'dashboard' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<icon-layout-grid class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.dashboard') }}</span>
+						<span class="uppercase">{{ t('page.dashboard') }}</span>
 					</router-link>
 					<router-link
 						:to="{ name: 'songs' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<icon-music class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.songs', Object.keys(c.songs)?.length) }}</span>
+						<span class="uppercase">{{ t('page.songs', Object.keys(c.songs)?.length) }}</span>
 						<div class="flex items-center gap-4 ml-auto">
 							<div v-if="ready.songs" class="font-bold">{{ Object.keys(c.songs).length }}</div>
 							<secondary-button
@@ -55,11 +55,11 @@
 					</router-link>
 					<router-link
 						:to="{ name: 'setlists' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<icon-playlist class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.setlists', setlistCount) }}</span>
+						<span class="uppercase">{{ t('page.setlists', setlistCount) }}</span>
 						<div class="flex items-center gap-4 ml-auto">
 							<label v-if="ready.setlists" class="font-bold">{{ setlistCount }}</label>
 							<secondary-button
@@ -75,7 +75,7 @@
 					<divider-horizontal :label="t('divider.account')" />
 					<router-link
 						:to="{ name: 'profile' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<avatar :photo-url="c.users[auth.user].photo" :name="userName" size="md" />
@@ -88,11 +88,11 @@
 					</router-link>
 					<router-link
 						:to="{ name: 'settings' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<icon-settings class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.settings') }}</span>
+						<span class="uppercase">{{ t('page.settings') }}</span>
 						<indicator-pulse v-if="registrationsExist && userRoles[c.permissions[auth.user].role] > 3" class="ml-auto" />
 					</router-link>
 					<secondary-button class="mt-2" @click="signOut">
@@ -102,27 +102,27 @@
 					<divider-horizontal :label="t('divider.info')" />
 					<router-link
 						:to="{ name: 'shortcuts' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<icon-bulb class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.shortcuts') }}</span>
+						<span class="uppercase">{{ t('page.shortcuts') }}</span>
 					</router-link>
 					<router-link
 						:to="{ name: 'documentation' }"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						@click="open = false"
 					>
 						<icon-book class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.docu') }}</span>
+						<span class="uppercase">{{ t('page.docu') }}</span>
 					</router-link>
 					<a
 						href="https://github.com/devmount/SongDrive"
-						class="px-3 py-1.5 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
+						class="px-3 py-2 flex items-center gap-3 hover:bg-blade-100 dark:hover:bg-blade-750"
 						target="_blank"
 					>
 						<icon-brand-github class="w-5 h-5 stroke-1.5" />
-						<span class="mb-0.5 uppercase">{{ t('page.github') }}</span>
+						<span class="uppercase">{{ t('page.github') }}</span>
 						<icon-external-link class="w-5 h-5 ml-auto" />
 					</a>
 				</div>
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index cbe3847a..bf21db15 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -80,7 +80,7 @@
 
 @layer base {
   input, select, textarea {
-    @apply transition-all py-1.5! border-blade-400 dark:border-black focus:ring-4! focus:ring-spring-400/20! hover:border-spring-400! focus:border-spring-600! dark:bg-blade-900! dark:text-blade-100! hover:disabled:border-black!;
+    @apply transition-all py-1.5! border-blade-400 dark:border-black focus:ring-4! focus:ring-spring-400/20! hover:border-spring-400! focus:border-spring-600! dark:bg-blade-900! dark:disabled:bg-blade-900/50! dark:text-blade-100! hover:disabled:border-black!;
   }
   button, a {
     @apply cursor-pointer transition-all;
diff --git a/frontend/src/elements/PrimaryButton.vue b/frontend/src/elements/PrimaryButton.vue
index 6224c46b..a147c3b9 100644
--- a/frontend/src/elements/PrimaryButton.vue
+++ b/frontend/src/elements/PrimaryButton.vue
@@ -2,11 +2,11 @@
   <button
     class="
       text-white py-2 px-3 rounded-sm shadow-m flex justify-center items-center gap-2
-      hover:!bg-opacity-80 hover:shadow-l disabled:opacity-30 disabled:shadow-none hover:disabled:bg-opacity-100
+      hover:shadow-l disabled:opacity-30 disabled:shadow-none
     "
     :class="{
-      'bg-spring-600 dark:bg-spring-700': !type,
-      'bg-rose-500': type === types.danger
+      'bg-spring-600 hover:bg-spring-600/75 hover:disabled:bg-spring-600 dark:bg-spring-700 hover:dark:bg-spring-700/75 hover:disabled:dark:bg-spring-700': !type,
+      'bg-rose-500 hover:bg-rose-500/75 hover:disabled:bg-rose-500': type === types.danger
     }"
   >
     <slot></slot>
diff --git a/frontend/src/elements/SecondaryButton.vue b/frontend/src/elements/SecondaryButton.vue
index 8eb060da..82f93415 100644
--- a/frontend/src/elements/SecondaryButton.vue
+++ b/frontend/src/elements/SecondaryButton.vue
@@ -2,11 +2,11 @@
   <button
     class="
       py-2 px-3 rounded-sm shadow-md flex justify-center items-center gap-2
-      hover:!bg-opacity-80 hover:shadow-l disabled:opacity-30 disabled:shadow-none hover:disabled:bg-opacity-100
+			hover:shadow-l disabled:opacity-30 disabled:shadow-none
     "
     :class="{
-      'bg-blade-400 text-white dark:bg-blade-700': !type,
-      'text-rose-600 bg-blade-350 dark:text-rose-500 dark:bg-blade-750': type === types.danger
+      'bg-blade-400 hover:bg-blade-400/75 hover:disabled:bg-blade-400 text-white dark:bg-blade-700 dark:hover:bg-blade-700/75 dark:hover:disabled:bg-blade-700': !type,
+      'text-rose-600 bg-blade-350 hover:bg-blade-350/75 hover:disabled:bg-blade-350 dark:text-rose-500 dark:bg-blade-750 dark:hover:bg-blade-750/75 dark:hover:disabled:bg-blade-750': type === types.danger
     }"
   >
     <slot></slot>
diff --git a/frontend/src/partials/Logo.vue b/frontend/src/partials/Logo.vue
index a3e264c6..86328047 100644
--- a/frontend/src/partials/Logo.vue
+++ b/frontend/src/partials/Logo.vue
@@ -1,9 +1,9 @@
 <template>
 	<div
-    class="flex items-center gap-2 font-medium select-none"
+    class="flex font-medium select-none"
     :class="{
-      'flex-col 2xs:flex-row 2xs:items-baseline 2xs:font-normal': featured,
-      'items-baseline': !featured
+      'gap-3 flex-col 2xs:flex-row items-center 2xs:items-baseline 2xs:font-normal': featured,
+      'gap-2 items-baseline': !featured
     }"
   >
 		<img
@@ -12,13 +12,13 @@
       :class="featured ? 'w-12': 'w-8'"
     />
 		<div
-      class="text-spring-600 leading-5 tracking-wide uppercase"
-      :class="featured ? 'text-2xl 2xs:text-[2.1rem]': 'text-2xl'"
+      class="text-spring-600 tracking-wide uppercase text-2xl"
+      :class="{ '2xs:text-4xl': featured }"
     >
       {{ t('app.name') }}
     </div>
 	</div>
-  <div v-if="showVersion" class="text-xs text-blade-500 text-right font-medium mt-1 mr-0.5">
+  <div v-if="showVersion" class="text-xs text-blade-500 text-right font-medium mr-0.5">
     {{ version }}
   </div>
 </template>
diff --git a/frontend/src/views/Dashboard.vue b/frontend/src/views/Dashboard.vue
index 3f86b19b..af645968 100644
--- a/frontend/src/views/Dashboard.vue
+++ b/frontend/src/views/Dashboard.vue
@@ -6,8 +6,8 @@
 				<div class="text-4xl sm:text-6xl font-thin">
 					{{ Object.keys(songs).length }}
 				</div>
-				<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
-					<icon-music class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
+				<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
+					<icon-music class="shrink-0 w-5 h-5 stroke-1.5" />
 					{{ t('widget.songsStored') }}
 				</div>
 			</div>
@@ -16,8 +16,8 @@
 				<div class="text-4xl sm:text-6xl font-thin">
 					{{ setlistCount }}
 				</div>
-				<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
-					<icon-playlist class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
+				<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
+					<icon-playlist class="shrink-0 w-5 h-5 stroke-1.5" />
 					{{ t('widget.publicSetlists') }}
 				</div>
 			</div>
@@ -26,8 +26,8 @@
 				<div class="text-4xl sm:text-6xl font-thin">
 					<span class="text-blade-500">~</span>{{ songsPerformed }}
 				</div>
-				<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
-					<icon-microphone class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
+				<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
+					<icon-microphone class="shrink-0 w-5 h-5 stroke-1.5" />
 					{{ t('widget.songsPerformed') }}
 				</div>
 			</div>
@@ -36,8 +36,8 @@
 				<div class="text-4xl sm:text-6xl font-thin">
 					{{ languagesUsed }}
 				</div>
-				<div class="text-xl text-blade-600 dark:text-blade-400 flex gap-2">
-					<icon-world class="shrink-0 w-5 h-5 mt-2 stroke-1.5" />
+				<div class="text-xl text-blade-600 dark:text-blade-400 flex items-center gap-2">
+					<icon-world class="shrink-0 w-5 h-5 stroke-1.5" />
 					{{ t('widget.languages', languagesUsed) }}
 				</div>
 			</div>
@@ -139,7 +139,7 @@ const songsArray = computed(() => {
 // true if song data collection is empty
 const noSongs = computed(() => props.ready.songs && songsArray.value.length == 0);
 
-// total number of song languages 
+// total number of song languages
 const languagesUsed = computed(() => {
 	let languages = [];
 	songsArray.value.forEach(song => {
diff --git a/frontend/src/views/SetlistShow.vue b/frontend/src/views/SetlistShow.vue
index bad550fa..2f649690 100644
--- a/frontend/src/views/SetlistShow.vue
+++ b/frontend/src/views/SetlistShow.vue
@@ -324,7 +324,7 @@
 								</td>
 							</template>
 							<template v-else>
-								<td colspan="2" class="px-3 py-2 max-w-0">
+								<td colspan="3" class="px-3 py-2 max-w-0">
 									<div class="truncate">
 										<span class="text-rose-600">{{ t('toast.songDeleted') }}</span>
 										<span class="text-blade-500 font-mono text-sm ml-3">{{ element.id }}</span>
@@ -362,7 +362,8 @@
 								</dropdown>
 								<secondary-button
 									v-else
-									class="flex items-center text-rose-600! hover:bg-opacity-80"
+									class="flex items-center"
+									type="danger"
 									@click.prevent="removeSong(element.id)"
 								>
 									<icon-trash class="w-5 h-5" />
diff --git a/frontend/src/views/Settings.vue b/frontend/src/views/Settings.vue
index 9daa5fe0..6d36081b 100644
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -174,13 +174,13 @@
 							</div>
 							<a
 								:href="'mailto:' + u.email + '?' + confirmationMail(u.name)"
-								class="flex items-center text-spring-600 hover:bg-opacity-80"
+								class="flex items-center text-spring-600 hover:opacity-80"
 								:title="t('tooltip.sendConfirmationMail')"
 							>
 								<icon-mail class="w-5 h-5 stroke-1.5" />
 							</a>
 							<button
-								class="flex items-center text-spring-600 hover:bg-opacity-80"
+								class="flex items-center text-spring-600 hover:opacity-80"
 								:title="t('modal.editUser')"
 								@click.prevent="editUser(u)"
 							>
@@ -188,7 +188,7 @@
 							</button>
 							<button
 								v-if="numberOfUsers > 1"
-								class="flex items-center text-rose-600 hover:bg-opacity-80"
+								class="flex items-center text-rose-600 hover:opacity-80"
 								:title="t('modal.deleteUser')"
 								@click.prevent="active.user=u; active.key=u.id; active.approved=true; modal.userdelete=true"
 							>
@@ -221,14 +221,14 @@
 								{{ t('role.unconfirmed') }}
 							</div>
 							<button
-								class="flex items-center text-spring-600 hover:bg-opacity-80"
+								class="flex items-center text-spring-600 hover:opacity-80"
 								:title="t('tooltip.approveUser')"
 								@click.prevent="addRegistration(r, k)"
 							>
 								<icon-user-plus class="w-5 h-5 stroke-1.5" />
 							</button>
 							<button
-								class="flex items-center text-rose-600 hover:bg-opacity-80"
+								class="flex items-center text-rose-600 hover:opacity-80"
 								:title="t('modal.deleteUser')"
 								@click.prevent="active.user=r; active.key=k; active.approved=false; modal.userdelete=true"
 							>
@@ -268,14 +268,14 @@
 								<div class="truncate">{{ l.label }}</div>
 							</div>
 							<button
-								class="flex items-center text-spring-600 hover:bg-opacity-80"
+								class="flex items-center text-spring-600 hover:opacity-80"
 								:title="t('modal.editLanguage')"
 								@click="active.language=l; active.key=key; active.existing=true; modal.languageset=true"
 							>
 								<icon-edit class="w-5 h-5 stroke-1.5" />
 							</button>
 							<button
-								class="flex items-center text-rose-600 hover:bg-opacity-80"
+								class="flex items-center text-rose-600 hover:opacity-80"
 								:title="t('modal.deleteLanguage')"
 								@click="active.language=l; active.key=key; modal.languagedelete=true;"
 							>
diff --git a/frontend/src/views/SongShow.vue b/frontend/src/views/SongShow.vue
index 4457c8d9..b0e3bdef 100644
--- a/frontend/src/views/SongShow.vue
+++ b/frontend/src/views/SongShow.vue
@@ -327,7 +327,6 @@ import {
 
 // component constants
 const { t, availableLocales } = useI18n();
-console.log(availableLocales);
 
 const route      = useRoute();
 const router     = useRouter();
diff --git a/frontend/src/widgets/WidgetSetlistList.vue b/frontend/src/widgets/WidgetSetlistList.vue
index 10df2cf9..d323b6e3 100644
--- a/frontend/src/widgets/WidgetSetlistList.vue
+++ b/frontend/src/widgets/WidgetSetlistList.vue
@@ -37,7 +37,7 @@
 				<div class="flex flex-col overflow-hidden">
 					<div class="-mt-1 flex gap-1 items-center">
 						<div class="truncate">{{ setlist.title }}</div>
-						<icon-lock v-if="setlist.private" class="w-5 h-5 stroke-1.5 text-spring-600 mt-1" />
+						<icon-lock v-if="setlist.private" class="w-5 h-5 stroke-1.5 text-spring-600" />
 					</div>
 					<div class="text-sm text-blade-500 -mt-1 truncate">{{ humanDate(setlist.date, locale) }}</div>
 				</div>
diff --git a/frontend/src/widgets/WidgetSongOfYear.vue b/frontend/src/widgets/WidgetSongOfYear.vue
index 2e0624d5..bd5174e6 100644
--- a/frontend/src/widgets/WidgetSongOfYear.vue
+++ b/frontend/src/widgets/WidgetSongOfYear.vue
@@ -80,7 +80,7 @@ const props = defineProps({
 });
 
 // list data
-const page       = ref(0);
+const page = ref(0);
 const listLength = 7;
 
 // build song of year list
@@ -93,10 +93,12 @@ const songOfYear = computed(() => {
 				list[year] = {};
 			}
 			setlist.songs.forEach(song => {
-				if (!list[year].hasOwnProperty(song.id)) {
-					list[year][song.id] = 1;
-				} else {
-					list[year][song.id]++;
+				if (props.songs.hasOwnProperty(song.id)) {
+					if (!list[year].hasOwnProperty(song.id)) {
+						list[year][song.id] = 1;
+					} else {
+						list[year][song.id]++;
+					}
 				}
 			});
 		}