diff --git a/src/app.rs b/src/app.rs
index 4784702..4259cea 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -8,6 +8,7 @@ use crate::pages::login::*;
 use crate::pages::signup::*;
 use crate::pages::profile::*;
 use crate::pages::albumpage::*;
+use crate::pages::friends::*;
 use crate::error_template::{AppError, ErrorTemplate};
 use crate::util::state::GlobalState;
 
@@ -45,6 +46,7 @@ pub fn App() -> impl IntoView {
                         <Route path="search" view=Search />
                         <Route path="user/:id" view=Profile />
                         <Route path="user" view=Profile />
+                        <Route path="user/:id/friends" view=Friends />
                         <Route path="album/:id" view=AlbumPage />
                     </Route>
                     <Route path="/login" view=Login />
diff --git a/src/components.rs b/src/components.rs
index 646510e..662ad00 100644
--- a/src/components.rs
+++ b/src/components.rs
@@ -9,4 +9,4 @@ pub mod song_list;
 pub mod loading;
 pub mod error;
 pub mod album_info;
-pub mod user_row;
\ No newline at end of file
+pub mod friend_list;
\ No newline at end of file
diff --git a/src/components/user_row.rs b/src/components/friend_list.rs
similarity index 62%
rename from src/components/user_row.rs
rename to src/components/friend_list.rs
index 5269b26..21c188e 100644
--- a/src/components/user_row.rs
+++ b/src/components/friend_list.rs
@@ -3,9 +3,8 @@ use leptos::*;
 use leptos_icons::*;
 use crate::frienddata::FriendData;
 
-
 #[component]
-pub fn UserRow(user: FriendData) -> impl IntoView {
+pub fn FriendRow(user: FriendData) -> impl IntoView {
 	  
     view! {
 		<div class="friend-row">
@@ -19,3 +18,18 @@ pub fn UserRow(user: FriendData) -> impl IntoView {
 		</div>
 	}.into_view()
 }
+
+#[component]
+pub fn FriendList(friends: Vec<FriendData>) -> impl IntoView {
+    view! {
+		<div class="friend-container">
+            {
+                friends.iter().map(|friend| {
+                    view! {
+                        <FriendRow user={friend.clone()} />
+                    }
+                }).collect::<Vec<_>>()
+            }
+		</div>
+	}.into_view()
+}
\ No newline at end of file
diff --git a/src/pages.rs b/src/pages.rs
index 0ad5d6f..52c6ca1 100644
--- a/src/pages.rs
+++ b/src/pages.rs
@@ -2,3 +2,4 @@ pub mod login;
 pub mod signup;
 pub mod profile;
 pub mod albumpage;
+pub mod friends;
\ No newline at end of file
diff --git a/src/pages/friends.rs b/src/pages/friends.rs
new file mode 100644
index 0000000..2a8d297
--- /dev/null
+++ b/src/pages/friends.rs
@@ -0,0 +1,64 @@
+use leptos::leptos_dom::*;
+use leptos::*;
+use leptos_router::*;
+use crate::api::profile::*;
+use crate::components::friend_list::*;
+use crate::components::loading::Loading;
+
+
+#[derive(Params, PartialEq)]
+struct FriendParams {
+    id: i32
+}
+
+#[component]
+pub fn Friends() -> impl IntoView {
+    let params = use_params::<FriendParams>();
+
+    let id = move || {params.with(|params| {
+            params.as_ref()
+                .map(|params| params.id)
+                .map_err(|e| e.clone())
+        })
+    };
+
+    let friend_list = create_resource(
+        id,
+        |value| async move {
+            match value {
+                Ok(v) => {friends(v).await},
+                Err(e) => {Err(ServerFnError::Request(format!("Error getting song data: {}", e).into()))},
+            }
+        },
+    );
+
+    view! {
+        <div class="friend-page-container">
+            <h1 class="friend-header"> "Friends:" </h1>
+            <Transition
+                fallback=move || view! {
+                    <Loading />
+                }
+            >
+                <ErrorBoundary
+                    fallback=|errors| view! {
+                        {move || errors.get()
+                            .into_iter()
+                            .map(|(_, e)| view! { <p>{e.to_string()}</p>})
+                            .collect_view()
+                        }
+                    }
+                >
+                    {
+                        friend_list.get().map(|friend_list| {
+                            friend_list.map(|friend_list| {
+                                view! {<FriendList friends={friend_list} />}
+                            })
+                        })
+                    }
+                </ErrorBoundary>
+            </Transition>
+        </div>
+    }
+}
+