diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index e8a9f24..c97efc5 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,115 +1,105 @@
-import { FC, InputHTMLAttributes, useEffect, useState } from 'react'
-import { clx } from '../helpers/utils';
-import EyeIcon from '../assets/images/eye.svg'
-import { SearchNormal } from 'iconsax-react';
-import Error from './Error';
+import { SearchNormal } from "iconsax-react";
+import { FC, InputHTMLAttributes, useEffect, useState } from "react";
+import EyeIcon from "../assets/images/eye.svg";
+import { clx } from "../helpers/utils";
+import Error from "./Error";
 
 type Variant = "floating_outlined" | "primary" | "search";
 
 type Props = {
-    label?: string;
-    className?: string;
-    variant?: Variant;
-    error_text?: string;
-    onEnter?: () => void;
-    unit?: string;
-    seprator?: boolean;
-    isNotRequired?: boolean;
-    onChangeSearchFinal?: (value: string) => void;
-} & InputHTMLAttributes<HTMLInputElement>
+  label?: string;
+  className?: string;
+  variant?: Variant;
+  error_text?: string;
+  onEnter?: () => void;
+  unit?: string;
+  seprator?: boolean;
+  isNotRequired?: boolean;
+  onChangeSearchFinal?: (value: string) => void;
+  labelClassName?: string;
+} & InputHTMLAttributes<HTMLInputElement>;
 
 const formatNumber = (value: string | number): string => {
-    if (!value) return '';
-    const inputValue = String(value).replace(/,/g, '');
-    return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  if (!value) return "";
+  const inputValue = String(value).replace(/,/g, "");
+  return inputValue.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
 };
 
 const Input: FC<Props> = (props: Props) => {
+  const [formattedValue, setFormattedValue] = useState<string>(props.value ? formatNumber(props.value as string) : "");
 
-    const [formattedValue, setFormattedValue] = useState<string>(
-        props.value ? formatNumber(props.value as string) : ''
-    );
+  const [showPassword, setShowPassword] = useState<boolean>(false);
+  const [search, setSearch] = useState<string>("");
 
-    const [showPassword, setShowPassword] = useState<boolean>(false)
-    const [search, setSearch] = useState<string>('')
+  const inputClass = clx(
+    "w-full h-10 text-black block px-4 text-xs rounded-xl border border-border",
+    props.readOnly && "bg-gray-100 border-0 text-description",
+    props.variant === "search" && "bg-[#EEF0F7] border-0 ps-10",
+    props.className,
+  );
 
-    const inputClass = clx(
-        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
-        props.readOnly && 'bg-gray-100 border-0 text-description',
-        props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
-        props.className
-    );
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.seprator) {
+      const inputValue = event.target.value.replace(/,/g, ""); // حذف کاماها
+      const formatted = formatNumber(inputValue);
 
-    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-        if (props.seprator) {
-            const inputValue = event.target.value.replace(/,/g, ''); // حذف کاماها
-            const formatted = formatNumber(inputValue);
+      // به‌روزرسانی مقدار قالب‌بندی‌شده
+      setFormattedValue(formatted);
 
-            // به‌روزرسانی مقدار قالب‌بندی‌شده
-            setFormattedValue(formatted);
+      // ارسال مقدار خام به `onChange` والد
+      props.onChange?.({
+        ...event,
+        target: {
+          ...event.target,
+          value: inputValue,
+        },
+      });
+    } else {
+      props.onChange?.(event);
+    }
+  };
 
-            // ارسال مقدار خام به `onChange` والد
-            props.onChange?.({
-                ...event,
-                target: {
-                    ...event.target,
-                    value: inputValue,
-                },
-            });
-        } else {
-            props.onChange?.(event);
-        }
-    };
+  useEffect(() => {
+    if (props.value) {
+      setFormattedValue(formatNumber(props.value as string));
+    } else {
+      setFormattedValue("");
+    }
+  }, [props.value]);
 
-    useEffect(() => {
-        if (props.value) {
-            setFormattedValue(formatNumber(props.value as string));
-        } else {
-            setFormattedValue('');
-        }
-    }, [props.value])
+  useEffect(() => {
+    if (props.variant === "search" && props.onChangeSearchFinal) {
+      const timeout = setTimeout(() => {
+        props.onChangeSearchFinal?.(search);
+      }, 1000);
+      return () => clearTimeout(timeout);
+    }
+  }, [search, props]);
 
-    useEffect(() => {
-        if (props.variant === 'search' && props.onChangeSearchFinal) {
-            const timeout = setTimeout(() => {
-                props.onChangeSearchFinal?.(search)
-            }, 1000)
-            return () => clearTimeout(timeout)
-        }
-    }, [search, props])
+  return (
+    <div className="w-full">
+      <label className={clx("text-sm", props.labelClassName)}>{props.label}</label>
 
+      <div className="w-full relative mt-1">
+        <input
+          {...props}
+          onChange={(e) => {
+            setSearch(e.target.value);
+            handleInputChange(e);
+          }}
+          value={props.seprator ? formattedValue : props.value}
+          type={props.type === "password" && showPassword ? "text" : props.type === "password" ? "password" : undefined}
+          className={inputClass}
+        />
 
-    return (
-        <div className='w-full'>
-            <label className='text-sm'>
-                {props.label}
-            </label>
+        {props.type === "password" && <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className="w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3" />}
 
-            <div className='w-full relative mt-1'>
-                <input {...props} onChange={(e) => {
-                    setSearch(e.target.value)
-                    handleInputChange(e)
-                }} value={props.seprator ? formattedValue : props.value} type={props.type === 'password' && showPassword ? 'text' : props.type === 'password' ? 'password' : undefined} className={inputClass} />
+        {props.variant === "search" && <SearchNormal size={20} color="#8C90A3" className="absolute top-0 w-5 bottom-0 my-auto right-3" />}
 
-                {
-                    props.type === 'password' &&
-                    <img onClick={() => setShowPassword((oldValue) => !oldValue)} src={EyeIcon} className='w-5 absolute top-0 bottom-0 cursor-pointer my-auto left-3' />
-                }
+        {props.error_text && <Error errorText={props.error_text} />}
+      </div>
+    </div>
+  );
+};
 
-                {
-                    props.variant === 'search' &&
-                    <SearchNormal size={20} color='#8C90A3' className='absolute top-0 w-5 bottom-0 my-auto right-3' />
-                }
-
-                {
-                    props.error_text &&
-                    <Error
-                        errorText={props.error_text}
-                    />
-                }
-            </div>
-        </div>
-    )
-}
-
-export default Input
\ No newline at end of file
+export default Input;
diff --git a/src/langs/fa.json b/src/langs/fa.json
index d5e7577..7da556d 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -1000,7 +1000,8 @@
       "description_placeholder": "توضیحات خود را اضافه کنید",
       "new_label": "برچسب جدید",
       "label_title": "عنوان",
-      "choose_custom_color": "انتخاب رنگ دلخواه"
+      "choose_custom_color": "انتخاب رنگ دلخواه",
+      "members": "اعضا"
     }
   }
 }
diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
index 6adf460..e4b5df5 100644
--- a/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
+++ b/src/pages/taskmanager/components/task-detail/TaskDetailActionBar.tsx
@@ -21,9 +21,10 @@ type Props = {
   activeTab: TaskDetailTab | null;
   onTabChange: (tab: TaskDetailTab) => void;
   labelsPopover?: ReactNode;
+  usersPopover?: ReactNode;
 };
 
-const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover }) => {
+const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover, usersPopover }) => {
   const { t } = useTranslation("global");
 
   return (
@@ -42,11 +43,11 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover
           </button>
         );
 
-        if (id === "labels") {
+        if (id === "labels" || id === "users") {
           return (
             <div key={id} className="relative">
               {button}
-              {labelsPopover}
+              {id === "labels" ? labelsPopover : usersPopover}
             </div>
           );
         }
diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
index 4e60392..474b08e 100644
--- a/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
+++ b/src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx
@@ -3,12 +3,14 @@ import { type FC } from "react";
 import { useTranslation } from "react-i18next";
 import AvatarImage from "../../../../assets/images/avatar_image.png";
 import type { TaskLabel } from "./labels/types";
+import type { TaskUser } from "./users/types";
 
 type Props = {
   selectedLabels: TaskLabel[];
+  selectedUsers: TaskUser[];
 };
 
-const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers }) => {
   const { t } = useTranslation("global");
 
   return (
@@ -37,10 +39,12 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels }) => {
 
       <div>
         <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
-        <div className="flex items-center gap-2">
-          <div className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
-            <img src={AvatarImage} alt="" className="size-full object-cover" />
-          </div>
+        <div className="flex items-center gap-2 flex-wrap">
+          {selectedUsers.map((user) => (
+            <div key={user.id} className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden">
+              <img src={user.avatar ?? AvatarImage} alt={user.name} className="size-full object-cover" />
+            </div>
+          ))}
           <button
             type="button"
             className="size-7 rounded-full border border-[#D0D0D0] bg-white/60 flex items-center justify-center cursor-pointer"
diff --git a/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx b/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx
index 4456d3e..1c712a9 100644
--- a/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx
+++ b/src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx
@@ -5,6 +5,8 @@ import type { LabelsView, TaskLabel } from "./labels/types";
 import TaskDetailActionBar from "./TaskDetailActionBar";
 import TaskDetailMetadataPreview from "./TaskDetailMetadataPreview";
 import type { TaskDetailTab } from "./types";
+import { DEFAULT_USERS } from "./users/constants";
+import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
 
 type Props = {
   activeTab: TaskDetailTab | null;
@@ -14,10 +16,13 @@ type Props = {
 const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>(DEFAULT_LABELS);
-  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set(["1"]));
+  const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set(["1"]));
+  const [selectedUserIds, setSelectedUserIds] = useState<Set<string>>(new Set(["1"]));
 
-  const selectedLabels = labels.filter((label) => selectedIds.has(label.id));
+  const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
+  const selectedUsers = DEFAULT_USERS.filter((user) => selectedUserIds.has(user.id));
   const isLabelsOpen = activeTab === "labels";
+  const isUsersOpen = activeTab === "users";
 
   const handleTabChange = (tab: TaskDetailTab) => {
     if (tab === "labels" && activeTab !== "labels") {
@@ -26,8 +31,20 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
     onTabChange(tab);
   };
 
-  const handleToggle = (id: string) => {
-    setSelectedIds((prev) => {
+  const handleLabelToggle = (id: string) => {
+    setSelectedLabelIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleUserToggle = (id: string) => {
+    setSelectedUserIds((prev) => {
       const next = new Set(prev);
       if (next.has(id)) {
         next.delete(id);
@@ -45,7 +62,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
       color,
     };
     setLabels((prev) => [...prev, newLabel]);
-    setSelectedIds((prev) => new Set([...prev, newLabel.id]));
+    setSelectedLabelIds((prev) => new Set([...prev, newLabel.id]));
     setLabelsView("list");
   };
 
@@ -55,11 +72,25 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange }) => {
         activeTab={activeTab}
         onTabChange={handleTabChange}
         labelsPopover={
-          isLabelsOpen ? <TaskDetailLabelsPopover view={labelsView} labels={labels} selectedIds={selectedIds} onViewChange={setLabelsView} onToggle={handleToggle} onCreate={handleCreate} /> : null
+          isLabelsOpen ? (
+            <TaskDetailLabelsPopover
+              view={labelsView}
+              labels={labels}
+              selectedIds={selectedLabelIds}
+              onViewChange={setLabelsView}
+              onToggle={handleLabelToggle}
+              onCreate={handleCreate}
+            />
+          ) : null
+        }
+        usersPopover={
+          isUsersOpen ? (
+            <TaskDetailUsersPopover users={DEFAULT_USERS} selectedIds={selectedUserIds} onToggle={handleUserToggle} />
+          ) : null
         }
       />
 
-      <TaskDetailMetadataPreview selectedLabels={selectedLabels} />
+      <TaskDetailMetadataPreview selectedLabels={selectedLabels} selectedUsers={selectedUsers} />
     </div>
   );
 };
diff --git a/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx b/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx
new file mode 100644
index 0000000..8a4ee16
--- /dev/null
+++ b/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx
@@ -0,0 +1,48 @@
+import { type FC, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
+import Input from "../../../../../components/Input";
+import type { TaskUser } from "./types";
+
+type Props = {
+  users: TaskUser[];
+  selectedIds: Set<string>;
+  onToggle: (id: string) => void;
+};
+
+const TaskDetailUsersList: FC<Props> = ({ users }) => {
+  const { t } = useTranslation("global");
+  const [search, setSearch] = useState("");
+
+  const filteredUsers = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return users;
+    return users.filter((user) => user.name.toLowerCase().includes(query));
+  }, [users, search]);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div>
+        <h3 className="text-xs font-bold text-center">{t("taskmanager.users")}</h3>
+      </div>
+
+      <Input label={t("search")} value={search} onChange={(e) => setSearch(e.target.value)} className="h-8 bg-white/63 border-white" labelClassName="text-xs" />
+
+      <div>
+        <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.members")}</div>
+
+        <div className="flex flex-col gap-2">
+          {filteredUsers.map((user) => {
+            return (
+              <div key={user.id} className="flex gap-1.5 items-center">
+                <div className="size-6 rounded-full bg-gray-400"></div>
+                <div className="text-[10px]">{user.name}</div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskDetailUsersList;
diff --git a/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersPopover.tsx b/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersPopover.tsx
new file mode 100644
index 0000000..84c8b2e
--- /dev/null
+++ b/src/pages/taskmanager/components/task-detail/users/TaskDetailUsersPopover.tsx
@@ -0,0 +1,19 @@
+import { type FC } from "react";
+import TaskDetailUsersList from "./TaskDetailUsersList";
+import type { TaskUser } from "./types";
+
+type Props = {
+  users: TaskUser[];
+  selectedIds: Set<string>;
+  onToggle: (id: string) => void;
+};
+
+const TaskDetailUsersPopover: FC<Props> = ({ users, selectedIds, onToggle }) => {
+  return (
+    <div className="absolute top-full right-0 mt-2 z-30 w-[300px] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80">
+      <TaskDetailUsersList users={users} selectedIds={selectedIds} onToggle={onToggle} />
+    </div>
+  );
+};
+
+export default TaskDetailUsersPopover;
diff --git a/src/pages/taskmanager/components/task-detail/users/constants.ts b/src/pages/taskmanager/components/task-detail/users/constants.ts
new file mode 100644
index 0000000..c2b1253
--- /dev/null
+++ b/src/pages/taskmanager/components/task-detail/users/constants.ts
@@ -0,0 +1,6 @@
+import type { TaskUser } from "./types";
+
+export const DEFAULT_USERS: TaskUser[] = [
+  { id: "1", name: "فروغ براتی" },
+  { id: "2", name: "پارسا مهرزاد" },
+];
diff --git a/src/pages/taskmanager/components/task-detail/users/types.ts b/src/pages/taskmanager/components/task-detail/users/types.ts
new file mode 100644
index 0000000..507fda6
--- /dev/null
+++ b/src/pages/taskmanager/components/task-detail/users/types.ts
@@ -0,0 +1,5 @@
+export type TaskUser = {
+  id: string;
+  name: string;
+  avatar?: string;
+};