diff --git a/frontend/components/GenericModal.vue b/frontend/components/GenericModal.vue
index 129bb15a..e989b15f 100644
--- a/frontend/components/GenericModal.vue
+++ b/frontend/components/GenericModal.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="show" class="z-50 fixed inset-0 flex justify-center items-start bg-black/30 overflow-auto">
-        <div class="flex flex-col bg-base-100 min-w-[300px] w-[400px] max-w-[90%] rounded-md p-5 shadow-xl my-5">
+    <div v-if="show" class="z-50 fixed inset-0 flex justify-center bg-black/30 overflow-auto py-5">
+        <div class="flex flex-col bg-base-100 min-w-[300px] w-[400px] max-w-[90%] rounded-md p-5 shadow-xl my-auto">
             <div class="inline-block">
                 <div class="flex gap-2">
                     <div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
diff --git a/frontend/components/PlaylistGenerator.vue b/frontend/components/PlaylistGenerator.vue
index 867fdae0..847df9f2 100644
--- a/frontend/components/PlaylistGenerator.vue
+++ b/frontend/components/PlaylistGenerator.vue
@@ -1,9 +1,9 @@
 <template>
     <div
-        class="z-50 fixed inset-0 flex justify-center items-start bg-black/30 overflow-auto"
+        class="z-50 fixed inset-0 flex justify-center bg-black/30 overflow-auto py-5"
     >
         <div
-            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] my-5 rounded-md p-5 shadow-xl"
+            class="relative flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90vw] h-[680px] my-auto rounded-md p-5 shadow-xl"
         >
             <div class="font-bold text-lg">{{ t('player.generateProgram') }}</div>