diff --git a/frontend/Rectangle.png b/frontend/Rectangle.png
new file mode 100644
index 0000000..24e2598
Binary files /dev/null and b/frontend/Rectangle.png differ
diff --git a/frontend/Rectangle1.png b/frontend/Rectangle1.png
new file mode 100644
index 0000000..3199cb8
Binary files /dev/null and b/frontend/Rectangle1.png differ
diff --git a/frontend/Rectangle2.png b/frontend/Rectangle2.png
new file mode 100644
index 0000000..4164e54
Binary files /dev/null and b/frontend/Rectangle2.png differ
diff --git a/frontend/icon_back.png b/frontend/icon_back.png
new file mode 100644
index 0000000..562858b
Binary files /dev/null and b/frontend/icon_back.png differ
diff --git a/frontend/msg.html b/frontend/msg.html
new file mode 100644
index 0000000..771780c
--- /dev/null
+++ b/frontend/msg.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Connected Devices</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      margin: 0;
+      padding: 0;
+      background: #fff;
+    }
+
+    .container {
+      padding: 20px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 20px;
+      font-weight: bold;
+    }
+
+    .devices-title {
+      margin-top: 30px;
+      font-size: 22px;
+      font-weight: 600;
+    }
+
+    .subtitle {
+      color: gray;
+      font-size: 14px;
+      margin-bottom: 20px;
+    }
+
+    .device {
+      display: flex;
+      align-items: center;
+      background-color: #eee;
+      padding: 12px 16px;
+      border-radius: 12px;
+      margin-bottom: 12px;
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    .device img {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 12px;
+    }
+
+    .alice { background-color: #f4b1b1; }
+    .bob { background-color: #fce49c; }
+    .andrew { background-color: #d5c7f7; }
+
+    .bottom-nav {
+      position: fixed;
+      bottom: 0;
+      width: 100%;
+      background: #fff;
+      display: flex;
+      justify-content: space-around;
+      border-top: 1px solid #ddd;
+      padding: 10px 0;
+    }
+
+    .bottom-nav img {
+      width: 30px;
+      height: 30px;
+    }
+
+    .back-arrow {
+      font-size: 24px;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <span class="back-arrow">&#8592;</span>
+      Connected
+    </div>
+
+    <div class="devices-title">Nearby Devices</div>
+    <div class="subtitle">Connected to 3 Devices</div>
+
+    <div class="device alice">
+      <img src="Rectangle.png" alt="Alice" />
+      Alice
+    </div>
+
+    <div class="device bob">
+      <img src="Rectangle1.png" alt="Bob" />
+      Bob
+    </div>
+
+    <div class="device andrew">
+      <img src="Rectangle2.png" alt="Andrew" />
+      Andrew
+    </div>
+  </div>
+
+  <div class="bottom-nav">
+    <img src="https://img.icons8.com/fluency/48/network.png" alt="Network" />
+    <img src="https://img.icons8.com/fluency/48/speech-bubble.png" alt="Chat" />
+    <img src="https://img.icons8.com/fluency/48/marker.png" alt="Location" />
+  </div>
+</body>
+</html>
diff --git a/frontend/page3.html b/frontend/page3.html
new file mode 100644
index 0000000..eeb289b
--- /dev/null
+++ b/frontend/page3.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Messages</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+      background-color: #fff;
+    }
+
+    .container {
+      padding: 20px;
+    }
+
+    .header {
+    /* border-bottom: 1px solid #000000; */
+      display: flex;
+      align-items: center;
+      margin-bottom: 50px;
+      gap: 25px;
+      font-size: 32px;
+      font-weight: bold;
+      
+    }
+
+    .chat {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .message {
+      display: flex;
+      align-items: center;
+      padding: 10px 14px;
+      border-radius: 20px;
+      max-width: 75%;
+      font-size: 14px;
+      font-weight: 500;
+      position: relative;
+    }
+
+    .left {
+      background-color: #d5c7f7;
+      align-self: flex-start;
+      border-top-left-radius: 0;
+    }
+
+    .right {
+      background-color: #fdd79d;
+      align-self: flex-end;
+      flex-direction: row-reverse;
+      border-top-right-radius: 0;
+    }
+
+    .message img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      margin: 0 10px;
+    }
+
+    .name {
+      font-weight: bold;
+      margin-bottom: 2px;
+    }
+
+    .text {
+      margin: 0;
+    }
+
+    .input-area {
+      position: fixed;
+      bottom: 0;
+      width: 98%;
+      padding: 10px;
+      display: flex;
+      align-items: center;
+      background: #fff;
+      border-top: 1px solid #ccc;
+    }
+
+    .input-area input {
+      flex: 1;
+      padding: 10px 15px;
+      border: 1px solid #ccc;
+      border-radius: 20px;
+      font-size: 14px;
+      margin-right: 10px;
+    }
+
+    .mic-btn {
+      background-color: #1e90ff;
+      border: none;
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .mic-btn img {
+      width: 22px;
+      height: 22px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <span> <img src="icon_back.png" alt="Jacob"></span> Messages
+    </div>
+
+    <div class="chat">
+      <div class="message right">
+        <div>
+          <div class="name">Jacob</div>
+          <div class="text">Hello</div>
+        </div>
+        <img src="Rectangle.png" alt="Jacob">
+      </div>
+
+      <div class="message left">
+        <img src="Rectangle1.png" alt="Alice">
+        <div>
+          <div class="name">Alice</div>
+          <div class="text">Hello!</div>
+        </div>
+      </div>
+
+      <div class="message left">
+        <img src="Rectangle1.png" alt="Alice">
+        <div>
+          <div class="name">Alice</div>
+          <div class="text">How you doing?</div>
+        </div>
+      </div>
+
+      <div class="message right">
+        <div>
+          <div class="name">Jacob</div>
+          <div class="text">Just Fine!</div>
+        </div>
+        <img src="Rectangle.png" alt="Jacob">
+      </div>
+
+      <div class="message right">
+        <div>
+          <div class="name">Jacob</div>
+          <div class="text">Need a little help!</div>
+        </div>
+        <img src="Rectangle.png" alt="Jacob">
+      </div>
+    </div>
+  </div>
+
+  <div class="input-area">
+    <input type="text" placeholder="Message">
+    <button class="mic-btn">
+      <img src="https://img.icons8.com/ios-filled/50/ffffff/microphone.png" alt="Mic">
+    </button>
+  </div>
+</body>
+</html>
diff --git a/index.html b/index.html
index 12c3cb2..effc7ed 100644
--- a/index.html
+++ b/index.html
@@ -1,55 +1,4 @@
-<!--<!-- index.html -->-->
-<!--<!DOCTYPE html>-->
-<!--<html lang="en">-->
-<!---->
-<!--<head>-->
-<!--    <meta charset="UTF-8">-->
-<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
-<!--    <title>Mesh Chat</title>-->
-<!--    <style>-->
-<!--        body { font-family: Arial; padding: 20px; background: #f2f2f2; }-->
-<!--        #messages { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; background: #fff; }-->
-<!--        #input { margin-top: 10px; }-->
-<!--    </style>-->
-<!--</head>-->
-<!---->
-<!--<body>-->
-<!--    <h2>Welcome to Mesh Chat</h2>-->
-<!--    <div id="messages"></div>-->
-<!--    <div id="input">-->
-<!--        <input type="text" id="sender" placeholder="Your name" />-->
-<!--        <input type="text" id="message" placeholder="Type your message" />-->
-<!--        <button onclick="sendMessage()">Send</button>-->
-<!--    </div>-->
-<!---->
-<!--    <script>-->
-<!--        // CHANGE THIS TO Phone A's IP!-->
-<!--        const serverIP = "192.168.75.5"; -->
-<!--        const ws = new WebSocket(`ws://${serverIP}:8080/ws`);-->
-<!---->
-<!--        ws.onopen = () => console.log("✅ Connected to server");-->
-<!---->
-<!--        ws.onmessage = (event) => {-->
-<!--            const msg = JSON.parse(event.data);-->
-<!--            const messages = document.getElementById("messages");-->
-<!--            const item = document.createElement("div");-->
-<!--            item.textContent = `${msg.sender}: ${msg.content}`;-->
-<!--            messages.appendChild(item);-->
-<!--            messages.scrollTop = messages.scrollHeight;-->
-<!--        };-->
-<!---->
-<!--        function sendMessage() {-->
-<!--            const sender = document.getElementById("sender").value;-->
-<!--            const content = document.getElementById("message").value;-->
-<!--            if (sender && content) {-->
-<!--                ws.send(JSON.stringify({ sender, content }));-->
-<!--                document.getElementById("message").value = "";-->
-<!--            }-->
-<!--        }-->
-<!--    </script>-->
-<!--</body>-->
-<!---->
-<!--</html>-->
+
 
 <!DOCTYPE html>
 <html lang="en">
