diff --git a/index.html b/index.html
index 2c243788..a7f3a9d1 100644
--- a/index.html
+++ b/index.html
@@ -135,7 +135,15 @@ <h4>Community</h4>
         </div>
       </div>
     </footer>
-    <!-- footer code ends -->
+    <div class="chat-container">
+  <div class="chat-box" id="chat-box">
+    <div class="chat-message bot">Hi! I'm your chatbot. Ask me anything!</div>
+  </div>
+  <div class="input-box">
+    <input type="text" id="user-input" placeholder="Type your message...">
+    <button onclick="sendMessage()">Send</button>
+  </div>
+</div>
 
 
 
diff --git a/styles.css b/styles.css
index 15a5b637..3e54dc79 100644
--- a/styles.css
+++ b/styles.css
@@ -695,3 +695,49 @@ a {
   background-color: skyblue;
 }
 
+  }
+}
+.chat-container {
+      width: 400px;
+      margin: 50px auto;
+      background: #dae6d7;
+      right: 40px;
+      bottom: 5px;
+      position: fixed;
+      border-radius: 10px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
+      overflow: hidden;
+    }
+    .chat-box {
+      max-height: 400px;
+      overflow-y: auto;
+      padding: 20px;
+      border-bottom: 1px solid #ccc;
+    }
+    .chat-message {
+      margin-bottom: 10px;
+    }
+    .chat-message.user {
+      text-align: right;
+      color: blue;
+    }
+    .chat-message.bot {
+      text-align: left;
+      color: black;
+    }
+    .input-box {
+      display: flex;
+      padding: 10px;
+    }
+    .input-box input {
+      flex: 1;
+      padding: 10px;
+      font-size: 16px;
+    }
+    .input-box button {
+      padding: 10px 20px;
+      background: #007bff;
+      color: white;
+      border: none;
+      cursor: pointer;
+    }