diff --git a/staff/marti-herms/project/G-HUB/api/index.js b/staff/marti-herms/project/G-HUB/api/index.js
index 9cdaee267..6dcec472b 100644
--- a/staff/marti-herms/project/G-HUB/api/index.js
+++ b/staff/marti-herms/project/G-HUB/api/index.js
@@ -60,7 +60,7 @@ mongoose.connect(process.env.MONGODB_URI)
 
         api.delete('/reviews/:reviewId', jwtVerifier, handle.deleteReview)
 
-        api.get('/chat/:targeUserId', jwtVerifier, handle.openChat)
+        api.get('/chat/:targetUserId', jwtVerifier, handle.openChat)
 
         api.post('/chat/:chatId/messages', jwtVerifier, jsonBodyParser, handle.sendMessage)
 
diff --git a/staff/marti-herms/project/G-HUB/app/logic/getChatMessages.js b/staff/marti-herms/project/G-HUB/app/logic/getChatMessages.js
new file mode 100644
index 000000000..3ce8a3fc6
--- /dev/null
+++ b/staff/marti-herms/project/G-HUB/app/logic/getChatMessages.js
@@ -0,0 +1,29 @@
+import { validate, errors } from 'com'
+
+const { SystemError } = errors
+
+export default (chatId) => {
+    validate.string(chatId, 'chatId')
+
+    return fetch(`${import.meta.env.VITE_API_URL}/chat/${chatId}/messages`, {
+        headers: { Authorization: `Bearer ${sessionStorage.token}` }
+    })
+        .catch(error => { throw new SystemError(error.message) })
+        .then(response => {
+            const { status } = response
+
+            if (status === 200) {
+                return response.json()
+                    .then(messages => messages)
+            }
+
+            return response.json()
+                .then(body => {
+                    const { error, message } = body
+
+                    const constructor = errors[error]
+
+                    throw new constructor(message)
+                })
+        })
+}
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/logic/index.js b/staff/marti-herms/project/G-HUB/app/logic/index.js
index 9311eb1c4..06a9b5c2e 100644
--- a/staff/marti-herms/project/G-HUB/app/logic/index.js
+++ b/staff/marti-herms/project/G-HUB/app/logic/index.js
@@ -22,11 +22,15 @@ import getUserAvatar from './getUserAvatar.js'
 import getUser from './getUser.js'
 import editUserAvatar from './editUserAvatar.js'
 import editUserUsername from './editUserUsername.js'
+import openChat from './openChat.js'
+import sendMessage from './sendMessage.js'
+import getChatMessages from './getChatMessages.js'
 
 const logic = {
     deleteReview,
     editUserAvatar,
     editUserUsername,
+    getChatMessages,
     getDevUserGames,
     getGameById,
     getGameReviews,
@@ -41,10 +45,12 @@ const logic = {
     loginUser,
     logoutUser,
     makeReview,
+    openChat,
     registerGame,
     registerUser,
     searchGame,
     searchUser,
+    sendMessage,
     toggleAddGame,
     toggleFavGame,
     toggleFollowUser,
diff --git a/staff/marti-herms/project/G-HUB/app/logic/openChat.js b/staff/marti-herms/project/G-HUB/app/logic/openChat.js
new file mode 100644
index 000000000..d2882e8c7
--- /dev/null
+++ b/staff/marti-herms/project/G-HUB/app/logic/openChat.js
@@ -0,0 +1,29 @@
+import { validate, errors } from 'com'
+
+const { SystemError } = errors
+
+export default (targetUserId) => {
+    validate.string(targetUserId, 'targetUserId')
+
+    return fetch(`${import.meta.env.VITE_API_URL}/chat/${targetUserId}`, {
+        headers: { Authorization: `Bearer ${sessionStorage.token}` }
+    })
+        .catch(error => { throw new SystemError(error.message) })
+        .then(response => {
+            const { status } = response
+
+            if (status === 200) {
+                return response.json()
+                    .then(chatId => chatId)
+            }
+
+            return response.json()
+                .then(body => {
+                    const { error, message } = body
+
+                    const constructor = errors[error]
+
+                    throw new constructor(message)
+                })
+        })
+}
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/logic/sendMessage.js b/staff/marti-herms/project/G-HUB/app/logic/sendMessage.js
new file mode 100644
index 000000000..347b951d0
--- /dev/null
+++ b/staff/marti-herms/project/G-HUB/app/logic/sendMessage.js
@@ -0,0 +1,31 @@
+import { validate, errors } from 'com'
+
+const { SystemError } = errors
+
+export default (chatId, content) => {
+    validate.string(chatId, 'chatId')
+    validate.string(content, 'content')
+
+    if (content.trim().length === 0) throw new Error('empty content')
+
+    return fetch(`${import.meta.env.VITE_API_URL}/chat/${chatId}/messages`, {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${sessionStorage.token}` },
+        body: JSON.stringify({ content })
+    })
+        .catch(error => { throw new SystemError(error.message) })
+        .then(response => {
+            const { status } = response
+
+            if (status === 200) return
+
+            return response.json()
+                .then(body => {
+                    const { error, message } = body
+
+                    const constructor = errors[error]
+
+                    throw new constructor(message)
+                })
+        })
+}
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/AddGame.jsx b/staff/marti-herms/project/G-HUB/app/src/home/AddGame.jsx
index a4976f2c4..c6833394d 100644
--- a/staff/marti-herms/project/G-HUB/app/src/home/AddGame.jsx
+++ b/staff/marti-herms/project/G-HUB/app/src/home/AddGame.jsx
@@ -55,7 +55,7 @@ export default function AddGame({ onAddGame }) {
                 <Input id='name-input' type='text' placeholder='Name' />
                 {image && <img src={image} className='w-56 h-auto rounded' alt="" />}
                 <Input id='image-input' type='text' placeholder='Image' onChange={handleChange} />
-                <textarea className='w-9/12 rounded p-1 h-20 text-2xl' id='description-input' type='text' placeholder='Description' />
+                <textarea className='w-9/12 rounded-lg p-1 h-20 text-2xl' id='description-input' type='text' placeholder='Description' />
                 <Input id='link-input' type='text' placeholder='Link' />
                 <Button variant='contained' type='submit'>Add Game</Button>
             </Form>
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/Chat.jsx b/staff/marti-herms/project/G-HUB/app/src/home/Chat.jsx
new file mode 100644
index 000000000..140cd15c7
--- /dev/null
+++ b/staff/marti-herms/project/G-HUB/app/src/home/Chat.jsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { IoIosSend as SendIcon } from 'react-icons/io'
+
+import Container from '../library/Container'
+import Form from '../library/Form'
+import Input from '../library/Input'
+import Button from '../library/Button'
+import Avatar from '../library/Avatar'
+import Paragraph from '../library/Paragraph'
+
+import Message from './Message'
+
+import useContext from '../context'
+import extractPayloadFromToken from '../../util/extractPayloadFromToken'
+
+import defaultAvatar from '../../images/defaultAvatar.svg'
+
+import logic from '../../logic'
+
+export default function Chat({ onOpenChat }) {
+    const [users, setUsers] = useState([])
+    const [chat, setChat] = useState(null)
+    const [messages, setMessages] = useState([])
+    const { alert } = useContext()
+
+    const { sub: loggedInUser } = extractPayloadFromToken(sessionStorage.token)
+
+    const { userId } = useParams()
+
+    useEffect(() => {
+        try {
+            if (userId === loggedInUser) {
+                logic.getUserFollowing(userId)
+                    .then(users => setUsers(users))
+                    .catch(error => {
+                        console.error(error)
+
+                        alert(error.message)
+                    })
+            } else {
+                logic.openChat(userId)
+                    .then(chatId => setChat(chatId))
+                    .catch(error => {
+                        console.error(error)
+
+                        alert(error.message)
+                    })
+            }
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }, [userId])
+
+    useEffect(() => {
+        let intervalId
+        if (chat) {
+            loadMessages()
+            intervalId = setInterval(() => {
+                loadMessages()
+            }, 1000)
+        }
+        return () => {
+            if (intervalId) {
+                clearInterval(intervalId)
+                setChat(null)
+            }
+        }
+    }, [chat])
+
+    const handleSendMessage = (event) => {
+        event.preventDefault()
+
+        const form = event.target
+
+        const messageInput = form['message-input']
+
+        const message = messageInput.value
+
+        try {
+            logic.sendMessage(chat, message)
+                .then(() => {
+                    loadMessages()
+                })
+                .catch(error => {
+                    console.error(error)
+
+                    alert(error)
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    const loadMessages = () => {
+        try {
+            logic.getChatMessages(chat)
+                .then(messages => setMessages(messages.reverse()))
+                .catch(error => {
+                    console.error(error)
+
+                    alert(error.message)
+                })
+        } catch (error) {
+            console.error(error)
+
+            alert(error.message)
+        }
+    }
+
+    const handleOpenChat = (userId) => {
+        onOpenChat(userId)
+    }
+
+    return <Container className='w-full h-full flex flex-col pb-[110px]' >
+        {userId !== loggedInUser ? <>
+            <Container className='w-full h-full flex flex-col'>
+                {messages.map(message => <Message key={message.id} message={message} />)}
+            </Container>
+            <Form className='fixed w-full h-[50px] bottom-[60px] dark:bg-[#1e1e1e] flex flex-row justify-center items-center gap-2' onSubmit={handleSendMessage}>
+                <Input id='message-input' />
+                <Button className='bg-blue-800 rounded-full h-[40px] aspect-square' ><SendIcon className='w-8 h-8 ml-0.5 mt-1 text-white' /></Button>
+            </Form>
+        </> :
+            <Container className='flex flex-col items-center w-full h-[50px]'>
+                {users.map(user =>
+                    <article key={user.id} className='flex flex-row w-full items-center justify-between p-3 border-y border-solid border-slate-700 dark:bg-black'>
+                        <Container className='flex flex-row items-center'>
+                            <Avatar className='w-2/12 h-2/12' url={user.avatar || defaultAvatar} />
+                            <Paragraph className='text-xl font-bold'>{user.username}</Paragraph>
+                        </Container>
+                        <Button className='h-[40px]' onClick={() => handleOpenChat(user.id)} ><SendIcon className='w-8 h-8 ml-0.5 mt-1 text-white' /></Button>
+                    </article>
+                )}
+            </Container>}
+    </Container >
+}
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/Footer.jsx b/staff/marti-herms/project/G-HUB/app/src/home/Footer.jsx
index 0ab5381bf..93a2419c4 100644
--- a/staff/marti-herms/project/G-HUB/app/src/home/Footer.jsx
+++ b/staff/marti-herms/project/G-HUB/app/src/home/Footer.jsx
@@ -1,16 +1,25 @@
-import { Route, Routes } from 'react-router-dom'
+import { Route, Routes, useLocation } from 'react-router-dom'
 import { MdScreenSearchDesktop as SearchIcon, MdAddComment as ReviewIcon, MdAddBox as AddGameIcon, MdCancelPresentation as CancelIcon } from 'react-icons/md'
 import { GoHome as HomeIcon } from 'react-icons/go'
-
+import { BsChatRightText as ChatIcon } from 'react-icons/bs'
 
 import Button from '../library/Button'
-import NavigationButton from '../library/NavigationButton'
 
 import extractPayloadFromToken from '../../util/extractPayloadFromToken.js'
 import paths from '../../util/paths.js'
 
-export default function Footer({ makeReviewVisibility, onSearchGame, onAddGame, onHome, onAddReview, onCancel }) {
+export default function Footer({ makeReviewVisibility, onSearchGame, onAddGame, onHome, onAddReview, onCancel, onChat }) {
     const { role } = extractPayloadFromToken(sessionStorage.token)
+    const location = useLocation()
+
+    let userId = location.pathname.slice(location.pathname.indexOf('/', 1) + 1)
+    if (userId.includes('/')) {
+        userId = userId.slice(0, userId.indexOf('/'))
+    }
+
+    const handleChatClick = () => {
+        onChat(userId)
+    }
 
     return <footer className='fixed w-screen h-[7%] bottom-0 left-0 flex flex-row justify-evenly items-center border-t border-solid border-t-black z-10 bg-slate-700'>
         <Routes>
@@ -23,7 +32,11 @@ export default function Footer({ makeReviewVisibility, onSearchGame, onAddGame,
                 {makeReviewVisibility ? <Button onClick={onCancel}><CancelIcon className='w-8 h-8 dark:text-white' /></Button> :
                     <Button onClick={onAddReview}><ReviewIcon className='w-8 h-8 dark:text-white' /></Button>}
             </>} />
-            <Route path={paths.profile + '*'} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
+            <Route path={paths.profile + ':userId'} element={<>
+                <Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>
+                <Button onClick={handleChatClick}><ChatIcon className='w-7 h-7 dark:text-white' /></Button>
+            </>
+            } />
             <Route path={paths.addGame} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
             <Route path={paths.search} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
             <Route path={paths.followers + ':userId'} element={<Button onClick={onHome}><HomeIcon className='w-8 h-8 dark:text-white' /></Button>} />
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/Message.jsx b/staff/marti-herms/project/G-HUB/app/src/home/Message.jsx
new file mode 100644
index 000000000..fd4737460
--- /dev/null
+++ b/staff/marti-herms/project/G-HUB/app/src/home/Message.jsx
@@ -0,0 +1,22 @@
+import Container from '../library/Container'
+import Paragraph from '../library/Paragraph'
+
+import extractPayloadFromToken from '../../util/extractPayloadFromToken'
+
+export default function Message({ message }) {
+    const { sub: userId } = extractPayloadFromToken(sessionStorage.token)
+
+    return (message.author.id === userId) ?
+        <>
+            <Paragraph className='text-xs relative top-[25px] self-end mr-5 opacity-50'>{message.author.username}</Paragraph>
+            <Container className='max-w-[60%] min-w-[20%] h-auto p-1 rounded-full mt-3 mx-2 bg-blue-800 self-end' >
+                <Paragraph>{message.content}</Paragraph>
+            </Container>
+        </> :
+        <>
+            <Paragraph className='text-xs relative top-[25px] self-start ml-5 opacity-50'>{message.author.username}</Paragraph>
+            <Container className='max-w-[60%] min-w-[20%] h-auto p-1 rounded-full mt-3 mx-2 bg-green-700 self-start' >
+                <Paragraph>{message.content}</Paragraph>
+            </Container>
+        </>
+}
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/SearchResults.jsx b/staff/marti-herms/project/G-HUB/app/src/home/SearchResults.jsx
index b0c4e7991..6db03feb7 100644
--- a/staff/marti-herms/project/G-HUB/app/src/home/SearchResults.jsx
+++ b/staff/marti-herms/project/G-HUB/app/src/home/SearchResults.jsx
@@ -8,7 +8,7 @@ import useContext from '../context'
 import GameBanner from './GameBanner'
 import UserBanner from './UserBanner'
 
-export default function SearchResults({ refreshStamp, onGameClick, onUserClick }) {
+export default function SearchResults({ onGameClick, onUserClick }) {
     const { alert } = useContext()
 
     const [searchParams] = useSearchParams()
@@ -25,7 +25,7 @@ export default function SearchResults({ refreshStamp, onGameClick, onUserClick }
             clearTimeout(debounceTimer)
             setResults([])
         }
-    }, [refreshStamp, q])
+    }, [q])
 
     const loadGames = () => {
         try {
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/UserList.jsx b/staff/marti-herms/project/G-HUB/app/src/home/UserList.jsx
index bc345fff8..e018ad557 100644
--- a/staff/marti-herms/project/G-HUB/app/src/home/UserList.jsx
+++ b/staff/marti-herms/project/G-HUB/app/src/home/UserList.jsx
@@ -20,9 +20,9 @@ export default function UserList({ onUserClick }) {
     const [users, setUsers] = useState([])
 
     useEffect(() => {
-        if (listType === 'following')
+        if (listType === 'following' || listType === 'chat')
             loadFollowing()
-        else
+        else if (listType === 'followers')
             loadFollowers()
     }, [])
 
diff --git a/staff/marti-herms/project/G-HUB/app/src/home/index.jsx b/staff/marti-herms/project/G-HUB/app/src/home/index.jsx
index 39fc2997b..ccdc12809 100644
--- a/staff/marti-herms/project/G-HUB/app/src/home/index.jsx
+++ b/staff/marti-herms/project/G-HUB/app/src/home/index.jsx
@@ -11,12 +11,12 @@ import Game from './Game'
 import Profile from './Profile'
 import UserList from './UserList'
 import NotFoundPage from './NotFoundPage'
+import Chat from './Chat.jsx'
 
 import extractPayloadFromToken from '../../util/extractPayloadFromToken'
 import paths from '../../util/paths.js'
 
 export default function Home({ onLogout }) {
-    const [refreshStamp, setRefreshStamp] = useState(null)
     const [makeReviewVisibility, setMakeReviewVisibility] = useState(false)
 
     const location = useLocation()
@@ -29,7 +29,6 @@ export default function Home({ onLogout }) {
     }, [location])
 
     const handleHomeClick = () => {
-        // setRefreshStamp(Date.now())
         navigate(paths.home)
     }
 
@@ -38,7 +37,6 @@ export default function Home({ onLogout }) {
     }
 
     const handleSearchClick = () => {
-        // setRefreshStamp(Date.now())
         navigate(paths.search)
     }
 
@@ -57,8 +55,6 @@ export default function Home({ onLogout }) {
     }
 
     const handleSearchUser = (userId) => {
-        // setRefreshStamp(Date.now())
-
         navigate(paths.profile + userId)
     }
 
@@ -70,18 +66,23 @@ export default function Home({ onLogout }) {
         setMakeReviewVisibility(false)
     }
 
+    const handleChat = (userId) => {
+        navigate(paths.chat + userId)
+    }
+
     return <>
-        <Header onLogoutClick={onLogout} onProfileClick={handleProfileClick} refreshStamp={refreshStamp} ></Header>
+        <Header onLogoutClick={onLogout} onProfileClick={handleProfileClick} ></Header>
 
         <main className='pb-[7%] w-screen h-auto dark:bg-[#1e1e1e]'>
             <Routes>
                 <Route path={paths.home} element={<Library onGameClick={handleGame} />} />
-                <Route path={paths.profile + ':userId'} element={<Profile refreshStamp={refreshStamp} onChange={handleSearchUser} onGameClick={handleGame} />} />
+                <Route path={paths.profile + ':userId'} element={<Profile onChange={handleSearchUser} onGameClick={handleGame} />} />
                 <Route path={paths.following + ':userId'} element={<UserList onUserClick={handleSearchUser} />} />
                 <Route path={paths.followers + ':userId'} element={<UserList onUserClick={handleSearchUser} />} />
                 <Route path={paths.addGame} element={<AddGame onAddGame={handleAddGame} />} />
-                <Route path={paths.search} element={<><Search /> <SearchResults refreshStamp={refreshStamp} onGameClick={handleGame} onUserClick={handleSearchUser} /></>} />
+                <Route path={paths.search} element={<><Search /> <SearchResults onGameClick={handleGame} onUserClick={handleSearchUser} /></>} />
                 <Route path={paths.game + ':gameId'} element={<Game makeReviewVisibility={makeReviewVisibility} onCancel={handleCancelReview} />} />
+                <Route path={paths.chat + ':userId'} element={<Chat onOpenChat={handleChat} />} />
                 <Route path='/*' element={<NotFoundPage />} />
             </Routes>
         </main>
@@ -91,6 +92,7 @@ export default function Home({ onLogout }) {
             onAddGame={handleAddGameClick}
             onHome={handleHomeClick}
             onAddReview={handleAddReview}
-            onCancel={handleCancelReview} ></Footer>
+            onCancel={handleCancelReview}
+            onChat={handleChat} ></Footer>
     </>
 }
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/src/library/Input.jsx b/staff/marti-herms/project/G-HUB/app/src/library/Input.jsx
index c14ff3d02..28c632f4d 100644
--- a/staff/marti-herms/project/G-HUB/app/src/library/Input.jsx
+++ b/staff/marti-herms/project/G-HUB/app/src/library/Input.jsx
@@ -1,3 +1,3 @@
 export default function Input({ className = '', ...nextProps }) {
-    return <input className={className + ' w-9/12 h-10 px-3 py-3 text-2xl text-black rounded-md border border-solid border-black shadow-md shadow-black'} {...nextProps} />
+    return <input className={className + ' w-9/12 h-10 px-3 py-3 text-2xl text-black rounded-2xl border border-solid border-black shadow-md shadow-black'} {...nextProps} />
 }
\ No newline at end of file
diff --git a/staff/marti-herms/project/G-HUB/app/util/paths.js b/staff/marti-herms/project/G-HUB/app/util/paths.js
index 4c6a9e952..9f720829c 100644
--- a/staff/marti-herms/project/G-HUB/app/util/paths.js
+++ b/staff/marti-herms/project/G-HUB/app/util/paths.js
@@ -7,7 +7,8 @@ const paths = {
     game: '/games/',
     profile: '/profile/',
     following: '/following/',
-    followers: '/followers/'
+    followers: '/followers/',
+    chat: '/chat/'
 }
 
 export default paths
\ No newline at end of file