diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js
index 1f8bc842..9bdffe34 100644
--- a/src/components/UI/ModalTiket/ModalTiket.js
+++ b/src/components/UI/ModalTiket/ModalTiket.js
@@ -5,9 +5,9 @@ import creatorMock from "../../../images/avatarMoсkCreator.png";
 import avatarMock1 from "../../../images/avatarMoсk1.png";
 import avatarMock2 from "../../../images/avatarMoсk2.png";
 import category from "../../../images/category.png";
-import comments from "../../../images/comments.png";
+import comments from "../../../images/commentsBoard.svg";
 import watch from "../../../images/watch.png";
-import files from "../../../images/files.png";
+import files from "../../../images/filesBoard.svg";
 import task from "../../../images/tasksMock.png";
 import arrow from "../../../images/arrowStart.png";
 
@@ -88,7 +88,7 @@ export const ModalTiket = ({ active, setActive }) => {
             })}
           </div>
 
-          <div className="add-worker">
+          <div className="add-worker moreItems">
             <button>+</button>
             <span>Добавить участников</span>
           </div>
diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss
index 160adeaa..a2c74a53 100644
--- a/src/components/UI/ModalTiket/ModalTiket.scss
+++ b/src/components/UI/ModalTiket/ModalTiket.scss
@@ -134,14 +134,26 @@
       }
 
       button {
+        cursor: pointer;
         background: #8bcc60;
+        border-radius: 44px;
         width: 33px;
         height: 33px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        color: white;
+        font-size: 17px;
       }
     }
 
     .start {
       margin-top: 25px;
+      width: 151px;
+      height: 40px;
+      border: none;
+      color: white;
       background: #1458dd;
       border-radius: 44px;
 
diff --git a/src/images/comments.png b/src/images/comments.png
deleted file mode 100644
index f87be131..00000000
Binary files a/src/images/comments.png and /dev/null differ
diff --git a/src/images/files.png b/src/images/files.png
deleted file mode 100644
index 8f9d9567..00000000
Binary files a/src/images/files.png and /dev/null differ
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index c57f3ef4..b2c090d0 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -1,230 +1,278 @@
-import React, {useState} from 'react';
+import React, { useState } from "react";
 
-import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
-import {Footer} from '../../components/Footer/Footer'
+import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
+import { Footer } from "../../components/Footer/Footer";
 
-import project from '../../images/trackerProject.svg'
-import tasks from '../../images/trackerTasks.svg'
-import archive from '../../images/archiveTracker.svg'
-import avatarTest from '../../images/AvatarTest .png'
-import selectArrow from '../../images/select.svg'
-import commentsBoard from '../../images/commentsBoard.svg'
-import filesBoard from '../../images/filesBoard.svg'
+import project from "../../images/trackerProject.svg";
+import tasks from "../../images/trackerTasks.svg";
+import archive from "../../images/archiveTracker.svg";
+import avatarTest from "../../images/AvatarTest .png";
+import selectArrow from "../../images/select.svg";
+import commentsBoard from "../../images/commentsBoard.svg";
+import filesBoard from "../../images/filesBoard.svg";
 
-import './tracker.scss'
+import "./tracker.scss";
+import ModalTiket from "../../components/UI/ModalTiket/ModalTiket";
 
 export const Tracker = () => {
+  const [toggleTab, setToggleTab] = useState(1);
+  const [projects] = useState([
+    {
+      name: "Разработка трекера",
+      count: 4,
+    },
+    {
+      name: "Кинотеатр",
+      count: 4,
+    },
+    {
+      name: "Проект страхование",
+      count: 4,
+    },
+  ]);
+  const [tabTaskMok] = useState([
+    {
+      name: "Открытые",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+    {
+      name: "В процессе",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+    {
+      name: "На проверке",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+    {
+      name: "Готово",
+      tasks: [
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+        {
+          task: "PR - 2245",
+          description: "Сверстать часть таблицы. Сверстать часть таблицы",
+          comments: 12,
+          files: 0,
+          avatarCreated: avatarTest,
+          avatarDo: avatarTest,
+        },
+      ],
+    },
+  ]);
 
-    const [toggleTab, setToggleTab] = useState(1)
-    const [projects] = useState([
-        {
-            name: 'Разработка трекера',
-            count: 4
-        },
-        {
-            name: 'Кинотеатр',
-            count: 4
-        },
-        {
-            name: 'Проект страхование',
-            count: 4
-        }
-    ])
-    const [tabTaskMok] = useState([
-        {
-            name: 'Открытые',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        },
-        {
-            name: 'В процессе',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        },
-        {
-            name: 'На проверке',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        },
-        {
-            name: 'Готово',
-            tasks: [
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                },
-                {
-                    task: 'PR - 2245',
-                    description: 'Сверстать часть таблицы. Сверстать часть таблицы',
-                    comments: 12,
-                    files: 0,
-                    avatarCreated: avatarTest,
-                    avatarDo: avatarTest
-                }
-            ]
-        }
-    ])
+  const [modalActiveTicket, setModalActiveTicket] = useState(false);
 
-    const toggleTabs = (index) => {
-        setToggleTab(index)
-    }
-    return (
-        <div className='tracker'>
-            <ProfileHeader />
-            <div className='container'>
-                <div className='tracker__content'>
-                    <h2 className='tracker__title'>Трекер</h2>
-                    <div className='tracker__tabs'>
-                        <div className='tracker__tabs__head'>
-                            <div className={toggleTab === 1 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(1)}>
-                                <img src={project} alt='img' />
-                                <p>Проекты </p>
-                            </div>
-                            <div className={toggleTab === 2 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(2)}>
-                                <img src={tasks} alt='img' />
-                                <p>Задачи</p>
-                            </div>
-                            <div className={toggleTab === 3 ? 'tab active-tab' : 'tab'} onClick={() => toggleTabs(3)}>
-                                <img src={archive} alt='img' />
-                                <p>Архив</p>
-                            </div>
-                        </div>
-                        <div className='tracker__tabs__content'>
-                            <div className={toggleTab === 1 ? 'tracker__tabs__content__projects active__content' : 'tracker__tabs__content__projects'}>
-                                {projects.map((project, index) => {
-                                    return <div className='project' key={index}>
-                                                <h3>{project.name}</h3>
-                                                <div className='project__info'>
-                                                    <p>Открытые задачи</p>
-                                                    <span className='count'>{project.count}</span>
-                                                    <span className='add'>+</span>
-                                                </div>
-                                            </div>
-                                })
-                                }
-                                <button><span>+</span>Создать проект</button>
-                            </div>
-                            <div className={toggleTab === 2 ? 'tracker__tabs__content__tasks tasks active__content' : 'tracker__tabs__content__projects'}>
-                                <div className='tasks__head'>
-                                    <h4>Проект : Разработка трекера</h4>
-                                    <span className='tasks__head__add'>+</span>
-                                    <div className='tasks__head__persons'>
-                                        <img src={avatarTest} alt='avatar' />
-                                        <img src={avatarTest} alt='avatar' />
-                                        <img src={avatarTest} alt='avatar' />
-                                        <img src={avatarTest} alt='avatar' />
-                                        <span>+9</span>
-                                    </div>
-                                    <div className='tasks__head__select'>
-                                        <span>Учавствую</span>
-                                        <img src={selectArrow} alt='arrow' />
-                                    </div>
-                                    <div className='tasks__head__select'>
-                                        <span>Мои</span>
-                                        <img src={selectArrow} alt='arrow' />
-                                    </div>
-                                </div>
-                                <div className='tasks__container'>
-                                    {tabTaskMok.map((section, index) => {
-                                            return <div key={index} className={section.tasks.length >= 3 ? 'tasks__board tasks__board__more' : 'tasks__board'}>
-                                                        <div className='board__head'>
-                                                            <span className={index === 3 ? 'done' : ''}>{section.name}</span>
-                                                            <div>
-                                                                <span className='add'>+</span>
-                                                                <span className='more'>...</span>
-                                                            </div>
-                                                        </div>
-                                                        {section.tasks.map((task, index) => {
-                                                            return <div key={index} className='tasks__board__item' draggable="true">
-                                                                        <div className='tasks__board__item__title'>
-                                                                            <p>{task.task}</p>
-                                                                            <span>...</span>
-                                                                        </div>
-                                                                        <p className='tasks__board__item__description'>
-                                                                            {task.description}
-                                                                        </p>
-                                                                        <div className='tasks__board__item__info'>
-                                                                            <div className='tasks__board__item__info__more'>
-                                                                                <img src={commentsBoard} alt='commentsImg' />
-                                                                                <span>{task.comments} коментариев</span>
-                                                                            </div>
-                                                                            <div className='tasks__board__item__info__more'>
-                                                                                <img src={filesBoard} alt='filesImg' />
-                                                                                <span>{task.files} файлов</span>
-                                                                            </div>
-                                                                            <div className='tasks__board__item__info__avatars'>
-                                                                                <img src={task.avatarCreated} alt='avatar' />
-                                                                                <img src={task.avatarDo} alt='avatar' />
-                                                                            </div>
-                                                                        </div>
-                                                                    </div>
-                                                        })
-                                                        }
-                                                        {section.tasks.length >= 3 &&
-                                                        <span className='moreItems'>+</span>
-                                                        }
-                                                    </div>
-                                        })
-                                    }
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  const toggleTabs = (index) => {
+    setToggleTab(index);
+  };
+  return (
+    <div className="tracker">
+      <ProfileHeader />
+      <div className="container">
+        <div className="tracker__content">
+          <h2 className="tracker__title">Трекер</h2>
+          <div className="tracker__tabs">
+            <div className="tracker__tabs__head">
+              <div
+                className={toggleTab === 1 ? "tab active-tab" : "tab"}
+                onClick={() => toggleTabs(1)}
+              >
+                <img src={project} alt="img" />
+                <p>Проекты </p>
+              </div>
+              <div
+                className={toggleTab === 2 ? "tab active-tab" : "tab"}
+                onClick={() => toggleTabs(2)}
+              >
+                <img src={tasks} alt="img" />
+                <p>Задачи</p>
+              </div>
+              <div
+                className={toggleTab === 3 ? "tab active-tab" : "tab"}
+                onClick={() => toggleTabs(3)}
+              >
+                <img src={archive} alt="img" />
+                <p>Архив</p>
+              </div>
             </div>
-            <Footer/>
+            <div className="tracker__tabs__content">
+              <div
+                className={
+                  toggleTab === 1
+                    ? "tracker__tabs__content__projects active__content"
+                    : "tracker__tabs__content__projects"
+                }
+              >
+                {projects.map((project, index) => {
+                  return (
+                    <div className="project" key={index}>
+                      <h3>{project.name}</h3>
+                      <div className="project__info">
+                        <p>Открытые задачи</p>
+                        <span className="count">{project.count}</span>
+                        <span className="add">+</span>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                <button>
+                  <span>+</span>Создать проект
+                </button>
+              </div>
+              <div
+                className={
+                  toggleTab === 2
+                    ? "tracker__tabs__content__tasks tasks active__content"
+                    : "tracker__tabs__content__projects"
+                }
+              >
+                <div className="tasks__head">
+                  <h4>Проект : Разработка трекера</h4>
+                  <span className="tasks__head__add">+</span>
+                  <div className="tasks__head__persons">
+                    <img src={avatarTest} alt="avatar" />
+                    <img src={avatarTest} alt="avatar" />
+                    <img src={avatarTest} alt="avatar" />
+                    <img src={avatarTest} alt="avatar" />
+                    <span>+9</span>
+                  </div>
+                  <div className="tasks__head__select">
+                    <span>Учавствую</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                  <div className="tasks__head__select">
+                    <span>Мои</span>
+                    <img src={selectArrow} alt="arrow" />
+                  </div>
+                </div>
+                <ModalTiket
+                  active={modalActiveTicket}
+                  setActive={setModalActiveTicket}
+                />
+
+                <div className="tasks__container">
+                  {tabTaskMok.map((section, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className={
+                          section.tasks.length >= 3
+                            ? "tasks__board tasks__board__more"
+                            : "tasks__board"
+                        }
+                      >
+                        <div className="board__head">
+                          <span className={index === 3 ? "done" : ""}>
+                            {section.name}
+                          </span>
+                          <div>
+                            <span className="add">+</span>
+                            <span className="more">...</span>
+                          </div>
+                        </div>
+                        {section.tasks.map((task, index) => {
+                          return (
+                            <div
+                              key={index}
+                              className="tasks__board__item"
+                              draggable="true"
+                              onClick={() => setModalActiveTicket(true)}
+                            >
+                              <div className="tasks__board__item__title">
+                                <p>{task.task}</p>
+                                <span>...</span>
+                              </div>
+                              <p className="tasks__board__item__description">
+                                {task.description}
+                              </p>
+                              <div className="tasks__board__item__info">
+                                <div className="tasks__board__item__info__more">
+                                  <img src={commentsBoard} alt="commentsImg" />
+                                  <span>{task.comments} коментариев</span>
+                                </div>
+                                <div className="tasks__board__item__info__more">
+                                  <img src={filesBoard} alt="filesImg" />
+                                  <span>{task.files} файлов</span>
+                                </div>
+                                <div className="tasks__board__item__info__avatars">
+                                  <img src={task.avatarCreated} alt="avatar" />
+                                  <img src={task.avatarDo} alt="avatar" />
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                        {section.tasks.length >= 3 && (
+                          <span className="moreItems">+</span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-    )
+      </div>
+      <Footer />
+    </div>
+  );
 };