diff --git a/src/components/global/Calendar.tsx b/src/components/global/Calendar.tsx
index a17e1aa..1de76d2 100644
--- a/src/components/global/Calendar.tsx
+++ b/src/components/global/Calendar.tsx
@@ -20,6 +20,9 @@ import sharp from "../../icons/sharp.svg";
 // Types
 import { dataItem, dateMatrix } from "../../helpers/calendar";
 
+// Components
+import CalendarCell from "./CalendarCell";
+
 const Calendar = () => {
   // Static
   const date = new Date();
@@ -172,87 +175,58 @@ const Calendar = () => {
             {sorted
               ? sorted.map((arr) => {
                   if (arr.filter((x) => x === 0).length !== 7) {
-                    return (
+                    return(
                       <tr key={uuidv4()}>
-                        {arr.map((el) => {
-                          if (el !== 0) {
-                            if (
-                              today === el &&
-                              currentMonth === date.getMonth() &&
-                              currentYear === date.getFullYear()
-                            ) {
-                              return (
-                                <td
-                                  className={
-                                    selectedDay.day === el &&
-                                    selectedDay.month === currentMonth
-                                      ? "active selected"
-                                      : "active"
-                                  }
-                                  key={uuidv4()}
-                                  onClick={(
-                                    e: React.MouseEvent<HTMLElement>
-                                  ) => {
-                                    const target = e.target as HTMLElement;
-                                    const span = target.innerText;
-                                    setSelectedDay({
-                                      day: parseInt(span),
-                                      month: currentMonth,
-                                    });
-                                  }}
-                                >
-                                  <span>{el}</span>
-                                  <div className="event">
-                                    <div className="sharp">
-                                      <img src={sharp} alt="" />
-                                    </div>
-                                    <h5>{`${el} ${matchLocaleLang(
-                                      currentMonth
-                                    )} ${currentYear}`}</h5>
-                                    <span>Нет событий</span>
-                                  </div>
-                                </td>
-                              );
-                            } else {
-                              return (
-                                <td
-                                  className={
-                                    selectedDay.day === el &&
-                                    selectedDay.month === currentMonth
-                                      ? "selected"
-                                      : ""
-                                  }
-                                  key={uuidv4()}
-                                  onClick={(
-                                    e: React.MouseEvent<HTMLElement>
-                                  ) => {
-                                    const target = e.target as HTMLElement;
-                                    const span = target.innerText;
-                                    setSelectedDay({
-                                      day: parseInt(span),
-                                      month: currentMonth,
-                                    });
-                                  }}
-                                >
-                                  <span>{el}</span>
-                                  <div className="event">
-                                    <div className="sharp">
-                                      <img src={sharp} alt="" />
-                                    </div>
-                                    <h5>{`${el} ${matchLocaleLang(
-                                      currentMonth
-                                    )} ${currentYear}`}</h5>
-                                    <span>Нет событий</span>
-                                  </div>
-                                </td>
-                              );
-                            }
+                      {arr.map((el) => {
+                        if (el !== 0) {
+                          if (
+                            today === el &&
+                            currentMonth === date.getMonth() &&
+                            currentYear === date.getFullYear()
+                          ) {
+                            return (
+                                <CalendarCell key={uuidv4()} currentMonth={currentMonth} currentYear={currentYear} el={el as number} selectedDay={selectedDay} setSelectedDay={setSelectedDay} />
+                            );
                           } else {
-                            return <td key={uuidv4()}></td>;
+                            return (
+                              <td
+                                className={
+                                  selectedDay.day === el &&
+                                  selectedDay.month === currentMonth
+                                    ? "selected"
+                                    : ""
+                                }
+                                key={uuidv4()}
+                                onClick={(
+                                  e: React.MouseEvent<HTMLElement>
+                                ) => {
+                                  const target = e.target as HTMLElement;
+                                  const span = target.innerText;
+                                  setSelectedDay({
+                                    day: parseInt(span),
+                                    month: currentMonth,
+                                  });
+                                }}
+                              >
+                                <span>{el}</span>
+                                <div className="event">
+                                  <div className="sharp">
+                                    <img src={sharp} alt="" />
+                                  </div>
+                                  <h5>{`${el} ${matchLocaleLang(
+                                    currentMonth
+                                  )} ${currentYear}`}</h5>
+                                  <span>Нет событий</span>
+                                </div>
+                              </td>
+                            );
                           }
-                        })}
-                      </tr>
-                    );
+                        } else {
+                          return <td key={uuidv4()}></td>;
+                        }
+                      })}
+                    </tr>
+                  )
                   } else {
                     return "";
                   }
diff --git a/src/components/global/CalendarCell.tsx b/src/components/global/CalendarCell.tsx
new file mode 100644
index 0000000..17734d4
--- /dev/null
+++ b/src/components/global/CalendarCell.tsx
@@ -0,0 +1,66 @@
+// Modules
+import React, {SetStateAction} from 'react';
+
+
+// Helpers
+import { matchLocaleLang } from "../../helpers/calendar";
+
+// Icons
+import sharp from "../../icons/sharp.svg";
+
+interface dayType {
+    day: number;
+    month: number;
+  }
+  type monthType = [number, React.Dispatch<SetStateAction<number>>];
+  type dayStateType = [dayType, React.Dispatch<SetStateAction<dayType>>];
+
+interface Props{
+    setSelectedDay: dayStateType[1],
+    selectedDay: dayType,
+    el: number,
+    currentMonth: monthType[0],
+    currentYear: monthType[0],
+    event?: string,
+}
+
+const CalendarCell = ({selectedDay, setSelectedDay, el, currentMonth, currentYear, event}:Props) => {
+    return(
+        // {el !== 0  ? (
+        //     <td
+        //     className={
+        //       selectedDay.day === el &&
+        //       selectedDay.month === currentMonth
+        //         ? "active selected"
+        //         : "active"
+        //     }
+        //     onClick={(
+        //       e: React.MouseEvent<HTMLElement>
+        //     ) => {
+        //       const target = e.target as HTMLElement;
+        //       const span = target.innerText;
+        //       setSelectedDay({
+        //         day: parseInt(span),
+        //         month: currentMonth,
+        //       });
+        //     }}
+        //   >
+        //     <span>{el}</span>
+        //     <div className="event">
+        //       <div className="sharp">
+        //         <img src={sharp} alt="" />
+        //       </div>
+        //       <h5>{`${el} ${matchLocaleLang(
+        //         currentMonth
+        //       )} ${currentYear}`}</h5>
+        //       <span>Нет событий</span>
+        //     </div>
+        //   </td>
+        // ) : (
+            
+        // )}
+        <div></div>
+    )
+}
+
+export default CalendarCell;
\ No newline at end of file