diff --git a/package.json b/package.json
index 235f76f..c689b37 100644
--- a/package.json
+++ b/package.json
@@ -15,17 +15,21 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
     "@reduxjs/toolkit": "^2.9.0",
     "@remix-run/node-fetch-server": "^0.8.0",
     "compression": "^1.8.1",
     "cross-env": "^10.0.0",
     "express": "^5.1.0",
     "normalize.css": "^8.0.1",
+    "react-intl": "^7.1.11",
+    "firebase": "^12.2.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-intl": "^7.1.11",
+    "react-hook-form": "^7.62.0",
     "react-redux": "^9.2.0",
-    "react-router": "7.7.0"
+    "react-router": "7.7.0",
+    "yup": "^1.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
diff --git a/src/Types/Types.ts b/src/Types/Types.ts
index 2444689..58c9220 100644
--- a/src/Types/Types.ts
+++ b/src/Types/Types.ts
@@ -1 +1,8 @@
 export type Lang = 'en' | 'ru';
+
+export interface FormDataItem {
+  key: string;
+  value: string;
+}
+
+export type BodyValue = null | string | FormData;
diff --git a/src/components/BodyEditor/BodyEditor.tsx b/src/components/BodyEditor/BodyEditor.tsx
new file mode 100644
index 0000000..5021822
--- /dev/null
+++ b/src/components/BodyEditor/BodyEditor.tsx
@@ -0,0 +1,113 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import FormDataEditor from '../FormDataEditor/FormDataEditor';
+import type { BodyValue, FormDataItem } from '../../Types/Types';
+
+type BodyType = 'none' | 'raw' | 'form-data';
+
+interface BodyEditorProps {
+  value: BodyValue;
+  onChange: (val: BodyValue) => void;
+  readOnly?: boolean;
+}
+
+export default function BodyEditor({
+  value,
+  onChange,
+  readOnly = false,
+}: BodyEditorProps) {
+  const [error, setError] = useState<string | null>(null);
+  const [bodyType, setBodyType] = useState<BodyType>('none');
+  const [rawValue, setRawValue] = useState('');
+  const [formDataValue, setFormDataValue] = useState<FormDataItem[]>([]);
+
+  const intl = useIntl();
+
+  useEffect(() => {
+    if (typeof value === 'string') {
+      setBodyType('raw');
+      setRawValue(value);
+    } else if (value instanceof FormData) {
+      setBodyType('form-data');
+
+      const arr: FormDataItem[] = [];
+      value.forEach((val, key) => arr.push({ key, value: String(val) }));
+      setFormDataValue(arr);
+    } else {
+      setBodyType('none');
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (bodyType === 'raw') {
+      try {
+        const parsedBody = JSON.parse(rawValue);
+        setRawValue(JSON.stringify(parsedBody, null, 2));
+        setError(null);
+        onChange(rawValue);
+      } catch {
+        setError('Invalid JSON');
+      }
+    }
+  }, [rawValue, bodyType, onChange]);
+
+  useEffect(() => {
+    if (bodyType === 'form-data') {
+      const fd = new FormData();
+      formDataValue.forEach((item) => {
+        if (item.key) fd.append(item.key, item.value);
+      });
+      onChange(fd);
+    }
+  }, [formDataValue, bodyType, onChange]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      <select
+        value={bodyType}
+        onChange={(e) => setBodyType(e.target.value as BodyType)}
+      >
+        <option value="none">
+          {intl.formatMessage({ id: 'app.BodyEditorSelectNone' })}
+        </option>
+        <option value="raw">
+          {intl.formatMessage({ id: 'app.BodyEditorSelectRow' })}
+        </option>
+        <option value="form-data">
+          {intl.formatMessage({ id: 'app.BodyEditorSelectFormData' })}
+        </option>
+      </select>
+
+      {bodyType === 'raw' && (
+        <textarea
+          value={rawValue}
+          onChange={(e) => setRawValue(e.target.value)}
+          readOnly={readOnly}
+          placeholder={intl.formatMessage({ id: 'app.phBodyEditorRow' })}
+          style={{
+            width: '100%',
+            minHeight: '200px',
+            fontFamily: 'monospace',
+            backgroundColor: readOnly ? '#f9f9f9' : 'white',
+          }}
+        />
+      )}
+
+      {bodyType === 'form-data' && (
+        <FormDataEditor
+          value={formDataValue}
+          onChange={setFormDataValue}
+          readOnly={readOnly}
+        />
+      )}
+
+      {error && !readOnly && (
+        <span style={{ color: 'red' }}>
+          {intl.formatMessage({ id: 'app.ErrorJSONParse' })}
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/FormDataEditor/FormDataEditor.tsx b/src/components/FormDataEditor/FormDataEditor.tsx
new file mode 100644
index 0000000..3829807
--- /dev/null
+++ b/src/components/FormDataEditor/FormDataEditor.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import type { FormDataItem } from '../../Types/Types';
+import { useIntl } from 'react-intl';
+
+interface FormDataEditorProps {
+  value: FormDataItem[];
+  onChange: (val: FormDataItem[]) => void;
+  readOnly?: boolean;
+}
+
+export default function FormDataEditor({
+  value,
+  onChange,
+  readOnly = false,
+}: FormDataEditorProps) {
+  const intl = useIntl();
+
+  const handleKeyChange = (index: number, key: string) => {
+    const newValue = [...value];
+    newValue[index] = { ...newValue[index], key };
+    onChange(newValue);
+  };
+
+  const handleValueChange = (index: number, val: string) => {
+    const newValue = [...value];
+    newValue[index].value = val;
+    onChange(newValue);
+  };
+
+  const handleAddRow = () => {
+    onChange([...value, { key: '', value: '' }]);
+  };
+
+  const handleRemoveRow = (index: number) => {
+    const newValue = [...value];
+    newValue.splice(index, 1);
+    onChange(newValue);
+  };
+
+  return (
+    <div>
+      {value.map((item, index) => (
+        <div
+          key={index}
+          style={{ display: 'flex', gap: '8px', marginBottom: '4px' }}
+        >
+          <input
+            type="text"
+            placeholder={intl.formatMessage({ id: 'app.phFormDataKey' })}
+            readOnly={readOnly}
+            value={item.key}
+            onChange={(e) => handleKeyChange(index, e.target.value)}
+          />
+          <input
+            type="text"
+            placeholder={intl.formatMessage({ id: 'app.phFormDataValue' })}
+            readOnly={readOnly}
+            value={item.value}
+            onChange={(e) => handleValueChange(index, e.target.value)}
+          />
+          <button onClick={() => handleRemoveRow(index)}>
+            {intl.formatMessage({ id: 'app.FormDataValueRemoveBtn' })}
+          </button>
+        </div>
+      ))}
+      <button onClick={handleAddRow}>
+        {intl.formatMessage({ id: 'app.FormDataValueAddRowBtn' })}
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 2dbb7aa..2807bbd 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -1,20 +1,40 @@
 'use client';
 
 import s from './Header.module.sass';
-import { type JSX } from 'react';
+import { useState, type JSX } from 'react';
 import classNames from 'classnames';
 import { NavLink } from 'react-router';
 import { useAppState } from '../../redux/useAppSelector';
 import { useActions } from '../../redux/useActions';
 import { FormattedMessage } from 'react-intl';
+import { auth } from '../../config/firebase';
+import { signOut } from 'firebase/auth';
 
 export function Header(): JSX.Element {
   const headerStyles = classNames('header ', s.header);
   const headerContainerStyles = classNames('container ', s.headerContainer);
+  const [name, setName] = useState('unknown');
 
   const { isLogin } = useAppState();
   const { login, logout, switchLanguage } = useActions();
 
+  auth.onAuthStateChanged((user) => {
+    if (user) {
+      if (!isLogin) {
+        login();
+      }
+      setName(user?.email ? user.email : 'unknown');
+    } else {
+      setName('unknown');
+      logout();
+    }
+  });
+
+  const handleLogout = () => {
+    signOut(auth);
+    console.log('user signOut');
+  };
+
   return (
     <header className={headerStyles}>
       <div className={headerContainerStyles}>
@@ -33,11 +53,14 @@ export function Header(): JSX.Element {
               <NavLink to="/history">History</NavLink>
             </li>
             <li>
-              <NavLink to="/login">Sign In / Sign Up</NavLink>
+              <NavLink to="/login">Sign Up</NavLink>
+            </li>
+            <li>
+              <NavLink to="/signIn">Sign In</NavLink>
             </li>
           </ul>
+          <div>Logged as {name}</div>
         </nav>
-
         <label className={s.switch}>
           <input
             type="checkbox"
@@ -51,7 +74,7 @@ export function Header(): JSX.Element {
           <span className={s.switchButton}>en/ru</span>
         </label>
 
-        <button onClick={() => (isLogin ? logout() : login())}>
+        <button onClick={() => (isLogin ? handleLogout() : login())}>
           {isLogin ? (
             <FormattedMessage id="app.signOutButton" />
           ) : (
diff --git a/src/components/passwordStr/passwordStr.ts b/src/components/passwordStr/passwordStr.ts
new file mode 100644
index 0000000..8f8e778
--- /dev/null
+++ b/src/components/passwordStr/passwordStr.ts
@@ -0,0 +1,35 @@
+export interface passwordStrInterface {
+  score: number;
+  level: 'empty' | 'weak' | 'medium' | 'strong';
+  color: 'red' | 'orange' | 'yellow' | 'green';
+}
+
+export const getPasswordStrength = (password: string): passwordStrInterface => {
+  if (!password)
+    return {
+      score: 0,
+      level: 'empty',
+      color: 'red',
+    };
+
+  let score = 0;
+  const checks = [
+    password.length >= 8,
+    /\d/.test(password),
+    /[a-z]/.test(password),
+    /[A-Z]/.test(password),
+    /[!@#$%^&*(),.?":{}|<>]/.test(password),
+  ];
+
+  score = checks.filter(Boolean).length;
+  console.log(score);
+  if (score === 0) {
+    return { score, level: 'empty', color: 'red' };
+  } else if (score <= 2) {
+    return { score, level: 'weak', color: 'red' };
+  } else if (score === 3 || score === 4) {
+    return { score, level: 'medium', color: 'orange' };
+  } else {
+    return { score, level: 'strong', color: 'green' };
+  }
+};
diff --git a/src/config/firebase.ts b/src/config/firebase.ts
new file mode 100644
index 0000000..e5740f7
--- /dev/null
+++ b/src/config/firebase.ts
@@ -0,0 +1,14 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+const firebaseConfig = {
+  apiKey: 'AIzaSyBPGKPIQ4QHwhM5VZVU2NY42orf7Ai88Ds',
+  authDomain: 'rss-project-postman.firebaseapp.com',
+  projectId: 'rss-project-postman',
+  storageBucket: 'rss-project-postman.firebasestorage.app',
+  messagingSenderId: '571102150844',
+  appId: '1:571102150844:web:16a5f2f963d8bf8ca1d0b9',
+  measurementId: 'G-HFH1H34D2C',
+};
+
+const app = initializeApp(firebaseConfig);
+export const auth = getAuth(app);
diff --git a/src/lang/en.json b/src/lang/en.json
index 780d17d..1d8d65b 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -1,5 +1,14 @@
 {
   "app.signUpButton": "SignUp",
   "app.signInButton": "SignIn",
-  "app.signOutButton": "SignOut"
+  "app.signOutButton": "SignOut",
+  "app.phFormDataKey": "Key",
+  "app.phFormDataValue": "Value",
+  "app.FormDataValueRemoveBtn": "Remove",
+  "app.FormDataValueAddRowBtn": "Add",
+  "app.BodyEditorSelectNone": "None",
+  "app.BodyEditorSelectRow": "Row (JSON)",
+  "app.BodyEditorSelectFormData": "Data Form",
+  "app.phBodyEditorRow": "Input JSON ...",
+  "app.ErrorJSONParse": "Invalid JSON"
 }
diff --git a/src/lang/ru.json b/src/lang/ru.json
index 66abcbe..dd3da2d 100644
--- a/src/lang/ru.json
+++ b/src/lang/ru.json
@@ -1,5 +1,14 @@
 {
   "app.signUpButton": "Регистрация",
   "app.signInButton": "Войти",
-  "app.signOutButton": "Выход"
+  "app.signOutButton": "Выход",
+  "app.phFormDataKey": "Ключ",
+  "app.phFormDataValue": "Значение",
+  "app.FormDataValueRemoveBtn": "Удалить",
+  "app.FormDataValueAddRowBtn": "Добавить",
+  "app.BodyEditorSelectNone": "Нет",
+  "app.BodyEditorSelectRow": "JSON",
+  "app.BodyEditorSelectFormData": "Данные формы",
+  "app.phBodyEditorRow": "Введите JSON ...",
+  "app.ErrorJSONParse": "Некорректный формат JSON"
 }
diff --git a/src/routes/config.ts b/src/routes/config.ts
index a024987..0616167 100644
--- a/src/routes/config.ts
+++ b/src/routes/config.ts
@@ -32,6 +32,11 @@ export function routes() {
           path: 'rest',
           lazy: () => import('./rest/route'),
         },
+        {
+          id: 'signin',
+          path: 'signIn',
+          lazy: () => import('./signIn/route'),
+        },
       ],
     },
   ] satisfies RSCRouteConfig;
diff --git a/src/routes/login/login.sass b/src/routes/login/login.sass
new file mode 100644
index 0000000..5486ad2
--- /dev/null
+++ b/src/routes/login/login.sass
@@ -0,0 +1,7 @@
+.form 
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 15px;
+
diff --git a/src/routes/login/route.tsx b/src/routes/login/route.tsx
index a488fb6..452f742 100644
--- a/src/routes/login/route.tsx
+++ b/src/routes/login/route.tsx
@@ -1,10 +1,109 @@
+'use client';
+import './login.sass';
+import { createUserWithEmailAndPassword } from 'firebase/auth';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { auth } from '../../config/firebase.ts';
+import { useActions } from '../../redux/useActions.ts';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { schema } from '../../yup/yup.ts';
+import { useState } from 'react';
+import {
+  getPasswordStrength,
+  type passwordStrInterface,
+} from '../../components/passwordStr/passwordStr.ts';
+
+interface IFormInput {
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
 export default function Login() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IFormInput>({
+    resolver: yupResolver(schema),
+  });
+  const { login } = useActions();
+  const [passwordStr, setPasswordStr] = useState<passwordStrInterface>({
+    score: 0,
+    level: 'empty',
+    color: 'red',
+  });
+  const handleSignIn: SubmitHandler<IFormInput> = async (data) => {
+    const { email, password } = data;
+    try {
+      await createUserWithEmailAndPassword(auth, email, password);
+      login();
+      console.log('logged');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   return (
     <main>
       <div className="container">
         <article>
           <h1>Login Page</h1>
           <p>This is the Login Page of our application.</p>
+          <form onSubmit={handleSubmit(handleSignIn)} className="form">
+            <label>Email</label>
+            <input
+              placeholder="Enter email"
+              type="text"
+              {...register('email')}
+              required
+            />
+            <p>{errors.email?.message}</p>
+            <label>Password</label>
+            <input
+              placeholder="enter password"
+              type="password"
+              {...register('password', {
+                onChange: (e) => {
+                  setPasswordStr(getPasswordStrength(e.target.value));
+                },
+              })}
+              required
+            />
+            <p>{errors.password?.message}</p>
+            <div
+              className="strength-container"
+              style={{
+                width: `100px`,
+                height: '10px',
+              }}
+            >
+              <div
+                className="strength-bar"
+                style={{
+                  width: `100px`,
+                  height: '10px',
+                }}
+              >
+                <div
+                  className="strength-fill"
+                  style={{
+                    width: `${(passwordStr.score / 5) * 100}%`,
+                    height: '10px',
+                    backgroundColor: passwordStr.color,
+                  }}
+                ></div>
+              </div>
+            </div>
+            <label>Confirm Password</label>
+            <input
+              placeholder="Confirm Password"
+              type="password"
+              {...register('confirmPassword')}
+              required
+            />
+            <p>{errors.confirmPassword?.message}</p>
+            <label>Submit</label>
+            <input type="submit" />
+          </form>
         </article>
       </div>
     </main>
diff --git a/src/routes/rest/route.tsx b/src/routes/rest/route.tsx
index a88f908..c2de220 100644
--- a/src/routes/rest/route.tsx
+++ b/src/routes/rest/route.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 export default function Rest() {
   return (
     <main>
diff --git a/src/routes/signIn/route.tsx b/src/routes/signIn/route.tsx
new file mode 100644
index 0000000..941e0bc
--- /dev/null
+++ b/src/routes/signIn/route.tsx
@@ -0,0 +1,63 @@
+'use client';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { useForm, type SubmitHandler } from 'react-hook-form';
+import { auth } from '../../config/firebase.ts';
+import { useActions } from '../../redux/useActions.ts';
+import { schema } from '../../yup/yupSignin.ts';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+interface IFormInput {
+  email: string;
+  password: string;
+}
+export default function SignIn() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IFormInput>({
+    resolver: yupResolver(schema),
+  });
+  const { login } = useActions();
+
+  const handleLogin: SubmitHandler<IFormInput> = async (data) => {
+    const { email, password } = data;
+    try {
+      await signInWithEmailAndPassword(auth, email, password);
+      login();
+      console.log('logged');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <main>
+      <div className="container">
+        <article>
+          <h1>Sign Page</h1>
+          <p>This is the sign Page of our application.</p>
+          <form onSubmit={handleSubmit(handleLogin)}>
+            <h1>ITS LOGIN IN</h1>
+            <label>Email</label>
+            <input
+              placeholder="Enter email"
+              type="text"
+              {...register('email')}
+            />
+            <p>{errors.email?.message}</p>
+            <label>Password</label>
+            <input
+              placeholder="enter password"
+              type="password"
+              {...register('password')}
+            />
+            <p>{errors.password?.message}</p>
+            <label>Submit</label>
+            <input type="submit" />
+          </form>
+        </article>
+      </div>
+    </main>
+  );
+}
diff --git a/src/yup/yup.ts b/src/yup/yup.ts
new file mode 100644
index 0000000..cc4e579
--- /dev/null
+++ b/src/yup/yup.ts
@@ -0,0 +1,20 @@
+import * as yup from 'yup';
+
+export const schema = yup.object().shape({
+  email: yup.string().email().required(),
+  password: yup
+    .string()
+    .required('Password is required')
+    .min(8, 'Password must be at least 8 characters long')
+    .matches(/[0-9]/, 'Password must contain at least one number')
+    .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
+    .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
+    .matches(
+      /[!@#$%^&*(),.?":{}|<>]/,
+      'Password must contain at least one special character'
+    ),
+  confirmPassword: yup
+    .string()
+    .oneOf([yup.ref('password')], 'Passwords must match')
+    .required('Confirm Password is required'),
+});
diff --git a/src/yup/yupSignin.ts b/src/yup/yupSignin.ts
new file mode 100644
index 0000000..61a448e
--- /dev/null
+++ b/src/yup/yupSignin.ts
@@ -0,0 +1,16 @@
+import * as yup from 'yup';
+
+export const schema = yup.object().shape({
+  email: yup.string().email().required(),
+  password: yup
+    .string()
+    .required('Password is required')
+    .min(8, 'Password must be at least 8 characters long')
+    .matches(/[0-9]/, 'Password must contain at least one number')
+    .matches(/[a-z]/, 'Password must contain at least one lowercase letter')
+    .matches(/[A-Z]/, 'Password must contain at least one uppercase letter')
+    .matches(
+      /[!@#$%^&*(),.?":{}|<>]/,
+      'Password must contain at least one special character'
+    ),
+});