diff --git a/src/App.tsx b/src/App.tsx
index 0e15e03..8bc36e0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './App.css';
+import { ContextLang } from './components/ContextLang';
 import { Footer } from './components/footer/footer';
 import { MainPart } from './components/mainPart/mainPart';
 
 function App() {
+  const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
   return (
     <div className="App">
-      <MainPart />
-      <Footer />
+      <ContextLang.Provider value={{lang: currentLang, setLang: setCurrentLang}} >
+        <MainPart />
+        <Footer />
+      </ContextLang.Provider>      
     </div>
   );
 }
diff --git a/src/components/ContextLang.tsx b/src/components/ContextLang.tsx
new file mode 100644
index 0000000..251c07a
--- /dev/null
+++ b/src/components/ContextLang.tsx
@@ -0,0 +1,3 @@
+import React from "react";
+
+export const ContextLang = React.createContext<{lang: 'ru' | 'en', setLang: React.Dispatch<React.SetStateAction<"ru" | "en">>}>(null);
\ No newline at end of file
diff --git a/src/components/langDict.tsx b/src/components/langDict.tsx
index 8125540..7861218 100644
--- a/src/components/langDict.tsx
+++ b/src/components/langDict.tsx
@@ -23,6 +23,10 @@ export const LangDict = {
         ru: 'Начать новую демонстрацию',
         en: 'Start new demonstration'
     },
+    orLine: {
+        ru: 'или',
+        en: 'or'
+    },
     startDemoDescriptionEnroll: {
         ru: 'Запланируйте демонстрацию с сотрудником отдела продаж',
         en: 'schedule a demonstration with manager'
diff --git a/src/components/mainPart/backgroundImagePng.png b/src/components/mainPart/backgroundImagePng.png
new file mode 100644
index 0000000..8e024ea
Binary files /dev/null and b/src/components/mainPart/backgroundImagePng.png differ
diff --git a/src/components/mainPart/contentContainer.tsx b/src/components/mainPart/contentContainer.tsx
index a2e127c..db45164 100644
--- a/src/components/mainPart/contentContainer.tsx
+++ b/src/components/mainPart/contentContainer.tsx
@@ -1,24 +1,36 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
+import { ContextLang } from "../ContextLang";
 import { PinkButton } from "./pinkButton";
 
 type TProps = {
-    textButton: string
+    textButton: {
+        ru: string,
+        en: string
+    }
     onClickButton: () => void
-    titleText?: string
-    descriptText: string
-    accessCode?: string
+    titleText?: {
+        ru: string,
+        en: string
+    }
+    descriptText: {
+        ru: string,
+        en: string
+    }
+    accessCode?: string,
 }
 
 export const ContentContainer:React.FC<TProps> = React.memo((props) => {
+    let {lang} = useContext(ContextLang);
+    
     return <div className="main-part-text-container">
         {
             props.titleText && 
             <span className="main-part-text-title">
-                {props.titleText}
+                {props.titleText[lang]}
             </span>
         }        
         <span className="main-part-text-descript">
-            {props.descriptText}
+            {props.descriptText[lang]}
         </span>
         {
             props.accessCode &&
@@ -26,7 +38,7 @@ export const ContentContainer:React.FC<TProps> = React.memo((props) => {
         }
         <PinkButton
             onClick={props.onClickButton}
-            textButton={props.textButton}                
+            textButton={props.textButton[lang]}
         />
     </div>
 })
\ No newline at end of file
diff --git a/src/components/mainPart/mainPart.css b/src/components/mainPart/mainPart.css
index 2a79ba4..840806c 100644
--- a/src/components/mainPart/mainPart.css
+++ b/src/components/mainPart/mainPart.css
@@ -17,7 +17,8 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    background: url('backgroundImage.svg') 50% 50% no-repeat;
+    /* background: url('backgroundImage.svg') 50% 50% no-repeat; */
+    background: url('backgroundImagePng.png') 50% 50% no-repeat;
     /* background-size: 100% 100%;     */
     background-size: cover;
 }
@@ -34,6 +35,7 @@
 .main-part-header-logo {
     width: 53px;
     height: 85px;
+    cursor: pointer;
 }
 
 .main-part-header-lang {
diff --git a/src/components/mainPart/mainPart.tsx b/src/components/mainPart/mainPart.tsx
index 2ca7c56..e78b9e0 100644
--- a/src/components/mainPart/mainPart.tsx
+++ b/src/components/mainPart/mainPart.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import './mainPart.css';
 import { MainPartHeader } from "./mainPartHeader";
 import { ContentContainer } from "./contentContainer";
@@ -9,6 +9,8 @@ import { CalendarComponent } from "./calendar/calendar";
 import { PlanContentContainer } from "./planContentContainer";
 import { TimeSelector } from "./timeSelector/timeSelector";
 import { Form } from "./form/form";
+import { LangDict } from "../langDict";
+import { ContextLang } from "../ContextLang";
 
 type FormData = {
     phone: string
@@ -17,48 +19,66 @@ type FormData = {
 }
 
 export const MainPart: React.FC = React.memo(() => {
+    // const [currentLang, setCurrentLang] = useState<'ru' | 'en'>('ru');
+    const {lang, setLang} = useContext(ContextLang);
     const [changeContent, setChangeContent] = useState(0);
     const [showBackground, setShowBackground] = useState<boolean>(false);
     const [planContent, setPlaneContent] = useState<JSX.Element>();
     const defaultCurrentContent = 
         <ContentContainer 
-                titleText="Удаленная демонстрация жилого комплекса"
-                descriptText="Основанная на стриминге технология удаленной демонстрации позволяет познакомиться с жилым комплексом, не посещая офис продаж."
-                onClickButton={() => onClickStartDemo()}
-                textButton='Начать демонстрацию'
+            titleText={LangDict.mainTitle}
+            descriptText={LangDict.mainDescription}
+            onClickButton={() => onClickStartDemo()}
+            textButton={LangDict.startDemoButton}
         />
-    const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);
+    const [currentContent, setCurrentContent] = useState<JSX.Element>(defaultCurrentContent);  
+    const lastRender = currentContent;
 
     useEffect(() => {
         // setChangeContent(changeContent + 1);
-    }, [currentContent])
+    }, [currentContent]);    
+
+    useEffect(() => {
+        console.log(lang)
+        // onClickStartDemo()
+        setCurrentContent(lastRender)
+        
+    }, [lang])
+
+    function changeLang(lang: 'ru' | 'en') {
+        setLang(lang);
+        document.querySelector('html').lang = lang;
+    }
 
     function onClickStartDemo() {
+        console.log(lang)
         setCurrentContent(
             <>
                 <ContentContainer 
-                    titleText="Запустите демонстрацию"
-                    descriptText="Начните новую демонстрацию жилого комплекса"
+                    titleText={LangDict.startDemoTitle}
+                    descriptText={LangDict.startDemoDescriptionStart}
                     onClickButton={() => onClickCreateNewDemo()}
-                    textButton='Начать новую демонстрацию'
+                    textButton={LangDict.startNewDemoButton}
                     />
-                <OrLineContainer />
+                <OrLineContainer text={LangDict.orLine}/>
                 <ContentContainer 
-                    descriptText="Запланируйте демонстрацию с сотрудником отдела продаж"
+                    descriptText={LangDict.startDemoDescriptionEnroll}
                     onClickButton={() => onClickPlaneDemo()}
-                    textButton='Запланировать демонстрацию'
-                    />
+                    textButton={LangDict.enrollNewDemoButton}
+                />
             </>
         )        
     } 
 
-    function onClickCreateNewDemo() {        
+    function onClickCreateNewDemo() {
+        console.log(lang)
         setCurrentContent(
             <ContentContainer 
-                titleText="Демонстрация запущена"
-                descriptText="Код для подключения к демонстрации:"
+                // titleText="Демонстрация запущена"
+                titleText={LangDict.demoStartedTitle}
+                descriptText={LangDict.demoStartedDescription}
                 onClickButton={() => onClickConnect()}
-                textButton='Подключиться'
+                textButton={LangDict.connectToDemoButton}
                 accessCode="1876"
             />
         )            
@@ -116,9 +136,9 @@ export const MainPart: React.FC = React.memo(() => {
         setPlaneContent(null);
         setCurrentContent(
             <ContentContainer 
-                titleText="Просмотр запланирован"
-                descriptText="Дополнительная информация будет отправлена на указанный почтовый адрес или номер телефона."
-                textButton="На главную"
+                titleText={LangDict.checkouted}
+                descriptText={LangDict.checkoutedDescription}
+                textButton={LangDict.toHomeButton}
                 onClickButton={() => toMain()}
             />
         )
@@ -127,6 +147,7 @@ export const MainPart: React.FC = React.memo(() => {
 
     function toMain() {
         setCurrentContent(defaultCurrentContent);
+        setPlaneContent(null);
         disableBackground();
     }
 
@@ -140,7 +161,7 @@ export const MainPart: React.FC = React.memo(() => {
 
     return <div className="main-part-container">
         <div className="background-image"></div>
-        <MainPartHeader />
+        <MainPartHeader changeLang={(lang) => changeLang(lang)} onClickLogo={toMain}/>
         <TransitionGroup>
             <CSSTransition
                 key={changeContent}
@@ -151,7 +172,7 @@ export const MainPart: React.FC = React.memo(() => {
                     {currentContent}                
                 </div>
             </CSSTransition>            
-        </TransitionGroup>
+        </TransitionGroup>        
         {
             planContent ?
             <div className="main-part-plan-content">
diff --git a/src/components/mainPart/mainPartHeader.tsx b/src/components/mainPart/mainPartHeader.tsx
index d72de48..1440a8e 100644
--- a/src/components/mainPart/mainPartHeader.tsx
+++ b/src/components/mainPart/mainPartHeader.tsx
@@ -1,15 +1,21 @@
 import React, { useState } from "react";
 import whiteLogo from './logoWhiteIcon.svg';
 
-export const MainPartHeader:React.FC = React.memo(() => {
+type TProps = {
+    changeLang: (lang: 'ru' | 'en') => void
+    onClickLogo: () => void
+}
+
+export const MainPartHeader:React.FC<TProps> = React.memo((props) => {
     const [activeButton, setActiveButton] = useState<string>('ru');
 
-    function onClickChangeLang(lang: string) {
+    function onClickChangeLang(lang: 'ru' | 'en') {
         setActiveButton(lang);
+        props.changeLang(lang);
     }
 
     return <div className="main-part-header">
-        <img className="main-part-header-logo" alt="logo" src={whiteLogo} />
+        <img className="main-part-header-logo" alt="logo" src={whiteLogo} onClick={() => props.onClickLogo()}/>
         <div className="main-part-header-lang">
             <span className={`main-part-header-lang-button ${activeButton === 'en' ? 'active' : null}`} onClick={() => onClickChangeLang('en')}>EN</span>
             <span className="main-part-header-lang-slash">/</span>
diff --git a/src/components/mainPart/orLineContainer.tsx b/src/components/mainPart/orLineContainer.tsx
index 96faf10..10207a7 100644
--- a/src/components/mainPart/orLineContainer.tsx
+++ b/src/components/mainPart/orLineContainer.tsx
@@ -1,7 +1,19 @@
-import React from "react";
+import React, { useContext } from "react";
+import { ContextLang } from "../ContextLang";
 
-export const OrLineContainer:React.FC = () => <div className="main-part-content-or-line-container">
-    <span className="main-part-content-or-line"></span>
-    <span className="main-part-content-or-line-text">или</span>
-    <span className="main-part-content-or-line"></span>
-</div>;
\ No newline at end of file
+type TProps = {
+    text: {
+        ru: string,
+        en: string
+    }
+}
+
+
+export const OrLineContainer:React.FC<TProps> = (props) => {
+    const {lang} = useContext(ContextLang);
+    return <div className="main-part-content-or-line-container">
+        <span className="main-part-content-or-line"></span>
+        <span className="main-part-content-or-line-text">{props.text[lang]}</span>
+        <span className="main-part-content-or-line"></span>
+    </div>
+};
\ No newline at end of file