diff --git a/public/css/chat.css b/public/css/chat.css
index 198c5fa..943544a 100644
--- a/public/css/chat.css
+++ b/public/css/chat.css
@@ -244,4 +244,86 @@ pre code {
/* Add class for fading out when alert is being removed */
.alert.fade-out {
animation: fadeSlideOut 0.5s forwards;
-}
\ No newline at end of file
+}
+
+
+/* Dropdown menu styling */
+.navbar .dropdown-menu {
+ background-color: #1e1e1e;
+ /* Match the chat box background */
+ border: none;
+ /* Remove border */
+ box-shadow: none;
+ /* Remove shadow */
+ padding: 0;
+ /* Remove padding */
+}
+
+.navbar .dropdown-item {
+ background-color: #1e1e1e;
+ /* Match the chat box background */
+ color: white;
+ /* White text */
+ padding: 10px 20px;
+ /* Add padding for spacing */
+ border-bottom: 1px solid #444;
+ /* Add a subtle separator */
+}
+
+.navbar .dropdown-item:last-child {
+ border-bottom: none;
+ /* Remove border for the last item */
+}
+
+.navbar .dropdown-item:hover {
+ background-color: #282828;
+ /* Slightly lighter background on hover */
+ color: #f1f1f1;
+ /* Lighter text on hover */
+}
+
+.navbar .dropdown-item:focus {
+ background-color: #282828;
+ /* Match hover style for focused items */
+ outline: none;
+ /* Remove default outline */
+}
+
+.navbar .dropdown-toggle {
+ color: white;
+ /* White text */
+}
+
+.navbar .dropdown-toggle::after {
+ border-top: 0.3em solid white;
+ /* White arrow for dropdown */
+}
+
+.navbar .dropdown-menu.show {
+ opacity: 1;
+ /* Fully opaque when shown */
+ transform: translateY(0);
+ /* Reset transform */
+ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+ /* Smooth fade and slide transition */
+}
+
+.navbar .dropdown-menu {
+ opacity: 0;
+ transform: translateY(-10px);
+ /* Start hidden and slightly raised */
+ transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+ /* Smooth fade and slide transition */
+}
+
+/* Styling the dropdown toggle button */
+.navbar .dropdown-toggle:hover {
+ color: #f1f1f1;
+ /* Lighter text on hover */
+}
+
+/* Separator between regular menu items and dropdown */
+.navbar .separator {
+ color: #555;
+ /* Subtle separator color */
+}
diff --git a/views/chat.ejs b/views/chat.ejs
index 0fdb8b2..9963f3b 100644
--- a/views/chat.ejs
+++ b/views/chat.ejs
@@ -24,14 +24,14 @@
-
+
@@ -51,35 +51,38 @@
+
@@ -95,7 +98,7 @@