diff --git a/src/components/UI/ModalTiket/ModalTiket.js b/src/components/UI/ModalTiket/ModalTiket.js
new file mode 100644
index 00000000..4ea05acc
--- /dev/null
+++ b/src/components/UI/ModalTiket/ModalTiket.js
@@ -0,0 +1,22 @@
+import React from "react";
+import "./ModalTiket.scss";
+
+export const ModalTiket = ({ active, setActive }) => {
+  return (
+    <div
+      className={active ? "modal-tiket active" : "modal-tiket"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-tiket__content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="colum author"></div>
+        <div className="colum content"></div>
+        <div className="colum workers"></div>
+      </div>
+    </div>
+  );
+};
+
+export default ModalTiket;
diff --git a/src/components/UI/ModalTiket/ModalTiket.scss b/src/components/UI/ModalTiket/ModalTiket.scss
new file mode 100644
index 00000000..74f575df
--- /dev/null
+++ b/src/components/UI/ModalTiket/ModalTiket.scss
@@ -0,0 +1,36 @@
+.modal-tiket {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  .colum {
+    .author {
+    }
+    .content {
+    }
+
+    .workers {
+    }
+  }
+}
+
+.modal-tiket.active {
+  transform: scale(1);
+}
+
+.modal-tiket__content {
+  padding: 20px;
+  width: 700px;
+  height: 400px;
+  background: #ffffff;
+  border: 1px solid #dde2e4;
+  border-radius: 8px;
+}
diff --git a/src/pages/Tracker/Tracker.js b/src/pages/Tracker/Tracker.js
index 9294da2b..c9cd528b 100644
--- a/src/pages/Tracker/Tracker.js
+++ b/src/pages/Tracker/Tracker.js
@@ -1,76 +1,100 @@
-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 project from "../../images/trackerProject.svg";
+import tasks from "../../images/trackerTasks.svg";
+import archive from "../../images/archiveTracker.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 [toggleTab, setToggleTab] = useState(1)
-    const [projects] = useState([
-        {
-            name: 'Разработка трекера',
-            count: 4
-        },
-        {
-            name: 'Кинотеатр',
-            count: 4
-        },
-        {
-            name: 'Проект страхование',
-            count: 4
-        }
-    ])
+  // TODO: тест на готовом элементе(потом перенести в другую вкладку(ЗАДАЧИ))
+  const [modalActive, setModalActive] = 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'>
-                                                <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>
-                    </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">
+                      <h3>{project.name}</h3>
+                      <div className="project__info">
+                        <p>Открытые задачи</p>
+                        <span className="count">{project.count}</span>
+                        <span className="add">+</span>
+                      </div>
+                    </div>
+                  );
+                })}
+
+                {/* TODO: убрать потом клик на кнопке и перенести модалку*/}
+                <button onClick={() => setModalActive(true)}>
+                  <span>+</span>Создать проект
+                </button>
+                <ModalTiket active={modalActive} setActive={setModalActive} />
+              </div>
+            </div>
+          </div>
         </div>
-    )
+      </div>
+      <Footer />
+    </div>
+  );
 };
diff --git a/src/pages/Tracker/tracker.scss b/src/pages/Tracker/tracker.scss
index 6a9943d0..bdcbcdb1 100644
--- a/src/pages/Tracker/tracker.scss
+++ b/src/pages/Tracker/tracker.scss
@@ -1,8 +1,9 @@
 .tracker {
-  background: #F1F1F1;
+  background: #f1f1f1;
   height: 100%;
   min-height: 100vh;
   font-family: "LabGrotesque", sans-serif;
+  position: relative;
 
   .container {
     max-width: 1160px;
@@ -58,7 +59,7 @@
       width: 100%;
 
       &__projects {
-        background: #FFFFFF;
+        background: #ffffff;
         border-radius: 0 12px 12px 12px;
         padding: 26px 24px 40px;
         flex-wrap: wrap;
@@ -69,7 +70,7 @@
 
         .project {
           width: 48%;
-          background: #F1F1F1;
+          background: #f1f1f1;
           border-radius: 12px;
           padding: 17px 26px 16px;
           cursor: pointer;
@@ -88,7 +89,7 @@
             position: relative;
 
             p {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-weight: 500;
               font-size: 12px;
               line-height: 24px;
@@ -102,25 +103,25 @@
               display: flex;
               align-items: center;
               justify-content: center;
-              background: #DDDDDD;
+              background: #dddddd;
               border-radius: 4px;
               font-weight: 500;
               font-size: 14px;
               line-height: 24px;
-              color: #6F6F6F;
+              color: #6f6f6f;
             }
 
             .add {
-              color: #6F6F6F;
+              color: #6f6f6f;
               font-size: 17px;
               margin: 0 25px 0 auto;
             }
 
             &:after {
-              content: '...';
+              content: "...";
               position: absolute;
               font-size: 17px;
-              color: #6F6F6F;
+              color: #6f6f6f;
               right: 0;
               top: -15%;
             }
@@ -128,7 +129,7 @@
         }
 
         button {
-          background: #52B709;
+          background: #52b709;
           border-radius: 44px;
           max-width: 150px;
           height: 40px;
@@ -137,7 +138,7 @@
           font-weight: 400;
           font-size: 12px;
           line-height: 32px;
-          color: #FFFFFF;
+          color: #ffffff;
           display: flex;
           align-items: center;
           justify-content: center;