diff --git a/src/components/TrackerBoardHead/TrackerBoardHead.jsx b/src/components/TrackerBoardHead/TrackerBoardHead.jsx
new file mode 100644
index 00000000..e676acf4
--- /dev/null
+++ b/src/components/TrackerBoardHead/TrackerBoardHead.jsx
@@ -0,0 +1,303 @@
+import React, { useState } from "react";
+import { HexColorPicker } from "react-colorful";
+import { useDispatch } from "react-redux";
+
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+import ListEmployees from "@components/Modal/Tracker/ListEmployees/ListEmployees";
+
+import "./trackerBoardHead.scss";
+
+const TrackerBoardHead = ({ setModalAdd }) => {
+  const dispatch = useDispatch();
+  const [personListOpen, setPersonListOpen] = useState(false);
+
+  return (
+    <div className="tasks__head">
+      <div className="tasks__head__wrapper">
+        <div className="tasks__head__title">
+          <img src={category}></img>
+          <h5>{projectBoard.name}</h5>
+        </div>
+        <div className="tasks__head__add">
+          <BaseButton
+            onClick={() => {
+              dispatch(modalToggle("create-column"));
+              setModalAdd(true);
+            }}
+            styles={"button-add-column"}
+          >
+            +
+          </BaseButton>
+
+          <p>добавить колонку</p>
+        </div>
+        <div
+          className={
+            projectBoard.projectUsers?.length
+              ? "tasks__head__persons"
+              : "tasks__head__persons no-project-users"
+          }
+        >
+          {Boolean(projectBoard.projectUsers?.length) && (
+            <div
+              className={
+                projectBoard.projectUsers?.length == 1
+                  ? "one-person"
+                  : "project-persons"
+              }
+            >
+              {projectBoard.projectUsers.slice(0, 3).map((person) => {
+                return (
+                  <img
+                    key={person.user_id}
+                    src={
+                      person.user?.avatar
+                        ? urlForLocal(person.user.avatar)
+                        : avatarMok
+                    }
+                    alt="avatar"
+                  />
+                );
+              })}
+            </div>
+          )}
+          {projectBoard.projectUsers?.length > 3 && (
+            <span className="count-persons">
+              +{projectBoard.projectUsers?.length - 3}
+            </span>
+          )}
+          <span
+            className="add-person"
+            onClick={() => {
+              setPersonListOpen(true);
+            }}
+          >
+            +
+          </span>
+
+          <ListEmployees
+            active={personListOpen}
+            setActiveListEmpl={setPersonListOpen}
+            setModalAdd={setModalAdd}
+            projectBoard={projectBoard}
+          />
+        </div>
+        <div className="tasks__head__checkBox" onClick={filterParticipateTasks}>
+          <span>Участвую</span>
+          <div className="tasks__head__checkBox__box">
+            {checkBoxParticipateTasks && <img src={accept} alt="accept" />}
+          </div>
+        </div>
+        <div className="tasks__head__checkBox" onClick={filterMyTask}>
+          <span>Мои</span>
+          <div className="tasks__head__checkBox__box">
+            {checkBoxMyTasks && <img src={accept} alt="accept" />}
+          </div>
+        </div>
+        {selectedExecutor ? (
+          <div className="tasks__head__executor-selected">
+            <p>{removeLast(selectedExecutor.user.fio)}</p>
+            <img
+              className="avatar"
+              src={
+                selectedExecutor.user?.avatar
+                  ? urlForLocal(selectedExecutor.user.avatar)
+                  : avatarMok
+              }
+              alt="avatar"
+            />
+            <img
+              className="delete"
+              src={close}
+              alt="delete"
+              onClick={deleteSelectedExecutorFilter}
+            />
+          </div>
+        ) : (
+          <div
+            className="tasks__head__executor"
+            onClick={() => setSelectedExecutorOpen(!selectExecutorOpen)}
+          >
+            <p>Выберите исполнителя</p>
+            <img
+              className={selectExecutorOpen ? "open" : ""}
+              src={arrowDown}
+              alt="arrow"
+            />
+            {selectExecutorOpen && (
+              <div className="tasks__head__executor-dropdown">
+                {projectBoard.projectUsers.map((user) => {
+                  return (
+                    <div
+                      className="executor-dropdown__person"
+                      key={user.user_id}
+                      onClick={() => executorFilter(user)}
+                    >
+                      <p>{removeLast(user.user?.fio)}</p>
+                      <img
+                        src={
+                          user.user?.avatar
+                            ? urlForLocal(user.user.avatar)
+                            : avatarMok
+                        }
+                        alt="avatar"
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </div>
+        )}
+        <div className="tasks__head__tags">
+          <div
+            className="tags__add"
+            onClick={() => {
+              setTags((prevState) => ({
+                ...prevState,
+                open: !tags.open
+              }));
+            }}
+          >
+            <p>Список тегов</p>
+            <img
+              className={tags.open ? "open" : ""}
+              src={arrowDown}
+              alt="arrow"
+            />
+          </div>
+          {tags.open && (
+            <div className="tags__list">
+              {!tags.add && !tags.edit && (
+                <div
+                  className="add-new-tag"
+                  onClick={() =>
+                    setTags((prevState) => ({
+                      ...prevState,
+                      add: true
+                    }))
+                  }
+                >
+                  <p>Добавить новый тег</p>
+                  <span>+</span>
+                </div>
+              )}
+              {!tags.add && !tags.edit && (
+                <div className="tags__list__created">
+                  {projectBoard.mark.map((tag) => {
+                    return (
+                      <div className="tag-item" key={tag.id}>
+                        <div className="tag-item__info">
+                          <span
+                            className="tag-item__color"
+                            style={{ background: tag.color }}
+                          />
+                          <div>
+                            <span className="tag-item__info__name">
+                              {tag.slug}
+                            </span>
+                            <p className="tag-item__description">{tag.title}</p>
+                          </div>
+                        </div>
+                        <div className="tag-item__images">
+                          <img
+                            src={edit}
+                            alt="edit"
+                            onClick={() => {
+                              setTags((prevState) => ({
+                                ...prevState,
+                                edit: true
+                              }));
+                              setTagInfo({
+                                description: tag.title,
+                                name: tag.slug,
+                                editMarkId: tag.id
+                              });
+                              setColor(tag.color);
+                            }}
+                          />
+                          <img
+                            onClick={() => deleteTag(tag.id)}
+                            className="delete"
+                            src={close}
+                            alt="delete"
+                          />
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+              {(tags.add || tags.edit) && (
+                <div className="form-tag">
+                  <input
+                    className="form-tag__input"
+                    placeholder="Описание метки"
+                    maxLength="25"
+                    value={tagInfo.description}
+                    onChange={(e) =>
+                      setTagInfo((prevState) => ({
+                        ...prevState,
+                        description: e.target.value
+                      }))
+                    }
+                  />
+                  <input
+                    className="form-tag__input"
+                    placeholder="Тег"
+                    value={tagInfo.name}
+                    maxLength="10"
+                    onChange={(e) =>
+                      setTagInfo((prevState) => ({
+                        ...prevState,
+                        name: e.target.value
+                      }))
+                    }
+                  />
+                  <HexColorPicker color={color} onChange={setColor} />
+                  <button
+                    onClick={() => {
+                      tags.add ? addNewTag() : editTag();
+                    }}
+                    className={
+                      tagInfo.name && tagInfo.description
+                        ? "form-tag__btn"
+                        : "form-tag__btn disable"
+                    }
+                  >
+                    {tags.add ? "Добавить" : "Изменить"}
+                  </button>
+                  {(tags.add || tags.edit) && (
+                    <button
+                      className={"form-tag__btn"}
+                      onClick={() => {
+                        setTags((prevState) => ({
+                          ...prevState,
+                          add: false,
+                          edit: false
+                        }));
+                        setTagInfo({
+                          description: "",
+                          name: ""
+                        });
+                        setColor("#aabbcc");
+                      }}
+                    >
+                      Отмена
+                    </button>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        <Link to="/profile/tracker" className="tasks__head__back">
+          <p>К списку проектов</p>
+          <img src={arrow} alt="arrow" />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default TrackerBoardHead;
diff --git a/src/components/TrackerBoardHead/trackerBoardHead.scss b/src/components/TrackerBoardHead/trackerBoardHead.scss
new file mode 100644
index 00000000..e69de29b