diff --git a/frontend/src/pages/Friends.jsx b/frontend/src/pages/Friends.jsx
index 3dc3a3d..fdd7c5e 100644
--- a/frontend/src/pages/Friends.jsx
+++ b/frontend/src/pages/Friends.jsx
@@ -14,6 +14,7 @@ export default function Friends() {
   const [searchTimeout, setSearchTimeout] = useState(null);
   const [responding, setResponding] = useState(null);
   const [sending, setSending] = useState(null);
+  const [removing, setRemoving] = useState(null);
   const { socket } = useSocket();
   const searchRef = useRef(null);
 
@@ -119,6 +120,23 @@ export default function Friends() {
     }
   };
 
+  const handleRemoveFriend = async (friendId, friendName) => {
+    if (!confirm(`Are you sure you want to remove ${friendName} from your friends?`)) {
+      return;
+    }
+
+    setRemoving(friendId);
+    try {
+      await api.removeFriend(friendId);
+      toast.success('Friend removed');
+      await loadData();
+    } catch (err) {
+      toast.error('Failed to remove friend: ' + err.message);
+    } finally {
+      setRemoving(null);
+    }
+  };
+
   if (loading) {
     return <div className="loading">Loading...</div>;
   }
@@ -221,12 +239,21 @@ export default function Friends() {
           ) : (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
               {friends.map(friend => (
-                <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
+                <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                   <div>
                     <div style={{ fontWeight: 500 }}>{friend.username}</div>
                     <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
                   </div>
-                  <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
+                  <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                    <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
+                    <button
+                      className="btn btn-danger btn-sm"
+                      onClick={() => handleRemoveFriend(friend.id, friend.username)}
+                      disabled={removing === friend.id}
+                    >
+                      {removing === friend.id ? 'Removing...' : 'Remove'}
+                    </button>
+                  </div>
                 </div>
               ))}
               {challengeFriends.length > 0 && (
@@ -237,12 +264,21 @@ export default function Friends() {
                     </div>
                   </div>
                   {challengeFriends.map(friend => (
-                    <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
+                    <div key={friend.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                       <div>
                         <div style={{ fontWeight: 500 }}>{friend.username}</div>
                         <div style={{ fontSize: '0.875rem', color: 'var(--text-muted)' }}>{friend.email}</div>
                       </div>
-                      <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
+                      <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+                        <div style={{ color: 'var(--primary)' }}>{friend.total_points} points</div>
+                        <button
+                          className="btn btn-danger btn-sm"
+                          onClick={() => handleRemoveFriend(friend.id, friend.username)}
+                          disabled={removing === friend.id}
+                        >
+                          {removing === friend.id ? 'Removing...' : 'Remove'}
+                        </button>
+                      </div>
                     </div>
                   ))}
                 </>