diff --git a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc
index b6b76848..0a76ee19 100644
Binary files a/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc and b/osinaweb/billing/add/__pycache__/urls.cpython-312.pyc differ
diff --git a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc
index 8be14d38..2eb9cada 100644
Binary files a/osinaweb/billing/add/__pycache__/views.cpython-312.pyc and b/osinaweb/billing/add/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/db.sqlite3 b/osinaweb/db.sqlite3
index e9b399ab..a6e6a1ac 100644
Binary files a/osinaweb/db.sqlite3 and b/osinaweb/db.sqlite3 differ
diff --git a/osinaweb/input.css b/osinaweb/input.css
index 339ab8af..e88b0c3b 100644
--- a/osinaweb/input.css
+++ b/osinaweb/input.css
@@ -15,6 +15,11 @@
     background: #5a5a5a00;
 }
 
+
+#dynamicTextarea::-webkit-scrollbar {
+    width: 0px !important;
+}
+
 .rtl {
     direction: rtl;
 }
diff --git a/osinaweb/osichat/__pycache__/consumers.cpython-312.pyc b/osinaweb/osichat/__pycache__/consumers.cpython-312.pyc
index 82d653cd..8abdee66 100644
Binary files a/osinaweb/osichat/__pycache__/consumers.cpython-312.pyc and b/osinaweb/osichat/__pycache__/consumers.cpython-312.pyc differ
diff --git a/osinaweb/osichat/__pycache__/routing.cpython-312.pyc b/osinaweb/osichat/__pycache__/routing.cpython-312.pyc
index 204c53f9..409b338a 100644
Binary files a/osinaweb/osichat/__pycache__/routing.cpython-312.pyc and b/osinaweb/osichat/__pycache__/routing.cpython-312.pyc differ
diff --git a/osinaweb/osichat/__pycache__/urls.cpython-312.pyc b/osinaweb/osichat/__pycache__/urls.cpython-312.pyc
index 3a1b6586..7401df0f 100644
Binary files a/osinaweb/osichat/__pycache__/urls.cpython-312.pyc and b/osinaweb/osichat/__pycache__/urls.cpython-312.pyc differ
diff --git a/osinaweb/osichat/__pycache__/views.cpython-312.pyc b/osinaweb/osichat/__pycache__/views.cpython-312.pyc
index 1bb36d0b..922006f3 100644
Binary files a/osinaweb/osichat/__pycache__/views.cpython-312.pyc and b/osinaweb/osichat/__pycache__/views.cpython-312.pyc differ
diff --git a/osinaweb/osichat/templates/chat-widget.html b/osinaweb/osichat/templates/chat-widget.html
index 8b81b7eb..fa91f432 100644
--- a/osinaweb/osichat/templates/chat-widget.html
+++ b/osinaweb/osichat/templates/chat-widget.html
@@ -11,7 +11,7 @@
 
 
 
-<div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 gap-2 text-white text-sm border-4 border-white"
+<div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 gap-2 text-white text-sm border-4 border-white hover:shadow-2xl duration-500 cursor-pointer"
     id="openChatContainer">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
         <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
@@ -24,7 +24,7 @@
     <p>Chat with us</p>
 </div>
 
-<div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 text-white text-sm border-4 border-white hidden"
+<div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-5 z-30 text-white text-sm border-4 border-white hidden hover:shadow-2xl duration-500 cursor-pointer"
     id="closeChatContainer">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
         <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor"
diff --git a/osinaweb/osichat/templates/conversation.html b/osinaweb/osichat/templates/conversation.html
index 66a6421c..8318d8eb 100644
--- a/osinaweb/osichat/templates/conversation.html
+++ b/osinaweb/osichat/templates/conversation.html
@@ -1,99 +1,131 @@
 {%load static%}
-<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between" id="chatContainer">
-    <div class="w-ful h-full flex flex-col justify-between">
+<div class="w-[400px] h-[600px] bg-white rounded-md shadow-md z-50 fixed right-5 bottom-24 flex flex-col justify-between"
+    id="chatContainer">
+
+    <!-- HEADER -->
+    <div class="w-full rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
+        <div class="flex gap-3 items-center">
+            <img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
+            <div class="flex flex-col">
+                <p class="text-white">Ositcom</p>
+                <p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
+            </div>
+        </div>
+
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
+            class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
+            <path
+                d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            <path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </div>
 
-        <div class="w-full flex flex-col gap-5">
-            <!-- HEADER -->
-            <div class="w-full rounded-t-md bg-osiblue flex justify-between gap-3 items-center px-5 py-3">
-                <div class="flex gap-3 items-center">
-                    <img src="{% static 'images/banner-logo.png' %}" class="w-[40px]">
-                    <div class="flex flex-col">
-                        <p class="text-white">Ositcom</p>
-                        <p class="text-white opacity-80 text-xs">Typically replies in a few minutes</p>
-                    </div>
-                </div>
 
-                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-white w-7 notFilledSvg cursor-pointer hover:scale-105 duration-500" fill="none">
-                    <path d="M11 3L10.3374 3.23384C7.75867 4.144 6.46928 4.59908 5.73464 5.63742C5 6.67576 5 8.0431 5 10.7778V13.2222C5 15.9569 5 17.3242 5.73464 18.3626C6.46928 19.4009 7.75867 19.856 10.3374 20.7662L11 21" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
-                    <path d="M21 12L11 12M21 12C21 11.2998 19.0057 9.99153 18.5 9.5M21 12C21 12.7002 19.0057 14.0085 18.5 14.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                </svg>
+    <div class="flex-l overflow-y-auto flex flex-col gap-5 px-5 relative py-5" id="conversation">
+        <!-- ROBOT -->
+        <div class="flex items-end gap-2">
+            <div>
+                <div
+                    class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" color="#000000" fill="none">
+                        <path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="white"
+                            stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5"
+                            stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M7 7L7 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <path d="M17 7L17 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <circle cx="7" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <circle cx="17" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <path
+                            d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z"
+                            stroke="white" stroke-width="1.5" stroke-linejoin="round" />
+                        <path d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15"
+                            stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+                        <path d="M9.00896 11H9" stroke="#20336b" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                        <path d="M15.009 11H15" stroke="#20336b" stroke-width="2" stroke-linecap="round"
+                            stroke-linejoin="round" />
+                    </svg>
+                </div>
+            </div>
+            <div
+                class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
+                <p>Hello {{chat_room.chatroomguest.name}}, the support department is notified about your request
+                    to start a conversation. It usually takes few minutes for you to receieve a reply.</p>
             </div>
+        </div>
 
 
-            <div class="max-h-[430px] overflow-y-auto flex flex-col gap-5 px-5">
-                <!-- ROBOT -->
-                <div class="flex items-end gap-2">
-                    <div>
-                        <div
-                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-4" color="#000000" fill="none">
-                                <path d="M4 15.5C2.89543 15.5 2 14.6046 2 13.5C2 12.3954 2.89543 11.5 4 11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M20 15.5C21.1046 15.5 22 14.6046 22 13.5C22 12.3954 21.1046 11.5 20 11.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M7 7L7 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <path d="M17 7L17 4" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <circle cx="7" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <circle cx="17" cy="3" r="1" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <path d="M13.5 7H10.5C7.67157 7 6.25736 7 5.37868 7.90898C4.5 8.81796 4.5 10.2809 4.5 13.2069C4.5 16.1329 4.5 17.5958 5.37868 18.5048C6.25736 19.4138 7.67157 19.4138 10.5 19.4138H11.5253C12.3169 19.4138 12.5962 19.5773 13.1417 20.1713C13.745 20.8283 14.6791 21.705 15.5242 21.9091C16.7254 22.1994 16.8599 21.7979 16.5919 20.6531C16.5156 20.327 16.3252 19.8056 16.526 19.5018C16.6385 19.3316 16.8259 19.2898 17.2008 19.2061C17.7922 19.074 18.2798 18.8581 18.6213 18.5048C19.5 17.5958 19.5 16.1329 19.5 13.2069C19.5 10.2809 19.5 8.81796 18.6213 7.90898C17.7426 7 16.3284 7 13.5 7Z" stroke="white" stroke-width="1.5" stroke-linejoin="round" />
-                                <path d="M9.5 15C10.0701 15.6072 10.9777 16 12 16C13.0223 16 13.9299 15.6072 14.5 15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M9.00896 11H9" stroke="#20336b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                                <path d="M15.009 11H15" stroke="#20336b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
-                            </svg> 
-    
-                            
-                        </div>
-                    </div>
+        <!-- USER MESSAGES -->
+        <div id="messages" class="w-full flex flex-col items-end gap-3">
+            {% for message in chat_room_messages %}
+            {% if message.member %}
+            <div class="flex items-end gap-2">
+                <div>
                     <div
-                        class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
-                        <p>Hello {{chat_room.chatroomguest.name}}, the support department is notified about your request to start a conversation. It usually takes few minutes for you to receieve a reply.</p>
+                        class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                        {% if message.member.staffprofile.image %}
+                        <img class="w-full h-full rounded-full"
+                            src="http://192.168.1.111:8000{{message.member.staffprofile.image.url}}">
+                        {% else %}
+                        <p>nn</p>
+                        {% endif %}
                     </div>
                 </div>
-    
-
-                <!-- USER MESSAGES -->
-                <div id="messages" class="w-full flex flex-col items-end gap-3">
-                    {% for message in chat_room_messages %}
-                    {% if message.member %}
-                        <div class="flex items-end gap-2">
-                            <div>
-                                <div
-                                    class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
-                                    {% if message.member.staffprofile.image %}
-                                        <img class="w-full h-full rounded-full" src="http://192.168.1.111:8000{{message.member.staffprofile.image.url}}">
-                                    {% else %}
-                                    jh
-                                    {% endif %}
-            
-                                    
-                                </div>
-                            </div>
-                            <div
-                                class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
-                                <p>{{message.content}}</p>
-                            </div>
-                        </div>
-                    {% else %}
-                        <div class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-7 bg-opacity-70 bg-osiblue ">
-                            <p>{{message.content}}</p>
-                        </div>
-                    {% endif %}
-                    {% endfor %}
+                <div
+                    class="w-full bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-6 bg-opacity-50 shadow-md border border-gray-100">
+                    <p class="break-all">{{message.content}}</p>
                 </div>
             </div>
+            {% else %}
+            <div
+                class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue ">
+                <p class="break-all">{{message.content}}</p>
+            </div>
+            {% endif %}
+            {% endfor %}
         </div>
+    </div>
 
-        <form class="p-5" id="sendMessage">
-            <div class="relative w-full h-fit">
-                <input type="text" name="message" class="w-full border border-gray-300 rounded-md px-3 py-3 outline-none" placeholder="Write your message...">
 
-                <button type="submit" class="absolute h-full top-0 right-0 flex justify-center items-center px-3 rounded-md text-osiblue">
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+    <form class="px-5 pb-5 bg-transparent relative" id="sendMessage">
+        <!-- INCLUDE TYPING HERE -->
+        <div class="mb-2 flex justify-start items-center gap-2 absolute -top-11">
+            <div
+                class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                <p>nn</p>
+            </div>
+            <div
+                class="w-fit rounded-r-3xl rounded-tl-3xl px-2 py-2 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
+                <div class="h-2 w-2 bg-secondosiblue rounded-full animate-typing"></div>
+                <div class="h-2 w-2 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;"></div>
+                <div class="h-2 w-2 bg-fifthosiblue rounded-full animate-typing" style="animation-delay: 0.4s;"></div>
+            </div>
+        </div>
+        <!-- END TYPING -->
+
+        <div class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
+            <textarea name="message" id="dynamicTextarea" onkeyup="adjustTextHeight(this);"
+                placeholder="Write your message..."
+                class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
+            <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
+                <div>
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 notFilledSvg">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                    </svg>
+                </div>
+                <button type="submit" class="hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 notFilledSvg">
+                        <path stroke-linecap="round" stroke-linejoin="round"
+                            d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
                     </svg>
                 </button>
             </div>
-        </form>    
-    </div>
-</div>
-
-
-
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/osinaweb/osichat/templates/partials/message.html b/osinaweb/osichat/templates/partials/message.html
index 83f9bc10..e4005b39 100644
--- a/osinaweb/osichat/templates/partials/message.html
+++ b/osinaweb/osichat/templates/partials/message.html
@@ -1,5 +1,5 @@
 <div class="w-fit bg-osiblue bg-opacity-70 px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-7 fade-in-up">
-    <p>{{chat_message.content}}</p>
+    <p class="break-all">{{chat_message.content}}</p>
 </div>
 
 <style>
diff --git a/osinaweb/osichat/templates/partials/typing.html b/osinaweb/osichat/templates/partials/typing.html
new file mode 100644
index 00000000..3ca4eefe
--- /dev/null
+++ b/osinaweb/osichat/templates/partials/typing.html
@@ -0,0 +1,2 @@
+{% load static %}
+
diff --git a/osinaweb/osinacore/templates/main.html b/osinaweb/osinacore/templates/main.html
index 51d1bb16..5ec4bf44 100644
--- a/osinaweb/osinacore/templates/main.html
+++ b/osinaweb/osinacore/templates/main.html
@@ -21,6 +21,167 @@
 </head>
 
 <body class="bg-gray-200 font-poppinsLight relative">
+    <div class="w-[800px] h-[700px] bg-white rounded-md border border-gray-100 shadow-md z-50 fixed right-9 bottom-24 grid grid-cols-3 hidden"
+        id="chatContainer">
+
+        <!-- LEFT SIDE - CHATS -->
+        <div class="h-full border-r border-gray-200 bg-gray-50 flex flex-col text-secondosiblue">
+            <!-- HEADER -->
+            <div class="w-full flex items-center gap-1 py-3 px-3 border-b border-gray-100 text-[17px]">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" class="w-5">
+                    <path stroke-linecap="round" stroke-linejoin="round"
+                        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
+                </svg>
+                <p>Chats</p>
+            </div>
+
+            <!-- CHATS -->
+            <div class="w-full flex flex-col gap-1 py-3 px-3 border-b border-gray-100 text-sm">
+                <div class="w-full flex justify-between items-center">
+                    <p class="text-secondosiblue font-poppinsBold">Nataly</p>
+
+                    <div
+                        class="w-[20px] h-[20px] bg-osiblue rounded-full shadow-md flex justify-center items-center text-white text-[10px]">
+                        <p>22</p>
+                    </div>
+                </div>
+
+                <p class="text-gray-500 text-xs">Hi, i need help woth web hosting...</p>
+
+                <p class="text-gray-500 opacity-70 text-xs">12:00PM</p>
+            </div>
+        </div>
+
+
+
+        <!-- RIGHT SIDE - CONVERSATION -->
+        <div class="col-span-2 h-full">
+            <!-- STARTUP CONTAINER -->
+            <div class="w-full h-full flex flex-col justify-center items-center text-center hidden">
+                <img src="{% static 'images/ositcom_logos/osinablue.png' %}" alt="" srcset="">
+
+                <p class="text-gray-500">Text Here</p>
+            </div>
+
+
+
+            <div class="w-full h-full flex flex-col justify-between">
+                <!-- HEADER -->
+                <div
+                    class="w-full flex items-center gap-1 py-3 px-3 border-b border-gray-100 text-[17px] text-secondosiblue">
+                    <div
+                        class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                        </svg>
+                    </div>
+
+                    <p>Nataly</p>
+                </div>
+
+                <!-- CONVERSATION -->
+                <div class="w-full h-full flex-l flex flex-col gap-3 overflow-y-auto p-3">
+                    <div class="w-full flex items-end justify-end gap-2">
+                        <div
+                            class="w-fit px-3 py-2 rounded-l-3xl rounded-tr-3xl text-white shadow-md text-sm leading-6 bg-opacity-70 bg-osiblue ">
+                            <p class="break-all">hi how are you</p>
+                        </div>
+
+                        <div
+                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                            <p>nn</p>
+                        </div>
+                    </div>
+
+
+
+                    <div class="w-full flex items-end justify-start gap-2">
+                        <div
+                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                                stroke="currentColor" class="w-5">
+                                <path stroke-linecap="round" stroke-linejoin="round"
+                                    d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                            </svg>
+                        </div>
+                        <div
+                            class="w-fit bg-gray-50 px-3 py-2 rounded-r-3xl rounded-tl-3xl text-secondosiblue text-sm leading-7 bg-opacity-50 shadow-md border border-gray-100">
+                            <p class="break-all">hi how are you</p>
+                        </div>
+                    </div>
+
+                </div>
+
+                <!-- INPUT FORM -->
+                <form class="px-5 pb-5 bg-transparent relative" id="sendMessage">
+                    <!-- INCLUDE TYPING HERE -->
+                    <div class="mb-2 flex justify-start items-center gap-2 absolute -top-11 ">
+                        <div
+                            class="w-[30px] h-[30px] rounded-full shadow-md text-white flex justify-center items-center bg-osiblue uppercase text-xs">
+                            <p>nn</p>
+                        </div>
+                        <div
+                            class="w-fit rounded-r-3xl rounded-tl-3xl px-2 py-2 bg-gray-50 border border-gray-100 shadow-md flex space-x-1 justify-start items-center">
+                            <div class="h-2 w-2 bg-secondosiblue rounded-full animate-typing"></div>
+                            <div class="h-2 w-2 bg-osiblue rounded-full animate-typing" style="animation-delay: 0.2s;">
+                            </div>
+                            <div class="h-2 w-2 bg-fifthosiblue rounded-full animate-typing"
+                                style="animation-delay: 0.4s;"></div>
+                        </div>
+                    </div>
+                    <!-- END TYPING -->
+
+                    
+                    <div
+                        class="w-full bg-white h-fit rounded-md border border-gray-200 flex items-center justify-between">
+                        <textarea name="message" id="dynamicTextarea" onkeyup="adjustTextHeight(this);"
+                            placeholder="Write your message..."
+                            class="w-full outline-none p-3 resize-none h-[50px] max-h-[200px] duration-500"></textarea>
+                        <div class="h-full right-0 top-0 px-3 flex items-center gap-2 text-osiblue">
+                            <div>
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                                </svg>
+                            </div>
+                            <button type="submit" class="hidden">
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor" class="w-5 notFilledSvg">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="w-fit px-5 py-2 rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-9 z-30 gap-2 text-white text-sm border-4 border-white hover:shadow-2xl duration-500 cursor-pointer"
+        id="openChatContainer">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+            <path d="M8 13.5H16M8 8.5H12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
+                stroke-linejoin="round" />
+            <path
+                d="M6.09881 19C4.7987 18.8721 3.82475 18.4816 3.17157 17.8284C2 16.6569 2 14.7712 2 11V10.5C2 6.72876 2 4.84315 3.17157 3.67157C4.34315 2.5 6.22876 2.5 10 2.5H14C17.7712 2.5 19.6569 2.5 20.8284 3.67157C22 4.84315 22 6.72876 22 10.5V11C22 14.7712 22 16.6569 20.8284 17.8284C19.6569 19 17.7712 19 14 19C13.4395 19.0125 12.9931 19.0551 12.5546 19.155C11.3562 19.4309 10.2465 20.0441 9.14987 20.5789C7.58729 21.3408 6.806 21.7218 6.31569 21.3651C5.37769 20.6665 6.29454 18.5019 6.5 17.5"
+                stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+
+        <p>Osichat</p>
+    </div>
+
+    <div class="w-[60px] h-[60px] rounded-full shadow-md flex justify-center items-center bg-osiblue fixed bottom-5 right-9 z-30 text-white text-sm border-4 border-white hidden hover:shadow-2xl duration-500 cursor-pointer"
+        id="closeChatContainer">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 text-white notFilledSvg" fill="none">
+            <path d="M19.0005 4.99988L5.00049 18.9999M5.00049 4.99988L19.0005 18.9999" stroke="currentColor"
+                stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    </div>
 
 
     <!-- USERS ACTIVITIES BUTTON ON MOBILE -->
@@ -901,7 +1062,8 @@
 
 
             <!-- MODULES SECTION -->
-            <div class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
+            <div
+                class="w-full h-fit hidden xlg1:grid grid-cols-1 s:grid-cols-2 xlg1:grid-cols-3 gap-5 px-5 s:px-9 py-5">
                 <div class="bg-white shadow-md rounded-md p-5">
                     <div class="w-full h-full flex flex-col justify-between items-center">
                         <div class="w-full flex justify-between items-center">
@@ -945,23 +1107,32 @@
 
             <!-- TOP MODULES ON MOBILE -->
             <div class="block xlg1:hidden px-5 s:px-9 py-5">
-                <div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer" id="openAccessibilitiesDropDown">
+                <div class="bg-white shadow-sm rounded-md flex justify-between items-center text-secondosiblue text-[17px] py-5 px-3 cursor-pointer"
+                    id="openAccessibilitiesDropDown">
                     <div class="flex justify-start items-center gap-2">
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6" fill="none">
-                            <path d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z" stroke="currentColor" stroke-width="1.5" />
-                            <path d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z" stroke="currentColor" stroke-width="1.5" />
-                            <path d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z" stroke="currentColor" stroke-width="1.5" />
+                            <path
+                                d="M15.5 6.5C15.5 8.433 13.933 10 12 10C10.067 10 8.5 8.433 8.5 6.5C8.5 4.567 10.067 3 12 3C13.933 3 15.5 4.567 15.5 6.5Z"
+                                stroke="currentColor" stroke-width="1.5" />
+                            <path
+                                d="M22 17.5C22 19.433 20.433 21 18.5 21C16.567 21 15 19.433 15 17.5C15 15.567 16.567 14 18.5 14C20.433 14 22 15.567 22 17.5Z"
+                                stroke="currentColor" stroke-width="1.5" />
+                            <path
+                                d="M9 17.5C9 19.433 7.433 21 5.5 21C3.567 21 2 19.433 2 17.5C2 15.567 3.567 14 5.5 14C7.433 14 9 15.567 9 17.5Z"
+                                stroke="currentColor" stroke-width="1.5" />
                         </svg>
                         <p>Accessibilites</p>
                     </div>
 
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowDown">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 arrowDown">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                    </svg> 
+                    </svg>
 
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 arrowUp hidden">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="w-5 arrowUp hidden">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5" />
-                    </svg> 
+                    </svg>
                 </div>
 
                 <div class="w-full flex flex-col gap-3" id="accessibilitesDropDown">
@@ -971,7 +1142,7 @@
                             <div class="px-3">
                                 <p>Recent Status</p>
                             </div>
-    
+
                             <button
                                 class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer hidden sm:flex justify-center items-center shadow-md addStatusButton"
                                 data-modal-url="{% url 'addstatusmodal' %}">
@@ -980,7 +1151,7 @@
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                                 </svg>
                             </button>
-    
+
                             <button
                                 class="h-full rounded-tr-md px-4 bg-gray-300 text-secondosiblue text-[18px] outline-none border-none cursor-pointer flex sm:hidden justify-center items-center shadow-md addStatusButtonMobile"
                                 data-modal-url="{% url 'statusmobilemodal' %}">
@@ -1007,7 +1178,7 @@
                             </div>
                         </div>
                     </div>
-    
+
                     <div class="bg-white shadow-md rounded-md p-5">
                         <div class="w-full h-full flex flex-col justify-between items-center">
                             <div class="w-full flex justify-between items-center">
@@ -1020,7 +1191,7 @@
                             </div>
                         </div>
                     </div>
-    
+
                     <div class="bg-white shadow-md rounded-md p-5">
                         <div class="w-full h-full flex flex-col justify-between items-center">
                             <div class="w-full flex justify-between items-center">
@@ -1034,7 +1205,7 @@
                         </div>
                     </div>
                 </div>
-            </div>            
+            </div>
 
             <!-- NOTES SECTION -->
             <div class="w-full px-5 s:px-9 pb-5">
@@ -1210,7 +1381,7 @@
 
     <!---------------------- JS SCRIPTS -------------------->
 
-    
+
     <!-- ONLINE CONSUMER SCRIPT -->
     <script type="text/javascript" src='{% static "js/online/online-consumer.js" %}'></script>
 
@@ -1241,6 +1412,10 @@
 
     <!-- MODULES DROP DOWN ON MOBILE -->
     <script type="text/javascript" src='{% static "js/accessibilities-dropdown.js" %}'></script>
+
+    <script type="text/javascript" src='{% static "js/osichat/textarea.js" %}'></script>
+
+    <script type="text/javascript" src='{% static "js/osichat/chat-toggle.js" %}'></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/osinaweb/osinaweb/__pycache__/settings.cpython-312.pyc b/osinaweb/osinaweb/__pycache__/settings.cpython-312.pyc
index 905e06c4..b20a503e 100644
Binary files a/osinaweb/osinaweb/__pycache__/settings.cpython-312.pyc and b/osinaweb/osinaweb/__pycache__/settings.cpython-312.pyc differ
diff --git a/osinaweb/static/dist/output.css b/osinaweb/static/dist/output.css
index 4b0dc0ec..14ed6b22 100644
--- a/osinaweb/static/dist/output.css
+++ b/osinaweb/static/dist/output.css
@@ -738,6 +738,10 @@ video {
   top: -2.5rem;
 }
 
+.-top-11 {
+  top: -2.75rem;
+}
+
 .-top-12 {
   top: -3rem;
 }
@@ -746,6 +750,10 @@ video {
   top: -0.5rem;
 }
 
+.-top-5 {
+  top: -1.25rem;
+}
+
 .-top-\[54px\] {
   top: -54px;
 }
@@ -874,6 +882,14 @@ video {
   top: 14px;
 }
 
+.right-9 {
+  right: 2.25rem;
+}
+
+.bottom-20 {
+  bottom: 5rem;
+}
+
 .z-0 {
   z-index: 0;
 }
@@ -906,6 +922,10 @@ video {
   grid-column: span 2 / span 2;
 }
 
+.col-span-3 {
+  grid-column: span 3 / span 3;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -1339,8 +1359,16 @@ video {
   height: 100vh;
 }
 
-.max-h-\[430px\] {
-  max-height: 430px;
+.h-\[700px\] {
+  height: 700px;
+}
+
+.h-\[23px\] {
+  height: 23px;
+}
+
+.max-h-\[200px\] {
+  max-height: 200px;
 }
 
 .max-h-\[50px\] {
@@ -1351,6 +1379,10 @@ video {
   min-height: 200px;
 }
 
+.min-h-\[100\%\] {
+  min-height: 100%;
+}
+
 .w-0 {
   width: 0px;
 }
@@ -1572,6 +1604,18 @@ video {
   width: 100%;
 }
 
+.w-\[600px\] {
+  width: 600px;
+}
+
+.w-\[800px\] {
+  width: 800px;
+}
+
+.w-\[23px\] {
+  width: 23px;
+}
+
 .min-w-full {
   min-width: 100%;
 }
@@ -1666,6 +1710,22 @@ video {
   animation: blob 7s infinite;
 }
 
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-0.5rem);
+    animation-timing-function: cubic-bezier(0.8,0,1,1);
+  }
+
+  50% {
+    transform: translateY(0.5rem);
+    animation-timing-function: cubic-bezier(0,0,0.2,1);
+  }
+}
+
+.animate-bounce {
+  animation: bounce 3s infinite;
+}
+
 @keyframes bounceX {
   0%, 100% {
     transform: scale(1);
@@ -1682,6 +1742,16 @@ video {
   animation: bounceX 4s infinite;
 }
 
+@keyframes pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1692,6 +1762,24 @@ video {
   animation: spin 1s linear infinite;
 }
 
+@keyframes typing {
+  0% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-0.2rem);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+.animate-typing {
+  animation: typing 1s infinite;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -1855,6 +1943,18 @@ video {
   margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -1890,6 +1990,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
 .overflow-x-scroll {
   overflow-x: scroll;
 }
@@ -1916,6 +2020,14 @@ video {
   white-space: pre-wrap;
 }
 
+.whitespace-break-spaces {
+  white-space: break-spaces;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
 .break-all {
   word-break: break-all;
 }
@@ -1955,6 +2067,11 @@ video {
   border-end-end-radius: 0.375rem;
 }
 
+.rounded-l-3xl {
+  border-top-left-radius: 1.5rem;
+  border-bottom-left-radius: 1.5rem;
+}
+
 .rounded-l-full {
   border-top-left-radius: 9999px;
   border-bottom-left-radius: 9999px;
@@ -2005,11 +2122,6 @@ video {
   border-top-right-radius: 0px;
 }
 
-.rounded-l-3xl {
-  border-top-left-radius: 1.5rem;
-  border-bottom-left-radius: 1.5rem;
-}
-
 .rounded-bl-lg {
   border-bottom-left-radius: 0.5rem;
 }
@@ -2046,6 +2158,10 @@ video {
   border-top-left-radius: 0px;
 }
 
+.rounded-tr-3xl {
+  border-top-right-radius: 1.5rem;
+}
+
 .rounded-tr-full {
   border-top-right-radius: 9999px;
 }
@@ -2058,10 +2174,6 @@ video {
   border-top-right-radius: 0px;
 }
 
-.rounded-tr-3xl {
-  border-top-right-radius: 1.5rem;
-}
-
 .border {
   border-width: 1px;
 }
@@ -2422,6 +2534,16 @@ video {
   background-color: rgb(20 83 45 / var(--tw-bg-opacity));
 }
 
+.bg-lime-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(163 230 53 / var(--tw-bg-opacity));
+}
+
+.bg-lime-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
+}
+
 .bg-orange-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(249 115 22 / var(--tw-bg-opacity));
@@ -2551,16 +2673,6 @@ video {
   background-color: rgb(202 138 4 / var(--tw-bg-opacity));
 }
 
-.bg-lime-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
-}
-
-.bg-lime-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 230 53 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-10 {
   --tw-bg-opacity: 0.1;
 }
@@ -2905,10 +3017,18 @@ video {
   padding-left: 2.75rem;
 }
 
+.pl-2 {
+  padding-left: 0.5rem;
+}
+
 .pl-20 {
   padding-left: 5rem;
 }
 
+.pl-3 {
+  padding-left: 0.75rem;
+}
+
 .pl-5 {
   padding-left: 1.25rem;
 }
@@ -2917,6 +3037,18 @@ video {
   padding-left: 1.5rem;
 }
 
+.pr-10 {
+  padding-right: 2.5rem;
+}
+
+.pr-14 {
+  padding-right: 3.5rem;
+}
+
+.pr-16 {
+  padding-right: 4rem;
+}
+
 .pr-20 {
   padding-right: 5rem;
 }
@@ -3052,6 +3184,10 @@ video {
   line-height: 1rem;
 }
 
+.text-\[10px\] {
+  font-size: 10px;
+}
+
 .font-bold {
   font-weight: 700;
 }
@@ -3084,6 +3220,10 @@ video {
   font-style: italic;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
@@ -3276,6 +3416,10 @@ video {
   opacity: 0.8;
 }
 
+.opacity-90 {
+  opacity: 0.9;
+}
+
 .mix-blend-multiply {
   mix-blend-mode: multiply;
 }
@@ -3323,6 +3467,11 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.invert {
+  --tw-invert: invert(100%);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -3377,6 +3526,10 @@ video {
   background: #5a5a5a00;
 }
 
+#dynamicTextarea::-webkit-scrollbar {
+  width: 0px !important;
+}
+
 .rtl {
   direction: rtl;
 }
@@ -3885,6 +4038,12 @@ video {
   text-decoration-line: underline;
 }
 
+.hover\:shadow-2xl:hover {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
diff --git a/osinaweb/static/js/.DS_Store b/osinaweb/static/js/.DS_Store
index 2189b430..743eba21 100644
Binary files a/osinaweb/static/js/.DS_Store and b/osinaweb/static/js/.DS_Store differ
diff --git a/osinaweb/static/js/osichat/chat-toggle.js b/osinaweb/static/js/osichat/chat-toggle.js
index 61b2cc42..64d625e6 100644
--- a/osinaweb/static/js/osichat/chat-toggle.js
+++ b/osinaweb/static/js/osichat/chat-toggle.js
@@ -3,10 +3,17 @@ const openChatButton = document.getElementById('openChatContainer');
 const chatContainer = document.getElementById('chatContainer');
 const closeChatButton = document.getElementById('closeChatContainer');
 
+
+const conversation = document.getElementById('conversation');
+function scrollToBottom() {
+    conversation.scrollTop = conversation.scrollHeight;
+}
+
 openChatButton.addEventListener('click', function () {
     chatContainer.classList.remove('hidden');
     openChatButton.classList.add('hidden');
     closeChatButton.classList.remove('hidden');
+    scrollToBottom();
 });
 
 closeChatButton.addEventListener('click', function () {
diff --git a/osinaweb/static/js/osichat/conversation.js b/osinaweb/static/js/osichat/conversation.js
index 08ae3b92..ed60c9f0 100644
--- a/osinaweb/static/js/osichat/conversation.js
+++ b/osinaweb/static/js/osichat/conversation.js
@@ -1,12 +1,12 @@
 const chat_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const domain = "192.168.1.106:8000";
+const domain = "192.168.1.111:3000";
 console.log('hi')
 // Function to fetch session ID
 
 
 async function fetchSessionID() {
     try {
-        const response = await fetch('http://192.168.1.106:3000/get-client-session/'); 
+        const response = await fetch('http://192.168.1.111:8000/get-client-session/'); 
         const data = await response.json();
         return data.session_id;
     } catch (error) {
@@ -38,6 +38,8 @@ async function initializeChatWebSocket() {
             script.src = `http://${domain}/static/js/osichat/chat-toggle.js`;
             chatDiv.appendChild(script);
 
+
+
             const startChatContainer = document.getElementById('startChat');
             // If this container exists then the template returned was start-conversation.html, no conversation yet.
             if (startChatContainer) {
@@ -60,7 +62,13 @@ async function initializeChatWebSocket() {
             }
 
             const sendMessageContainer = document.getElementById('sendMessage');
+
             if (sendMessageContainer) {
+                const textareaScript = document.createElement('script');
+                textareaScript.type = 'text/javascript';
+                textareaScript.src = `http://${domain}/static/js/osichat/textarea.js`;
+                chatDiv.appendChild(textareaScript);
+
                 sendMessageContainer.addEventListener('submit', function (event) {
                     event.preventDefault();
 
@@ -98,7 +106,4 @@ async function initializeChatWebSocket() {
     };
 }
 
-
-document.addEventListener('DOMContentLoaded', () => {
-    initializeChatWebSocket();
-});
+initializeChatWebSocket();
diff --git a/osinaweb/static/js/osichat/textarea.js b/osinaweb/static/js/osichat/textarea.js
new file mode 100644
index 00000000..0ec85f34
--- /dev/null
+++ b/osinaweb/static/js/osichat/textarea.js
@@ -0,0 +1,27 @@
+function adjustTextHeight(textarea) {
+    // MAKE THE TEXTAREA'S HEIGHT ADJUSTABLE
+    if (textarea.value.trim() === '') {
+        textarea.style.height = '50px';
+    } else {
+        textarea.style.height = textarea.scrollHeight + 'px';
+    }
+
+    // DISPLAY AND HIDE THE SUBMIT BUTTON
+    const submitButton = document.querySelector('#sendMessage button[type="submit"]');
+    if (textarea.value.trim() === '') {
+        submitButton.classList.add('hidden');
+    } else {
+        submitButton.classList.remove('hidden');
+    }
+}
+
+const form = document.querySelector('#sendMessage');
+const textarea = document.querySelector('#dynamicTextarea');
+const conversationContainer = document.getElementById('conversation');
+
+form.addEventListener('submit', (event) => {
+    textarea.style.height = '50px';
+    setTimeout(() => {
+        conversationContainer.scrollTop = conversationContainer.scrollHeight;
+    }, 100); 
+});
\ No newline at end of file
diff --git a/osinaweb/static/js/osichat/visitors.js b/osinaweb/static/js/osichat/visitors.js
index 0f57261b..1dc84929 100644
--- a/osinaweb/static/js/osichat/visitors.js
+++ b/osinaweb/static/js/osichat/visitors.js
@@ -1,26 +1,26 @@
 const visitors_ws_scheme = window.location.protocol === "https:" ? "wss" : "ws";
-const my_domain = "192.168.1.106:8000";
+const my_domain = "192.168.1.111:3000";
 
 async function fetchClientData() {
     try {
-        const response = await fetch('https://osina.ositcom.com/get-client-ip/');
+        const response = await fetch('http://192.168.1.111:3000/get-client-ip/');
         const data = await response.json();
         return {
             client_ip: data.ip,
             client_country: data.country
         };
-        } catch (error) {
-            console.error('Error fetching client data:', error);
-            return {
-                client_ip: 'Unknown',
-                client_country: 'Unknown'
-            };
-        }
+    } catch (error) {
+        console.error('Error fetching client data:', error);
+        return {
+            client_ip: 'Unknown',
+            client_country: 'Unknown'
+        };
+    }
 }
 
-async function fetchSessionID() {
+async function fetchVisitorsSession() {
     try {
-        const response = await fetch('http://192.168.1.106:3000/get-client-session/');
+        const response = await fetch('http://192.168.1.111:8000/get-client-session/');
         const data = await response.json();
         return data.session_id;
     } catch (error) {
@@ -34,7 +34,7 @@ async function initializeVisitorsWebSocket() {
 
     const referrer = document.referrer;
     const clientData = await fetchClientData();
-    const session_id = await fetchSessionID();
+    const session_id = await fetchVisitorsSession();
     const visitorsSocketUrl = `${visitors_ws_scheme}://${my_domain}/ws/osichat/visitors/`;
     const visitorsSocket = new WebSocket(visitorsSocketUrl);
 
@@ -50,17 +50,16 @@ async function initializeVisitorsWebSocket() {
             'session_id': session_id
         };
         visitorsSocket.send(JSON.stringify(event_message));
-        };
+    };
 
-        visitorsSocket.onclose = () => {
-            console.log('WebSocket connection to visitors closed');
-        };
+    visitorsSocket.onclose = () => {
+        console.log('WebSocket connection to visitors closed');
+    };
+
+    visitorsSocket.onerror = (error) => {
+        console.error('WebSocket error:', error);
+    };
+}
 
-        visitorsSocket.onerror = (error) => {
-            console.error('WebSocket error:', error);
-        };
-    }
 
-    document.addEventListener('DOMContentLoaded', async () => {
-        initializeVisitorsWebSocket();
-    });
\ No newline at end of file
+initializeVisitorsWebSocket();
\ No newline at end of file
diff --git a/osinaweb/tailwind.config.js b/osinaweb/tailwind.config.js
index b21595d6..bbcf4a2d 100644
--- a/osinaweb/tailwind.config.js
+++ b/osinaweb/tailwind.config.js
@@ -43,6 +43,7 @@ module.exports = {
           '0%, 100%': { transform: 'translateY(-0.5rem)' },
           '50%': { transform: 'translateY(0.5rem)' },
         },
+
         bounceX: {
           '0%, 100%': {
             transform: 'scale(1)',
@@ -53,6 +54,7 @@ module.exports = {
             opacity: 1,
           },
         },
+
         blob: {
           "0%": {
             transform: "translate(0px, 0px) scale(1)",
@@ -67,11 +69,18 @@ module.exports = {
             transform: "tranlate(0px, 0px) scale(1)",
           },
         },
+
+        typing: {
+          '0%': { transform: 'translateY(0)' },
+          '50%': { transform: 'translateY(-0.2rem)' },
+          '100%': { transform: 'translateY(0)' },
+        },
       },
       animation: {
         bounce: 'bounce 3s infinite',
         bouncePop: 'bounceX 4s infinite',
         blob: "blob 7s infinite",
+        typing: 'typing 1s infinite',
       },
     },
   },