diff --git a/front/volume/src/App.svelte b/front/volume/src/App.svelte
index 8e11b07..8c0c521 100644
--- a/front/volume/src/App.svelte
+++ b/front/volume/src/App.svelte
@@ -65,33 +65,20 @@
     { player1: "Alice", player2: "Bob", id: "3" },
   ];
 
-  // CHAT
-  let isChatOpen = false;
-  function clickChat() {
-    isChatOpen = true;
-  }
-  let chatMessages: Array<chatMessagesType> = [
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-    { name: "Alice", text: "Bob" },
-  ];
-
   // CHANNELS
   let isChannelsOpen = false;
   function clickChannels() {
     isChannelsOpen = true;
   }
   let channels: Array<ChannelsType> = [
-    { name: "My Imaginary Friends", id: "1" },
-    { name: "Chamber of Secrets", id: "4" },
-    { name: "Meme Team", id: "6" },
-    { name: "Chat 8", id: "8" },
-    { name: "F.R.I.E.N.D.S.", id: "2" },
-    { name: "Chat 3", id: "3" },
+    { id: "1", name: "General", messages: [] },
+    { id: "2", name: "Lobby", messages: [] },
+    { id: "3", name: "Game", messages: [] },
   ];
+  let selectedChannel: ChannelsType;
+  const handleSelectChannel = (channel: ChannelsType) => {
+    selectedChannel = channel;
+  };
 </script>
 
 <main>
@@ -100,31 +87,29 @@
     {clickHistory}
     {clickFriends}
     {clickSpectate}
-    {clickChat}
-	{clickChannels}
+	  {clickChannels}
   />
-  {#if isChatOpen}
-    <div
-      on:click={() => (isChatOpen = false)}
-      on:keydown={() => (isChatOpen = false)}
-    >
-      <Chat2 {chatMessages} />
-    </div>
-  {/if}
   {#if isChannelsOpen}
-  <div
-	on:click={() => (isChannelsOpen = false)}
-	on:keydown={() => (isChannelsOpen = false)}
-  >
-	<Channels {channels} />
-  </div>
-{/if}
+    {#if selectedChannel}
+      <div on:click={() => (selectedChannel = undefined)} on:keydown={() => (selectedChannel = undefined)}>
+        <Chat2 chatMessages={selectedChannel.messages} />  
+      </div>              
+    {/if}
+    {#if !selectedChannel}
+      <div
+        on:click={() => (isChannelsOpen = false)}
+        on:keydown={() => (isChannelsOpen = false)}
+      >
+      <Channels channels={channels} onSelectChannel={handleSelectChannel} />
+      </div>
+    {/if}
+  {/if}
   {#if isSpectateOpen}
     <div
       on:click={() => (isSpectateOpen = false)}
       on:keydown={() => (isSpectateOpen = false)}
     >
-      <Spectate {spectate} />
+    <Spectate {spectate} />
     </div>
   {/if}
   {#if isFriendOpen}
@@ -132,7 +117,7 @@
       on:click={() => (isFriendOpen = false)}
       on:keydown={() => (isFriendOpen = false)}
     >
-      <Friends {friends} />
+    <Friends {friends} />
     </div>
   {/if}
   {#if isHistoryOpen}
@@ -140,7 +125,7 @@
       on:click={() => (isHistoryOpen = false)}
       on:keydown={() => (isHistoryOpen = false)}
     >
-      <MatchHistory {matches} />
+    <MatchHistory {matches} />
     </div>
   {/if}
   {#if isProfileOpen}
@@ -148,14 +133,14 @@
       on:click={() => (isProfileOpen = false)}
       on:keydown={() => (isProfileOpen = false)}
     >
-      <Profile
-        username="Alice"
-        wins={10}
-        losses={5}
-        elo={256}
-        rank={23}
-        is2faEnabled={false}
-      />
+    <Profile
+      username="Alice"
+      wins={10}
+      losses={5}
+      elo={256}
+      rank={23}
+      is2faEnabled={false}
+    />
     </div>
   {/if}
   <Play />
diff --git a/front/volume/src/components/Channels.svelte b/front/volume/src/components/Channels.svelte
index b42a788..9de639a 100644
--- a/front/volume/src/components/Channels.svelte
+++ b/front/volume/src/components/Channels.svelte
@@ -1,52 +1,73 @@
-  <script lang="ts" context="module">
+<script lang="ts" context="module">
+  	import type { chatMessagesType } from "./Chat2.svelte";
 	export interface ChannelsType {
-	  id: string;
-	  name: string;
+		id: string;
+		name: string;
+		messages: Array<chatMessagesType>;
 	}
-  </script>
+</script>
 
-  <script lang="ts">
+<script lang="ts">
 	export let channels: Array<ChannelsType> = [];
-	export let enter = (id: string) => {};
-  </script>
+	export let onSelectChannel: (channel: ChannelsType) => void;
+	const selectChat = (id: string) => {
+		const channel = channels.find(c => c.id === id);
+		if (channel) {
+			onSelectChannel(channel);
+		}
+	}
+	const createChannel = () => {
+		const name = prompt("Enter a name for the new channel:");
+		if (name) {
+			const newChannel: ChannelsType = {
+				id: Math.random().toString(),
+				name,
+				messages: []
+			};
+			channels = [newChannel, ...channels];
+		}
+		// TODO: save to database
+  	};
+</script>
 
-  <div class="overlay">
+<div class="overlay">
 	<div class="channels" on:click|stopPropagation on:keydown|stopPropagation>
-	  <div>
+		<div>
 		{#if channels.length > 0}
-		  <h2>Channels</h2>
-		  {#each channels.slice(0, 10) as _channels}
+			<h2>Channels</h2>
+			{#each channels.slice(0, 10) as _channels}
 			<li>
-			  <span>{_channels.name}</span>
-			  <button on:click={() => enter(_channels.id)}>Enter</button>
+				<span>{_channels.name}</span>
+				<button on:click={() => selectChat(_channels.id)}>Enter</button>
 			</li>
-		  {/each}
+			{/each}
 		{:else}
-		  <p>No channels available</p>
+			<p>No channels available</p>
 		{/if}
-	  </div>
+		<button on:click={createChannel}>Create Channel</button>
+		</div>
 	</div>
-  </div>
+</div>
 
-  <style>
+<style>
 	.overlay {
-	  position: fixed;
-	  top: 0;
-	  left: 0;
-	  width: 100%;
-	  height: 100%;
-	  background-color: rgba(0, 0, 0, 0.5);
-	  z-index: 9998;
-	  display: flex;
-	  justify-content: center;
-	  align-items: center;
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		z-index: 9998;
+		display: flex;
+		justify-content: center;
+		align-items: center;
 	}
 
 	.channels {
-	  background-color: #fff;
-	  border: 1px solid #ccc;
-	  border-radius: 5px;
-	  padding: 1rem;
-	  width: 300px;
+		background-color: #fff;
+		border: 1px solid #ccc;
+		border-radius: 5px;
+		padding: 1rem;
+		width: 300px;
 	}
-  </style>
+</style>
diff --git a/front/volume/src/components/Chat2.svelte b/front/volume/src/components/Chat2.svelte
index 12aec41..0a35519 100644
--- a/front/volume/src/components/Chat2.svelte
+++ b/front/volume/src/components/Chat2.svelte
@@ -1,23 +1,41 @@
 <script lang="ts" context="module">
   export interface chatMessagesType {
+    id: number;
     name: string;
     text: string;
   }
 </script>
 
+
 <script lang="ts">
   const sendMessage = () => {
     if (newText !== "") {
       const newMessage = {
+        id: chatMessages.length + 1,
         name: "You",
         text: newText,
       };
-      chatMessages = [...chatMessages, newMessage];
+      chatMessages = [...chatMessages.slice(-5 + 1), newMessage];
       newText = "";
     }
+    // TODO: save to database
   };
+
   export let chatMessages: Array<chatMessagesType> = [];
   let newText = "";
+
+  // const openProfile = (id: number) => (event: Event) => {
+  //   const message = chatMessages.find((m) => m.id === id);
+  //   if (message) {
+  //     const { name } = message;
+  //     const options = ["View profile", "Send private message", "Block user"];
+  //     const option = prompt(`Select an option for ${name}: ${options.join(", ")}`);
+  //     if (option === "View profile") {
+  //     } else if (option === "Send private message") {
+  //     } else if (option === "Block user") {
+  //     }
+  //   }
+  // };
 </script>
 
 <div class="overlay">
diff --git a/front/volume/src/components/NavBar.svelte b/front/volume/src/components/NavBar.svelte
index dd67fc4..095b760 100644
--- a/front/volume/src/components/NavBar.svelte
+++ b/front/volume/src/components/NavBar.svelte
@@ -2,8 +2,7 @@
   export let links = [
     { text: "Home", url: "img/pong.png" },
     { text: "Spectate" },
-	{ text: "Channels" },
-    { text: "Chat" },
+	  { text: "Channels" },
     { text: "History" },
     { text: "Friends" },
     { text: "Profile" },
@@ -33,13 +32,6 @@
 		</button>
 	  </li>
 	{/if}
-      {#if link.text === "Chat"}
-        <li>
-          <button on:click={clickChat}>
-            <p>Chat</p>
-          </button>
-        </li>
-      {/if}
       {#if link.text === "Friends"}
         <li>
           <button on:click={clickFriends}>