diff --git a/app/auth.js b/app/auth.js
index de715b1..b42d2a2 100644
--- a/app/auth.js
+++ b/app/auth.js
@@ -467,7 +467,7 @@ export const auth = betterAuth({
         organization(),
         multiSession(),
         expo(),
-	bearer(),
+	      bearer(),
     ],
     trustedOrigins: [process.env.BETTER_AUTH_URL],
 })
\ No newline at end of file
diff --git a/app/auth.ts b/app/auth.ts
index 434ffcc..b20d0eb 100644
--- a/app/auth.ts
+++ b/app/auth.ts
@@ -467,7 +467,7 @@ export const auth = betterAuth({
         organization(),
         multiSession(),
         expo(),
-	bearer(),
+	      bearer(),
     ],
     trustedOrigins: [process.env.BETTER_AUTH_URL],
 })
\ No newline at end of file
diff --git a/app/client/global/styles.css b/app/client/global/styles.css
index 9a4c9bc..37b4db2 100644
--- a/app/client/global/styles.css
+++ b/app/client/global/styles.css
@@ -29,7 +29,7 @@ body {
     top: 0px;
     left: 0px;
     width: 100vw;
-    height: 100vh;
+    height: 100dvh;
     background-color: #f4f4f4;
     font-family: 'Figtree', sans-serif;
     user-select: none;
diff --git a/app/client/pages/channelpage.html b/app/client/pages/channelpage.html
index 88d70a5..6025b06 100644
--- a/app/client/pages/channelpage.html
+++ b/app/client/pages/channelpage.html
@@ -32,8 +32,8 @@
                 if (element.parentmessageid == undefined) {
                     if (lastsenderid == element.userid) {
                         $("#messagearea").append(`
-                            <div class="messagebox" style="margin-top: 10px; margin-left: 50px;" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')">
-                                <span class="">
+                            <div class="messagebox" style="margin-top: 10px; margin-left: 50px;" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')" data-messageid="` + element.id + `">
+                                <span class="mstack">
                                     <span class="message">
                                         ` + sanitizeHTML(element.content) + `
                                     </span>
@@ -52,9 +52,9 @@
                             }
                         })
                         $("#messagearea").append(`
-                            <div class="messagebox expandedmessagebox" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')">
+                            <div class="messagebox expandedmessagebox" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')" data-messageid="` + element.id + `">
                                 <img src="` + currentpfp + `" class="messageprofilepicture" />
-                                <span class="message">
+                                <span class="message mstack">
                                     <b class="message-sendername">` + sanitizeHTML(element.sendername) + ` </b>
                                     <span style="font-size: small;">
                                         ` + monthNames[d.getMonth()] + " " + d.getDate().toString() + " " + (d.getHours() < 10 ? '0' : '') + d.getHours().toString() + ":" + (d.getMinutes() < 10 ? '0' : '') + d.getMinutes().toString() + `
@@ -68,6 +68,14 @@
                         `)
                     }
                     lastsenderid = element.userid
+                } else {
+                    var refmessage = $("#messagearea").find("[data-messageid='" + element.parentmessageid + "']")
+                    if(refmessage.attr("isthread") != "true") {
+                        refmessage.attr("isthread", "true")
+                        refmessage.find(".mstack").append(`
+                            <div class="threadviewbutton" onclick="currentmessageid = '` + element.parentmessageid + `; NavigatePage('channelthreadpage')">View Thread</div>
+                        `)
+                    }
                 }
                 
                 // Broken Code
@@ -124,8 +132,8 @@
                             }
                             if (lastsenderid == element.sender) {
                                 $("#messagearea").append(`
-                                    <div class="messagebox" style="margin-top: 10px; margin-left: 50px;" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')">
-                                        <span class="">
+                                    <div class="messagebox" style="margin-top: 10px; margin-left: 50px;" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')" data-messageid="` + element.id + `" ` + (extramessageui ? 'isthread="true"' : "") + `>
+                                        <span class="mstack">
                                             <span class="messagetext">
                                                 ` + sanitizeHTML(element.content) + `
                                             </span>
@@ -145,9 +153,9 @@
                                     }
                                 })
                                 $("#messagearea").append(`
-                                    <div class="messagebox expandedmessagebox" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')">
+                                    <div class="messagebox expandedmessagebox" onclick="currentmessageid = '` + element.id + `'; NavigatePage('channelthreadpage')" data-messageid="` + element.id + `" ` + (extramessageui ? 'isthread="true"' : "") + `>
                                         <img src="` + currentpfp + `" class="messageprofilepicture" />
-                                        <span class="message">
+                                        <span class="message mstack">
                                             <b class="message-sendername">` + sanitizeHTML(element.sendername) + ` </b>
                                             <span style="font-size: small;">
                                                 ` + monthNames[d.getMonth()] + " " + d.getDate().toString() + " " + (d.getHours() < 10 ? '0' : '') + d.getHours().toString() + ":" + (d.getMinutes() < 10 ? '0' : '') + d.getMinutes().toString() + `
@@ -167,29 +175,14 @@
                 }
 
                 var sendmessage = function(msg) {
-                    fetch("/api/channel/" + currentchannelid + "/messages/send?message=" + msg, {
-                        "method": "POST",
-                    })
-
-                    .then(function (response) {
-                        console.log(response.status);
-                        return response.text();
-                    })
-
-                    .then(function (data) {
-                        console.log(data);
-                    })
-
-                    .catch(function (error) {
-                        console.log(error.message);
-                    });
-
                     socket.emit("clatter.channel.message.send", JSON.stringify({
                         "room": currentchannelid,
                         "userid": authsession.data.user.id,
                         "sendername": authsession.data.user.name,
                         "content": msg,
-                        "type": "text"
+                        "type": "text",
+                        "method": "modern",
+                        "token": authsession.data.session.token,
                     }))
                 }
 
diff --git a/app/client/pages/channelthreadpage.html b/app/client/pages/channelthreadpage.html
index 81e628c..5913983 100644
--- a/app/client/pages/channelthreadpage.html
+++ b/app/client/pages/channelthreadpage.html
@@ -223,30 +223,15 @@
                 }
 
                 var sendmessage = function(msg) {
-                    fetch("/api/channel/" + currentchannelid + "/thread/" + currentmessageid + "/send?message=" + msg, {
-                        "method": "POST",
-                    })
-
-                    .then(function (response) {
-                        console.log(response.status);
-                        return response.text();
-                    })
-
-                    .then(function (data) {
-                        console.log(data);
-                    })
-
-                    .catch(function (error) {
-                        console.log(error.message);
-                    });
-
                     socket.emit("clatter.channel.message.send", JSON.stringify({
                         "room": currentchannelid,
                         "userid": authsession.data.user.id,
                         "sendername": authsession.data.user.name,
                         "content": msg,
                         "type": "text",
-                        "parentmessageid": currentmessageid
+                        "parentmessageid": currentmessageid,
+                        "method": "modern",
+                        "token": authsession.data.session.token,
                     }))
                 }
 
diff --git a/app/server.js b/app/server.js
index 7f9a358..2c68947 100644
--- a/app/server.js
+++ b/app/server.js
@@ -10,15 +10,19 @@ import { createServer } from "http"
 const app = express();
 const server = createServer(app)
 const prisma = new PrismaClient()
-const io = new Server(server)
+const io = new Server(server, {
+    cors: {
+        origin: "*",
+    },
+})
 
-// app.use(
-//     cors({
-//       origin: "*", // Replace with your frontend's origin
-//       methods: ["GET", "POST", "PUT", "DELETE"], // Specify allowed HTTP methods
-//       credentials: true, // Allow credentials (cookies, authorization headers, etc.)
-//     })
-// );
+app.use(
+    cors({
+      origin: "*", // Replace with your frontend's origin
+      methods: ["GET", "POST", "PUT", "DELETE"], // Specify allowed HTTP methods
+      credentials: true, // Allow credentials (cookies, authorization headers, etc.)
+    })
+);
 
 app.all("/api/auth/*", toNodeHandler(auth));
 
@@ -250,6 +254,29 @@ io.on("connection", (socket) => {
 
     argjson.DateCreated = new Date().toISOString()
     
+    if(argjson.method === "modern") {
+      const session = await auth.api.getSession({
+        headers: new Headers({
+          authorization: "Bearer " + argjson.token
+        })
+      });
+      if(argjson.parentmessageid) {
+        var parentid = argjson.parentmessageid
+      } else {
+        var parentid = null
+      }
+      var message = await prisma.message.create({
+        data: {
+          content: argjson.content,
+          sender: session.session.userId,
+          parentid: argjson.room,
+          parentmessageid: parentid,
+          sendername: session.user.name
+        }
+      })
+      argjson.id = message.id
+    }
+    
     socket.emit("clatter.channel.message.send.response", "Sent Message")
     socket.to(argjson.room).emit("clatter.channel.message.recieve", JSON.stringify(argjson))
   })