diff --git a/app/components/Player/index.vue b/app/components/Player/index.vue
index 16092cc..2e7501f 100644
--- a/app/components/Player/index.vue
+++ b/app/components/Player/index.vue
@@ -127,7 +127,7 @@ const toast = useToast()
 	position: fixed;
 	bottom: 1rem;
 
-	height: 72px;
+	height: $player-height;
 
 	border-radius: $border-radius-lg;
 	border: 1px solid $color-border;
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
index 122ee7c..6405e14 100644
--- a/app/styles/_variables.scss
+++ b/app/styles/_variables.scss
@@ -10,3 +10,5 @@ $color-attention: #fc8181;
 
 $border-radius-standard: 0.3rem;
 $border-radius-lg: 0.6rem;
+
+$player-height: 72px;
diff --git a/app/ui/ToastContainer.vue b/app/ui/ToastContainer.vue
index ac7085d..2c494d1 100644
--- a/app/ui/ToastContainer.vue
+++ b/app/ui/ToastContainer.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 const { toasts, remove } = useToast()
+const song = useSong()
 </script>
 
 <template>
-	<div class="toast-container">
+	<div class="toast-container" :class="{ playerShown: song != undefined }">
 		<TransitionGroup name="toast">
 			<div
 				v-for="toast in toasts"
@@ -27,11 +28,17 @@ const { toasts, remove } = useToast()
 	right: 0;
 	z-index: 100;
 
-	padding: 20px;
+	padding: 2rem;
 
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
+
+	transition: trasnform 0.2s ease-out;
+}
+
+.playerShown {
+	transform: translateY(-$player-height);
 }
 
 .toast {
@@ -44,7 +51,9 @@ const { toasts, remove } = useToast()
 
 	cursor: pointer;
 
-	transition: transform 0.2s ease, opacity 0.2s ease;
+	transition:
+		transform 0.2s ease,
+		opacity 0.2s ease;
 }
 
 .toast-enter-from {