diff --git a/backend/models/user.js b/backend/models/user.js
index f467b4d..d7210b5 100644
--- a/backend/models/user.js
+++ b/backend/models/user.js
@@ -38,9 +38,14 @@ const userSchema = new Schema(
         },
         methods: {
             async getFriends() {
-                await this.populate("friends", "username");
+                await this.populate("friends", "username email");
                 // console.log(this.friends);
-                return this.friends.map(friend => friend.username);
+                return this.friends.map((friend) => {
+                    return {
+                        username: friend.username,
+                        email: friend.email,
+                    };
+                });
             },
         },
     }
diff --git a/backend/routes/user.js b/backend/routes/user.js
index 925f884..8dc18bc 100644
--- a/backend/routes/user.js
+++ b/backend/routes/user.js
@@ -1,5 +1,6 @@
 const router = require("express").Router();
 const { User } = require("../models/user");
+const { checkAuth } = require("../util/auth");
 const { pendingChallenges } = require("./room");
 
 // TODO
@@ -13,11 +14,15 @@ router.get("/:username", async (req, res, next) => {
 router.post("/:username", async (req, res, next) => {});
 
 // get friends of the user
-router.get("/:username/friends", async (req, res, next) => {
+router.get("/:username/friends", checkAuth, async (req, res, next) => {
     const username = req.params.username;
     const user = await User.findOne({ username });
-    const friends = await user.getFriends();
-    return res.json({ success: true, friends });
+    if (user) {
+        const friends = await user.getFriends();
+        return res.json({ success: true, friends });
+    } else {
+        return res.json({ success: false, error: "Invalid username" });
+    }
 });
 
 // TODO
@@ -37,7 +42,7 @@ router.get("/:username/challenges", async (req, res, next) => {
     let username = req.params.username;
     let challenges = pendingChallenges.get(username);
     if (!challenges) challenges = [];
-    console.log(username,challenges);
+    console.log(username, challenges);
     res.json({ success: true, challenges: challenges });
 });
 
diff --git a/frontend/src/components/FriendsList.jsx b/frontend/src/components/FriendsList.jsx
index 829939d..13435a2 100644
--- a/frontend/src/components/FriendsList.jsx
+++ b/frontend/src/components/FriendsList.jsx
@@ -1,50 +1,49 @@
 import { Avatar, Flex, Image, Loader, NavLink, Text, Title } from '@mantine/core';
 import { Link } from 'react-router-dom';
 import React, { useEffect, useState } from 'react';
+import { getAuthToken, getUserData } from '../../utils/auth'
 
 const FriendsList = () => {
     const [friends, setFriends] = useState(null);
+    const user = getUserData();
+    let { username } = user;
     useEffect(() => {
-        const abortController = new AbortController();
         let response = null;
 
         const fetchData = async () => {
-            let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user/user1/friends`;
+            let url = `${import.meta.env.VITE_BACKEND_HOST}/api/user/${username}/friends`;
             try {
-                response = await fetch(url, { signal: abortController.signal });
+                response = await fetch(url, {
+                    headers: {
+                        'Authorization': `Bearer ${getAuthToken()}`
+                    }
+                });
                 const data = await response.json();
                 if (data.success) {
                     setFriends(data.friends);
                 } else {
-                    throw data;
+                    throw data.error;
                 }
             } catch (error) {
-                if (error.message === 'The user aborted a request.');
-                else {
-                    console.log('Error fetching data');
-                    throw error;
-                }
+                console.error(error)
             }
         }
 
         fetchData();
 
-        return () => {
-            if (!response) {
-                abortController.abort();
-            }
-        }
     }, []);
 
+    if (!friends) {
+        return (
+            <Loader m="20px" variant='dots' color='lime' />
+        )
+    }
+
     return (
         <Flex sx={{ flexGrow: '1' }} height="100%" justify="start" my="md" align="start" direction="column">
             <Title px="sm" pt="md" order={3}>Friends</Title>
-
             {
-                friends ?
-                    friends.map((friend, index) => <NavLink key={index} component={Link} to="/play/friend/moonpatel" p='5px' icon={<Avatar size='sm' color='blue' children="M" />} label={<Text fw={700}>{friend}</Text>} />)
-                    :
-                    <Loader m="20px" variant='dots' color='lime' />
+                friends.map((friend, index) => <NavLink key={index} component={Link} to={`/play/friend/${friend.username}`} p='5px' icon={<Avatar size='sm' color='blue' children={friend.username[0].toUpperCase()} />} label={<Text fw={700}>{friend.username}</Text>} />)
             }
         </Flex>
     )
diff --git a/frontend/src/pages/Chess/ChessGame.jsx b/frontend/src/pages/Chess/ChessGame.jsx
index 61234c0..b0f6a52 100644
--- a/frontend/src/pages/Chess/ChessGame.jsx
+++ b/frontend/src/pages/Chess/ChessGame.jsx
@@ -1,6 +1,6 @@
 import { Avatar, Button, Flex, Image, Loader, MediaQuery, NavLink, Text, Title } from '@mantine/core'
 import React, { useEffect, useState } from 'react'
-import ChessBoard from '../Play/ChessBoard'
+import ChessBoard from '../Chess/ChessBoard'
 import { useNavigate, useParams } from 'react-router-dom'
 import { socket } from '../../socket'
 import { getUserData } from '../../../utils/auth'