diff --git a/src/api/mod.rs b/src/api/mod.rs
new file mode 100644
index 0000000..4958949
--- /dev/null
+++ b/src/api/mod.rs
@@ -0,0 +1 @@
+pub mod playlists;
\ No newline at end of file
diff --git a/src/api/playlists.rs b/src/api/playlists.rs
new file mode 100644
index 0000000..62f0def
--- /dev/null
+++ b/src/api/playlists.rs
@@ -0,0 +1,49 @@
+use leptos::*;
+use crate::models::Playlist;
+
+use cfg_if::cfg_if;
+
+cfg_if! {
+    if #[cfg(feature = "ssr")] {
+        use crate::database::get_db_conn;
+        use diesel::prelude::*;
+        use leptos_axum::extract;
+        use axum_login::AuthSession;
+        use crate::auth_backend::AuthBackend;
+    }
+}
+/// Create a new, empty playlist in the database
+/// 
+/// # Arguments
+/// 
+/// * `new_playlist` - The new playlist
+/// * `conn` - A mutable reference to a database connection
+/// 	
+/// # Returns
+/// 
+/// * `Result<(), Box<dyn Error>>` - A empty result if successful, or an error
+/// 
+#[server(endpoint = "playlists/create-playlist")]
+pub async fn create_playlist(playlist_name: String)->Result<(), ServerFnError> {
+    use crate::schema::playlists::dsl::*;
+    use leptos::server_fn::error::NoCustomError;
+
+    let auth_session = extract::<AuthSession<AuthBackend>>().await
+		.map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error getting auth session: {}", e)))?;
+
+    //Ensure the playlist has no id
+    let new_playlist = Playlist {
+        id: None,
+        name: playlist_name,
+        user_id: auth_session.user.unwrap().id.expect("User has no id"),
+    };
+
+    let db_con = &mut get_db_conn();
+    diesel::insert_into(playlists)
+        .values(&new_playlist)
+        .execute(db_con)
+        .map_err(|e| ServerFnError::<NoCustomError>::ServerError(format!("Error creating playlist: {}", e)))?;
+
+    Ok(())
+}
+
diff --git a/src/components/sidebar.rs b/src/components/sidebar.rs
index bec2ad2..9a167f1 100644
--- a/src/components/sidebar.rs
+++ b/src/components/sidebar.rs
@@ -1,6 +1,8 @@
+use leptos::ev::play;
 use leptos::leptos_dom::*;
 use leptos::*;
 use leptos_icons::*;
+use crate::api::playlists::create_playlist;
 
 #[component]
 pub fn Sidebar(setter: WriteSignal<bool>, active: ReadSignal<bool>) -> impl IntoView {
@@ -54,14 +56,39 @@ pub fn Bottom() -> impl IntoView {
 
 #[component]
 pub fn CreatePlayList(opened: ReadSignal<bool>,closer: WriteSignal<bool>) -> impl IntoView {
+
+    let (playlist_name, set_playlist_name) = create_signal("".to_string());
+
+    let on_submit = move |ev: leptos::ev::SubmitEvent| {
+        ev.prevent_default();
+        
+        let new_playlist_name = playlist_name.get();
+        spawn_local(async move {
+            let create_result = create_playlist(new_playlist_name).await;
+            if let Err(err) = create_result {
+                // Handle the error here, e.g., log it or display to the user
+                log!("Error creating playlist: {:?}", err);
+            } else {
+                log!("Playlist created successfully!");
+            }
+        })
+
+    }; 
+
     view! {
         <div class="create-playlist-popup-container" style={move || if opened() {"display:flex"} else {"display:none"}}>
             <div class="close-button" on:click=move |_| closer.update(|value| *value = false)>
                 <Icon icon=icondata::IoCloseSharp />
             </div>
             <h1 class="header">Create Playlist</h1>    
-            <form class="create-playlist-form" action="POST">
-                <input class="name-input" type="text" placeholder="Playlist Name" />
+            <form class="create-playlist-form" action="POST" on:submit=on_submit>
+                <input class="name-input"  type="text" placeholder="Playlist Name" 
+                    on:input=move |ev| {
+                        set_playlist_name(event_target_value(&ev));
+                        log!("playlist name changed to: {}", playlist_name.get());
+                    }
+                    prop:value=playlist_name
+                />
                 <button class="create-button" type="submit">Create</button>
             </form>
         </div>
diff --git a/src/lib.rs b/src/lib.rs
index 89cd04e..ab7abab 100644
--- a/src/lib.rs
+++ b/src/lib.rs
@@ -13,6 +13,7 @@ pub mod users;
 pub mod search;
 pub mod fileserv;
 pub mod error_template;
+pub mod api;
 use cfg_if::cfg_if;
 
 cfg_if! {
diff --git a/src/models.rs b/src/models.rs
index 8355f39..1bee4f7 100644
--- a/src/models.rs
+++ b/src/models.rs
@@ -294,7 +294,7 @@ impl Song {
 #[cfg_attr(feature = "ssr", derive(Queryable, Selectable, Insertable))]
 #[cfg_attr(feature = "ssr", diesel(table_name = crate::schema::playlists))]
 #[cfg_attr(feature = "ssr", diesel(check_for_backend(diesel::pg::Pg)))]
-#[derive(Serialize, Deserialize)]
+#[derive(Serialize, Deserialize, Debug, Clone)]
 pub struct Playlist {
 	/// A unique id for the playlist
 	#[cfg_attr(feature = "ssr", diesel(deserialize_as = i32))]