diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/assets/background.png b/assets/background.png
deleted file mode 100644
index 9dda602..0000000
Binary files a/assets/background.png and /dev/null differ
diff --git a/assets/profile_pics/1.jpg b/assets/profile_pics/1.jpg
deleted file mode 100644
index 0a10fb2..0000000
Binary files a/assets/profile_pics/1.jpg and /dev/null differ
diff --git a/assets/profile_pics/default.jpg b/assets/profile_pics/default.jpg
deleted file mode 100644
index fec1bb4..0000000
Binary files a/assets/profile_pics/default.jpg and /dev/null differ
diff --git a/backend/cdn/profiles/default.jpg b/backend/cdn/profiles/default.jpg
index fec1bb4..62a6d8c 100644
Binary files a/backend/cdn/profiles/default.jpg and b/backend/cdn/profiles/default.jpg differ
diff --git a/backend/cdn/profiles/default.svg b/backend/cdn/profiles/default.svg
new file mode 100644
index 0000000..338881d
--- /dev/null
+++ b/backend/cdn/profiles/default.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-480q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160-160v-112q0-34 17.5-62.5T224-378q62-31 126-46.5T480-440q66 0 130 15.5T736-378q29 15 46.5 43.5T800-272v112H160Zm80-80h480v-32q0-11-5.5-20T700-306q-54-27-109-40.5T480-360q-56 0-111 13.5T260-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560-640q0-33-23.5-56.5T480-720q-33 0-56.5 23.5T400-640q0 33 23.5 56.5T480-560Zm0-80Zm0 400Z"/></svg>
\ No newline at end of file
diff --git a/backend/src/cdn.rs b/backend/src/cdn.rs
index a7d7819..9c9b59b 100644
--- a/backend/src/cdn.rs
+++ b/backend/src/cdn.rs
@@ -13,7 +13,7 @@ pub async fn profile_pic(user_id: usize) -> Option<NamedFile> {
     {
         Some(image)
     } else {
-        Some(NamedFile::open("./cdn/profiles/default.jpg").await.ok()?)
+        Some(NamedFile::open("./cdn/profiles/default.svg").await.ok()?)
     }
 }
 
diff --git a/backend/static/css/index.css b/backend/static/css/index.css
index 4a7ed54..5dc0fdd 100644
--- a/backend/static/css/index.css
+++ b/backend/static/css/index.css
@@ -8,16 +8,34 @@ body {
     font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
     background: #0a0a0a;
     color: #e0e0e0;
+    min-height: 100vh;
+    min-width: 100vw;
     height: 100vh;
     overflow: hidden;
 }
 
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    background: #0a0a0a;
+    color: #e0e0e0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .chat-container {
     display: flex;
     flex-direction: column;
     height: 100vh;
-    max-width: 50vh;
-    margin: 0 auto;
+    max-width: 100vw;
+    margin: 0 0;
     background: #121212;
     position: relative;
     overflow: hidden;
@@ -341,13 +359,14 @@ body {
     flex-direction: column;
     /*justify-content: flex-end;*/
     flex: 1;
-    padding: 15px 0 15px 0;
+    padding: 15px;
+    gap: 15px;
     overflow-y: scroll;
     background: #121212;
 }
 
 .message {
-    margin: 10px 20px;
+    margin: 0;
     padding: 10px 10px;
     border-radius: 10px;
     background: rgba(30, 30, 30, 0.4);
@@ -499,23 +518,6 @@ body {
     background: #444;
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    background: #0a0a0a;
-    color: #e0e0e0;
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-}
-
 .signup-container {
     width: 100%;
     max-width: 480px;
diff --git a/backend/templates/chat.html.tera b/backend/templates/chat.html.tera
index dca6654..4cd8dcd 100644
--- a/backend/templates/chat.html.tera
+++ b/backend/templates/chat.html.tera
@@ -19,7 +19,7 @@
 
             <!-- Live Location Notification Bubble -->
             <div class="notification-container">
-                <div class="live-location-bubble" id="locationBubble">
+                <!--<div class="live-location-bubble" id="locationBubble">
                     <div class="map-container">
                         <img src="cdn/map.png" alt="Map" />
                     </div>
@@ -32,10 +32,10 @@
                         </button>
                         <div class="location-text">Live Location</div>
                         <div class="location-users" id="locationUsers">
-                            <!-- Users will be added dynamically -->
+
                         </div>
                     </div>
-                </div>
+                </div>-->
             </div>
 
             <!-- Messages Container -->
@@ -97,39 +97,39 @@
 
 
             // Toggle location tracking
-            const locationBubble = document.getElementById("locationBubble");
-            const joinButton = document.getElementById("joinButton");
-            let isExpanded = false;
+            // const locationBubble = document.getElementById("locationBubble");
+            // const joinButton = document.getElementById("joinButton");
+            // let isExpanded = false;
 
-            locationBubble.addEventListener("click", function (e) {
-                // Don't toggle expanded state if clicking the join button
-                if (e.target.id === "joinButton") return;
+            // locationBubble.addEventListener("click", function (e) {
+            //     // Don't toggle expanded state if clicking the join button
+            //     if (e.target.id === "joinButton") return;
 
-                isExpanded = !isExpanded;
-                this.classList.toggle("expanded", isExpanded);
-            });
+            //     isExpanded = !isExpanded;
+            //     this.classList.toggle("expanded", isExpanded);
+            // });
 
-            joinButton.addEventListener("click", function (e) {
-                e.stopPropagation();
-                currentUserInLocation = !currentUserInLocation;
-                this.classList.toggle("active", currentUserInLocation);
-                this.textContent = currentUserInLocation ? "Leave" : "Join";
-                locationBubble.classList.toggle(
-                    "active",
-                    currentUserInLocation,
-                );
+            // joinButton.addEventListener("click", function (e) {
+            //     e.stopPropagation();
+            //     currentUserInLocation = !currentUserInLocation;
+            //     this.classList.toggle("active", currentUserInLocation);
+            //     this.textContent = currentUserInLocation ? "Leave" : "Join";
+            //     locationBubble.classList.toggle(
+            //         "active",
+            //         currentUserInLocation,
+            //     );
 
-                // Animate click
-                this.style.transform = "scale(0.95)";
-                setTimeout(() => {
-                    this.style.transform = "";
-                }, 150);
+            //     // Animate click
+            //     this.style.transform = "scale(0.95)";
+            //     setTimeout(() => {
+            //         this.style.transform = "";
+            //     }, 150);
 
-                updateLocationUsers();
-            });
+            //     updateLocationUsers();
+            // });
 
-            // Initialize location users
-            updateLocationUsers();
+            // // Initialize location users
+            // updateLocationUsers();
 
             // Handle message sending
             const input = document.querySelector("input");
@@ -162,15 +162,6 @@
                     messagesContainer.scrollHeight;
             }
 
-            function getCurrentTime() {
-                const now = new Date();
-                return now.toLocaleTimeString("en-GB", {
-                    hour: "numeric",
-                    minute: "2-digit",
-                    hour12: true,
-                });
-            }
-
             function sendMessage() {
                 const message = input.value.trim();
                 if (message) {
diff --git a/icons/call.svg b/icons/call.svg
deleted file mode 100644
index d527069..0000000
--- a/icons/call.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M798-120q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13 22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26 79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z"/></svg>
\ No newline at end of file
diff --git a/icons/down_arrow.svg b/icons/down_arrow.svg
deleted file mode 100644
index 8aca477..0000000
--- a/icons/down_arrow.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-360 280-560h400L480-360Z"/></svg>
\ No newline at end of file
diff --git a/icons/location.svg b/icons/location.svg
deleted file mode 100644
index 872023c..0000000
--- a/icons/location.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg>
\ No newline at end of file
diff --git a/icons/pin.svg b/icons/pin.svg
deleted file mode 100644
index 4375bde..0000000
--- a/icons/pin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="m640-480 80 80v80H520v240l-40 40-40-40v-240H240v-80l80-80v-280h-40v-80h400v80h-40v280Zm-286 80h252l-46-46v-314H400v314l-46 46Zm126 0Z"/></svg>
\ No newline at end of file
diff --git a/icons/search.svg b/icons/search.svg
deleted file mode 100644
index b78a3fe..0000000
--- a/icons/search.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>
\ No newline at end of file
diff --git a/icons/send.svg b/icons/send.svg
deleted file mode 100644
index 26dfe0e..0000000
--- a/icons/send.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M120-160v-640l760 320-760 320Zm80-120 474-200-474-200v140l240 60-240 60v140Zm0 0v-400 400Z"/></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 3325c89..e69de29 100644
--- a/index.html
+++ b/index.html
@@ -1,748 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Discord Clone - Group Chat</title>
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
-            body {
-                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-                background: #0a0a0a;
-                color: #e0e0e0;
-                height: 100vh;
-                overflow: hidden;
-            }
-
-            .chat-container {
-
-                display: flex;
-                flex-direction: column;
-                height: 100vh;
-                max-width: 50vh;
-                margin: 0 auto;
-                background: #121212;
-                position: relative;
-                overflow: hidden;
-            }
-
-            /* Chat Header */
-            .chat-header {
-                padding: 10px;
-                background: #1a1a1a;
-                border-bottom: 1px solid #252525;
-            }
-
-            .chat-title {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-            }
-
-            .status-dot {
-                width: 10px;
-                height: 10px;
-                background: #ff4444;
-                border-radius: 50%;
-                animation: pulse 2s infinite;
-            }
-
-            @keyframes pulse {
-                0%,
-                100% {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-                50% {
-                    transform: scale(1.3);
-                    opacity: 0.7;
-                }
-            }
-
-            .chat-title h1 {
-                font-size: 17px;
-                font-weight: 600;
-                color: #ffffff;
-            }
-
-            /* Live Location Notification Bubble */
-            .notification-container {
-                padding: 15px 20px 10px 20px;
-                display: flex;
-                flex-direction: column;
-                gap: 10px;
-                position: absolute;
-                top: 70px;
-                left: 0;
-                right: 0;
-                z-index: 10;
-                pointer-events: none;
-            }
-
-            .live-location-bubble {
-                padding: 0;
-                border-radius: 20px;
-                position: relative;
-                overflow: hidden;
-                cursor: pointer;
-                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                border: 1px solid rgba(138, 43, 226, 0.3);
-                box-shadow:
-                    0 8px 32px rgba(106, 90, 205, 0.2),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.1);
-                pointer-events: auto;
-                max-height: 64px;
-                background: transparent;
-            }
-
-            .live-location-bubble::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(
-                    135deg,
-                    rgba(106, 90, 205, 0.25) 0%,
-                    rgba(72, 61, 139, 0.2) 50%,
-                    rgba(123, 104, 238, 0.15) 100%
-                );
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                z-index: 0;
-            }
-
-            .live-location-bubble.expanded::before {
-                opacity: 0;
-            }
-
-            .live-location-bubble > * {
-                position: relative;
-                z-index: 1;
-            }
-
-            .live-location-bubble.expanded {
-                max-height: 400px;
-                cursor: default;
-            }
-
-            .map-container {
-                width: 100%;
-                height: 0;
-                opacity: 0;
-                transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-                overflow: hidden;
-            }
-
-            .live-location-bubble.expanded .map-container {
-                height: 260px;
-                opacity: 1;
-            }
-
-            .map-container img {
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                display: block;
-            }
-
-            .location-content {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                padding: 16px 20px;
-                background: linear-gradient(
-                    135deg,
-                    rgba(106, 90, 205, 0.25) 0%,
-                    rgba(72, 61, 139, 0.2) 50%,
-                    rgba(123, 104, 238, 0.15) 100%
-                );
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-            }
-
-            .live-location-bubble.expanded .location-content {
-                background: linear-gradient(
-                    to bottom,
-                    rgba(106, 90, 205, 0.45) 0%,
-                    rgba(72, 61, 139, 0.4) 50%,
-                    rgba(123, 104, 238, 0.35) 100%
-                );
-            }
-
-            .location-content {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-            }
-
-            .live-location-bubble::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                height: 1px;
-                background: linear-gradient(
-                    90deg,
-                    transparent,
-                    rgba(255, 255, 255, 0.2),
-                    transparent
-                );
-            }
-
-            .live-location-bubble:hover {
-                transform: translateY(-2px);
-                box-shadow:
-                    0 12px 40px rgba(106, 90, 205, 0.35),
-                    inset 0 1px 0 rgba(255, 255, 255, 0.15);
-                background: linear-gradient(
-                    135deg,
-                    rgba(106, 90, 205, 0.3) 0%,
-                    rgba(72, 61, 139, 0.25) 50%,
-                    rgba(123, 104, 238, 0.2) 100%
-                );
-            }
-
-            .live-location-bubble.active {
-                background: linear-gradient(
-                    135deg,
-                    rgba(106, 90, 205, 0.35) 0%,
-                    rgba(72, 61, 139, 0.3) 50%,
-                    rgba(123, 104, 238, 0.25) 100%
-                );
-                border-color: rgba(138, 43, 226, 0.5);
-            }
-
-            .location-content {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-            }
-
-            .location-icon {
-                width: 32px;
-                height: 32px;
-                background: rgba(255, 255, 255, 0.15);
-                backdrop-filter: blur(10px);
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                border: 1px solid rgba(255, 255, 255, 0.2);
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
-                transition: all 0.3s ease;
-                flex-shrink: 0;
-            }
-
-            .location-icon svg {
-                width: 18px;
-                height: 18px;
-                fill: #ea4335;
-                filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-            }
-
-            .live-location-bubble.expanded .location-icon {
-                display: none;
-            }
-
-            .join-button {
-                display: none;
-                padding: 8px 20px;
-                background: rgba(255, 255, 255, 0.15);
-                backdrop-filter: blur(10px);
-                border: 1px solid rgba(255, 255, 255, 0.2);
-                border-radius: 20px;
-                color: #ffffff;
-                font-size: 14px;
-                font-weight: 600;
-                cursor: pointer;
-                transition: all 0.2s ease;
-                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-                flex-shrink: 0;
-            }
-
-            .live-location-bubble.expanded .join-button {
-                display: block;
-            }
-
-            .join-button:hover {
-                background: rgba(255, 255, 255, 0.25);
-                transform: scale(1.05);
-            }
-
-            .join-button:active {
-                transform: scale(0.95);
-            }
-
-            .join-button.active {
-                background: rgba(106, 90, 205, 0.4);
-                border-color: rgba(138, 43, 226, 0.5);
-            }
-
-            .live-location-bubble.active .location-icon {
-                background: rgba(255, 255, 255, 0.25);
-            }
-
-            .location-text {
-                font-size: 15px;
-                font-weight: 600;
-                color: #ffffff;
-                flex: 1;
-                letter-spacing: 0.3px;
-            }
-
-            .location-users {
-                display: flex;
-                align-items: center;
-            }
-
-            .location-user-pic {
-                width: 32px;
-                height: 32px;
-                border-radius: 35%;
-                margin-left: -15px;
-                position: relative;
-                z-index: 1;
-                transition: all 0.2s ease;
-            }
-
-            .location-user-pic:first-child {
-                margin-left: 0;
-            }
-
-            .location-user-pic:hover {
-                z-index: 10;
-                transform: scale(1.15);
-            }
-
-            .location-count {
-                width: 32px;
-                height: 32px;
-                border-radius: 35%;
-                background: rgba(0, 0, 0, 0.5);
-                backdrop-filter: blur(10px);
-                margin-left: -15px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 10px;
-                font-weight: 600;
-                color: #ffffff;
-                z-index: 2;
-            }
-
-            .messages-container::before {
-                content: "";
-                flex: 1 0 auto;
-            }
-
-            /* Messages Container */
-            .messages-container {
-                display: flex;
-                flex-direction: column;
-                /*justify-content: flex-end;*/
-                flex: 1;
-                padding: 15px 0 15px 0;
-                overflow-y: scroll;
-                background: #121212;
-            }
-
-            .message {
-                margin: 8px 20px;
-                padding: 12px 16px;
-                border-radius: 12px;
-                background: rgba(30, 30, 30, 0.4);
-                backdrop-filter: blur(10px);
-                border: 1px solid #252525;
-                animation: slideIn 0.3s ease-out;
-                transition: all 0.2s ease;
-                display: flex;
-                gap: 12px;
-            }
-
-            .message:hover {
-                background: #1f1f1f;
-                border-color: #2a2a2a;
-            }
-
-            @keyframes slideIn {
-                from {
-                    opacity: 0;
-                    transform: translateY(10px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-
-            .user-avatar {
-
-                width: 48px;
-                height: 48px;
-                border-radius: 25%;
-                background-size: cover;
-                border: 2px solid #252525;
-                flex-shrink: 0;
-                background-image: url('assets/profile_pics/default.jpg');
-            }
-
-            .user-avatar.blue {
-                background: linear-gradient(135deg, #4169e1, #6495ed);
-            }
-
-            .message-content {
-                flex: 1;
-                min-width: 0;
-            }
-
-            .message-header {
-                display: flex;
-                align-items: baseline;
-                gap: 8px;
-                margin-bottom: 4px;
-            }
-
-            .username {
-                font-weight: 600;
-                font-size: 15px;
-                color: #e0e0e0;
-            }
-
-            .timestamp {
-                font-size: 11px;
-                color: #666;
-                font-weight: 400;
-            }
-
-            .message-text {
-                font-size: 14px;
-                color: #b0b0b0;
-                line-height: 1.4;
-                word-wrap: break-word;
-            }
-
-            /* Input Container */
-            .input-container {
-                padding: 10px;
-                background: #1a1a1a;
-                border-top: 1px solid #252525;
-            }
-
-            .input-wrapper {
-                display: flex;
-                align-items: center;
-                gap: 10px;
-                background: #252525;
-                border-radius: 10px;
-                padding: 5px 5px;
-                border: 1px solid #2a2a2a;
-                transition: all 0.2s ease;
-            }
-
-            .input-wrapper:focus-within {
-                background: #2a2a2a;
-                border-color: #6a5acd;
-                box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.1);
-            }
-
-            .input-wrapper input {
-                flex: 1;
-                background: none;
-                border: none;
-                color: #e0e0e0;
-                font-size: 14px;
-                outline: none;
-            }
-
-            .input-wrapper input::placeholder {
-                color: #666;
-            }
-
-            .send-button {
-                width: 32px;
-                height: 32px;
-                background: none;
-                border-radius: 10px;
-                border: none;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 14px;
-                transition: all 0.2s ease;
-                flex-shrink: 0;
-            }
-
-            .send-button:hover {
-                transform: scale(1.1);
-                box-shadow: 0 4px 15px rgba(106, 90, 205, 0.4);
-                background: rgba(255, 255, 255, 0.4);
-            }
-
-            .send-button:active {
-                transform: scale(0.95);
-            }
-
-            /* Scrollbar styling */
-            .messages-container::-webkit-scrollbar {
-                width: 6px;
-            }
-
-            .messages-container::-webkit-scrollbar-track {
-                background: #1a1a1a;
-            }
-
-            .messages-container::-webkit-scrollbar-thumb {
-                background: #333;
-                border-radius: 3px;
-            }
-
-            .messages-container::-webkit-scrollbar-thumb:hover {
-                background: #444;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="chat-container">
-        <!--<div class="chat-container" style="background-image: url('assets/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
-            <!-- Chat Header -->
-            <div class="chat-header">
-                <div class="chat-title">
-                    <div class="user-avatar"></div>
-                    <h1>Chat title</h1>
-                </div>
-            </div>
-
-            <!-- Live Location Notification Bubble -->
-            <div class="notification-container">
-                <div class="live-location-bubble" id="locationBubble">
-                    <div class="map-container">
-                        <img src="map.png" alt="Map" />
-                    </div>
-                    <div class="location-content">
-                        <div class="location-icon">
-                            <img src="icons/location.svg" alt="Location"></img>
-                        </div>
-                        <button class="join-button" id="joinButton">
-                            Join
-                        </button>
-                        <div class="location-text">Live Location</div>
-                        <div class="location-users" id="locationUsers">
-                            <!-- Users will be added dynamically -->
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Messages Container -->
-            <!--<div class="messages-container" style="background-image: url('assets/background.png'); backdrop-filter: blur(10px); background-size: cover; background-position: center; background-repeat: no-repeat;">-->
-            <div class="messages-container">
-                <div class="message">
-                    <div class="user-avatar"></div>
-                    <div class="message-content">
-                        <div class="message-header">
-                            <span class="username">Username</span>
-                            <span class="timestamp">12:34 PM</span>
-                        </div>
-                        <div class="message-text">example message fr</div>
-                    </div>
-                </div>
-
-                <div class="message">
-                    <div class="user-avatar blue"></div>
-                    <div class="message-content">
-                        <div class="message-header">
-                            <span class="username">Username2</span>
-                            <span class="timestamp">12:35 PM</span>
-                        </div>
-                        <div class="message-text">example message fr</div>
-                    </div>
-                </div>
-
-                <div class="message">
-                    <div class="user-avatar blue"></div>
-                    <div class="message-content">
-                        <div class="message-header">
-                            <span class="username">Username2</span>
-                            <span class="timestamp">12:36 PM</span>
-                        </div>
-                        <div class="message-text">example message fr</div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Input Container -->
-            <div class="input-container">
-                <div class="input-wrapper">
-                    <input type="text" placeholder="Start Typing..." />
-                    <button class="send-button">
-                         <img src="icons/send.svg" alt="Send" />
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <script>
-            const users = [
-              {
-                id: 0,
-                username: "LLM"
-                },
-              {
-                id: 1,
-                username: "/Zxq5 🚀/",
-              }
-            ];
-
-            // Location tracker state
-            const locationUsers = [
-                { id: 1, color: "linear-gradient(135deg, #ff6b6b, #ff8e8e)" },
-                { id: 2, color: "linear-gradient(135deg, #4ecdc4, #7fdbda)" },
-                { id: 3, color: "linear-gradient(135deg, #45b7d1, #6cc5e0)" },
-            ];
-
-            let hiddenUsersCount = 5; // Users not shown in the visible stack
-            let currentUserInLocation = false;
-
-            function updateLocationUsers() {
-                const container = document.getElementById("locationUsers");
-                container.innerHTML = "";
-
-                const maxVisible = 3;
-                const visibleUsers = locationUsers.slice(0, maxVisible);
-
-                visibleUsers.forEach((user) => {
-                    const pic = document.createElement("div");
-                    pic.className = "location-user-pic";
-                    pic.style.background = user.color;
-                    container.appendChild(pic);
-                });
-
-                // Calculate total hidden users (hidden users + current user if tracking)
-                const totalHidden =
-                    hiddenUsersCount + (currentUserInLocation ? 1 : 0);
-
-                // Add count indicator if there are more users
-                if (totalHidden > 0) {
-                    const count = document.createElement("div");
-                    count.className = "location-count";
-                    count.textContent = `+${totalHidden}`;
-                    container.appendChild(count);
-                }
-            }
-
-            // Toggle location tracking
-            const locationBubble = document.getElementById("locationBubble");
-            const joinButton = document.getElementById("joinButton");
-            let isExpanded = false;
-
-            locationBubble.addEventListener("click", function (e) {
-                // Don't toggle expanded state if clicking the join button
-                if (e.target.id === "joinButton") return;
-
-                isExpanded = !isExpanded;
-                this.classList.toggle("expanded", isExpanded);
-            });
-
-            joinButton.addEventListener("click", function (e) {
-                e.stopPropagation();
-                currentUserInLocation = !currentUserInLocation;
-                this.classList.toggle("active", currentUserInLocation);
-                this.textContent = currentUserInLocation ? "Leave" : "Join";
-                locationBubble.classList.toggle(
-                    "active",
-                    currentUserInLocation,
-                );
-
-                // Animate click
-                this.style.transform = "scale(0.95)";
-                setTimeout(() => {
-                    this.style.transform = "";
-                }, 150);
-
-                updateLocationUsers();
-            });
-
-            // Initialize location users
-            updateLocationUsers();
-
-            // Handle message sending
-            const input = document.querySelector("input");
-            const sendButton = document.querySelector(".send-button");
-            const messagesContainer = document.querySelector(
-                ".messages-container",
-            );
-            const messageSource = new EventSource("http://localhost:8001/events");
-
-            messageSource.onmessage = (event) => {
-                const message = JSON.parse(event.data);
-                const date = new Date(message.timestamp).toLocaleTimeString("en-US", {
-                    hour: "numeric",
-                    minute: "2-digit",
-                    hour12: true,
-                });
-                console.log(users, message);
-                const user = users.find((u) => u.id == message.userid);
-                console.log(user);
-
-                const messageEl = document.createElement("div");
-                messageEl.className = "message";
-                messageEl.innerHTML = `
-                <img class="user-avatar" src="assets/profile_pics/${user.id}.jpg" alt="${user.username}">
-                <div class="message-content">
-                    <div class="message-header">
-                        <span class="username">${user.username}</span>
-                        <span class="timestamp">${date}</span>
-                    </div>
-                    <div class="message-text">${message.text}</div>
-                </div>
-            `;
-                messagesContainer.appendChild(messageEl);
-                messagesContainer.scrollTop =
-                    messagesContainer.scrollHeight;
-            }
-
-            function getCurrentTime() {
-                const now = new Date();
-                return now.toLocaleTimeString("en-US", {
-                    hour: "numeric",
-                    minute: "2-digit",
-                    hour12: true,
-                });
-            }
-
-            function sendMessage() {
-                const message = input.value.trim();
-                if (message) {
-                    fetch("http://localhost:8001/chat", {
-                      method: "POST",
-                      body: JSON.stringify({
-                        userid: users[1].id,
-                        text: message,
-                        timestamp: new Date().getTime(),
-                      }),
-                      headers: {
-                        "Content-type": "application/json; charset=UTF-8"
-                      }
-                    });
-                    input.value = "";
-                }
-            }
-
-            sendButton.addEventListener("click", sendMessage);
-            input.addEventListener("keypress", function (e) {
-                if (e.key === "Enter") {
-                    sendMessage();
-                }
-            });
-        </script>
-    </body>
-</html>
diff --git a/map.png b/map.png
deleted file mode 100644
index 8d46e33..0000000
Binary files a/map.png and /dev/null differ
diff --git a/vibecodedconcept.html b/vibecodedconcept.html
index 9c57e99..e69de29 100644
--- a/vibecodedconcept.html
+++ b/vibecodedconcept.html
@@ -1,454 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Discord Clone - Group Chat</title>
-        <style>
-            * {
-                margin: 0;
-                padding: 0;
-                box-sizing: border-box;
-            }
-
-            body {
-                font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-                background: #000;
-                color: #fff;
-                height: 100vh;
-                overflow: hidden;
-            }
-
-            .chat-container {
-                display: flex;
-                flex-direction: column;
-                height: 100vh;
-                max-width: 400px;
-                margin: 0 auto;
-                position: relative;
-            }
-
-            .glass-effect {
-                background: rgba(255, 255, 255, 0.1);
-                backdrop-filter: blur(20px);
-                -webkit-backdrop-filter: blur(20px);
-                border: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            .purple-gradient {
-                background: linear-gradient(
-                    135deg,
-                    rgba(138, 43, 226, 0.3) 0%,
-                    rgba(75, 0, 130, 0.2) 50%,
-                    rgba(148, 0, 211, 0.1) 100%
-                );
-            }
-
-            .chat-header {
-                padding: 20px;
-                border-radius: 20px 20px 0 0;
-                margin-bottom: 2px;
-                position: relative;
-                overflow: hidden;
-            }
-
-            .chat-header::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(
-                    135deg,
-                    rgba(138, 43, 226, 0.4) 0%,
-                    rgba(75, 0, 130, 0.3) 100%
-                );
-                z-index: -1;
-            }
-
-            .chat-title {
-                display: flex;
-                align-items: center;
-                gap: 15px;
-            }
-
-            .status-dot {
-                width: 12px;
-                height: 12px;
-                background: #ff4444;
-                border-radius: 50%;
-                animation: pulse 2s infinite;
-            }
-
-            @keyframes pulse {
-                0% {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-                50% {
-                    transform: scale(1.2);
-                    opacity: 0.7;
-                }
-                100% {
-                    transform: scale(1);
-                    opacity: 1;
-                }
-            }
-
-            .chat-title h1 {
-                font-size: 18px;
-                font-weight: 600;
-            }
-
-            .live-location {
-                margin: 2px 0;
-                padding: 15px 20px;
-                border-radius: 15px;
-                position: relative;
-                overflow: hidden;
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-
-            .live-location::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(
-                    135deg,
-                    rgba(106, 90, 205, 0.4) 0%,
-                    rgba(72, 61, 139, 0.3) 50%,
-                    rgba(123, 104, 238, 0.2) 100%
-                );
-                z-index: -1;
-            }
-
-            .live-location:hover {
-                transform: translateY(-2px);
-                box-shadow: 0 8px 25px rgba(138, 43, 226, 0.3);
-            }
-
-            .location-content {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-            }
-
-            .location-icon {
-                width: 24px;
-                height: 24px;
-                background: #fff;
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                font-size: 12px;
-                color: #6a5acd;
-                font-weight: bold;
-            }
-
-            .location-text {
-                font-size: 16px;
-                font-weight: 500;
-            }
-
-            .location-toggle {
-                margin-left: auto;
-                display: flex;
-                gap: 8px;
-            }
-
-            .toggle-dot {
-                width: 8px;
-                height: 8px;
-                border-radius: 50%;
-            }
-
-            .toggle-dot.blue {
-                background: #4169e1;
-            }
-
-            .toggle-dot.red {
-                background: #ff4444;
-            }
-
-            .messages-container {
-                flex: 1;
-                padding: 10px 0;
-                overflow-y: auto;
-            }
-
-            .message {
-                margin: 2px 20px;
-                padding: 12px 16px;
-                border-radius: 15px;
-                position: relative;
-                overflow: hidden;
-                animation: slideIn 0.3s ease-out;
-            }
-
-            @keyframes slideIn {
-                from {
-                    opacity: 0;
-                    transform: translateY(10px);
-                }
-                to {
-                    opacity: 1;
-                    transform: translateY(0);
-                }
-            }
-
-            .message::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(
-                    135deg,
-                    rgba(255, 255, 255, 0.1) 0%,
-                    rgba(138, 43, 226, 0.1) 50%,
-                    rgba(75, 0, 130, 0.05) 100%
-                );
-                z-index: -1;
-            }
-
-            .message-header {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                margin-bottom: 5px;
-            }
-
-            .user-avatar {
-                width: 32px;
-                height: 32px;
-                border-radius: 50%;
-                background: linear-gradient(135deg, #ff4444, #ff6b6b);
-            }
-
-            .user-avatar.blue {
-                background: linear-gradient(135deg, #4169e1, #6495ed);
-            }
-
-            .username {
-                font-weight: 600;
-                font-size: 14px;
-                color: #fff;
-            }
-
-            .message-text {
-                font-size: 14px;
-                color: #ccc;
-                margin-left: 44px;
-            }
-
-            .input-container {
-                padding: 20px;
-                border-radius: 0 0 20px 20px;
-                position: relative;
-                overflow: hidden;
-            }
-
-            .input-container::before {
-                content: "";
-                position: absolute;
-                top: 0;
-                left: 0;
-                right: 0;
-                bottom: 0;
-                background: linear-gradient(
-                    135deg,
-                    rgba(138, 43, 226, 0.2) 0%,
-                    rgba(75, 0, 130, 0.15) 100%
-                );
-                z-index: -1;
-            }
-
-            .input-wrapper {
-                display: flex;
-                align-items: center;
-                gap: 12px;
-                background: rgba(255, 255, 255, 0.1);
-                border-radius: 25px;
-                padding: 12px 20px;
-                border: 1px solid rgba(255, 255, 255, 0.1);
-            }
-
-            .input-wrapper input {
-                flex: 1;
-                background: none;
-                border: none;
-                color: #fff;
-                font-size: 14px;
-                outline: none;
-            }
-
-            .input-wrapper input::placeholder {
-                color: #888;
-            }
-
-            .send-button {
-                width: 24px;
-                height: 24px;
-                background: linear-gradient(135deg, #6a5acd, #9370db);
-                border-radius: 6px;
-                border: none;
-                cursor: pointer;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                color: white;
-                font-size: 12px;
-                transition: all 0.2s ease;
-            }
-
-            .send-button:hover {
-                transform: scale(1.1);
-                box-shadow: 0 4px 15px rgba(138, 43, 226, 0.4);
-            }
-
-            /* Scrollbar styling */
-            .messages-container::-webkit-scrollbar {
-                width: 6px;
-            }
-
-            .messages-container::-webkit-scrollbar-track {
-                background: rgba(255, 255, 255, 0.05);
-                border-radius: 3px;
-            }
-
-            .messages-container::-webkit-scrollbar-thumb {
-                background: rgba(138, 43, 226, 0.5);
-                border-radius: 3px;
-            }
-
-            .messages-container::-webkit-scrollbar-thumb:hover {
-                background: rgba(138, 43, 226, 0.7);
-            }
-        </style>
-    </head>
-    <body>
-        <div class="chat-container glass-effect">
-            <!-- Chat Header -->
-            <div class="chat-header glass-effect">
-                <div class="chat-title">
-                    <div class="status-dot"></div>
-                    <h1>Chat title</h1>
-                </div>
-            </div>
-
-            <!-- Live Location Channel -->
-            <div class="live-location glass-effect">
-                <div class="location-content">
-                    <div class="location-icon">📍</div>
-                    <div class="location-text">Live Location</div>
-                    <div class="location-toggle">
-                        <div class="toggle-dot blue"></div>
-                        <div class="toggle-dot red"></div>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Messages Container -->
-            <div class="messages-container">
-                <div class="message glass-effect">
-                    <div class="message-header">
-                        <div class="user-avatar"></div>
-                        <div class="username">Username</div>
-                    </div>
-                    <div class="message-text">example message fr</div>
-                </div>
-
-                <div class="message glass-effect">
-                    <div class="message-header">
-                        <div class="user-avatar blue"></div>
-                        <div class="username">Username2</div>
-                    </div>
-                    <div class="message-text">example message fr</div>
-                </div>
-
-                <div class="message glass-effect">
-                    <div class="message-header">
-                        <div class="user-avatar blue"></div>
-                        <div class="username">Username2</div>
-                    </div>
-                    <div class="message-text">example message fr</div>
-                </div>
-            </div>
-
-            <!-- Input Container -->
-            <div class="input-container glass-effect">
-                <div class="input-wrapper">
-                    <input type="text" placeholder="typing this message" />
-                    <button class="send-button">💬</button>
-                </div>
-            </div>
-        </div>
-
-        <script>
-            // Add some interactive behavior
-            document
-                .querySelector(".live-location")
-                .addEventListener("click", function () {
-                    this.style.transform = "scale(0.98)";
-                    setTimeout(() => {
-                        this.style.transform = "";
-                    }, 150);
-                });
-
-            // Handle message sending
-            const input = document.querySelector("input");
-            const sendButton = document.querySelector(".send-button");
-            const messagesContainer = document.querySelector(
-                ".messages-container",
-            );
-
-            function sendMessage() {
-                const message = input.value.trim();
-                if (message) {
-                    const messageEl = document.createElement("div");
-                    messageEl.className = "message glass-effect";
-                    messageEl.innerHTML = `
-                    <div class="message-header">
-                        <div class="user-avatar" style="background: linear-gradient(135deg, #32cd32, #90ee90);"></div>
-                        <div class="username">You</div>
-                    </div>
-                    <div class="message-text">${message}</div>
-                `;
-                    messagesContainer.appendChild(messageEl);
-                    messagesContainer.scrollTop =
-                        messagesContainer.scrollHeight;
-                    input.value = "";
-                }
-            }
-
-            sendButton.addEventListener("click", sendMessage);
-            input.addEventListener("keypress", function (e) {
-                if (e.key === "Enter") {
-                    sendMessage();
-                }
-            });
-
-            // Add floating animation to status dot
-            const statusDot = document.querySelector(".status-dot");
-            let isFloating = false;
-
-            statusDot.addEventListener("click", function () {
-                if (!isFloating) {
-                    this.style.animation =
-                        "pulse 0.5s ease-in-out infinite alternate";
-                    isFloating = true;
-                } else {
-                    this.style.animation = "pulse 2s infinite";
-                    isFloating = false;
-                }
-            });
-        </script>
-    </body>
-</html>