diff --git a/src/components/mainPart/calendar/calendar.tsx b/src/components/mainPart/calendar/calendar.tsx
index 15a3ad0..91975c1 100644
--- a/src/components/mainPart/calendar/calendar.tsx
+++ b/src/components/mainPart/calendar/calendar.tsx
@@ -2,7 +2,25 @@ import React from "react";
 import Calendar from "react-calendar";
 import './calendar.css';
 
-export const CalendarComponent:React.FC = React.memo(() => {
+type TProps = {
+    onCLick: (date: string) => void
+}
+
+export const CalendarComponent:React.FC<TProps> = React.memo((props) => {
+    const months = {
+        0: 'Января',
+        1: 'Февраля',
+        2: 'Марта',
+        3: 'Апреля',
+        4: 'Мая',
+        5: 'Июня',
+        6: 'Июля',
+        7: 'Августа',
+        8: 'Сентября',
+        9: 'Октября',
+        10: 'Ноября',
+        11: 'Декабря'
+    }
     return <Calendar 
         showDoubleView={false}
         next2Label={null}
@@ -14,6 +32,6 @@ export const CalendarComponent:React.FC = React.memo(() => {
         //         return props.disableDays.includes(a.date.getDate())
         // }}
         minDate={new Date()}
-        // onClickDay={(e) => onClickDay(e.getDate(), e.getMonth())}
+        onClickDay={(e) => props.onCLick(`${e.getDate()} ${months[e.getMonth() as keyof typeof months]}`)}
     />
 })
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index 8d8513b..33f1f84 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -221,12 +221,28 @@
     margin-bottom: auto;
 }
 
+.plan-content-container {
+    display: flex;
+    flex-direction: column;    
+}
+
 .plan-content-title {
     font-weight: 700;
     font-size: 40px;
     line-height: 110%;
 }
 
+.plan-content-date {
+    margin-top: 40px;
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 110%;
+}
+
+.plan-content-content {
+    margin: 40px 0 24px 0;
+}
+
 .legend-container {
     display: flex;
     gap: 8px;
@@ -257,12 +273,12 @@
     color: #CE56C2;
 }
 
-.legend-text.disabled {
+.legend-text.disable {
     color: #B196AF;
 }
 
 .plan-content-legend {
-    margin-top: 24px;
+    /* margin-top: 24px; */
     display: flex;
     gap: 32px;
 }
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 711eef0..107abf9 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -1,14 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
 import './mainPart.css';
-import { PinkButton } from "./button";
 import { MainPartHeader } from "./mainPartHeader";
 import { ContentContainer } from "./contentContainer";
 import { MainPartFooter } from "./main-part-footer";
 import { OrLineContainer } from "./orLineContainer";
 import { CSSTransition, TransitionGroup } from "react-transition-group";
-import Calendar from "react-calendar";
 import { CalendarComponent } from "./calendar/calendar";
 import { PlanContentContainer } from "./planContentContainer";
+import { TimeSelector } from "./timeSelector/timeSelector";
 
 
 export const MainPart: React.FC = React.memo(() => {
@@ -64,7 +63,7 @@ export const MainPart: React.FC = React.memo(() => {
         setPlaneContent(
             <PlanContentContainer 
                 title="Выбор даты"
-                content={<CalendarComponent />}
+                content={<CalendarComponent onCLick={(date) => onSelectDay(date)} />}
                 isLegend={true}
             />
         );
@@ -75,12 +74,23 @@ export const MainPart: React.FC = React.memo(() => {
 
     }
 
-    function onSelectDay() {
-
+    function onSelectDay(date: string) {
+        setPlaneContent(
+            <PlanContentContainer 
+                title="Выбор времени"
+                date={date}
+                content={<TimeSelector 
+                    date={date}
+                    onClickTime={(date, time) => onSelectTime(date, time)}                
+                />}
+                isLegend={true}
+            />
+        );
     }
 
-    function onSelectTime() {
-        
+    function onSelectTime(date: string, time: string) {
+        let dateTime = `${date} в ${time}`;
+        console.log(dateTime)
     }
 
     function enableBackground() {
diff --git a/src/components/mainPart/planContentContainer.tsx b/src/components/mainPart/planContentContainer.tsx
index cc046f8..0be3694 100644
--- a/src/components/mainPart/planContentContainer.tsx
+++ b/src/components/mainPart/planContentContainer.tsx
@@ -3,6 +3,7 @@ import { Legend } from "./legend";
 
 type TProps = {
     title: string
+    date?: string
     content: JSX.Element
     isLegend: boolean
 }
@@ -10,7 +11,14 @@ type TProps = {
 export const PlanContentContainer:React.FC<TProps> = React.memo((props) => {
     return <div className="plan-content-container">
         <span className="plan-content-title">{props.title}</span>
-        {props.content}
+        {
+            props.date
+            ? <span className="plan-content-date">{props.date}</span>
+            : null
+        }
+        <div className="plan-content-content">
+            {props.content}
+        </div>        
         {
             props.isLegend 
             ? <div className="plan-content-legend">
diff --git a/src/components/mainPart/timeSelector/rowItem.tsx b/src/components/mainPart/timeSelector/rowItem.tsx
new file mode 100644
index 0000000..28ba40a
--- /dev/null
+++ b/src/components/mainPart/timeSelector/rowItem.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+
+type TProps = {
+    value: string
+    active: boolean
+    onClick: () => void
+}
+
+export const RowItem:React.FC<TProps> = React.memo((props) => {
+    return <div 
+        className={`row-item ${props.active ? '' : 'disabled'}`} 
+        onClick={() => {
+            if(props.active)
+                props.onClick();            
+        }}>
+        {props.value}
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainPart/timeSelector/rowTime.tsx b/src/components/mainPart/timeSelector/rowTime.tsx
new file mode 100644
index 0000000..67e3e0d
--- /dev/null
+++ b/src/components/mainPart/timeSelector/rowTime.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import { RowItem } from "./rowItem";
+
+type TProps = {
+    times: Array<{time: string, active: boolean}>
+    onClick: (time: string) => void
+}
+
+export const RowTime:React.FC<TProps> = React.memo((props) => {
+    return <div className="row-time-container">
+        {props.times.map((item, index) => {
+            return <RowItem 
+                key={item.time+index} 
+                active={item.active}
+                value={item.time}
+                onClick={() => {
+                    if(!item.time)
+                        return
+                    props.onClick(item.time)
+                }}
+            />
+        })}
+    </div>
+})
\ No newline at end of file
diff --git a/src/components/mainPart/timeSelector/timeSelector.css b/src/components/mainPart/timeSelector/timeSelector.css
new file mode 100644
index 0000000..d67fa3e
--- /dev/null
+++ b/src/components/mainPart/timeSelector/timeSelector.css
@@ -0,0 +1,96 @@
+.time-selector-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    gap: 26px;
+    box-sizing: border-box;
+    max-width: 500px;
+}
+
+.time-selector-date {
+    font-weight: 600;
+    font-size: 24px;
+    line-height: 110%;
+}
+
+.time-selector-rows {
+    /* width: 100%; */
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    align-items: flex-start;
+    gap: 8px;
+}
+
+.row-time-container {
+    width: 100%;
+    /* box-sizing: border-box; */
+    display: flex;
+    gap: 8px;
+    flex-direction: row;
+    /* flex-wrap: wrap; */
+}
+
+.row-item {
+    padding: 22px 8px;
+    height: 40px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-weight: 400;
+    font-size: 22px;
+    color: #CE56C2;
+    background: #322948;
+    border-radius: 8px;
+
+    /* flex-basis: 80px; */
+    /* width: 20%; */
+    width: 100%;
+    /* max-width: 100px; */
+    min-width: 70px;
+    /* flex-shrink: 0; */
+    /* flex-grow: 2; */
+
+    box-sizing: border-box;
+}
+
+.row-item:hover {
+    background: #443A5D;
+    cursor: pointer;
+}
+
+.row-item.disabled {
+    background-color: transparent;
+    color: #B196AF;
+}
+
+.row-item.disabled:hover {
+    cursor: default;
+}
+
+@media screen and (max-width: 1000px) {
+    .time-selector-container {
+        
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .time-selector-date {
+        font-size: 16px;
+    }
+
+    .row-item {
+        padding: 5px 8px;
+        min-width: 60px;
+        height: 40px;
+    
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    
+        font-size: 14px;
+        min-width: 40px;
+    }
+}
\ No newline at end of file
diff --git a/src/components/mainPart/timeSelector/timeSelector.tsx b/src/components/mainPart/timeSelector/timeSelector.tsx
new file mode 100644
index 0000000..6e98edf
--- /dev/null
+++ b/src/components/mainPart/timeSelector/timeSelector.tsx
@@ -0,0 +1,80 @@
+import React from "react";
+import { RowTime } from "./rowTime";
+import './timeSelector.css';
+
+type TProps = {
+    date: string
+    onClickTime: (date: string, time: string) => void
+}
+
+export const TimeSelector:React.FC<TProps> = React.memo((props) => {
+    function onClickTime(value: string) {
+        props.onClickTime(props.date, value)
+    }
+
+    return <div className="time-selector-container">
+        {/* <span className="time-selector-date">{props.date}</span> */}
+        <div className="time-selector-rows">
+                    <RowTime 
+                        times={[
+                            {time: '8:00', active: true},
+                            {time: '8:30', active: true},
+                            {time: '9:00', active: false},
+                            {time: '9:30', active: true},
+                            {time: '10:00', active: false},                                      
+                        ]}
+                        onClick={(time) => onClickTime(time)}
+                    />
+                    <RowTime 
+                        times={[                            
+                            {time: '10:30', active: true},
+                            {time: '11:00', active: true},
+                            {time: '11:30', active: false},
+                            {time: '', active: false},
+                            {time: '', active: false}
+                        ]}
+                        onClick={(time) => onClickTime(time)}
+                    />
+                    <RowTime 
+                        times={[
+                            {time: '12:00', active: true},
+                            {time: '12:30', active: true},
+                            {time: '13:00', active: false},
+                            {time: '13:30', active: true},
+                            {time: '14:00', active: false},                            
+                        ]}
+                        onClick={(time) => onClickTime(time)}
+                    />
+                    <RowTime 
+                        times={[                            
+                            {time: '14:30', active: true},
+                            {time: '15:00', active: true},
+                            {time: '15:30', active: false},
+                            {time: '16:00', active: false},
+                            {time: '16:30', active: false},                            
+                        ]}
+                        onClick={(time) => onClickTime(time)}
+                    />
+                    <RowTime 
+                        times={[                            
+                            {time: '17:00', active: false},
+                            {time: '17:30', active: false},
+                            {time: '', active: false},
+                            {time: '', active: false},
+                            {time: '', active: false},
+                        ]}
+                        onClick={(time) => onClickTime(time)}
+                    />
+                    <RowTime 
+                        times={[
+                            {time: '18:00', active: true},
+                            {time: '18:30', active: true},
+                            {time: '19:00', active: false},
+                            {time: '19:30', active: true},
+                            {time: '', active: false},
+                        ]}
+                        onClick={(time) => onClickTime(time)}
+                    />
+        </div>
+    </div>
+})
\ No newline at end of file