diff --git a/front/src/components/Navbar.tsx b/front/src/components/Navbar.tsx
index 153e80b..2b04056 100644
--- a/front/src/components/Navbar.tsx
+++ b/front/src/components/Navbar.tsx
@@ -10,6 +10,7 @@ import { Dropdown } from './Dropdown';
 const navigation = [
   { name: 'Game', href: '/game' },
   { name: 'Profile', href: '/profile' },
+  { name: 'Chat', href: '/chat' },
   { name: 'Friends', href: '/friends' },
   { name: '2FA', href: '/2fa' },
 ];
diff --git a/front/src/components/chat/ChatList.tsx b/front/src/components/chat/ChatList.tsx
index 5dd4bc5..9a64a59 100644
--- a/front/src/components/chat/ChatList.tsx
+++ b/front/src/components/chat/ChatList.tsx
@@ -41,7 +41,7 @@ interface ChatListProps {
 
 const ChatList = ({ joinedChannels, currentChannel, setCurrentChannel }: ChatListProps) => {
   return (
-    <div className="h-full w-full">
+    <div className="h-full w-full overflow-y-auto" style={{ maxHeight: '600px' }}>
       {joinedChannels.map((chat) => (
         <ChatListElem
           setCurrentChannel={setCurrentChannel}
diff --git a/front/src/components/friends/CreateDM.tsx b/front/src/components/friends/CreateDM.tsx
new file mode 100644
index 0000000..82240d3
--- /dev/null
+++ b/front/src/components/friends/CreateDM.tsx
@@ -0,0 +1,74 @@
+import React, { FormEvent, useRef, useState } from 'react';
+import { Socket } from 'socket.io-client';
+
+import { Channel } from './DM';
+
+interface CreateDMProps {
+  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
+  socket: Socket;
+}
+
+const CreateDM = ({ setShowModal, socket }: CreateDMProps) => {
+  const [channelType, setChannelType] = useState<string>('Public');
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  const CreateDM = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // send notification if success or error
+    const channel: Channel = {
+      name: nameRef.current?.value || '',
+      type: channelType.toUpperCase(),
+    };
+    if (channelType === 'protected') {
+      channel.password = passwordRef.current?.value;
+    }
+    socket.emit('create', channel);
+    setShowModal(false);
+  };
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg bg-white-2 p-6 shadow-xl">
+      <h2 className="mb-4 text-2xl">Create a channel</h2>
+      <form className="flex flex-col gap-2" onSubmit={CreateDM}>
+        <input
+          pattern="[a-z0-9]+"
+          title="Only lowercase letters and numbers are allowed"
+          className="rounded-lg border-2 border-white-3 p-2"
+          type="text"
+          placeholder="Channel name"
+          ref={nameRef}
+        />
+        <select
+          className="rounded-lg border-2 border-white-3 p-2"
+          onChange={(e) => setChannelType(e.target.value)}
+        >
+          <option value="public">Public</option>
+          <option value="protected">Protected</option>
+          <option value="private">Private</option>
+        </select>
+        {channelType === 'protected' && (
+          <input
+            className="rounded-lg border-2 border-white-3 p-2"
+            type="password"
+            placeholder="Password"
+            ref={passwordRef}
+          />
+        )}
+
+        <div className="flex justify-between">
+          <button
+            onClick={() => setShowModal(false)}
+            className="rounded-lg border-2 border-white-3 p-2 hover:bg-red hover:text-white-1"
+          >
+            Cancel
+          </button>
+          <button className="rounded-lg border-2 border-white-3 p-2 hover:bg-darkBlue-2 hover:text-white-1">
+            Create
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default CreateDM;
diff --git a/front/src/components/friends/DM.tsx b/front/src/components/friends/DM.tsx
new file mode 100644
index 0000000..130cc13
--- /dev/null
+++ b/front/src/components/friends/DM.tsx
@@ -0,0 +1,118 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useEffect, useState } from 'react';
+import { io, Socket } from 'socket.io-client';
+
+import chat_plus from '@/assets/chat/chat_plus.svg';
+import chat_join from '@/assets/chat/join-channel.svg';
+
+import CreateDM from './CreateDM';
+import DMConversation from './DMConversation';
+import DMList from './DMList';
+import DMModal from './DMModal';
+import JoinDM from './JoinDM';
+
+export interface Channel {
+  name: string;
+  type: string;
+  password?: string;
+}
+
+export interface ChannelType {
+  createdAt: string;
+  id: number;
+  name: string;
+  type: 'PUBLIC' | 'PROTECTED' | 'PRIVATE';
+}
+
+const DM = () => {
+  const [showCreateModal, setShowCreateModal] = useState<boolean>(false);
+  const [showJoinModal, setShowJoinModal] = useState<boolean>(false);
+  const [socket, setSocket] = useState<Socket>();
+  const localToken = localStorage.getItem('token');
+  const token: string = localToken ? localToken : '';
+  const [loading, setLoading] = useState<boolean>(true);
+  const [joinedChannels, setJoinedChannels] = useState<ChannelType[]>([]);
+  const [currentChannel, setCurrentChannel] = useState<ChannelType | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    const tmpSocket = io('/chat', { extraHeaders: { token: token } });
+    tmpSocket.on('connect', () => {
+      setSocket(tmpSocket);
+      setLoading(false);
+
+      tmpSocket.emit('joinedChannels', (data: ChannelType[]) => {
+        setJoinedChannels(data);
+      });
+
+      tmpSocket.on('youJoined', (data: ChannelType) => {
+        setCurrentChannel(data);
+        setJoinedChannels((prev) => [...prev, data]);
+      });
+
+      tmpSocket.on('youLeft', (data: any) => {
+        setCurrentChannel(null);
+        setJoinedChannels(joinedChannels.filter((c) => c.name !== data.channel));
+        alert(`You left ${data.channel}, ${data.reason}`);
+      });
+
+      tmpSocket.on('exception', (data) => {
+        if (Array.isArray(data.DMMessage)) {
+          alert(data.DMMessage.join('\n'));
+        } else {
+          alert(data.DMMessage);
+        }
+      });
+    });
+
+    return () => {
+      socket?.disconnect();
+    };
+  }, []);
+  if (loading) return <div>loading</div>;
+  if (!socket) return <div>socket not initialized</div>;
+
+  return (
+    <div className="flex max-h-full min-h-[75%] w-full bg-white-1 md:w-auto">
+      {showCreateModal && (
+        <DMModal>
+          <CreateDM setShowModal={setShowCreateModal} socket={socket} />
+        </DMModal>
+      )}
+      {showJoinModal && (
+        <DMModal>
+          <JoinDM setShowModal={setShowJoinModal} socket={socket} joinedChannels={joinedChannels} />
+        </DMModal>
+      )}
+      <div className="flex w-[35%] flex-col md:w-auto">
+        <div className="flex  justify-between px-1 py-3  md:gap-2 md:p-3">
+          <h2 className="text-base md:text-xl">DMMessages</h2>
+          <div className="flex w-full gap-1 md:gap-2">
+            <button
+              className="rounded-full p-1 hover:bg-white-3"
+              title="Join a channel"
+              onClick={() => setShowJoinModal(true)}
+            >
+              <img className="w-5 md:w-6" src={chat_join} alt="join channel" />
+            </button>
+            <button
+              title="Create a channel"
+              onClick={() => setShowCreateModal(true)}
+              className="rounded-full p-1 hover:bg-white-3"
+            >
+              <img className="w-5 md:w-6" src={chat_plus} alt="create channel" />
+            </button>
+          </div>
+        </div>
+        <DMList
+          joinedChannels={joinedChannels}
+          setCurrentChannel={setCurrentChannel}
+          currentChannel={currentChannel}
+        />
+      </div>
+      {currentChannel && <DMConversation socket={socket} channel={currentChannel} />}
+    </div>
+  );
+};
+
+export default DM;
diff --git a/front/src/components/friends/DMConversation.tsx b/front/src/components/friends/DMConversation.tsx
new file mode 100644
index 0000000..15c5285
--- /dev/null
+++ b/front/src/components/friends/DMConversation.tsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { UseQueryResult } from 'react-query';
+import { Socket } from 'socket.io-client';
+
+import info_icon from '@/assets/chat/info.svg';
+import send_icon from '@/assets/chat/send.svg';
+import { userDto } from '@/dto/userDto';
+import { useApi } from '@/hooks/useApi';
+
+import { ChannelType } from './DM';
+import DMInfos from './DMInfos';
+import DMMessage from './DMMessage';
+import DMModal from './DMModal';
+
+interface DMConversationProps {
+  channel: ChannelType;
+  socket: Socket;
+}
+
+export interface UserType {
+  id: number;
+  login: string;
+  status: string;
+  intraImageURL: string;
+  role: string;
+}
+
+export interface DMMessageType {
+  id: number;
+  creadtedAt: string;
+  content: string;
+  user: UserType;
+}
+
+const DMDMConversation = ({ channel, socket }: DMConversationProps) => {
+  const [showModal, setShowModal] = React.useState<boolean>(false);
+  const [messages, setMessages] = useState<DMMessageType[]>([]);
+  const [message, setMessage] = useState<string>('');
+  const bottomEl = useRef<HTMLDivElement>(null);
+  const {
+    data: infos,
+    isError,
+    isLoading,
+  } = useApi().get('get user infos', '/user/me') as UseQueryResult<userDto>;
+
+  useEffect(() => {
+    socket.on('message', (data: DMMessageType) => {
+      setMessages((messages) => [...messages, data]);
+    });
+
+    socket.emit(
+      'history',
+      { channel: channel.name, offset: 0, limit: 100 },
+      (res: DMMessageType[]) => {
+        setMessages(res);
+      },
+    );
+
+    return () => {
+      socket.off('message');
+    };
+  }, [channel]);
+
+  useEffect(() => {
+    bottomEl?.current?.scrollIntoView({ behavior: 'smooth' });
+  }, [messages]);
+
+  const sendDMMessage = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (!message) return;
+    socket.emit('message', { channel: channel.name, content: message });
+    setMessage('');
+  };
+
+  if (isLoading) return <div>loading</div>;
+  if (isError) return <div>error</div>;
+  if (!infos) return <div>error</div>;
+
+  return (
+    <div className="flex w-[65%] flex-col border-l border-l-white-3 md:w-[500px]">
+      {showModal && (
+        <DMModal>
+          <DMInfos
+            setShowModal={setShowModal}
+            socket={socket}
+            channelName={channel.name}
+            currentUserLogin={infos.login}
+          />
+        </DMModal>
+      )}
+      <div className="flex justify-between p-3">
+        <h3 className="text-xl">{channel.name}</h3>
+        <div className="flex gap-2">
+          <button className="rounded-full p-1 hover:bg-white-3" onClick={() => setShowModal(true)}>
+            <img className="w-6" src={info_icon} alt="info" />
+          </button>
+        </div>
+      </div>
+      <div
+        className="flex h-full flex-col gap-1 overflow-y-auto p-3"
+        style={{ maxHeight: '600px' }}
+      >
+        {messages.map((m, idx) => {
+          // TODO replace idx by DMMessage id
+          return (
+            <DMMessage
+              key={idx}
+              text={m.content}
+              send_by_user={m.user.login === infos?.login}
+              sender={m.user}
+            />
+          );
+        })}
+        <div ref={bottomEl}></div>
+      </div>
+      <div className="border-t border-t-white-3">
+        <form
+          className="m-2 flex gap-3 rounded-2xl bg-white-3 p-2"
+          onSubmit={(e) => sendDMMessage(e)}
+        >
+          <input
+            className="w-full bg-white-3 outline-none"
+            type="text"
+            placeholder="Write a new DMMessage"
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+          />
+          <button>
+            <img className="w-5" src={send_icon} alt="send" />
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default DMDMConversation;
diff --git a/front/src/components/friends/DMInfos.tsx b/front/src/components/friends/DMInfos.tsx
new file mode 100644
index 0000000..c3e5dc8
--- /dev/null
+++ b/front/src/components/friends/DMInfos.tsx
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Socket } from 'socket.io-client';
+
+import ban_icon from '@/assets/chat/ban.svg';
+import game_icon from '@/assets/chat/boxing-glove.svg';
+import promote_icon from '@/assets/chat/crown.svg';
+import demote_icon from '@/assets/chat/demote.svg';
+import kick_icon from '@/assets/chat/kick.svg';
+
+import { UserType } from './DMConversation';
+
+interface DMInfosProps {
+  setShowModal: (show: boolean) => void;
+  socket: Socket;
+  channelName: string;
+  currentUserLogin: string;
+}
+
+interface UserListResponse {
+  channel: string;
+  users: UserType[];
+}
+
+// TODO: leaver button ??
+const DMInfos = ({ setShowModal, socket, channelName, currentUserLogin }: DMInfosProps) => {
+  const [users, setUsers] = useState<UserType[]>([]);
+  const [isAdmin, setIsAdmin] = useState<boolean>(false);
+
+  useEffect(() => {
+    socket.emit('userList', { channel: channelName }, (res: UserListResponse) => {
+      setUsers(res.users.filter((user) => user.login !== currentUserLogin));
+      const user = res.users.find((user) => user.login === currentUserLogin) || null;
+      if (user && (user.role === 'ADMIN' || user.role === 'OWNER')) setIsAdmin(true);
+    });
+  }, []);
+
+  const promoteUser = (user: UserType) => {
+    socket.emit('promote', { channel: channelName, login: user.login });
+    setUsers(
+      users.map((u) => {
+        if (u.id === user.id) {
+          return { ...u, role: 'ADMIN' };
+        }
+        return u;
+      }),
+    );
+  };
+
+  const demoteUser = (user: UserType) => {
+    socket.emit('demote', { channel: channelName, login: user.login });
+    setUsers(
+      users.map((u) => {
+        if (u.id === user.id) {
+          return { ...u, role: 'USER' };
+        }
+        return u;
+      }),
+    );
+  };
+
+  const kickUser = (user: UserType) => {
+    socket.emit('kick', { channel: channelName, login: user.login });
+    setUsers(users.filter((u) => u.id !== user.id));
+  };
+
+  const banUser = (user: UserType) => {
+    socket.emit('ban', { channel: channelName, login: user.login });
+    setUsers(users.filter((u) => u.id !== user.id));
+  };
+
+  const startGame = () => {
+    const code = (Math.random() + 1).toString(36).substring(7);
+    const DMMessage = `Come join me in a Pong game! ${window.location.origin}/game?code=${code}`;
+    socket.emit('DMMessage', { channel: channelName, content: DMMessage });
+  };
+
+  // Contains the list of members in the channel, whith a possibility to kick them, to promote them as admin, and to start a game with them
+  return (
+    <div className="flex flex-col gap-2 rounded-lg bg-white-1 p-4">
+      <div className="flex items-center justify-between gap-4">
+        <h2 className="text-2xl">Members</h2>
+        <button
+          onClick={() => setShowModal(false)}
+          className="rounded-lg border-2 border-white-3 p-1 text-xl hover:bg-red hover:text-white-1"
+        >
+          Close
+        </button>
+      </div>
+      <div className="flex flex-col gap-2">
+        {users.map((user) => {
+          return (
+            <div key={user.id} className="flex items-center justify-between gap-4">
+              <Link to={'/user/' + user.login}>
+                <div className="flex items-center gap-2">
+                  <img className="w-8 rounded-full" src={user.intraImageURL} alt="user" />
+                  <h3 className="text-lg">{user.login}</h3>
+                </div>
+              </Link>
+              <div className="flex gap-2">
+                <button
+                  className="rounded-full p-1 hover:bg-green-1"
+                  title="Start a game"
+                  onClick={() => startGame()}
+                >
+                  <img className="w-6" src={game_icon} alt="close" />
+                </button>
+                {user.role === 'ADMIN' || user.role === 'OWNER' ? (
+                  <button
+                    className="rounded-full p-1 enabled:hover:bg-yellow-1 disabled:cursor-not-allowed"
+                    title={'Demote user'}
+                    disabled={!isAdmin || user.role === 'OWNER'}
+                    onClick={() => demoteUser(user)}
+                  >
+                    <img className="w-6" src={demote_icon} alt="demote" />
+                  </button>
+                ) : (
+                  <button
+                    className="rounded-full p-1 enabled:hover:bg-yellow-1 disabled:cursor-not-allowed"
+                    title={'Promote user to admin'}
+                    disabled={!isAdmin}
+                    onClick={() => promoteUser(user)}
+                  >
+                    <img className="w-6" src={promote_icon} alt="promote" />
+                  </button>
+                )}
+                <button
+                  className="rounded-full p-1 enabled:hover:bg-red disabled:cursor-not-allowed"
+                  title={isAdmin ? 'Kick user' : "Can't kick user because you are not admin"}
+                  disabled={!isAdmin}
+                  onClick={() => kickUser(user)}
+                >
+                  <img className="w-6" src={kick_icon} alt="kick" />
+                </button>
+                <button
+                  className="rounded-full p-1 enabled:hover:bg-red disabled:cursor-not-allowed"
+                  title={isAdmin ? 'Ban user' : "Can't ban user because you are not admin"}
+                  disabled={!isAdmin}
+                  onClick={() => banUser(user)}
+                >
+                  <img className="w-6" src={ban_icon} alt="ban" />
+                </button>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default DMInfos;
diff --git a/front/src/components/friends/DMList.tsx b/front/src/components/friends/DMList.tsx
new file mode 100644
index 0000000..687e4f8
--- /dev/null
+++ b/front/src/components/friends/DMList.tsx
@@ -0,0 +1,57 @@
+// import logo from '@/assets/logo.svg';
+
+import { ChannelType } from './DM';
+
+interface DMListElemProps {
+  DMInfos: ChannelType;
+  currentChannel: ChannelType | null;
+  setCurrentChannel: (channel: ChannelType) => void;
+}
+
+const DMListElem = ({ DMInfos, setCurrentChannel, currentChannel }: DMListElemProps) => {
+  const handleClick = (channel: ChannelType) => {
+    if (currentChannel === null || channel.id !== currentChannel.id) setCurrentChannel(channel);
+  };
+
+  return (
+    <button
+      onClick={() => handleClick(DMInfos)}
+      className={`flex w-full cursor-pointer p-3 enabled:hover:bg-white-2 ${
+        currentChannel?.name === DMInfos.name && 'bg-white-3'
+      }`}
+      disabled={currentChannel?.name === DMInfos.name}
+    >
+      {/* <img src={DMInfos.profilePicture} alt="DMConversation" className="h-14 w-14 rounded-full" /> */}
+      <div className="flex flex-col">
+        <div className="flex items-center gap-1">
+          <h3 className="font-bold">{DMInfos.name}</h3>
+          {/* <h3 className="text-sm">@{DMInfos.login}</h3> */}
+        </div>
+        {/* <span className="text-sm">{DMInfos.lastDMMessage}</span> */}
+      </div>
+    </button>
+  );
+};
+
+interface DMListProps {
+  joinedChannels: ChannelType[];
+  currentChannel: ChannelType | null;
+  setCurrentChannel: (channel: ChannelType) => void;
+}
+
+const DMList = ({ joinedChannels, currentChannel, setCurrentChannel }: DMListProps) => {
+  return (
+    <div className="h-full w-full overflow-y-auto" style={{ maxHeight: '600px' }}>
+      {joinedChannels.map((chat) => (
+        <DMListElem
+          setCurrentChannel={setCurrentChannel}
+          key={chat.id}
+          DMInfos={chat}
+          currentChannel={currentChannel}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default DMList;
diff --git a/front/src/components/friends/DMMessage.tsx b/front/src/components/friends/DMMessage.tsx
new file mode 100644
index 0000000..b0cf33e
--- /dev/null
+++ b/front/src/components/friends/DMMessage.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import Linkify from 'react-linkify';
+import { Link } from 'react-router-dom';
+
+import { UserType } from './DMConversation';
+
+interface DMMessageProps {
+  sender: UserType;
+  text: string;
+  send_by_user: boolean;
+}
+
+const DMMessage = ({ text, sender, send_by_user }: DMMessageProps) => {
+  return (
+    <div
+      className={`w-fit max-w-[60%] whitespace-normal break-all rounded-lg p-2 ${
+        send_by_user ? 'self-end bg-darkBlue-2 text-white-1' : 'self-start bg-white-3'
+      }`}
+    >
+      <div className="flex gap-1 font-bold">
+        <img className="w-8 rounded-full" src={sender.intraImageURL} alt="user" />
+        <span className="text-lg">{sender.login}</span>
+      </div>
+      <Linkify
+        componentDecorator={(decoratedHref, decoratedText, key) => (
+          <Link to={decoratedHref} key={key} style={{ color: '#3182CE' }}>
+            {decoratedText}
+          </Link>
+        )}
+      >
+        <p>{text}</p>
+      </Linkify>
+    </div>
+  );
+};
+
+export default DMMessage;
diff --git a/front/src/components/friends/DMModal.tsx b/front/src/components/friends/DMModal.tsx
new file mode 100644
index 0000000..2a875fd
--- /dev/null
+++ b/front/src/components/friends/DMModal.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+interface ModalProps {
+  children: React.ReactNode;
+}
+
+const Modal = ({ children }: ModalProps) => {
+  return (
+    <div className="absolute left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-white-3/30">
+      {children}
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/front/src/components/friends/JoinDM.tsx b/front/src/components/friends/JoinDM.tsx
new file mode 100644
index 0000000..e403a3c
--- /dev/null
+++ b/front/src/components/friends/JoinDM.tsx
@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import { Socket } from 'socket.io-client';
+
+import lock from '@/assets/chat/lock.svg';
+
+import { ChannelType } from './DM';
+
+interface JoinDMProps {
+  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
+  socket: Socket;
+  joinedChannels: ChannelType[];
+}
+
+const JoinDM = ({ setShowModal, socket, joinedChannels }: JoinDMProps) => {
+  const [searchChannel, setSearchChannel] = useState<string>('');
+  const [isPasswordNeeded, setIsPasswordNeeded] = useState<boolean>(false);
+  const [channelSelected, setChannelSelected] = useState<HTMLButtonElement | null>(null);
+  const [channels, setChannels] = useState<ChannelType[]>([]);
+  const [channelName, setChannelName] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+
+  useEffect(() => {
+    socket.emit('channelList', (data: ChannelType[]) => {
+      setChannels(data);
+    });
+  }, []);
+
+  const selectChannel = (e: React.MouseEvent<HTMLButtonElement>, channelType: ChannelType) => {
+    if (channelType.type === 'PROTECTED') {
+      setIsPasswordNeeded(true);
+    } else {
+      setIsPasswordNeeded(false);
+    }
+
+    if (e.currentTarget !== channelSelected) {
+      setChannelName(e.currentTarget.firstChild?.textContent || '');
+      if (channelSelected) {
+        channelSelected.style.backgroundColor = '#FFFFFF';
+        channelSelected.style.color = '#000000';
+      }
+      e.currentTarget.style.backgroundColor = '#37626D';
+      e.currentTarget.style.color = '#FFFFFF';
+      setChannelSelected(e.currentTarget);
+    }
+  };
+
+  const handleJoinDM = () => {
+    socket.emit('join', { name: channelName, password: password });
+    // TODO send notification if error
+    setShowModal(false);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg bg-white-2 p-6 shadow-xl">
+      <h2 className="mb-4 text-2xl">Join a channel</h2>
+      <form className="flex flex-col gap-2" onSubmit={handleJoinDM}>
+        <div className="flex gap-2">
+          <input
+            className="rounded-lg border-2 border-white-3 p-2"
+            type="text"
+            placeholder="Filter channel"
+            onChange={(e) => setSearchChannel(e.target.value)}
+          />
+          <button
+            onClick={() => setShowModal(false)}
+            className="rounded-lg border-2 border-white-3 p-2 hover:bg-red hover:text-white-1"
+          >
+            Cancel
+          </button>
+        </div>
+        <div className="flex max-h-[300px] flex-col gap-1 overflow-x-scroll">
+          {channels
+            .filter((channel) => channel.name.toLowerCase().includes(searchChannel.toLowerCase()))
+            .map((channel) => {
+              const joined = joinedChannels.some(
+                (joinedChannel) => joinedChannel.id === channel.id,
+              );
+              return (
+                <button
+                  className="flex justify-between gap-2 rounded-lg border-2 border-white-3 bg-white-1 p-2 enabled:hover:bg-darkBlue-2 enabled:hover:text-white-1 enabled:focus:bg-darkBlue-2 enabled:focus:text-white-1 disabled:cursor-not-allowed disabled:opacity-60"
+                  key={channel.id}
+                  disabled={joined}
+                  onClick={(e) => selectChannel(e, channel)}
+                  type="button"
+                >
+                  <div>{channel.name}</div>
+                  <div className="flex">
+                    {channel.type === 'PROTECTED' && (
+                      <img className="mr-2 w-6 text-darkBlue-2" src={lock} alt="lock" />
+                    )}
+                    {joined && <div className="text-darkBlue-2">Joined</div>}
+                  </div>
+                </button>
+              );
+            })}
+        </div>
+        <div className="flex justify-center gap-2">
+          <input
+            className={`rounded-lg border-2 border-white-3 p-2 ${
+              isPasswordNeeded ? '' : 'cursor-not-allowed'
+            }`}
+            type="password"
+            placeholder="Password"
+            required={isPasswordNeeded}
+            disabled={!isPasswordNeeded}
+            onChange={(e) => setPassword(e.target.value)}
+          />
+          <button className="w-full rounded-lg border-2 border-white-3 p-2 hover:bg-darkBlue-2 hover:text-white-1">
+            Join
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default JoinDM;
diff --git a/front/src/main.tsx b/front/src/main.tsx
index a9dae46..99eba90 100644
--- a/front/src/main.tsx
+++ b/front/src/main.tsx
@@ -7,7 +7,6 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import Root from '@/components/Root';
 import Error from '@/pages/Error';
-import Friends from '@/pages/Friends';
 import Game from '@/pages/Game';
 import Home from '@/pages/Home';
 import Login from '@/pages/Login';
@@ -15,6 +14,8 @@ import Profile from '@/pages/Profile';
 import { privateGuard } from '@/utils/privateGuard';
 
 import Main from './components/Main';
+import ChatPage from './pages/ChatPage';
+import FriendPage from './pages/FriendPage';
 import OauthCallback from './pages/OauthCallback';
 import TwoFaActivation from './pages/TwoFaActivation';
 import TwoFaLogin from './pages/TwoFaLogin';
@@ -45,7 +46,12 @@ const router = createBrowserRouter([
           },
           {
             path: '/friends',
-            element: <Friends />,
+            element: <FriendPage />,
+            loader: privateGuard,
+          },
+          {
+            path: '/chat',
+            element: <ChatPage />,
             loader: privateGuard,
           },
           {
diff --git a/front/src/pages/Friends.tsx b/front/src/pages/ChatPage.tsx
similarity index 86%
rename from front/src/pages/Friends.tsx
rename to front/src/pages/ChatPage.tsx
index aaf5a95..b42d48e 100644
--- a/front/src/pages/Friends.tsx
+++ b/front/src/pages/ChatPage.tsx
@@ -2,7 +2,7 @@ import { Button } from '@/components/Button';
 import Chat from '@/components/chat/Chat';
 import { FriendList } from '@/components/FriendList';
 
-const Friends = () => {
+const ChatPage = () => {
   return (
     <div className="flex h-full w-full flex-col items-center justify-center gap-2">
       <div className="flex gap-3"></div>
@@ -11,4 +11,4 @@ const Friends = () => {
   );
 };
 
-export default Friends;
+export default ChatPage;
diff --git a/front/src/pages/FriendPage.tsx b/front/src/pages/FriendPage.tsx
new file mode 100644
index 0000000..fd8c80f
--- /dev/null
+++ b/front/src/pages/FriendPage.tsx
@@ -0,0 +1,11 @@
+import DM from '@/components/friends/DM';
+
+const FriendPage = () => {
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <DM />
+    </div>
+  );
+};
+
+export default FriendPage;