diff --git a/src/app/chat/Channel.js b/src/app/chat/Channel.js
index 1b704fd..c22d8a5 100644
--- a/src/app/chat/Channel.js
+++ b/src/app/chat/Channel.js
@@ -9,7 +9,6 @@ const Channel = ({
   handleChannelSelect,
   isSelected = false,
 }) => {
-  console.log('c', participants);
   return (
     <div
       className={`p-4 border-b border-gray-200 hover:bg-gray-800 cursor-pointer ${isSelected ? 'bg-gray-800' : ''}`}
diff --git a/src/app/chat/ChannelList.js b/src/app/chat/ChannelList.js
index 5ac4d6c..5f74659 100644
--- a/src/app/chat/ChannelList.js
+++ b/src/app/chat/ChannelList.js
@@ -19,7 +19,7 @@ const ChannelList = ({ channels, handleChannelSelect, selectedChannel }) => {
 
   return (
     <div className="w-1/4  border-r border-gray-200">
-      <div className="p-4 border-b border-gray-200">
+      <div className="m-6">
         <h1 className="text-xl font-semibold">Channels</h1>
       </div>
       {list}
diff --git a/src/app/chat/ChatHeader.js b/src/app/chat/ChatHeader.js
new file mode 100644
index 0000000..99207a6
--- /dev/null
+++ b/src/app/chat/ChatHeader.js
@@ -0,0 +1,22 @@
+const ChatHeader = ({ channelName }) => {
+  const disabledStyles =
+    'bg-gray-300 px-4 py-2 rounded-md cursor-not-allowed opacity-50';
+
+  return (
+    <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+      <h1 className="text-xl font-semibold">
+        {channelName ?? 'Select channel'}{' '}
+      </h1>
+      <button
+        className={`text-white bg-red-500 active:bg-red-700 ${!channelName ? disabledStyles : ''} font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1`}
+        type="button"
+        onClick={() => {}}
+        disabled={!channelName}
+      >
+        Leave channel
+      </button>
+    </div>
+  );
+};
+
+export default ChatHeader;
diff --git a/src/app/chat/MessagesPanel.js b/src/app/chat/MessagesPanel.js
index f5c307c..0d2a8ea 100644
--- a/src/app/chat/MessagesPanel.js
+++ b/src/app/chat/MessagesPanel.js
@@ -9,9 +9,6 @@ const MessagesPanel = ({ messages, currentUser, typingStatus }) => {
 
   return (
     <div className="flex-1 flex flex-col">
-      <div className="p-4  border-b border-gray-200">
-        <h1 className="text-xl font-semibold">Chat</h1>
-      </div>
       <div className="flex-1 overflow-y-auto p-4">
         <div className="flex flex-col space-y-4">
           {messages.map((message) =>
diff --git a/src/app/chat/page.js b/src/app/chat/page.js
index acece8b..d2e1d34 100644
--- a/src/app/chat/page.js
+++ b/src/app/chat/page.js
@@ -8,7 +8,8 @@ import socketIO from 'socket.io-client';
 import Notification from '../components/Notification';
 import { useAuthContext } from '../context/AuthContext';
 import { db } from '../../database/firebase';
-import { onValue, ref, update } from 'firebase/database';
+import { onValue, ref, set } from 'firebase/database';
+import ChatHeader from './ChatHeader';
 
 const SERVER = 'http://127.0.0.1:8081';
 
@@ -35,13 +36,7 @@ const Chat = () => {
   }, [socket, messages]);
 
   const handleChannelSelect = (channelId) => {
-    const participantRef = ref(
-      db,
-      `channels/${channelId}/participants/${currentUser.userName}`,
-    );
-
-    update(participantRef, {
-      name: currentUser.displayName,
+    set(ref(db, `channels/${channelId}/participants/` + currentUser.id), {
       username: currentUser.userName,
     })
       .then(() => {
@@ -92,6 +87,7 @@ const Chat = () => {
         selectedChannel={selectedChannel}
       />
       <div className="flex flex-col w-full">
+        <ChatHeader />
         <MessagesPanel
           messages={messages}
           currentUser={currentUser}
@@ -99,11 +95,11 @@ const Chat = () => {
         />
         <MessagesPanelFooter socket={socket} currentUser={currentUser} />
       </div>
-      {notifications.map(({ id }) => (
+      {/* {notifications.map(({ id }) => (
         <Notification onClose={() => deleteNotification(id)} key={id}>
           This is a notification!
         </Notification>
-      ))}
+      ))} */}
     </div>
   );
 };
diff --git a/src/app/components/Modal.js b/src/app/components/Modal.js
deleted file mode 100644
index a08fb3d..0000000
--- a/src/app/components/Modal.js
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client';
-
-import React, { useRef, useState } from 'react';
-import { useAuthContext } from '../context/AuthContext';
-
-const FIELD_EMPTY = 'Field is empty';
-
-const Modal = () => {
-  const [error, setError] = useState(null);
-  const [isLoginForm, setIsLoginForm] = useState(true);
-  const displayNameRef = useRef('');
-  const userNameRef = useRef('');
-
-  const { handleAuth, registerUser, isOpen, closeModal } = useAuthContext();
-
-  if (!isOpen) return null;
-
-  const onSubmit = (e) => {
-    e.preventDefault();
-
-    const displayName = displayNameRef?.current?.value;
-    const userName = userNameRef.current.value;
-
-    if (userName) {
-      handleAuth(userName);
-    } else {
-      setError(FIELD_EMPTY);
-    }
-
-    setIsLoginForm(false);
-    if (displayName && userName) {
-      registerUser({
-        displayName,
-        userName,
-      });
-    } else {
-      setError(FIELD_EMPTY);
-    }
-  };
-
-  return (
-    <div className="h-screen flex flex-col items-center justify-center bg-transparent">
-      <div className="flex justify-center items-center overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none">
-        <div className="relative w-1/3 my-6 mx-auto ">
-          <div className="rounded-lg shadow-lg relative flex flex-col w-full outline-none focus:outline-none border border-solid border-gray-300 ">
-            <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t ">
-              <h3 className="text-2xl font=semibold">User Info</h3>
-              <button
-                className="bg-transparent border-0 text-black float-right cursor-pointer"
-                onClick={closeModal}
-              >
-                <span className="text-white opacity-7 h-6 w-6 text-xl block ">
-                  x
-                </span>
-              </button>
-            </div>
-            <form className="shadow-md rounded px-8 pt-6 pb-8 w-full">
-              {!isLoginForm ? (
-                <div className="mb-4">
-                  <label className="block text-sm mb-1">Display Name</label>
-                  <input
-                    ref={displayNameRef}
-                    className="shadow appearance-none border rounded w-full py-2 px-1 text-black"
-                  />
-                </div>
-              ) : null}
-              <div>
-                <label className="block text-sm mb-1">Username</label>
-                <input
-                  ref={userNameRef}
-                  className="shadow appearance-none border rounded w-full py-2 px-1 text-black"
-                />
-              </div>
-            </form>
-            <div className="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
-              {error ? (
-                <span className="text-xs text-red-700">{error}</span>
-              ) : null}
-              <button
-                className="text-blue-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 cursor-pointer"
-                type="button"
-                onClick={closeModal}
-              >
-                Close
-              </button>
-              <button
-                className="text-white bg-blue-500 active:bg-blue-700 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
-                type="button"
-                onClick={onSubmit}
-              >
-                {isLoginForm ? 'Login' : 'Register'}
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Modal;
diff --git a/src/app/context/AuthContext.js b/src/app/context/AuthContext.js
index 12f2a9b..ccff9d5 100644
--- a/src/app/context/AuthContext.js
+++ b/src/app/context/AuthContext.js
@@ -1,4 +1,3 @@
-import useAuth from '../hooks/useAuth';
 import { createContext, useMemo, useContext, useState } from 'react';
 
 const AuthContext = createContext({});
diff --git a/src/app/hooks/useAuth.js b/src/app/hooks/useAuth.js
deleted file mode 100644
index 86ecc61..0000000
--- a/src/app/hooks/useAuth.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const useAuth = (onClose, setCurrentUser) => {
-  const [users, setUsers] = useState([]);
-
-  useEffect(() => {
-    const users = localStorage.getItem('users');
-    if (users) {
-      setUsers(JSON.parse(users));
-    }
-  }, []);
-
-  const handleAuth = (username) => {
-    const userExists = users.find((u) => u.userName === username);
-
-    if (userExists) {
-      setCurrentUser(userExists);
-      onClose();
-    }
-  };
-
-  const registerUser = (user) => {
-    const existingUsers = [...users];
-    existingUsers.push(user);
-    setUsers(existingUsers);
-    localStorage.setItem('users', JSON.stringify(existingUsers));
-    setCurrentUser(user);
-    onClose();
-  };
-
-  return {
-    handleAuth,
-    registerUser,
-  };
-};
-
-export default useAuth;