diff --git a/frontend/src/components/mapMenu/MapMenu.tsx b/frontend/src/components/mapMenu/MapMenu.tsx
index 44daec1..0c8031c 100644
--- a/frontend/src/components/mapMenu/MapMenu.tsx
+++ b/frontend/src/components/mapMenu/MapMenu.tsx
@@ -21,7 +21,6 @@ const MapMenu: React.FC = observer(() => {
                 mapMenuStore.fetchModules().then(() => {
                     mapMenuStore.fetchModuleById(mapMenuStore.availableModules[0].id).then(() => {
                         mapMenuStore.fetchLevels().then(() => {
-                            console.log(mapMenuStore.availableLevels)
                         })
                     })
                 })
@@ -37,8 +36,9 @@ const MapMenu: React.FC = observer(() => {
             <br/>
             <div className="geolocations">
                 <div className="geolocations__wrapper">
-                    {mapMenuStore.availableLevels.map((level, index) =>
-                        <Module id={(index + 1).toString()} key={level.id} title={level.title}/>)
+                    {mapMenuStore.availableLevels.map((level, index) => {
+                        return <Module id={(index + 1).toString()} key={level.id} title={level.title} theoryUnits={level.theory_units}/>
+                    })
                     }
                 </div>
             </div>
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
index 4cdcadd..1be653d 100644
--- a/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
+++ b/frontend/src/components/mapMenu/UIMapMenu/Level/ModalLevelBody.tsx
@@ -2,20 +2,33 @@ import React, {useState} from 'react';
 import "./modalLevelBody.scss"
 import ArrowLeft from "../UIChooseModule/ArrowLeft.tsx";
 import ArrowRight from "../UIChooseModule/ArrowRight.tsx";
+import {ITheoryUnitType} from "../../../../types/TheoryUnitType.ts";
 
 interface IModalLevelProps {
-    id: string,
-    title: string
+    title: string,
+    theoryUnits?: ITheoryUnitType[]
 }
 
-const ModalLevelBody: React.FC<IModalLevelProps> = ({title}) => {
-    // const tasks = [
-    //     {name: "theory", element: <Theory/>},
-    //     {name: "video", element: <Video/>},
-    //     {name: "test", element: <Test/>}
-    // ]
-    //
-    // const [currentTaskIndex, setCurrentTaskIndex] = useState(0)
+const ModalLevelBody: React.FC<IModalLevelProps> = ({title, theoryUnits}) => {
+    const tasks = [
+        {name: "theory", element: <Theory/>},
+        {name: "video", element: <Video/>},
+        {name: "test", element: <Test/>}
+    ]
+
+    console.log(theoryUnits)
+
+    const [currentTaskIndex, setCurrentTaskIndex] = useState(0)
+
+    const renderMenuTheoryBlocks = (countTheoryBlocks: number) => {
+        const theoryBlocks: JSX.Element[] = []
+        for (let i = 0; i < countTheoryBlocks; i++) {
+            theoryBlocks.push(<div key={i} className="menu-item" onClick={() => {
+                setCurrentTaskIndex(i)
+            }}>{tasks[0].element}</div>)
+        }
+        return theoryBlocks
+    }
 
     return (
         <div>
@@ -31,31 +44,17 @@ const ModalLevelBody: React.FC<IModalLevelProps> = ({title}) => {
                 </div>
             </div>
 
-            {/*<div className="menu">*/}
-            {/*    {tasks.map((item, index) =>*/}
-            {/*        tasks.map((task) => {*/}
-            {/*            return task === item*/}
-            {/*                ? <div key={index} className="menu-item" onClick={() => {*/}
-            {/*                    setCurrentTaskIndex(index)*/}
-            {/*                }}>{task}</div>*/}
-            {/*                : ""*/}
-            {/*        }))}*/}
+            {theoryUnits && theoryUnits.length !== 0
+                ? <div className="menu">{renderMenuTheoryBlocks(theoryUnits!.length)}</div>
+                : ""}
 
-            {/*    /!*{tasks.map((item, index) =>*!/*/}
-            {/*    /!*    tasks.map((task) => {*!/*/}
-            {/*    /!*        return task.name === item.taskName*!/*/}
-            {/*    /!*            ? <div key={index} className="menu-item" onClick={() => {*!/*/}
-            {/*    /!*                setCurrentTaskIndex(index)*!/*/}
-            {/*    /!*            }}>{task.element}</div>*!/*/}
-            {/*    /!*            : ""*!/*/}
-            {/*    /!*    }))}*!/*/}
-
-            {/*</div>*/}
-            <div className="text-info">
-                <div className="level-title">{title.toUpperCase()}</div>
-                {/*<div className="level-body">{menu[currentTaskIndex].body}</div>*/}
-                {/*<div className="level-body">{tasks[currentTaskIndex]}</div>*/}
-            </div>
+            {theoryUnits![currentTaskIndex] !== undefined &&
+                (<div className="text-info">
+                        <div className="level-title">{theoryUnits![currentTaskIndex].title}</div>
+                        <div className="level-body">{theoryUnits![currentTaskIndex].content}</div>
+                    </div>
+                )
+            }
         </div>
     );
 };
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx b/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx
index b28db56..e6c7d38 100644
--- a/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx
+++ b/frontend/src/components/mapMenu/UIMapMenu/Level/Module.tsx
@@ -4,10 +4,11 @@ import ModalLevelBody from "./ModalLevelBody.tsx";
 
 interface IModuleProps {
     id: string,
-    title: string
+    title: string,
+    theoryUnits?: string[]
 }
 
-const Module: React.FC<IModuleProps> = ({id, title}) => {
+const Module: React.FC<IModuleProps> = ({id, title, theoryUnits}) => {
     const [isOpenModalWindow, setOpenModalWindow] = useState(false)
     const classNameGeolocation = "geolocation-" + id
     return (
@@ -16,14 +17,13 @@ const Module: React.FC<IModuleProps> = ({id, title}) => {
             {isOpenModalWindow
                 ? <ModalWindow
                     onClose={() => setOpenModalWindow(!isOpenModalWindow)}
-                    body={<ModalLevelBody id={id} title={title}/>}
+                    body={<ModalLevelBody key={id} title={title} theoryUnits={theoryUnits}/>}
                 />
                 : ""}
 
             <div>
                 <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <g style={{mixBlendMode: "color-dodge"}}>
-                        <rect width="150" height="150" fill="black"/>
                         <circle cx="75" cy="75" r="75" fill="url(#paint0_radial_108_17393)"/>
                     </g>
                     <defs>
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css
new file mode 100644
index 0000000..8b52b30
--- /dev/null
+++ b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css
@@ -0,0 +1,68 @@
+.header-modal {
+  width: 100%;
+  height: 5rem;
+  border-radius: 15px;
+  background: linear-gradient(to right, #7f1e8b, #8452ce);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.menu {
+  position: absolute;
+  margin-left: 1.25rem;
+  top: 23%;
+  width: 8%;
+  max-height: 75%;
+  background: #763186;
+  padding: 2px;
+  border-radius: 30px;
+}
+
+.text-info {
+  position: absolute;
+  left: 12%;
+  width: 76%;
+  margin-top: 10px;
+}
+
+.level-title {
+  color: #2B2A29;
+  font-family: Golos, sans-serif;
+  font-size: 1.75rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.125rem;
+  text-align: left;
+}
+
+.level-name {
+  color: #F5F5F5;
+  text-align: center;
+  font-family: Golos, sans-serif;
+  font-size: 1.5rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.1125rem;
+}
+
+.level-body {
+  color: #000;
+  font-family: Golos, sans-serif;
+  font-size: 1.125rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: 0.1125rem;
+  word-break: break-word;
+  margin-top: 20px;
+  text-align: left;
+}
+
+.menu-item {
+  margin-top: 5px;
+}
+
+/*# sourceMappingURL=modalLevelBody.css.map */
diff --git a/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map
new file mode 100644
index 0000000..080f46f
--- /dev/null
+++ b/frontend/src/components/mapMenu/UIMapMenu/Level/modalLevelBody.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["modalLevelBody.scss","../../../../styles/variablesStyles.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA,YCbY;EDcZ;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAGF;EACE","file":"modalLevelBody.css"}
\ No newline at end of file
diff --git a/frontend/src/store/mapMenuStore.ts b/frontend/src/store/mapMenuStore.ts
index d6c58a1..153422d 100644
--- a/frontend/src/store/mapMenuStore.ts
+++ b/frontend/src/store/mapMenuStore.ts
@@ -113,6 +113,13 @@ class MapMenuStore {
             levels_ids: levels
         })
     }
+
+    createTheoryUnit() {
+        axios.post("http://localhost:8000/maps/" + this.currentMapId + "/modules/" + this.currentModuleId + "/levels/" + "8aa85f64-5717-4562-b3fc-2c963f66afa6" + "/theory", {
+            title: "Заголовок 1",
+            content: "Контент"
+        })
+    }
 }
 
 export default new MapMenuStore()
diff --git a/frontend/src/types/LevelType.ts b/frontend/src/types/LevelType.ts
index d5a7cb5..01f7c4b 100644
--- a/frontend/src/types/LevelType.ts
+++ b/frontend/src/types/LevelType.ts
@@ -2,5 +2,5 @@ export interface ILevelType {
     id: string,
     title: string,
     body?: string,
-    tasks?: string[]
+    theory_units?: string[]
 }
diff --git a/frontend/src/types/TheoryUnitType.ts b/frontend/src/types/TheoryUnitType.ts
new file mode 100644
index 0000000..ccd610d
--- /dev/null
+++ b/frontend/src/types/TheoryUnitType.ts
@@ -0,0 +1,4 @@
+export interface ITheoryUnitType {
+    title: string,
+    content: string,
+}