diff --git a/sports-matcher/public/chief.jpg b/sports-matcher/public/chief.jpg
new file mode 100644
index 0000000..3335964
Binary files /dev/null and b/sports-matcher/public/chief.jpg differ
diff --git a/sports-matcher/public/freeman.jpg b/sports-matcher/public/freeman.jpg
new file mode 100644
index 0000000..45d5175
Binary files /dev/null and b/sports-matcher/public/freeman.jpg differ
diff --git a/sports-matcher/public/shogun.jpg b/sports-matcher/public/shogun.jpg
new file mode 100644
index 0000000..276e987
Binary files /dev/null and b/sports-matcher/public/shogun.jpg differ
diff --git a/sports-matcher/src/Chat.js b/sports-matcher/src/Chat.js
new file mode 100644
index 0000000..da3ac21
--- /dev/null
+++ b/sports-matcher/src/Chat.js
@@ -0,0 +1,18 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css'
+
+class Chat extends React.Component {
+    render() {
+        return (
+            <div class="chatbubble-container">                    
+                        <div class= {this.props.side === "left" ? "chatbubble left": "chatbubble right"}>
+                            {this.props.message}
+                        </div>
+            </div>
+        )
+    }
+}
+
+export default Chat;
\ No newline at end of file
diff --git a/sports-matcher/src/ChatWindow.js b/sports-matcher/src/ChatWindow.js
new file mode 100644
index 0000000..036ad55
--- /dev/null
+++ b/sports-matcher/src/ChatWindow.js
@@ -0,0 +1,113 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css'
+import Chat from './Chat'
+import Contact from './Contact'
+import { useState } from "react";
+
+class ChatWindow extends React.Component {
+    render() {
+        return (
+            <div class="chatcomponent">
+                <UserList />
+                <MessageList />
+                <ChatInput />
+            </div>
+        )
+    }
+}
+
+class UserList extends React.Component {
+    
+    render() {
+        return (
+            <div class="contactlist">
+                    <Contact pfpsrc="./chief.jpg" name="Master Chief"/>
+                    <Contact pfpsrc="./freeman.jpg" name="Gordon Freeman" />
+                    <Contact pfpsrc="./shogun.jpg" name="Raiden Shogun" selected="true" />
+            </div>
+        )
+    }
+}
+
+class MessageList extends React.Component {
+    render() {
+        return (
+            <div class="messagelist">
+                <Chat message="Got time for tennis this week, Raiden?" side="right"/>
+                <Chat message="Foolish question. If I do not even have free time, How am I to pursue eternity and fulfill my promise to the people of Inazuma?" side="left" />
+                <Chat message="Aiight, see you at 4" side="right" />
+                <Chat message="As you wish." side="left" />
+                </div>
+        )
+    }
+}
+// class ChatWindow extends React.Component {
+//     render() {
+//         return (
+//             <div>
+//                 <ChatUserList />
+//                 {/* <MessageList /> */}
+//             </div>
+//         )
+//     }
+// }
+const ChatInput = () => {
+    const [message, setMessage] = useState( '' );
+    
+    // const onKeyPress = (e) => {
+    //     // if(e.key === 'Enter'){
+    //     //     e.preventDefault(); // Ensure it is only this code that runs
+    //     //     setMessage("")
+    //     // }
+    // }
+
+    const onKeyDown = (e) => {
+        const keyCode = e.which || e.keyCode;
+
+        // 13 represents the Enter key
+        if (keyCode === 13 && !e.shiftKey) {
+            e.preventDefault();
+            setMessage("")
+        }
+    }
+
+    return (
+        // onKeyPress={(e) => onKeyPress(e)}
+      <div>
+        <textarea
+           class="chatinput"
+           value={message}
+           placeholder="Press ENTER to send, SHIFT + ENTER for new line"
+           onChange={e => setMessage(e.target.value)}
+           
+           onKeyDown={onKeyDown}
+         />
+      </div>
+    );
+  };
+class ChatInput2 extends React.Component {
+    
+    constructor(props) {
+        super(props)
+        this.setState({inputVal : ""})
+    }
+
+    handleUserInput(e) {
+        this.setState(this.setState({inputVal : e.target.value}));
+    };
+
+    render() {
+        return (<textarea class="chatinput" placeholder="Press ENTER to send, Ctrl + ENTER for new line"
+                onKeyPress={(e)=>this.onKeyPress(e)} value="" onChange={(e) => this.handleUserInput(e)} />)
+        
+    }
+    onKeyPress(e) {
+        if(e.key === 'Enter'){
+            e.preventDefault(); // Ensure it is only this code that runs
+            this.setState({inputVal : ""});
+        }
+    }
+}
+export default ChatWindow;
\ No newline at end of file
diff --git a/sports-matcher/src/Contact.js b/sports-matcher/src/Contact.js
new file mode 100644
index 0000000..ca1ca99
--- /dev/null
+++ b/sports-matcher/src/Contact.js
@@ -0,0 +1,38 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+import React from 'react';
+import './chats.css';
+
+class Contact extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            selected : this.props.selected
+        }
+    }
+    onClick() {
+        // This toggling of the contact selection is for demo purposes only
+        // Once backend is implemented, only one contact can be selected
+        if (this.state.selected === "false") {
+            this.setState({selected : "true"})
+        } else {
+            this.setState({selected : "false"})
+        }
+        
+    }
+    render() {
+        return (
+            <div class={this.state.selected === "true" ? "contact dark" : "contact"}>
+                        <div class="profilepiccontainer">
+                            <img src={this.props.pfpsrc} class="profilepic" onClick={() => this.onClick()} 
+                                alt="profile" />
+                        </div>
+                        <div class="profilenamecontainer">
+                            <div class="profilename" onClick={() => this.onClick()}>{this.props.name}</div>
+                        </div>
+            </div>
+        )
+    }
+}
+
+export default Contact;
\ No newline at end of file
diff --git a/sports-matcher/src/chats.css b/sports-matcher/src/chats.css
new file mode 100644
index 0000000..ede9579
--- /dev/null
+++ b/sports-matcher/src/chats.css
@@ -0,0 +1,108 @@
+/* Please direct questions to Hansi Xu (Wallace LaWall on Discord) */
+
+.chatcomponent > * {
+    display: inline-block;
+}
+.contact {
+    border-style: solid;
+    border-width: 1px;
+    border-bottom: 1px;
+    border-color:rgb(75, 75, 75);
+
+    background-color: rgb(80, 80, 80);
+    height: 70px;
+
+    user-select: none;
+}
+.contact.dark {
+    background-color: black;
+}
+.contactlist {
+    height: 500px;
+    width: 200px;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    border-radius: 2%;
+    background: rgb(48, 45, 45);
+    overflow-y: scroll;
+    overflow-x: hidden;
+
+    text-align: center;
+}
+.messagelist {
+    height: 400px;
+    width: 800px;
+    top: 0px;
+    left: 200px;
+
+    position: absolute;
+    background-color: rgb(80, 80, 80);
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+.messagelist > * {
+    display: block;
+}
+.profilepiccontainer {
+    height: 60px;
+    width: 60px;
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    float: left;
+}
+.profilepic {
+    border-radius: 50%;
+    height: 50px;
+    width: 50px;
+}
+.profilenamecontainer {
+    text-align: center;
+    padding: 7%;
+}
+.profilename {
+    color: white;
+}
+.chatbubble {
+	margin-top: 20px;
+    margin-left: 20px;
+    display: inline-block;
+    position: relative;
+	width: auto;
+	height: auto;
+    padding: 10px;
+	
+    border-radius: 10px;
+}
+.left {
+    background-color: rgba(0, 57, 163, 0.637);
+    margin-right: 35px;
+    color: white;
+    float: auto;
+}
+.right {
+    background-color: khaki;
+    color: black;
+    margin-right: 35px;
+    float: right;
+}
+.chatbubble-container {
+    width: 800px;
+    height: auto;
+    float: left;
+}
+.chatinput {
+    background-color: rgb(75, 75, 75);
+    top: 400px;
+    left: 200px;
+    position: absolute;
+
+    height: 92px;
+    width: 793px;
+
+    color: antiquewhite;
+
+    border-width: 2px;
+    border-color: rgb(48, 45, 45);
+}
\ No newline at end of file