diff --git a/src/components/create_playlist.rs b/src/components/create_playlist.rs
index 4c46e02..67702ab 100644
--- a/src/components/create_playlist.rs
+++ b/src/components/create_playlist.rs
@@ -4,7 +4,7 @@ use leptos::leptos_dom::*;
 use crate::api::playlists::create_playlist;
 
 #[component]
-pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
+pub fn CreatePlayList(closer: WriteSignal<bool>) -> impl IntoView {
 
     let (playlist_name, set_playlist_name) = create_signal("".to_string());
 
@@ -24,7 +24,7 @@ pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> imp
     }; 
 
     view! {
-        <div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
+        <div class="create-playlist-popup-container">
             <div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
                 <Icon icon=icondata::IoCloseSharp />
             </div>
diff --git a/src/components/playlists.rs b/src/components/playlists.rs
index 6082b73..9b4849f 100644
--- a/src/components/playlists.rs
+++ b/src/components/playlists.rs
@@ -34,7 +34,13 @@ pub fn Playlists() -> impl IntoView {
                     New Playlist
                 </button>
             </div>
-            <CreatePlayList opened=create_playlist_open closer=set_create_playlist_open/>
+            <Show
+                when=move || create_playlist_open()
+                fallback=move || view! {<div></div>}
+            >
+                <CreatePlayList closer=set_create_playlist_open/>
+            </Show>
+            
             <ul class="playlists">
                 {
                     move || playlists.get().iter().enumerate().map(|(index,playlist)| view! {