diff --git a/frontend/code/package-lock.json b/frontend/code/package-lock.json
index 0362ad5..f5a6bb3 100644
--- a/frontend/code/package-lock.json
+++ b/frontend/code/package-lock.json
@@ -16,6 +16,7 @@
         "@types/react": "^18.2.15",
         "@types/react-dom": "^18.2.7",
         "axios": "^1.5.0",
+        "preline": "^1.9.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.46.1",
@@ -3044,6 +3045,15 @@
         }
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@remix-run/router": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
@@ -12464,6 +12474,14 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
+    "node_modules/preline": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/preline/-/preline-1.9.0.tgz",
+      "integrity": "sha512-zvOexsDBood9gBAQYSwz7iY8TaomtRD0/qxvCnJl3caq5pif6frl8Oe4b4DsxHHD3Clzl4I5RmVKTq9XjMvNJA==",
+      "dependencies": {
+        "@popperjs/core": "^2.11.2"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
diff --git a/frontend/code/package.json b/frontend/code/package.json
index 91569a4..4e0aeb8 100644
--- a/frontend/code/package.json
+++ b/frontend/code/package.json
@@ -11,6 +11,7 @@
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "axios": "^1.5.0",
+    "preline": "^1.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.46.1",
diff --git a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx
index 2489015..ce8bb65 100644
--- a/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx
+++ b/frontend/code/src/Components/Chat/Components/MessageHelpers.tsx
@@ -8,11 +8,11 @@ import {
   yas3,
   yas4,
   SearchIcon,
-  EditIcon,
-  More,
+  // EditIcon,
+  // More,
   Send,
-  Close,
-  Bio,
+  // Close,
+  // Bio,
   GroupChat,
   check,
   MessageDummy,
@@ -129,6 +129,11 @@ export const ChatPlaceHolder = ({
 
 export const OnlineNowUsers = () => {
   const [Users] = useState(MessageDummy);
+  const [selectedOption, setSelectedOption] = useState("Public"); // Initialize with a default value
+
+  const handleOptionChange = (e: any) => {
+    setSelectedOption(e.target.value);
+  };
   return (
     <>
       <div className="online-now-container    pt-5 pl-5 pb-2 pr-3 bg-[#1A1C26]">
@@ -162,6 +167,55 @@ export const OnlineNowUsers = () => {
                       />
                     </div>
                   </div>
+
+                  <div className="flex flex-row form-control justify-around">
+                    <label className="label cursor-pointer ">
+                      <span className="label-text pr-2">Public</span>
+                      <input
+                        type="radio"
+                        name="radio-10"
+                        value="Public"
+                        className="radio checked:bg-purple-500"
+                        checked={selectedOption === "Public"}
+                        onChange={handleOptionChange}
+                      />
+                    </label>
+                    <label className="label cursor-pointer">
+                      <span className="label-text pr-2">Private</span>
+                      <input
+                        type="radio"
+                        name="radio-10"
+                        value="Private"
+                        className="radio checked:bg-red-500"
+                        checked={selectedOption === "Private"}
+                        onChange={handleOptionChange}
+                      />
+                    </label>
+                    <label className="label cursor-pointer">
+                      <span className="label-text pr-2">Protected</span>
+                      <input
+                        type="radio"
+                        name="radio-10"
+                        value="Protected"
+                        className="radio checked:bg-orange-500"
+                        checked={selectedOption === "Protected"}
+                        onChange={handleOptionChange}
+                      />
+                    </label>
+                  </div>
+
+                  {/* Conditionally render the text input */}
+                  {selectedOption === "Protected" && (
+                    <div className="flex flex-row p-3">
+                      <div className="flex flex-row w-full justify-center pt-2">
+                        <p>Group Password</p>
+                        <input
+                          type="Password"
+                          className="input w-full shadow-xl max-w-lg bg-[#272932] placeholder:text-gray-400 font-poppins text-base font-normal leading-normal"
+                        />
+                      </div>
+                    </div>
+                  )}
                   <p className="p-2">Select To Add Friends</p>
 
                   {/* Scrollable part */}
@@ -180,8 +234,10 @@ export const OnlineNowUsers = () => {
                   </div>
 
                   <div className="modal-action">
-                    <a href="#" className="btn hover:bg-green-700">
-                      Done!
+                    {
+                      // eslint-disable-next-line
+                    }<a href="#" className="btn hover:bg-purple-500">
+                      {" "}
                     </a>
                   </div>
                 </div>
diff --git a/frontend/code/src/Components/Chat/index.tsx b/frontend/code/src/Components/Chat/index.tsx
index aab8f84..7d7dda8 100644
--- a/frontend/code/src/Components/Chat/index.tsx
+++ b/frontend/code/src/Components/Chat/index.tsx
@@ -1,17 +1,17 @@
 import {
-  UserImage,
   yas,
-  yas1,
-  yas2,
-  yas3,
-  yas4,
-  SearchIcon,
-  EditIcon,
+  // UserImage,
+  // yas1,
+  // yas2,
+  // yas3,
+  // yas4,
+  // SearchIcon,
+  // EditIcon,
+  // GroupChat,
   More,
   Send,
   Close,
   Bio,
-  GroupChat,
 } from "./Components/tools/Assets";
 import { useState } from "react";
 import {
diff --git a/frontend/code/tailwind.config.js b/frontend/code/tailwind.config.js
index 2586fe9..c910c62 100644
--- a/frontend/code/tailwind.config.js
+++ b/frontend/code/tailwind.config.js
@@ -4,6 +4,7 @@ module.exports = {
     "./src/**/*.{js,jsx,ts,tsx}",
     "./src/**/**/*.{js,jsx,ts,tsx}",
     "./src/**/**/**/*.{js,jsx,ts,tsx}",
+    
   ],
   theme: {
     extend: {
@@ -25,7 +26,10 @@ module.exports = {
     },
   },
  
-  plugins: [require("daisyui")],
+  plugins: [
+    require("daisyui"),
+    require('preline/plugin'),
+],
   daisyui: {
     themes: [
       {