diff --git a/chat/__init__.py b/chat/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/chat/admin.py b/chat/admin.py
new file mode 100644
index 0000000..8c38f3f
--- /dev/null
+++ b/chat/admin.py
@@ -0,0 +1,3 @@
+from django.contrib import admin
+
+# Register your models here.
diff --git a/chat/apps.py b/chat/apps.py
new file mode 100644
index 0000000..2fe899a
--- /dev/null
+++ b/chat/apps.py
@@ -0,0 +1,6 @@
+from django.apps import AppConfig
+
+
+class ChatConfig(AppConfig):
+    default_auto_field = 'django.db.models.BigAutoField'
+    name = 'chat'
diff --git a/chat/models.py b/chat/models.py
new file mode 100644
index 0000000..71a8362
--- /dev/null
+++ b/chat/models.py
@@ -0,0 +1,3 @@
+from django.db import models
+
+# Create your models here.
diff --git a/chat/tests.py b/chat/tests.py
new file mode 100644
index 0000000..7ce503c
--- /dev/null
+++ b/chat/tests.py
@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.
diff --git a/chat/views.py b/chat/views.py
new file mode 100644
index 0000000..91ea44a
--- /dev/null
+++ b/chat/views.py
@@ -0,0 +1,3 @@
+from django.shortcuts import render
+
+# Create your views here.
diff --git a/frontend/consumers.py b/frontend/consumers.py
new file mode 100644
index 0000000..976eb9f
--- /dev/null
+++ b/frontend/consumers.py
@@ -0,0 +1,10 @@
+import json
+from channels.generic.websocket import WebsocketConsumer
+
+class ChatConsumer(WebsocketConsumer):
+	def connect(self):
+		self.accept()
+		self.send(text_data=json.dumps({
+			'type':'connection_established',
+			'message':'You are now connected!'
+		}))
diff --git a/frontend/routing.py b/frontend/routing.py
new file mode 100644
index 0000000..25c7331
--- /dev/null
+++ b/frontend/routing.py
@@ -0,0 +1,6 @@
+from django.urls import re_path
+from . import consumers
+
+websocket_urlpatterns = [
+	re_path(r'ws/socket_server/', consumers.ChatConsumer.as_asgi())
+]
diff --git a/frontend/static/css/index.css b/frontend/static/css/index.css
index 9416823..db15e14 100644
--- a/frontend/static/css/index.css
+++ b/frontend/static/css/index.css
@@ -1,37 +1,9 @@
 body {
-    --nav-width: 200px;
-    margin: 0 0 0 var(--nav-width);
+    margin: 10;
     font-family: 'Quicksand', sans-serif;
     font-size: 18px;
 }
 
-.nav {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: var(--nav-width);
-    height: 100vh;
-    background: #222222;
-}
-
-.nav__link {
-    display: block;
-    padding: 12px 18px;
-    text-decoration: none;
-    color: #eeeeee;
-    font-weight: 500;
-}
-
-.nav__link:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-#app {
-    margin: 2em;
-    line-height: 1.5;
-    font-weight: 500;
-}
-
 a {
     color: #009579;
-}
\ No newline at end of file
+}
diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js
index f63c27c..45051dc 100644
--- a/frontend/static/js/index.js
+++ b/frontend/static/js/index.js
@@ -2,6 +2,7 @@ import Dashboard from "./views/Dashboard.js";
 import Posts from "./views/Posts.js";
 import PostView from "./views/PostView.js";
 import Settings from "./views/Settings.js";
+import Chat from "./views/Chat.js";
 
 const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$");
 
@@ -24,7 +25,8 @@ const router = async () => {
         { path: "/", view: Dashboard },
         { path: "/posts", view: Posts },
         { path: "/posts/:id", view: PostView },
-        { path: "/settings", view: Settings }
+        { path: "/settings", view: Settings },
+        { path: "/chat", view: Chat },
     ];
 
     // Test each route for potential match
@@ -60,4 +62,4 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     router();
-});
\ No newline at end of file
+});
diff --git a/frontend/static/js/views/Chat.js b/frontend/static/js/views/Chat.js
new file mode 100644
index 0000000..46a9f40
--- /dev/null
+++ b/frontend/static/js/views/Chat.js
@@ -0,0 +1,21 @@
+import AbstractView from "./AbstractView.js";
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params);
+        this.setTitle("Chat");
+		let url = `ws://${window.location.host}/ws/socket-server/`
+
+		const chatSocket = new WebSocket(url)
+		chatSocket.onmessage = function(e) {
+			let data = JSON.parse(e.data)
+			console.log('Data:', data)
+		}
+    }
+
+    async getHtml() {
+        return `
+            <h1>Chat</h1>
+        `;
+    }
+}
diff --git a/frontend/templates/chat.html b/frontend/templates/chat.html
new file mode 100644
index 0000000..fd2a737
--- /dev/null
+++ b/frontend/templates/chat.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset='utf-8'>
+		<title>Chat</title>
+	</head>
+	<body>
+		<h1>Chat</h1>
+
+		<script type="text/javascript">
+			let url = `ws://${window.location.host}/ws/socket-server/`
+
+			const chatSocket = new WebSocket(url)
+			chatSocket.onmessage = function(e) {
+				let data = JSON.parse(e.data)
+				console.log('Data:', data)
+			}
+		</script>
+	</body>
+</html>
diff --git a/frontend/templates/index.html b/frontend/templates/index.html
index 6fcaec3..9a139b6 100644
--- a/frontend/templates/index.html
+++ b/frontend/templates/index.html
@@ -12,6 +12,7 @@
         <a href="/" class="nav__link" data-link>Dashboard</a>
         <a href="/posts" class="nav__link" data-link>Posts</a>
         <a href="/settings" class="nav__link" data-link>Settings</a>
+        <a href="/chat" class="nav__link" data-link>Chat</a>
     </nav>
     <div id="app"></div>
 	<script type="module" src="{% static 'js/index.js' %}"></script>
diff --git a/frontend/urls.py b/frontend/urls.py
index da63192..8776c20 100644
--- a/frontend/urls.py
+++ b/frontend/urls.py
@@ -1,7 +1,9 @@
 from django.urls import path, re_path
 
 from .views import index_view
+from . import views
 
 urlpatterns = [
-    re_path(r'^', index_view ,name="index"),
+	path('', views.chat)
+    #re_path(r'^', index_view ,name="index"),
 ]
diff --git a/frontend/views.py b/frontend/views.py
index 2d888d5..bf3793c 100644
--- a/frontend/views.py
+++ b/frontend/views.py
@@ -4,3 +4,6 @@ from django.shortcuts import render
 
 def index_view(req):
     return render(req, 'index.html');
+
+def chat(req):
+    return render(req, 'chat.html');
diff --git a/requirements.txt b/requirements.txt
index 2dc4dc9..46ca335 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -6,3 +6,5 @@ djangorestframework==3.14.0
 install==1.3.5
 pytz==2023.3.post1
 sqlparse==0.4.4
+channels==3.0.5
+daphne
diff --git a/trancendence/asgi.py b/trancendence/asgi.py
index eaaad8a..b7cd5ea 100644
--- a/trancendence/asgi.py
+++ b/trancendence/asgi.py
@@ -10,7 +10,17 @@ https://docs.djangoproject.com/en/4.2/howto/deployment/asgi/
 import os
 
 from django.core.asgi import get_asgi_application
+from channels.routing import ProtocolTypeRouter, URLRouter
+from channels.auth import AuthMiddlewareStack
+import frontend.routing
 
 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'trancendence.settings')
 
-application = get_asgi_application()
+application = ProtocolTypeRouter({
+	'http':get_asgi_application(),
+	'websocket':AuthMiddlewareStack(
+		URLRouter(
+			frontend.routing.websocket_urlpatterns
+		)
+	)
+})
diff --git a/trancendence/settings.py b/trancendence/settings.py
index a8d3760..11ceb2f 100644
--- a/trancendence/settings.py
+++ b/trancendence/settings.py
@@ -38,9 +38,12 @@ CORS_ORIGIN_WHITELIST = (
 # Application definition
 
 INSTALLED_APPS = [
+	'channels',
+	'daphne',
+
     'accounts.apps.AccountsConfig',
     'profiles.apps.ProfilesConfig',
-    'frontend.apps.FrontendConfig',
+    #'frontend.apps.FrontendConfig',
     
     'corsheaders',
     'rest_framework',
@@ -50,8 +53,12 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
+
+	'frontend',
 ]
 
+ASGI_APPLICATION = 'trancendence.asgi.application'
+
 MIDDLEWARE = [
     'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',