diff --git a/.gitignore b/.gitignore
index 41fcbdf..a58a280 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,5 @@ public/images
 *precompiled.js
 
 
+public/closedEye.png
+public/openedEye.png
diff --git a/package-lock.json b/package-lock.json
index 38ac0c2..bea0a06 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
+        "cors": "^2.8.5",
         "express": "^4.21.0",
         "handlebars": "^4.7.8",
         "morgan": "^1.10.0"
@@ -572,6 +573,19 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
       "license": "MIT"
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -2002,6 +2016,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.2.tgz",
diff --git a/package.json b/package.json
index c9f06e0..131013e 100644
--- a/package.json
+++ b/package.json
@@ -6,9 +6,11 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "prepare": "husky && husky install",
-    "prestart": "npm run compile:templates",
+    "prestart": "npm run compile:templates && npm run compile:forms && npm run compile:header",
     "start": "DEBUG=* && node ./server/server.js",
     "compile:templates": "handlebars public/components/Cards/cards.hbs -f public/components/Cards/cards.precompiled.js",
+    "compile:forms": "handlebars public/components/Forms/forms.hbs -f public/components/Forms/forms.precompiled.js",
+    "compile:header": "handlebars public/components/Header/header.hbs -f public/components/Header/header.precompiled.js",
     "lint": "eslint . --fix && prettier --write ."
   },
   "author": "",
@@ -28,6 +30,7 @@
     ]
   },
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.21.0",
     "handlebars": "^4.7.8",
     "morgan": "^1.10.0"
diff --git a/public/ajax.js b/public/ajax.js
new file mode 100644
index 0000000..9282f2b
--- /dev/null
+++ b/public/ajax.js
@@ -0,0 +1,41 @@
+const HTTP_METHOD_POST = 'POST';
+const HTTP_METHOD_GET = 'GET';
+
+export default async function Ajax({ method, url, body = null }) {
+  const requestBody = {
+    credentials: 'include',
+    method,
+    header: {
+      'Content-Type': 'application/json',
+    },
+  };
+
+  if (method === HTTP_METHOD_POST) {
+    requestBody.body = JSON.stringify(body);
+  }
+
+  const response = await fetch(url, requestBody);
+
+  let respBody;
+  try {
+    respBody = await response.json();
+  } catch {
+    return {
+      status: response.status,
+      error: 'failed to parse respBody',
+      body: 'failed to parse respBody',
+    };
+  }
+  // console.log('respBody', respBody);
+
+  if (response.status >= 400) {
+    return {
+      status: response.status,
+      error: respBody,
+    };
+  }
+  return {
+    status: response.status,
+    body: respBody,
+  };
+}
diff --git a/public/components/Cards/cards.css b/public/components/Cards/cards.css
index 106e9f7..3ef73dc 100644
--- a/public/components/Cards/cards.css
+++ b/public/components/Cards/cards.css
@@ -5,6 +5,7 @@
   display: flex;
   padding: var(--space-xs);
   width: 100%;
+  box-sizing: border-box;
   min-height: var(--card-min-height);
   max-height: var(--card-max-height);
   gap: var(--space-xs);
@@ -14,6 +15,7 @@
 .card-img {
   min-width: var(--card-img-min-width);
   max-width: var(--card-img-max-width);
+  max-height: 100%;
   height: var(--card-img-height);
   overflow: hidden;
   position: relative;
diff --git a/public/components/Cards/cards.hbs b/public/components/Cards/cards.hbs
index 79de907..eb4190a 100644
--- a/public/components/Cards/cards.hbs
+++ b/public/components/Cards/cards.hbs
@@ -1,13 +1,13 @@
 {{#each items}}
   <div class='card'>
-    {{#if imageUrl}}
+    {{#if media-url}}
     <div class="card-img">
-        <img src="{{imageUrl}}">
+        <img src="{{media-url}}">
     </div>
     {{/if}}
     <div class='card-content'>
       <p class='card-content__header'>{{title}}</p>
-      <p class='card-content__text'>{{description}}</p>
+      <p class='card-content__text'>{{body}}</p>
     </div>
   </div>
 {{/each}}
diff --git a/public/components/Cards/cards.js b/public/components/Cards/cards.js
index 0c7024f..62df95e 100644
--- a/public/components/Cards/cards.js
+++ b/public/components/Cards/cards.js
@@ -1,11 +1,30 @@
+import Ajax from '../../ajax.js';
+
 export default class Cards {
   constructor(parent, items) {
     this.parent = parent;
-    this.items = items;
+    this.items = {};
   }
 
-  render() {
+  async render() {
     const template = Handlebars.templates['cards.hbs'];
+    await this.getCurrentCards2();
     this.parent.innerHTML = template({ items: this.items });
   }
+
+  async getCurrentCards2() {
+    const response = await Ajax({
+      url: 'http://dead-vc.ru/api/v1/feed',
+      method: 'GET',
+    });
+
+    switch (response.status) {
+      case 200:
+        this.items = response.body.data;
+        console.log(this.items);
+        break;
+      default:
+        console.error('Error', response.status, response.error);
+    }
+  }
 }
diff --git a/public/components/Forms/forms.css b/public/components/Forms/forms.css
new file mode 100644
index 0000000..b27d624
--- /dev/null
+++ b/public/components/Forms/forms.css
@@ -0,0 +1,84 @@
+@import '/public/variables.css';
+
+.auth-form {
+  margin-top: 50px;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-s);
+  padding: var(--space-m);
+  background-color: var(--main-color);
+  border-radius: var(--border-radius-m);
+}
+
+.auth-form-links {
+  display: flex;
+  justify-content: center;
+  gap: var(--space-xs);
+}
+
+.active-href {
+  color: var(--hover-color);
+  text-decoration: underline;
+}
+
+.disabled-href {
+  color: var(--hover-color);
+  text-decoration: none;
+}
+
+.auth-form-header {
+  text-align: center;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--accent-color);
+}
+
+.auth-form-header p {
+  color: var(--accent-color);
+}
+
+.auth-form-inputs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.auth-form-inputs input {
+  padding: 10px;
+  border-radius: 5px;
+  font-size: var(--text-size-xs);
+}
+
+.input-correct {
+  border: 1.5px solid var(--secondary-text-color);
+}
+
+.input-error {
+  border: 1.5px solid var(--error-color);
+}
+
+.label-hint {
+  font-size: var(--text-size-xs);
+  color: var(--text-color);
+}
+
+.label-error {
+  font-size: var(--text-size-xs);
+  color: var(--error-color);
+}
+
+.auth-form-inputs button {
+  padding: 10px;
+  border-radius: 5px;
+  color: var(--main-color);
+  border: 0 none;
+  background-color: var(--accent-color);
+}
+
+.password-rules {
+  line-height: var(--line-height-s);
+  font-size: var(--text-size-xs);
+  color: var(--secondary-text-color);
+}
diff --git a/public/components/Forms/forms.hbs b/public/components/Forms/forms.hbs
new file mode 100644
index 0000000..b8161d8
--- /dev/null
+++ b/public/components/Forms/forms.hbs
@@ -0,0 +1,73 @@
+<div class="auth-form">
+    <div class="auth-form-header">
+        DEAD-VC
+    </div>
+    <div class="auth-form-links">
+        {{#if context.isReg}}
+            <a class="disabled-href" data-section="auth" id="authhref" href="auth.html">
+                Войти
+            </a>
+            <a class="active-href" data-section="reg" id="reghref" href="reg.html">
+                Регистрация
+            </a>
+        {{else}}
+            <a class="active-href" data-section="auth" id="authhref" href="auth.html">
+                Войти
+            </a>
+            <a class="disabled-href" data-section="reg" id="reghref" href="reg.html">
+                Регистрация
+            </a>
+        {{/if}}
+    </div>
+    <form class="auth-form-inputs" action="" method="post">
+        <label class="label-hint" for="email-input">Email</label>
+        {{#if context.isEmailCorrect}}
+            <input class="input-correct" id="email-input" type="email" placeholder="Введите Email">
+        {{else}}
+            <input class="input-error" id="email-input" type="email" placeholder="Введите Email">
+            <label class="label-error" for="email-input">Ошибочный Email</label>
+        {{/if}}
+
+        <label class="label-hint" for="password-input">Пароль</label>
+        {{#if context.isPasswordCorrect}}
+            <input class="input-correct" id="password-input" type="password" placeholder="Введите пароль">
+        {{else}}
+            <input class="input-error" id="password-input" type="password" placeholder="Введите пароль">
+            <label class="label-error" for="password-input">Ошибочный пароль</label>
+        {{/if}}
+
+        {{#if context.isReg}}
+        <label class="label-hint" for="password-input-repeat">Подтверждение пароля</label>
+            {{#if context.isPasswordRepeatCorrect}}
+                <input class="input-correct" id="password-input-repeat" type="password" placeholder="Повторите пароль">
+            {{else}}
+                <input class="input-error" id="password-input-repeat" type="password" placeholder="Повторите пароль">
+                <label class="label-error" for="password-input-repeat">Пароли не совпадают</label>
+            {{/if}}
+        {{/if}}
+        {{#if context.isReg}}
+        <button type="submit">Создать аккаунт</button>
+        {{else}}
+        <button type="submit">Войти</button>
+        {{/if}}
+    </form>
+    <div class="password-rules">
+        {{#unless context.isPasswordCorrect}}
+        Пароль должен быть длиной от 6 до 255 символов и содержать только:
+        <ul>
+            <li>
+                строчные и прописные латинские буквы
+            </li>
+            <li>
+                цифры (0-9)
+            </li>
+            <li>
+                специальные символы ?,!,_,-,$
+            </li>
+        </ul>
+        {{/unless}}
+        {{#if context.isApiError}}
+            {{context.apiErrorText}}
+        {{/if}}
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/components/Forms/forms.js b/public/components/Forms/forms.js
new file mode 100644
index 0000000..82c2612
--- /dev/null
+++ b/public/components/Forms/forms.js
@@ -0,0 +1,147 @@
+import Navigate from '../../navigate.js';
+import Ajax from '../../ajax.js';
+import userState from '../../user.js';
+
+export default class Forms {
+  constructor(parent) {
+    this.parent = parent;
+    this.context = {
+      isReg: false,
+      isEmailCorrect: true,
+      isPasswordCorrect: true,
+      isPasswordRepeatCorrect: true,
+      isApiError: false,
+      apiErrorText: '',
+    };
+  }
+
+  isValidEmail(email) {
+    var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  }
+
+  isValidPassword(password) {
+    const passwordRegex = /^[a-zA-Z0-9?!_\-*$]{6,}$/;
+    return passwordRegex.test(password);
+  }
+
+  render() {
+    console.log('new form, isEmailCorrect: ', this.context);
+    const template = Handlebars.templates['forms.hbs'];
+    this.parent.innerHTML = template({ context: this.context });
+    const AuthForm = document.querySelector('.auth-form-inputs');
+
+    AuthForm.addEventListener('submit', this.handleSubmit.bind(this));
+
+    const AuthHref = document.querySelector('#authhref');
+    AuthHref.addEventListener('click', (event) => {
+      event.preventDefault();
+      Navigate('auth');
+    });
+
+    const RegHref = document.querySelector('#reghref');
+    RegHref.addEventListener('click', (event) => {
+      event.preventDefault();
+      Navigate('reg');
+    });
+  }
+
+  handleSubmit(event) {
+    event.preventDefault();
+
+    const EmailInput = document.querySelector('#email-input');
+    const PasswordInput = document.querySelector('#password-input');
+    const EmailInputVal = EmailInput.value.trim();
+    const PasswordInputVal = PasswordInput.value.trim();
+
+    const emailValid = this.isValidEmail(EmailInputVal);
+    const passwordValid = this.isValidPassword(PasswordInputVal);
+
+    this.context.isEmailCorrect = emailValid ? true : false;
+    this.context.isPasswordCorrect = passwordValid ? true : false;
+
+    console.log(EmailInputVal, PasswordInputVal);
+
+    if (this.context.isReg) {
+      const PasswordRepeat = document.querySelector('#password-input-repeat');
+      const PasswordRepeatVal = PasswordRepeat.value.trim();
+      this.context.isPasswordRepeatCorrect = PasswordRepeatVal === PasswordInputVal;
+    }
+
+    if (
+      this.context.isEmailCorrect &&
+      this.context.isPasswordCorrect &&
+      this.context.isPasswordRepeatCorrect
+    ) {
+      if (this.context.isReg) {
+        this.Register({ password: PasswordInputVal, email: EmailInputVal });
+      } else {
+        this.Login({ password: PasswordInputVal, email: EmailInputVal });
+      }
+    } else {
+      this.render();
+    }
+  }
+
+  async Register({ password, email }) {
+    const response = await Ajax({
+      url: 'http://dead-vc.ru/api/v1/register',
+      method: 'POST',
+      body: {
+        password,
+        email,
+      },
+    });
+
+    switch (response.status) {
+      case 200:
+        this.context.isApiError = false;
+        userState.login();
+        userState.setEmail(email);
+        Navigate('feed');
+        break;
+      case 409:
+        console.error('User with this email already exists', response.status, response.error);
+        this.context.isApiError = true;
+        this.context.apiErrorText = 'Пользователь с этим именем существует';
+        this.render();
+        break;
+      default:
+        console.error('Error', response.status, response.error);
+        this.context.isApiError = true;
+        this.context.apiErrorText = 'Ошибка на стороне сервера';
+        this.render();
+    }
+  }
+
+  async Login({ password, email }) {
+    const response = await Ajax({
+      url: 'http://dead-vc.ru/api/v1/login',
+      method: 'POST',
+      body: {
+        password,
+        email,
+      },
+    });
+
+    switch (response.status) {
+      case 200:
+        this.context.isApiError = false;
+        userState.login();
+        userState.setEmail(email);
+        Navigate('feed');
+        break;
+      case 404:
+        console.error('User not found', response.status, response.error);
+        this.context.isApiError = true;
+        this.context.apiErrorText = 'Неверный логин или пароль';
+        this.render();
+        break;
+      default:
+        this.context.isApiError = true;
+        this.context.apiErrorText = 'Ошибка на стороне сервера';
+        console.error('Error', response.status, response.error);
+        this.render();
+    }
+  }
+}
diff --git a/public/components/Header/header.css b/public/components/Header/header.css
new file mode 100644
index 0000000..2bea80b
--- /dev/null
+++ b/public/components/Header/header.css
@@ -0,0 +1,40 @@
+@import '/public/variables.css';
+
+.header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: var(--space-xs);
+  height: 50px;
+  background-color: var(--main-color);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 20vw;
+  margin-right: 20vw;
+}
+
+.header-logo {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  font-size: var(--text-size-h2);
+  font-weight: var(--font-weight-bold);
+  color: var(--accent-color);
+}
+
+.header-buttons {
+  gap: var(--space-xs);
+  display: flex;
+}
+
+.header-buttons button {
+  width: 100px;
+  padding: 10px;
+  border-radius: 5px;
+  color: var(--main-color);
+  border: 0 none;
+  background-color: var(--accent-color);
+}
diff --git a/public/components/Header/header.hbs b/public/components/Header/header.hbs
new file mode 100644
index 0000000..2dca469
--- /dev/null
+++ b/public/components/Header/header.hbs
@@ -0,0 +1,15 @@
+<div class="header">
+    <div class="header-content">
+    <div class="header-logo">
+        DEAD-VC
+    </div>
+    <div class="header-buttons">
+        {{#if user.isAuthorized}}
+        <button id="logout-button">Выйти</button>
+        <p>{{user.email}}</p>
+        {{else}}
+        <button id="enter-button">Войти</button>
+        {{/if}}
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/public/components/Header/header.js b/public/components/Header/header.js
new file mode 100644
index 0000000..a929cc6
--- /dev/null
+++ b/public/components/Header/header.js
@@ -0,0 +1,46 @@
+import Navigate from '../../navigate.js';
+import userState from '../../user.js';
+import Ajax from '../../ajax.js';
+
+export default class Header {
+  constructor(parent) {
+    this.parent = parent;
+  }
+
+  render() {
+    const template = Handlebars.templates['header.hbs'];
+    this.parent.innerHTML = template({ user: userState });
+
+    if (userState.isAuthorized) {
+      const logoutButton = document.querySelector('#logout-button');
+      logoutButton.addEventListener('click', (event) => {
+        event.preventDefault();
+        this.Logout();
+      });
+    } else {
+      const enterButton = document.querySelector('#enter-button');
+      enterButton.addEventListener('click', (event) => {
+        event.preventDefault();
+        Navigate('auth');
+      });
+    }
+  }
+
+  async Logout() {
+    const response = await Ajax({
+      url: 'http://dead-vc.ru/api/v1/logout',
+      method: 'POST',
+    });
+
+    switch (response.status) {
+      case 200:
+        console.log('Logout successful', response.status, response.body);
+        userState.logout();
+        userState.removeEmail();
+        Navigate('feed');
+        break;
+      default:
+        console.error('Error', response.status, response.error);
+    }
+  }
+}
diff --git a/public/index.css b/public/index.css
index 65dac6c..5f6695a 100644
--- a/public/index.css
+++ b/public/index.css
@@ -1,9 +1,12 @@
 @import './components/Cards/cards.css';
+@import './components/Forms/forms.css';
+@import './components/Header/header.css';
 @import './variables.css';
 
 body {
   margin: 0;
   background-color: var(--background-color);
+  font-family: var(--text-font);
 }
 
 .main-content {
@@ -12,12 +15,14 @@ body {
   justify-content: center;
 }
 
-.main-content__feed {
+.items-container {
   margin: var(--space-m);
   display: flex;
   flex-direction: column;
   gap: var(--space-xs);
   margin-left: var(--main-content-feed-margin-left);
   margin-right: var(--main-content-feed-margin-right);
+  padding: var(--space-xs);
+  width: 100%;
   max-width: var(--main-content-feed-max-width);
 }
diff --git a/public/index.html b/public/index.html
index 2585e07..14951f4 100644
--- a/public/index.html
+++ b/public/index.html
@@ -14,12 +14,16 @@
     />
   </head>
   <body>
+    <div class="place-for-header"></div>
+
     <main class="main-content">
-      <div class="main-content__feed"></div>
+      <div class="items-container"></div>
     </main>
 
     <script src="/handlebars/dist/handlebars.runtime.js"></script>
     <script src="./components/Cards/cards.precompiled.js"></script>
+    <script src="./components/Forms/forms.precompiled.js"></script>
+    <script src="./components/Header/header.precompiled.js"></script>
     <script type="module" src="index.js"></script>
   </body>
 </html>
diff --git a/public/index.js b/public/index.js
index 745174a..edf35a8 100644
--- a/public/index.js
+++ b/public/index.js
@@ -1,49 +1,11 @@
+import Forms from './components/Forms/forms.js';
 import Cards from './components/Cards/cards.js';
+import Navigate from './navigate.js';
+import userState from './user.js';
 
-const cardsCollection = [
-  {
-    title: 'What is Lorem Ipsum? What is Lorem Ipsum?',
-    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
-      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
-      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
-      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
-      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
-      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
-      `,
-    imageUrl: 'images/1.jpg',
-  },
-  {
-    title: 'title2',
-    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
-      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
-      `,
-  },
-  {
-    title: 'title3',
-    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
-      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
-      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
-      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 text1 
-      text1 text text1 text1 text1 text1 text1 text1 text`,
-    imageUrl: 'images/1.jpg',
-  },
-  {
-    title: 'title4',
-    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
-      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
-      `,
-  },
-  {
-    title: 'title3',
-    description: `text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 
-      text1 text1 text text1 text1 text1 text1 text1 text1 text text1 text1  
-      text1 text1 text1 text1 text text1 text1 text1 text1 text1 text1 text 
-      text1 text1 text1 text1 text1 text1 text text1 text1 text1 text1 text1 
-      text1 text text1 text1 text1 text1 text1 text1 text`,
-    imageUrl: 'images/1.jpg',
-  },
-];
+window.addEventListener('popstate', () => {
+  const path = window.location.pathname.slice(1);
+  Navigate(path);
+});
 
-const feed = document.querySelector('.main-content__feed');
-const cards = new Cards(feed, cardsCollection);
-cards.render();
+Navigate('feed');
diff --git a/public/navigate.js b/public/navigate.js
new file mode 100644
index 0000000..d0d55a0
--- /dev/null
+++ b/public/navigate.js
@@ -0,0 +1,43 @@
+import Cards from './components/Cards/cards.js';
+import Forms from './components/Forms/forms.js';
+import Header from './components/Header/header.js';
+
+const itemsContainer = document.querySelector('.items-container');
+const placeForHeader = document.querySelector('.place-for-header');
+
+function renderAuth() {
+  const forms = new Forms(itemsContainer);
+  forms.context.isReg = false;
+  forms.render();
+}
+
+function renderReg() {
+  const forms = new Forms(itemsContainer);
+  forms.context.isReg = true;
+  forms.render();
+}
+
+function renderFeed() {
+  const header = new Header(placeForHeader);
+  const cards = new Cards(itemsContainer);
+  cards.render();
+  header.render();
+}
+
+const config = {
+  feed: {
+    render: renderFeed,
+  },
+  reg: {
+    render: renderReg,
+  },
+  auth: {
+    render: renderAuth,
+  },
+};
+
+export default function Navigate(url) {
+  placeForHeader.innerHTML = '';
+  config[url].render();
+  window.history.pushState({}, '', url);
+}
diff --git a/public/user.js b/public/user.js
new file mode 100644
index 0000000..be4ad51
--- /dev/null
+++ b/public/user.js
@@ -0,0 +1,25 @@
+class UserState {
+  constructor() {
+    this.isAuthorized = false;
+    this.email = '';
+  }
+
+  login() {
+    this.isAuthorized = true;
+  }
+
+  logout() {
+    this.isAuthorized = false;
+  }
+
+  setEmail(email) {
+    this.email = email;
+  }
+
+  removeEmail() {
+    this.email = '';
+  }
+}
+
+const userState = new UserState();
+export default userState;
diff --git a/public/variables.css b/public/variables.css
index 4e44ba7..528251d 100644
--- a/public/variables.css
+++ b/public/variables.css
@@ -5,7 +5,9 @@
   --hover-color: #551aa0;
   --active-color: #b47cfb;
   --disabled-color: #dbbfff;
-
+  --error-color: #900b09;
+  --warning-color: #d8a500;
+  --secondary-text-color: #808080;
   --text-color: #000000;
   --text-font: 'Play', sans-serif;
 
diff --git a/server/server.js b/server/server.js
index 14ba49a..a2f0c06 100644
--- a/server/server.js
+++ b/server/server.js
@@ -11,6 +11,14 @@ app.use(express.static(path.resolve(__dirname, '..', 'node_modules')));
 app.use(express.static(path.resolve(__dirname, '..', 'images')));
 app.use(express.static(path.resolve(__dirname, '..', 'components')));
 
+const router = express.Router();
+
+router.get('*', (req, res) => {
+  res.sendFile(path.join(__dirname, '..', 'public', 'index.html'));
+});
+
+app.use('/', router);
+
 const port = process.env.PORT || 3000;
 
 app.listen(port, function () {