diff --git a/src/pages/songpage.rs b/src/pages/songpage.rs
new file mode 100644
index 0000000..525b235
--- /dev/null
+++ b/src/pages/songpage.rs
@@ -0,0 +1,43 @@
+use leptos::*;
+use leptos_router::use_params_map;
+use leptos_icons::*;
+use server_fn::error::NoCustomError;
+
+use crate::components::loading::*;
+use crate::components::error::*;
+use crate::api::song::*;
+use crate::models::Song;
+use crate::songs::get_song_by_id;
+
+#[component]
+pub fn SongPage() -> impl IntoView {
+    let params = use_params_map();
+
+    view! {
+        <div class="song-container home-component">
+            {move || params.with(|params| {
+                match params.get("id").map(|id| id.parse::<i32>()) {
+                    Some(Ok(id)) => {
+                        view! { <SongDetails id /> }.into_view()
+                    },
+                    Some(Err(e)) => {
+                        view! {
+                            <Error<String>
+                                title="Invalid Song ID"
+                                error=e.to_string()
+                            />
+                        }.into_view()
+                    },
+                    None => {
+                        view! {
+                            <Error<String>
+                                title="No Song ID"
+                                message="You must specify a song ID to view its page."
+                            />
+                        }.into_view()
+                    }
+                }
+            })}
+        </div>
+    }
+}
\ No newline at end of file
diff --git a/style/songpage.scss b/style/songpage.scss
new file mode 100644
index 0000000..e69de29