diff --git a/src/app/App.css b/src/app/App.css
index 78b8850cf..05a3f9709 100644
--- a/src/app/App.css
+++ b/src/app/App.css
@@ -1,38 +1,44 @@
 .App {
-    text-align: center;
+  text-align: center;
+  background-color: var(--background-color);
+  color: var(--color);
 }
 
 .App-logo {
-    height: 40vmin;
-    pointer-events: none;
+  height: 40vmin;
+  pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-    .App-logo {
-        animation: App-logo-spin infinite 20s linear;
-    }
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
 }
 
 .App-header {
-    background-color: #282c34;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    font-size: calc(10px + 2vmin);
-    color: white;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+}
+
+.App-nav {
+  display: flex;
+  justify-content: center;
+  gap: 15px;
 }
 
 .App-link {
-    color: #61dafb;
+  color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 94a44b7bf..2929056c4 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -2,22 +2,57 @@ import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
+import { ThemeProvider } from '../shared/providers/ThemeProvider';
+import { LangProvider, Content, useLang } from '../shared/providers/LangProvider';
+import { ThemeSwitcher } from '../shared/theme-switcher/ThemeSwitcher';
+import { LangSwitcher } from '../shared/lang-switcher/LangSwitcher';
+
+const MainContent = () => {
+  const content: Content = {
+    fullname: { ru: 'Игорь Аралов', en: 'Igor Aralov' },
+    target: {
+      ru: 'Научиться разрабатывать веб-приложения при помощи React',
+      en: 'Learn to develop web applications using React',
+    },
+    skills: {
+      ru: 'Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения на Delphi',
+      en: 'I have been working professionally as an SQL developer for 10 years and am involved in the development of a desktop application using Delphi.',
+    },
+    hobby: {
+      ru: 'Интересуюсь фронтенд и фуллстек разработкой на js/ts',
+      en: "I'm interested in frontend and full-stack development using js/ts",
+    },
+  };
+
+  const { useContent } = useLang();
+  const l = useContent(content);
+
+  return (
+    <>
+      <h1>{l('fullname')} (igor.aralov@rambler.ru)</h1>
+      <p>{l('target')}</p>
+      <p>{l('skills')}</p>
+      <p>{l('hobby')}</p>
+    </>
+  );
+};
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          <h1>Игорь Аралов (igor.aralov@rambler.ru)</h1>
-          <p>Научиться разрабатывать веб-приложения при помощи React</p>
-          <p>
-            Профессионально работаю SQL разработчиком уже 10 лет и принимаю участие в разработке десктопного приложения
-            на Delphi
-          </p>
-          <p>Интересуюсь фронтенд и фуллстек разработкой на js/ts</p>
-        </p>
-      </header>
-    </div>
+    <ThemeProvider>
+      <LangProvider>
+        <div className="App">
+          <header className="App-header">
+            <div className="App-nav">
+              <ThemeSwitcher />
+              <LangSwitcher />
+            </div>
+            <img src={logo} className="App-logo" alt="logo" />
+            <MainContent />
+          </header>
+        </div>
+      </LangProvider>
+    </ThemeProvider>
   );
 }
 
diff --git a/src/app/index.css b/src/app/index.css
index 4b326a5a4..0ca6b3986 100644
--- a/src/app/index.css
+++ b/src/app/index.css
@@ -1,13 +1,21 @@
+[data-theme='light'] {
+  --background-color: #fff;
+  --color: #000;
+}
+
+[data-theme='dark'] {
+  --background-color: #333;
+  --color: #fff;
+}
+
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
+    'Droid Sans', 'Helvetica Neue', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-        monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
diff --git a/src/shared/button/Button.tsx b/src/shared/button/Button.tsx
index fb8c9ef44..41bd4eef8 100644
--- a/src/shared/button/Button.tsx
+++ b/src/shared/button/Button.tsx
@@ -1,12 +1,15 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import cn from 'clsx';
 import s from './Button.modules.scss';
 
 type ButtonProps = {
   children: ReactNode;
   disabled?: boolean;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const Button = ({ children, disabled = false }: ButtonProps) => (
-  <button className={cn(s.button, { [s.disabled]: disabled })}>{children}</button>
+export const Button = ({ children, onClick, disabled = false }: ButtonProps) => (
+  <button className={cn(s.button, { [s.disabled]: disabled })} onClick={onClick}>
+    {children}
+  </button>
 );
diff --git a/src/shared/header/Header.module.scss b/src/shared/header/Header.module.scss
index 9d699ac7c..84cbf3220 100644
--- a/src/shared/header/Header.module.scss
+++ b/src/shared/header/Header.module.scss
@@ -1,10 +1,23 @@
 .header {
+  display: flex;
+  justify-content: space-between;
   position: -webkit-sticky;
   position: sticky;
   top: 0;
-  background-color: #333;
+  background-color: var(--header-bg-color);
   color: white;
   padding: 10px;
   min-height: 50px;
   z-index: 1000;
 }
+
+.left {
+  display: flex;
+  gap: 10px;
+}
+
+.right {
+  display: flex;
+  justify-content: end;
+  gap: 10px;
+}
diff --git a/src/shared/header/Header.tsx b/src/shared/header/Header.tsx
index 456d1021a..658f18145 100644
--- a/src/shared/header/Header.tsx
+++ b/src/shared/header/Header.tsx
@@ -1,9 +1,19 @@
 import React from 'react';
 import { Logo } from '../logo/Logo';
+import { ThemeSwitcher } from '../theme-switcher/ThemeSwitcher';
+import { LangSwitcher } from '../lang-switcher/LangSwitcher';
 import s from './Header.module.scss';
 
-type HeaderProps = {
+export type HeaderProps = {
   showLogo: boolean;
 };
 
-export const Header = ({ showLogo = true }: HeaderProps) => <div className={s.header}>{showLogo && <Logo />}</div>;
+export const Header = ({ showLogo = true }: HeaderProps) => (
+  <div className={s.header}>
+    <div className={s.left}>{showLogo && <Logo />}</div>
+    <div className={s.right}>
+      <ThemeSwitcher />
+      <LangSwitcher />
+    </div>
+  </div>
+);
diff --git a/src/shared/lang-switcher/LangSwitcher.tsx b/src/shared/lang-switcher/LangSwitcher.tsx
new file mode 100644
index 000000000..65538061e
--- /dev/null
+++ b/src/shared/lang-switcher/LangSwitcher.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { useLang } from '../providers/LangProvider';
+import { Button } from '../button/Button';
+
+export const LangSwitcher = () => {
+  const { lang, toggleLang } = useLang();
+
+  return <Button onClick={toggleLang}>Switch to {lang === 'ru' ? 'English' : 'Russian'} lang</Button>;
+};
diff --git a/src/shared/layout/Layout.module.scss b/src/shared/layout/Layout.module.scss
index 407c9e5bf..9d2e007cd 100644
--- a/src/shared/layout/Layout.module.scss
+++ b/src/shared/layout/Layout.module.scss
@@ -1,5 +1,6 @@
 .content {
   margin: 0;
   padding: 20px;
-  background-color: #f4f4f4;
+  background-color: var(--layout-bg-color);
+  color: var(--color);
 }
diff --git a/src/shared/layout/Layout.tsx b/src/shared/layout/Layout.tsx
index 9af8a9b13..08df235a1 100644
--- a/src/shared/layout/Layout.tsx
+++ b/src/shared/layout/Layout.tsx
@@ -1,315 +1,36 @@
 import React from 'react';
 import { Header } from '../header/Header';
+import { Content, useLang } from '../../shared/providers/LangProvider';
 import s from './Layout.module.scss';
 
-const Content = () => (
-  <p className={s.content}>
-    <p>Lorem ipsum dolor sit amet.</p>
-    <p>Odit necessitatibus iure quas quaerat!</p>
-    <p>Quae vitae deserunt vero accusantium?</p>
-    <p>Id laborum quaerat rem laboriosam.</p>
-    <p>Molestias saepe assumenda optio ab!</p>
-    <p>Facilis nostrum natus consectetur quam.</p>
-    <p>Doloremque illum ducimus ut assumenda.</p>
-    <p>Numquam doloribus autem nemo sint.</p>
-    <p>Repellendus ex odio aperiam pariatur.</p>
-    <p>Assumenda natus ratione labore tempora.</p>
-    <p>Delectus, cumque. Enim, aut iste.</p>
-    <p>Ipsa fugit ad temporibus reprehenderit.</p>
-    <p>Quos beatae assumenda fuga repellat.</p>
-    <p>Odit odio velit ducimus repellat?</p>
-    <p>Placeat possimus vero alias perferendis.</p>
-    <p>Facilis, inventore. Ratione, delectus illum?</p>
-    <p>Necessitatibus nisi harum assumenda eligendi!</p>
-    <p>Nisi laboriosam et voluptates. Repudiandae.</p>
-    <p>Commodi illo dolore ipsa eos.</p>
-    <p>Optio incidunt veniam officiis reiciendis.</p>
-    <p>Illo odio sapiente eum aliquam.</p>
-    <p>Et aspernatur enim provident sit.</p>
-    <p>Totam maiores dicta magnam deserunt.</p>
-    <p>Doloremque amet magni tempore expedita.</p>
-    <p>Dolores asperiores expedita aut magnam!</p>
-    <p>Consectetur tempora atque perferendis odio.</p>
-    <p>Cum eius officiis repudiandae fuga.</p>
-    <p>Officiis repellat ducimus architecto culpa.</p>
-    <p>Ducimus odio vero corrupti error!</p>
-    <p>Dolore perspiciatis consequuntur culpa commodi!</p>
-    <p>Explicabo sapiente laudantium quae atque.</p>
-    <p>Hic reiciendis dignissimos vitae veritatis!</p>
-    <p>Provident veniam ut ad consectetur.</p>
-    <p>Maxime nobis voluptates deleniti consectetur!</p>
-    <p>Neque soluta itaque voluptatum alias!</p>
-    <p>Ad, ipsa quo. Nulla, laborum.</p>
-    <p>Inventore voluptatem quas eveniet rerum!</p>
-    <p>Omnis modi possimus animi voluptatum!</p>
-    <p>Voluptatem natus alias fugiat accusamus.</p>
-    <p>Itaque eos maiores corporis unde!</p>
-    <p>Cum repudiandae ad autem et!</p>
-    <p>Cum provident placeat veniam suscipit.</p>
-    <p>Animi, possimus. Distinctio, quos necessitatibus?</p>
-    <p>Consequatur dolore impedit dicta officiis!</p>
-    <p>Maxime eligendi voluptatum aspernatur repudiandae!</p>
-    <p>Maiores accusantium officia veniam odit!</p>
-    <p>Dicta, eius. Dolore, maxime optio?</p>
-    <p>Accusamus ad nihil numquam quae.</p>
-    <p>Atque, quidem! Perspiciatis, non unde.</p>
-    <p>Laboriosam eum consequuntur saepe iusto.</p>
-    <p>Facere aliquam sit ad omnis.</p>
-    <p>Consectetur voluptate doloribus nemo et!</p>
-    <p>Accusamus debitis quaerat beatae quas.</p>
-    <p>Ipsa consectetur tenetur dolorem omnis.</p>
-    <p>Blanditiis ad asperiores culpa at.</p>
-    <p>Cupiditate itaque iure doloribus hic.</p>
-    <p>Numquam hic incidunt voluptate fugiat?</p>
-    <p>Illo distinctio explicabo porro maiores.</p>
-    <p>Numquam ea totam officiis voluptatibus.</p>
-    <p>Ex recusandae est perspiciatis quos!</p>
-    <p>Dolores iste recusandae modi facilis?</p>
-    <p>Asperiores id vitae odio officiis.</p>
-    <p>Blanditiis numquam enim accusantium quia.</p>
-    <p>Delectus quas tenetur iure voluptatibus?</p>
-    <p>Illo aliquam inventore exercitationem quia.</p>
-    <p>Reprehenderit, voluptates modi! Molestias, quae!</p>
-    <p>Iure dicta repellat facilis in!</p>
-    <p>Eos fugit tempora dolor molestias.</p>
-    <p>Earum neque consectetur magnam exercitationem!</p>
-    <p>Facere repudiandae vel assumenda odit!</p>
-    <p>Dolore expedita officiis sed voluptatem.</p>
-    <p>Ratione minima odit blanditiis voluptatum!</p>
-    <p>Quibusdam laborum reiciendis placeat iste!</p>
-    <p>Architecto obcaecati eaque nihil non!</p>
-    <p>Dolore nihil placeat alias qui!</p>
-    <p>Beatae veritatis assumenda illo ipsum?</p>
-    <p>Blanditiis animi facilis adipisci suscipit.</p>
-    <p>Voluptatibus, architecto aut. Aliquam, molestias!</p>
-    <p>Reprehenderit illo reiciendis minima. Tempore.</p>
-    <p>Commodi dicta totam tenetur dolore?</p>
-    <p>Repellat, ratione corporis! Placeat, soluta.</p>
-    <p>Totam similique pariatur magnam modi.</p>
-    <p>Expedita exercitationem ipsum debitis velit.</p>
-    <p>Magni perferendis aut deserunt alias.</p>
-    <p>Consectetur sint aspernatur dolor quidem.</p>
-    <p>Incidunt porro voluptates assumenda odio!</p>
-    <p>Quae nemo laborum nihil nulla.</p>
-    <p>Error voluptas itaque dicta suscipit.</p>
-    <p>Rem magnam amet dignissimos consequuntur.</p>
-    <p>Tempore corrupti nesciunt reiciendis ratione!</p>
-    <p>Eum quasi fugit tempore adipisci.</p>
-    <p>Vel fugiat unde ipsa repellat.</p>
-    <p>Suscipit, vero? Voluptatum, suscipit id!</p>
-    <p>Eligendi itaque magnam et? Voluptatibus?</p>
-    <p>Aperiam laborum tempore explicabo reiciendis.</p>
-    <p>Cupiditate esse excepturi ab eos.</p>
-    <p>Vero animi soluta omnis praesentium!</p>
-    <p>Incidunt at laborum veritatis quis.</p>
-    <p>Facilis dolorum sunt dolores doloribus.</p>
-    <p>Ab officiis eaque iste doloribus.</p>
-    <p>Assumenda necessitatibus tempore fugiat rerum.</p>
-    <p>Nam quasi nihil minus ipsum.</p>
-    <p>Voluptatem temporibus possimus assumenda cum?</p>
-    <p>Tenetur et eos possimus fugit?</p>
-    <p>Consequatur dolorum at odit a.</p>
-    <p>Consequatur exercitationem ipsum nisi expedita.</p>
-    <p>Modi, neque? Nesciunt, nobis laborum.</p>
-    <p>Optio est tempore amet ratione?</p>
-    <p>Dolor repudiandae laboriosam ullam nobis!</p>
-    <p>Iste assumenda nostrum est suscipit?</p>
-    <p>Porro veniam quidem iste in.</p>
-    <p>Praesentium quo molestias dolorum odio.</p>
-    <p>Minus veniam culpa repellendus esse.</p>
-    <p>Provident tempore commodi nemo corporis?</p>
-    <p>Laudantium quibusdam sunt aliquam ab?</p>
-    <p>Architecto consequuntur voluptas distinctio delectus?</p>
-    <p>Dignissimos excepturi deleniti reprehenderit tempora.</p>
-    <p>Iure atque deserunt consequatur laborum?</p>
-    <p>Ullam, modi vero. Error, doloremque!</p>
-    <p>Veritatis fugiat odit libero exercitationem!</p>
-    <p>Sapiente placeat perferendis laudantium error!</p>
-    <p>Accusamus vero magnam illo molestiae?</p>
-    <p>Doloremque minus exercitationem error neque?</p>
-    <p>Quam corrupti culpa repellat adipisci?</p>
-    <p>Id harum fugit tempora quas?</p>
-    <p>Quo eveniet aperiam dignissimos cupiditate.</p>
-    <p>Aut quasi quidem in laborum?</p>
-    <p>Laudantium necessitatibus totam itaque impedit.</p>
-    <p>Deserunt quo porro quasi ut.</p>
-    <p>Repellendus doloremque nam enim laudantium.</p>
-    <p>Modi quae nesciunt ipsam animi!</p>
-    <p>Minima aut repellat ab reiciendis?</p>
-    <p>Doloremque eaque sequi doloribus laboriosam.</p>
-    <p>Ratione repudiandae natus aliquid sunt?</p>
-    <p>Velit ratione vel dolore maxime.</p>
-    <p>Temporibus, dolore. Aspernatur, voluptate nisi?</p>
-    <p>Eius quos sed delectus sit.</p>
-    <p>Ut cupiditate sequi esse ipsum.</p>
-    <p>Veniam voluptas exercitationem quibusdam animi.</p>
-    <p>Cum temporibus nobis fugiat repellat?</p>
-    <p>Vitae, atque sapiente! Omnis, fugit.</p>
-    <p>Perspiciatis consequatur optio aut sunt.</p>
-    <p>Nesciunt itaque eaque tenetur aliquam!</p>
-    <p>Fugit accusamus veniam culpa adipisci!</p>
-    <p>Blanditiis numquam ipsam culpa optio.</p>
-    <p>Molestiae eum fugiat architecto rerum!</p>
-    <p>Saepe fugit dolor totam corporis!</p>
-    <p>Quaerat aliquam vero officiis a.</p>
-    <p>Ab magni modi quas sit.</p>
-    <p>Reiciendis suscipit unde ducimus quasi.</p>
-    <p>Molestias laudantium facilis dicta consectetur.</p>
-    <p>Distinctio adipisci autem accusamus quibusdam!</p>
-    <p>Possimus hic eaque illum a?</p>
-    <p>Culpa labore reprehenderit voluptate tempore?</p>
-    <p>Quod, doloremque. Natus, ipsa quo.</p>
-    <p>Illum molestias ducimus sequi magnam.</p>
-    <p>Explicabo nostrum amet quia hic.</p>
-    <p>Vero aperiam tempora quos reiciendis.</p>
-    <p>Placeat fuga ea quos qui.</p>
-    <p>Laboriosam, dolores? Nesciunt, facere neque?</p>
-    <p>Praesentium voluptas animi dolor repudiandae!</p>
-    <p>Velit ullam suscipit consequuntur adipisci.</p>
-    <p>Eius commodi quisquam doloribus cupiditate!</p>
-    <p>Illo debitis perferendis quis iusto!</p>
-    <p>Aut laudantium mollitia nobis assumenda.</p>
-    <p>Nisi, quasi! Temporibus, ducimus quam.</p>
-    <p>In pariatur tenetur ducimus rem?</p>
-    <p>Unde dolore eos accusamus molestiae.</p>
-    <p>Error voluptatum ipsam sunt ex.</p>
-    <p>Voluptates temporibus vitae magni earum!</p>
-    <p>Alias ipsam tenetur placeat quae.</p>
-    <p>Explicabo consectetur vero quidem saepe.</p>
-    <p>Facilis consectetur nulla culpa veritatis?</p>
-    <p>Laudantium dolorem animi vel tempore!</p>
-    <p>Iste eius ex mollitia quis?</p>
-    <p>Eum error eligendi aspernatur optio!</p>
-    <p>Delectus suscipit maxime minus quo.</p>
-    <p>Ad cupiditate ducimus aspernatur aperiam.</p>
-    <p>Obcaecati accusamus eius natus cupiditate!</p>
-    <p>Voluptatem maxime voluptatum odio blanditiis?</p>
-    <p>Illum sapiente amet officia ipsa.</p>
-    <p>Sit exercitationem minima quaerat nobis!</p>
-    <p>Nulla nesciunt quia ea temporibus!</p>
-    <p>Omnis totam magnam laboriosam? Doloribus!</p>
-    <p>Voluptatem excepturi dolores culpa distinctio.</p>
-    <p>Accusamus alias architecto obcaecati repudiandae.</p>
-    <p>Dolores mollitia corporis laborum hic?</p>
-    <p>Laboriosam, beatae assumenda? Officia, vel!</p>
-    <p>Provident excepturi minus fugiat iusto?</p>
-    <p>Similique voluptas doloremque consequuntur optio?</p>
-    <p>Ea voluptates dolor numquam quasi.</p>
-    <p>Cupiditate distinctio nesciunt temporibus molestiae?</p>
-    <p>Laborum harum autem expedita excepturi?</p>
-    <p>Tenetur consequatur distinctio alias itaque.</p>
-    <p>Nam officiis minima modi totam.</p>
-    <p>Velit deleniti accusantium illum natus?</p>
-    <p>Exercitationem, alias? Voluptate, quis nulla!</p>
-    <p>Asperiores odit quasi itaque sed!</p>
-    <p>Incidunt nulla quae odit sequi.</p>
-    <p>Incidunt fugit omnis neque fugiat?</p>
-    <p>Ipsum esse veniam atque nam?</p>
-    <p>Minus sequi consectetur inventore repellat!</p>
-    <p>Alias corporis harum ad optio.</p>
-    <p>Aliquam sed mollitia magnam pariatur?</p>
-    <p>Ipsum sed odio sunt officiis.</p>
-    <p>Pariatur numquam facilis dolorum excepturi.</p>
-    <p>Nemo quae culpa incidunt laboriosam.</p>
-    <p>Fuga provident molestias a esse?</p>
-    <p>Pariatur, sequi quod. Debitis, quos.</p>
-    <p>Earum voluptates dolorum dolor rem!</p>
-    <p>Eveniet dolor quis aperiam accusamus?</p>
-    <p>Doloremque expedita id vero quisquam!</p>
-    <p>Consequatur facere aperiam iusto odit?</p>
-    <p>Nemo harum saepe ex totam!</p>
-    <p>Perferendis nisi sunt id voluptatum!</p>
-    <p>Quam omnis esse molestias doloremque.</p>
-    <p>Eligendi adipisci odio hic quia?</p>
-    <p>Quaerat libero accusamus debitis consequuntur.</p>
-    <p>Voluptatem commodi veritatis quos necessitatibus.</p>
-    <p>Excepturi sequi similique vel nihil!</p>
-    <p>Voluptatem vel nostrum aliquam nihil.</p>
-    <p>Quos voluptatum quidem sequi nulla?</p>
-    <p>Ipsum soluta autem sapiente odio.</p>
-    <p>Non aut accusantium autem impedit.</p>
-    <p>Hic repellendus eligendi harum deleniti.</p>
-    <p>Vero provident voluptatibus quae. Cumque.</p>
-    <p>Voluptatibus doloremque beatae in necessitatibus.</p>
-    <p>Aut ducimus tempora magnam consequatur.</p>
-    <p>Repudiandae omnis corporis obcaecati nobis?</p>
-    <p>Quis similique cupiditate corrupti dignissimos.</p>
-    <p>Aliquid aperiam non laborum repudiandae.</p>
-    <p>Delectus ratione error officiis blanditiis!</p>
-    <p>Reiciendis labore dolores dignissimos voluptatem.</p>
-    <p>Optio, dolores ad. Explicabo, impedit?</p>
-    <p>Quas explicabo autem maiores perferendis!</p>
-    <p>Expedita sint optio minus debitis!</p>
-    <p>Veritatis voluptates vitae autem deleniti?</p>
-    <p>Nemo, laborum iste. Nam, et?</p>
-    <p>Culpa excepturi porro laborum at!</p>
-    <p>A suscipit numquam eius ab?</p>
-    <p>Sapiente distinctio est sed aliquam!</p>
-    <p>Ea amet consectetur eveniet doloremque?</p>
-    <p>Alias consequuntur obcaecati ea praesentium.</p>
-    <p>Tenetur nostrum fugiat eum ullam?</p>
-    <p>Eum enim itaque animi at?</p>
-    <p>Incidunt reiciendis ratione inventore neque.</p>
-    <p>Veritatis repellendus mollitia nisi reiciendis!</p>
-    <p>Ipsum numquam earum ea ipsam.</p>
-    <p>Consequuntur officia at deleniti eos!</p>
-    <p>Amet facere aliquid inventore exercitationem.</p>
-    <p>Neque reprehenderit dolores voluptatum aperiam.</p>
-    <p>Officia velit vel modi earum.</p>
-    <p>Adipisci, quibusdam. Magnam, asperiores voluptate?</p>
-    <p>Nulla placeat cupiditate odit delectus.</p>
-    <p>Illo velit iste sapiente mollitia!</p>
-    <p>Totam incidunt facilis ipsum accusantium.</p>
-    <p>Blanditiis, ducimus! A, quidem repudiandae?</p>
-    <p>Enim incidunt soluta alias vel!</p>
-    <p>Esse accusamus eveniet nihil quis.</p>
-    <p>Eaque dolore repellendus nulla sit.</p>
-    <p>Eveniet corporis et iusto neque.</p>
-    <p>Dignissimos, sequi. In, soluta explicabo.</p>
-    <p>Dolorum tenetur error enim aperiam?</p>
-    <p>Enim porro harum itaque laboriosam!</p>
-    <p>Deleniti necessitatibus temporibus mollitia dolorum.</p>
-    <p>Natus, eos! Nobis, consequuntur enim!</p>
-    <p>Laborum ullam architecto fuga quia.</p>
-    <p>Inventore, molestiae. Repellendus, quaerat modi?</p>
-    <p>Quis hic molestiae cupiditate suscipit.</p>
-    <p>Dolorum modi soluta et amet.</p>
-    <p>Quo labore quis modi dolores?</p>
-    <p>Quos optio expedita harum nihil!</p>
-    <p>Nesciunt laborum quia id dolore?</p>
-    <p>Tempore ipsam eaque facere expedita!</p>
-    <p>Sequi assumenda quod tempore natus?</p>
-    <p>Cumque maiores reprehenderit inventore optio.</p>
-    <p>Itaque repudiandae repellat expedita ipsum!</p>
-    <p>Repudiandae dicta nihil optio magnam.</p>
-    <p>Aliquid beatae dolores harum nobis?</p>
-    <p>Molestias libero id asperiores fuga.</p>
-    <p>Atque sed at sunt voluptate!</p>
-    <p>Quisquam nisi sint voluptate quis.</p>
-    <p>Sunt asperiores quis fugit corporis.</p>
-    <p>Inventore odio consequatur ratione quibusdam.</p>
-    <p>Vel nobis tenetur facere architecto?</p>
-    <p>Maxime tempore laudantium ducimus odit.</p>
-    <p>Sit corporis veritatis omnis itaque.</p>
-    <p>Quod, nemo sequi. At, distinctio!</p>
-    <p>Aut cupiditate perspiciatis qui natus.</p>
-    <p>Incidunt veniam nam quae expedita!</p>
-    <p>Amet fugit veniam eveniet fugiat.</p>
-    <p>Ipsam obcaecati ea iure hic?</p>
-    <p>Asperiores dicta pariatur eum vitae?</p>
-    <p>Corrupti tempore obcaecati beatae explicabo.</p>
-    <p>Et eius cumque quidem minus!</p>
-    <p>Ipsam id adipisci voluptas soluta?</p>
-    <p>Asperiores earum voluptas ducimus dignissimos!</p>
-    <p>Aspernatur esse autem mollitia ut?</p>
-    <p>Expedita ex atque soluta at?</p>
-    <p>Laboriosam laborum quasi ipsum est.</p>
-  </p>
-);
+const content: Content = {
+  text: {
+    en: `As the sun began to set over the tranquil village of Willowbrook, a sense of anticipation filled the air. The annual harvest festival was about to commence, and the villagers were bustling with excitement. Children ran through the fields, their laughter echoing like a melody of pure joy. Stalls were being set up along the main square, offering an array of handmade crafts, freshly baked goods, and the season’s finest produce.
+At the heart of the village stood an ancient oak tree, its branches sprawling wide like a guardian of time. Beneath this tree, the elders gathered, sharing stories of yore and wisdom passed down through generations. Amelia, a young girl with sparkling eyes and boundless curiosity, sat among them, soaking in every word. She loved listening to tales of bravery, love, and adventure, dreaming that one day, she too would have stories to tell.
+As the evening unfolded, the sky painted itself in hues of orange, pink, and purple, casting a magical glow over Willowbrook. The village musicians took their place, their instruments gleaming in the fading light. The first notes of a lively tune filled the air, and soon, everyone was dancing. Amelia twirled and spun, her laughter blending with the music, her heart filled with the simple happiness that only such moments can bring.
+As the night grew darker, lanterns were lit, casting a warm, golden light over the festivities. The aroma of roasted chestnuts and spiced cider wafted through the air, inviting everyone to partake in the feast. Friends and families gathered around long wooden tables, sharing food and stories, creating memories that would last a lifetime.
+Amidst the joy and celebration, Amelia’s thoughts wandered to the future. She knew that as long as the spirit of the harvest festival lived on, the bond within the community would remain strong, and Willowbrook would continue to be a place of love, laughter, and unity. With a heart full of hope and dreams, she smiled, knowing that she was part of something truly special.`,
+    ru: `Когда солнце начало садиться над тихой деревушкой Виллоубрук, в воздухе витало чувство ожидания. Ежегодный праздник урожая вот-вот начнется, и жители деревни бурлили от волнения. Дети бегали по полям, их смех звучал как мелодия чистой радости. На главной площади устанавливались ларьки, предлагающие ассортимент самодельных поделок, свежевыпеченных товаров и лучших продуктов сезона.
+В центре деревни стоял древний дуб, его ветви раскидывались широко, как хранитель времени. Под этим деревом собирались старейшины, рассказывая истории былых времен и мудрость, переданную через поколения. Амелия, молодая девушка с блестящими глазами и безграничным любопытством, сидела среди них, впитывая каждое слово. Она любила слушать истории о храбрости, любви и приключениях, мечтая о том, что однажды у нее тоже будут свои истории.
+По мере того как вечер разворачивался, небо окрашивалось в оттенки оранжевого, розового и пурпурного, придавая Виллоубруку магическое сияние. Деревенские музыканты заняли свои места, их инструменты сияли в ускользающем свете. Первые ноты оживленной мелодии заполнили воздух, и вскоре все танцевали. Амелия кружилась и вертелась, ее смех сливался с музыкой, сердце наполнялось простой радостью, которую могут принести только такие моменты.
+Когда ночь стала темнее, зажглись фонари, отбрасывая теплый, золотой свет на праздник. Аромат жареных каштанов и пряного сидра витал в воздухе, приглашая всех принять участие в пиршестве. Друзья и семьи собрались вокруг длинных деревянных столов, делясь едой и историями, создавая воспоминания, которые останутся на всю жизнь.
+Среди радости и праздника мысли Амелии унеслись в будущее. Она знала, что пока живет дух праздника урожая, связь внутри сообщества останется сильной, и Виллоубрук продолжит быть местом любви, смеха и единства. С сердцем, полным надежд и мечтаний, она улыбалась, зная, что является частью чего-то по-настоящему особенного.`,
+  },
+};
+
+const TestContent = () => {
+  const { useContent } = useLang();
+  const l = useContent(content);
+
+  return <div className={s.content}>{l('text')}</div>;
+};
 
 export const Layout = () => (
   <>
     <Header showLogo={true} />
-    <Content />
+    <TestContent />
+    <TestContent />
+    <TestContent />
+    <TestContent />
   </>
 );
diff --git a/src/shared/logo/Logo.module.scss b/src/shared/logo/Logo.module.scss
index 6d0626cba..2b11759ff 100644
--- a/src/shared/logo/Logo.module.scss
+++ b/src/shared/logo/Logo.module.scss
@@ -1,12 +1,12 @@
 .logo {
   width: 80px;
   height: 50px;
-  background-color: #f4f4f4;
+  background-color: var(--logo-bg-color);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #333;
+  color: var(--logo-text-color);
   font-family: 'Courier New', Courier, monospace;
   font-size: 1.35rem;
   font-weight: bold;
diff --git a/src/shared/modal-form/ModalForm.module.scss b/src/shared/modal-form/ModalForm.module.scss
index 7251b0068..72a1f0258 100644
--- a/src/shared/modal-form/ModalForm.module.scss
+++ b/src/shared/modal-form/ModalForm.module.scss
@@ -1,5 +1,6 @@
 .modal {
   display: flex;
+  position: fixed;
   align-items: center;
   z-index: 1;
   left: 0;
diff --git a/src/shared/modal-form/ModalForm.tsx b/src/shared/modal-form/ModalForm.tsx
index ee90553df..88699e282 100644
--- a/src/shared/modal-form/ModalForm.tsx
+++ b/src/shared/modal-form/ModalForm.tsx
@@ -1,17 +1,20 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, MouseEvent } from 'react';
 import cn from 'clsx';
 import s from './ModalForm.module.scss';
 
 type ModalFormProps = {
   visible: boolean;
   children: ReactNode;
+  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
-export const ModalForm = ({ visible = true, children }: ModalFormProps) => {
+export const ModalForm = ({ visible = true, onClose, children }: ModalFormProps) => {
   return (
     <div id="myModal" className={cn(s.modal, { [s['modal-hide']]: !visible })}>
       <div className={s['modal-content']}>
-        <span className={s.close}>&times;</span>
+        <span className={s.close} onClick={onClose}>
+          &times;
+        </span>
         {children}
       </div>
     </div>
diff --git a/src/shared/providers/LangProvider.tsx b/src/shared/providers/LangProvider.tsx
new file mode 100644
index 000000000..58a7023fb
--- /dev/null
+++ b/src/shared/providers/LangProvider.tsx
@@ -0,0 +1,38 @@
+import React, { createContext, useState, useContext, ReactNode } from 'react';
+
+type Lang = 'ru' | 'en';
+type ContentKey = string;
+type ContentValue = string;
+type LangValues = Partial<Record<Lang, ContentValue>>;
+export type Content = Record<ContentKey, LangValues>;
+
+type LangContextType = {
+  lang: Lang;
+  useContent: (content: Content) => (key: ContentKey) => ContentValue;
+  toggleLang: () => void;
+};
+
+type LangProviderProps = {
+  children: ReactNode;
+};
+
+const LangContext = createContext<LangContextType>(null);
+
+export const useLang = () => useContext(LangContext);
+
+const withContent =
+  (lang: Lang) =>
+  (content: Content) =>
+  (key: ContentKey): ContentValue =>
+    content[key]?.[lang];
+
+export const LangProvider = ({ children }: LangProviderProps) => {
+  const [lang, setLang] = useState<Lang>('en');
+  const toggleLang = () => {
+    setLang((prevLang) => (prevLang === 'en' ? 'ru' : 'en'));
+  };
+
+  return (
+    <LangContext.Provider value={{ lang, toggleLang, useContent: withContent(lang) }}>{children}</LangContext.Provider>
+  );
+};
diff --git a/src/shared/providers/ThemeProvider.tsx b/src/shared/providers/ThemeProvider.tsx
new file mode 100644
index 000000000..1bdb4290e
--- /dev/null
+++ b/src/shared/providers/ThemeProvider.tsx
@@ -0,0 +1,27 @@
+import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react';
+
+type Theme = 'dark' | 'light';
+
+type ThemeContextType = { theme: Theme; toggleTheme: () => void };
+
+type ThemeProviderProps = {
+  children: ReactNode;
+};
+
+const ThemeContext = createContext<ThemeContextType>(null);
+
+export const useTheme = () => useContext(ThemeContext);
+
+export const ThemeProvider = ({ children }: ThemeProviderProps) => {
+  const [theme, setTheme] = useState<Theme>('light');
+
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
+  };
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
+};
diff --git a/src/shared/statefull-modal-form/StatefullModalForm.module.scss b/src/shared/statefull-modal-form/StatefullModalForm.module.scss
new file mode 100644
index 000000000..0247a58cc
--- /dev/null
+++ b/src/shared/statefull-modal-form/StatefullModalForm.module.scss
@@ -0,0 +1,10 @@
+.statefull-modal {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+
+  input {
+    align-self: stretch;
+  }
+}
diff --git a/src/shared/statefull-modal-form/StatefullModalForm.tsx b/src/shared/statefull-modal-form/StatefullModalForm.tsx
new file mode 100644
index 000000000..7136f5b7f
--- /dev/null
+++ b/src/shared/statefull-modal-form/StatefullModalForm.tsx
@@ -0,0 +1,24 @@
+import React, { useState, FormEvent } from 'react';
+import { Button } from '../button/Button';
+import { TextInput } from '../text-input/TextInput';
+import { ModalForm } from '../modal-form/ModalForm';
+import s from './StatefullModalForm.module.scss';
+
+export const StatefullModalForm = () => {
+  const [inputValue, setInputValue] = useState('');
+  const [isModalFormVisible, setIsModalFormVisible] = useState(false);
+
+  const openModalForm = () => setIsModalFormVisible(true);
+  const closeModalForm = () => setIsModalFormVisible(false);
+  const saveInputValue = (event: FormEvent<HTMLInputElement>) => setInputValue(event.currentTarget.value);
+
+  return (
+    <div className={s['statefull-modal']}>
+      <TextInput value={inputValue} onInput={saveInputValue} />
+      <Button onClick={openModalForm}>Открыть модальное окно</Button>
+      <ModalForm visible={isModalFormVisible} onClose={closeModalForm}>
+        <p>{inputValue}</p>
+      </ModalForm>
+    </div>
+  );
+};
diff --git a/src/shared/text-input/TextInput.module.scss b/src/shared/text-input/TextInput.module.scss
new file mode 100644
index 000000000..34d0b6c2d
--- /dev/null
+++ b/src/shared/text-input/TextInput.module.scss
@@ -0,0 +1,12 @@
+.text-input {
+  padding: 8px;
+  font-size: 1em;
+  border: 2px solid #ccc;
+  border-radius: 5px;
+  -webkit-transition: 0.5s;
+  transition: 0.5s;
+  outline: none;
+  &:focus {
+    border: 2px solid #555;
+  }
+}
diff --git a/src/shared/text-input/TextInput.tsx b/src/shared/text-input/TextInput.tsx
new file mode 100644
index 000000000..ce435778c
--- /dev/null
+++ b/src/shared/text-input/TextInput.tsx
@@ -0,0 +1,11 @@
+import React, { FormEvent } from 'react';
+import s from './TextInput.module.scss';
+
+type TextInputProps = {
+  value: string;
+  onInput?: (event: FormEvent<HTMLInputElement>) => void;
+};
+
+export const TextInput = ({ value, onInput }: TextInputProps) => (
+  <input className={s['text-input']} type="text" value={value} onInput={onInput} />
+);
diff --git a/src/shared/theme-switcher/ThemeSwitcher.tsx b/src/shared/theme-switcher/ThemeSwitcher.tsx
new file mode 100644
index 000000000..87d287e59
--- /dev/null
+++ b/src/shared/theme-switcher/ThemeSwitcher.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { useTheme } from '../providers/ThemeProvider';
+import { Button } from '../button/Button';
+
+export const ThemeSwitcher = () => {
+  const { theme, toggleTheme } = useTheme();
+
+  return <Button onClick={toggleTheme}>Switch to {theme === 'light' ? 'Dark' : 'Light'} Theme</Button>;
+};
diff --git a/src/stories/Header.stories.ts b/src/stories/Header.stories.ts
deleted file mode 100644
index 542e67e0b..000000000
--- a/src/stories/Header.stories.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { Header } from '../shared/header/Header';
-
-const meta: Meta<typeof Header> = {
-  component: Header,
-  title: 'Общее задание/Header',
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const WithLogo = {
-  args: {
-    showLogo: true,
-  },
-};
diff --git a/src/stories/Header.stories.tsx b/src/stories/Header.stories.tsx
new file mode 100644
index 000000000..8f56a2b0a
--- /dev/null
+++ b/src/stories/Header.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+
+import { Header, HeaderProps } from '../shared/header/Header';
+import { ThemeProvider } from '../shared/providers/ThemeProvider';
+import { LangProvider } from '../shared/providers/LangProvider';
+import './theme.css';
+
+const HeaderWithThemeAndLangProviders = (data: HeaderProps) => (
+  <ThemeProvider>
+    <LangProvider>
+      <Header {...data} />
+    </LangProvider>
+  </ThemeProvider>
+);
+
+const meta: Meta<typeof HeaderWithThemeAndLangProviders> = {
+  component: HeaderWithThemeAndLangProviders,
+  title: 'Общее задание/Header',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const WithLogo = {
+  args: {
+    showLogo: true,
+  },
+};
diff --git a/src/stories/InputToModal.stories.ts b/src/stories/InputToModal.stories.ts
new file mode 100644
index 000000000..316fe5eb7
--- /dev/null
+++ b/src/stories/InputToModal.stories.ts
@@ -0,0 +1,20 @@
+import type { Meta } from '@storybook/react';
+
+import { StatefullModalForm } from '../shared/statefull-modal-form/StatefullModalForm';
+
+const meta: Meta<typeof StatefullModalForm> = {
+  component: StatefullModalForm,
+  title: 'Общее задание/Состояние модального окна',
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      story: {
+        height: '500px',
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const Test = {};
diff --git a/src/stories/Layout.stories.ts b/src/stories/Layout.stories.ts
deleted file mode 100644
index 3cf76fca1..000000000
--- a/src/stories/Layout.stories.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { Meta } from '@storybook/react';
-
-import { Layout } from '../shared/layout/Layout';
-
-const meta: Meta<typeof Layout> = {
-  component: Layout,
-  title: 'Общее задание/Layout',
-  tags: ['autodocs'],
-};
-
-export default meta;
-
-export const LayoutWithContent = {};
diff --git a/src/stories/Layout.stories.tsx b/src/stories/Layout.stories.tsx
new file mode 100644
index 000000000..69baadb27
--- /dev/null
+++ b/src/stories/Layout.stories.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+
+import { Layout } from '../shared/layout/Layout';
+import { ThemeProvider } from '../shared/providers/ThemeProvider';
+import { LangProvider } from '../shared/providers/LangProvider';
+import './theme.css';
+
+const LayoutWithThemeAndLangProviders = () => (
+  <ThemeProvider>
+    <LangProvider>
+      <Layout />
+    </LangProvider>
+  </ThemeProvider>
+);
+
+const meta: Meta<typeof LayoutWithThemeAndLangProviders> = {
+  component: LayoutWithThemeAndLangProviders,
+  title: 'Общее задание/Layout',
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const LayoutWithContent = {};
diff --git a/src/stories/theme.css b/src/stories/theme.css
new file mode 100644
index 000000000..a5531e7c6
--- /dev/null
+++ b/src/stories/theme.css
@@ -0,0 +1,17 @@
+[data-theme='light'] {
+  --background-color: #fff;
+  --color: #000;
+  --logo-bg-color: #333 ;
+  --logo-text-color: #f4f4f4;
+  --header-bg-color: #dbdbdb;
+  --layout-bg-color: #fafafa;
+}
+
+[data-theme='dark'] {
+  --background-color: #333;
+  --color: #fff;
+  --logo-bg-color: #f4f4f4;
+  --logo-text-color: #333;
+  --header-bg-color: #333;
+  --layout-bg-color: #4e4e4e;
+}