diff --git a/src/views/friend-list/FriendListView.tsx b/src/views/friend-list/FriendListView.tsx
index 15c447d2..d2f66666 100644
--- a/src/views/friend-list/FriendListView.tsx
+++ b/src/views/friend-list/FriendListView.tsx
@@ -7,7 +7,7 @@ import { FriendListSendFriendRequestEvent } from '../../events/friend-list/Frien
 import { useRoomEngineEvent } from '../../hooks/events';
 import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
 import { SendMessageHook } from '../../hooks/messages/message-event';
-import { NitroCardAccordionItemView, NitroCardAccordionView, NitroCardHeaderView, NitroCardView } from '../../layout';
+import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../layout';
 import { LocalizeText } from '../../utils/LocalizeText';
 import { FriendListContextProvider } from './context/FriendListContext';
 import { FriendListMessageHandler } from './FriendListMessageHandler';
@@ -43,18 +43,6 @@ export const FriendListView: FC<FriendListViewProps> = props =>
     useUiEvent(FriendListEvent.TOGGLE_FRIEND_LIST, onFriendListEvent);
     useUiEvent(FriendListSendFriendRequestEvent.SEND_FRIEND_REQUEST, onFriendListEvent);
 
-    useEffect(() =>
-    {
-        if(!settings) return;
-
-        setIsReady(true);
-    }, [ settings ]);
-
-    useEffect(() =>
-    {
-        SendMessageHook(new MessengerInitComposer());
-    }, []);
-
     const onRoomEngineObjectEvent = useCallback((event: RoomEngineObjectEvent) =>
     {
         const roomSession = GetRoomSession();
@@ -79,6 +67,18 @@ export const FriendListView: FC<FriendListViewProps> = props =>
 
     useRoomEngineEvent(RoomEngineObjectEvent.ADDED, onRoomEngineObjectEvent);
 
+    useEffect(() =>
+    {
+        if(!settings) return;
+
+        setIsReady(true);
+    }, [ settings ]);
+
+    useEffect(() =>
+    {
+        SendMessageHook(new MessengerInitComposer());
+    }, []);
+
     return (
         <FriendListContextProvider value={ { friendListState, dispatchFriendListState } }>
             <FriendListMessageHandler />
@@ -86,17 +86,14 @@ export const FriendListView: FC<FriendListViewProps> = props =>
             { isVisible &&
                 <NitroCardView className="nitro-friend-list">
                     <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
-                    <NitroCardAccordionView>
-                        <NitroCardAccordionItemView headerText="Friends" contentClassName="ps-3">
-                            <FriendListFriendsView />
-                        </NitroCardAccordionItemView>
-                        <NitroCardAccordionItemView headerText="Friend Requests" contentClassName="ps-3">
-                            abc
-                        </NitroCardAccordionItemView>
-                        <NitroCardAccordionItemView headerText="Search" contentClassName="ps-3">
-                            abc
-                        </NitroCardAccordionItemView>
-                    </NitroCardAccordionView>
+                    <NitroCardContentView>
+                        <div className="text-black fw-bold">{ LocalizeText('friendlist.search.friendscaption') }</div>
+                        <FriendListFriendsView online={ true } />
+                        <div className="text-black fw-bold">{ LocalizeText('friendlist.search.friendscaption') }</div>
+                        <FriendListFriendsView online={ true } />
+                        <div className="text-black fw-bold">{ LocalizeText('friendlist.friends.offlinecaption') }</div>
+                        <FriendListFriendsView online={ false } />
+                    </NitroCardContentView>
                 </NitroCardView> }
         </FriendListContextProvider>
     );
diff --git a/src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx b/src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx
new file mode 100644
index 00000000..01cc84fc
--- /dev/null
+++ b/src/views/friend-list/views/friends-item/FriendListFriendsItemView.tsx
@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { FriendListFriendsItemViewProps } from './FriendListFriendsItemView.types';
+
+export const FriendListFriendsItemView: FC<FriendListFriendsItemViewProps> = props =>
+{
+    const { friend = null } = props;
+
+    return (
+        <div className="d-flex">
+            <div className="text-black">{ friend.name }</div>
+        </div>
+    );
+}
diff --git a/src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts b/src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts
new file mode 100644
index 00000000..a64cbd3b
--- /dev/null
+++ b/src/views/friend-list/views/friends-item/FriendListFriendsItemView.types.ts
@@ -0,0 +1,6 @@
+import { MessengerFriend } from '../../common/MessengerFriend';
+
+export interface FriendListFriendsItemViewProps
+{
+    friend: MessengerFriend;
+}
diff --git a/src/views/friend-list/views/friends/FriendListFriendsView.tsx b/src/views/friend-list/views/friends/FriendListFriendsView.tsx
index 3f8f9dd2..dc85985c 100644
--- a/src/views/friend-list/views/friends/FriendListFriendsView.tsx
+++ b/src/views/friend-list/views/friends/FriendListFriendsView.tsx
@@ -1,36 +1,35 @@
-import { FC, useState } from 'react';
-import { NitroCardAccordionItemView } from '../../../../layout/card/accordion/item/NitroCardAccordionItemView';
-import { NitroCardAccordionView } from '../../../../layout/card/accordion/NitroCardAccordionView';
+import { FC, useMemo } from 'react';
 import { useFriendListContext } from '../../context/FriendListContext';
+import { FriendListFriendsItemView } from '../friends-item/FriendListFriendsItemView';
 import { FriendListFriendsViewProps } from './FriendListFriendsView.types';
 
 export const FriendListFriendsView: FC<FriendListFriendsViewProps> = props =>
 {
+    const { online = true } = props;
     const { friendListState = null } = useFriendListContext();
+    const { friends = null } = friendListState;
 
-    const [ isOnlineFriendsExtended, setIsOnlineFriendsExtended ] = useState(false);
-    const [ isOfflineFriendsExtended, setIsOfflineFriendsExtended ] = useState(false);
-
-    function toggleOnlineFriends(): void
+    const getFriendElements = useMemo(() =>
     {
-        setIsOnlineFriendsExtended(value => !value);
-    }
+        if(!friends || !friends.length) return null;
 
-    function toggleOfflineFriends(): void
-    {
-        setIsOfflineFriendsExtended(value => !value);
-    }
+        const elements: JSX.Element[] = [];
+
+        for(const friend of friends)
+        {
+            if(!friend || (friend.online !== online)) continue;
+
+            elements.push(<FriendListFriendsItemView key={ friend.id } friend={ friend } />)
+        }
+
+        console.log(elements);
+
+        return elements;
+    }, [ friends, online ]);
 
     return (
-        <>
-            <NitroCardAccordionView>
-                <NitroCardAccordionItemView headerText="Friends (0)">
-                    abc
-                </NitroCardAccordionItemView>
-                <NitroCardAccordionItemView headerText="Offline Friends (0)">
-                    abc
-                </NitroCardAccordionItemView>
-            </NitroCardAccordionView>
-        </>
+        <div className="d-flex flex-column">
+            { getFriendElements }
+        </div>
     );
 }
diff --git a/src/views/friend-list/views/friends/FriendListFriendsView.types.ts b/src/views/friend-list/views/friends/FriendListFriendsView.types.ts
index d91e6e6d..8f71b6ad 100644
--- a/src/views/friend-list/views/friends/FriendListFriendsView.types.ts
+++ b/src/views/friend-list/views/friends/FriendListFriendsView.types.ts
@@ -1,2 +1,4 @@
 export interface FriendListFriendsViewProps
-{}
+{
+    online?: boolean;
+}