diff --git a/package-lock.json b/package-lock.json
index 90f04fa..afe06d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "axios": "^1.3.4",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-hook-form": "^7.43.9",
         "react-router-dom": "^6.9.0",
         "react-scripts": "5.0.1",
         "sass": "^1.59.3",
@@ -14537,6 +14538,21 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -27725,6 +27741,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-hook-form": {
+      "version": "7.43.9",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz",
+      "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index f48e4d5..14d9b0e 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.3.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.43.9",
     "react-router-dom": "^6.9.0",
     "react-scripts": "5.0.1",
     "sass": "^1.59.3",
diff --git a/src/components/card/card.scss b/src/components/card/card.scss
index e9794e3..18f0c1b 100644
--- a/src/components/card/card.scss
+++ b/src/components/card/card.scss
@@ -116,16 +116,16 @@
   top: 24px;
   background: #e7e9fe;
   background: $accent2-color;
-  color: $accent3-color;
+  color: $text-color-light;
   padding: 8px 16px;
 }
 
-.topLeft {
+.top-left {
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
 }
 
-.topRight {
+.top-right {
   right: 0;
   border-top-left-radius: 5px;
   border-bottom-left-radius: 5px;
diff --git a/src/components/card/card.tsx b/src/components/card/card.tsx
index 65d21fe..52b77e3 100644
--- a/src/components/card/card.tsx
+++ b/src/components/card/card.tsx
@@ -1,31 +1,30 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import './card.scss';
 import { IProduct } from '../types';
 
 type CardProps = { product: IProduct };
-type CardState = {};
 
-export default class Card extends Component<CardProps, CardState> {
-  render() {
-    const { product } = this.props;
-    const { title, brand, images, price } = product;
+const Card = (props: CardProps) => {
+  const { product } = props;
+  const { title, brand, images, price } = product;
 
-    return (
-      <article className='card stacked'>
-        <div className='image-wrap'>
-          <img className='card-image' src={images[0]} alt='image' />
+  return (
+    <article className='card stacked'>
+      <div className='image-wrap'>
+        <img className='card-image' src={images[0]} alt='image' />
+      </div>
+      <div className='card-content card-content-wrapper'>
+        <div className='card-side card-content-button'>
+          <h2 className='card-title'>{title}</h2>
+          <div className='card-price'>{price}$</div>
+          <cite className='card-subtitle'>{brand}</cite>
+          <button className='card-button'>Learn more</button>
         </div>
-        <div className='card-content card-content-wrapper'>
-          <div className='card-side card-content-Button'>
-            <h2 className='card-title'>{title}</h2>
-            <div className='card-price'>{price}$</div>
-            <cite className='card-subtitle'>{brand}</cite>
-            <button className='card-button'>Learn more</button>
-          </div>
-        </div>
-        <span className='tag topLeft'>Top</span>
-      </article>
-    );
-  }
-}
+      </div>
+      <span className='tag top-left'>Top</span>
+    </article>
+  );
+};
+
+export default Card;
diff --git a/src/components/cardForm-list/cardForm-list.tsx b/src/components/cardForm-list/cardForm-list.tsx
index 2797e17..99d21ee 100644
--- a/src/components/cardForm-list/cardForm-list.tsx
+++ b/src/components/cardForm-list/cardForm-list.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 
 import { ICardForm } from '../cardForm/cardForm';
 import CardForm from '../cardForm';
@@ -8,24 +8,23 @@ import './cardForm-list.scss';
 type CardFormListProps = {
   cardsForm: ICardForm[];
 };
-type CardFormListState = {};
 
-export default class CardFormList extends Component<CardFormListProps, CardFormListState> {
-  render() {
-    const cards = this.props.cardsForm.map((card) => {
-      const { id } = card;
-
-      return (
-        <li key={id} className='cards-list__item'>
-          <CardForm card={card} />
-        </li>
-      );
-    });
+const CardFormList: FC<CardFormListProps> = (props: CardFormListProps) => {
+  const cards = props.cardsForm.map((card) => {
+    const { id } = card;
 
     return (
-      <ul className='card-form-list' data-testid='card-form-list'>
-        {cards}
-      </ul>
+      <li key={id} className='cards-list__item'>
+        <CardForm card={card} />
+      </li>
     );
-  }
-}
+  });
+
+  return (
+    <ul className='card-form-list' data-testid='card-form-list'>
+      {cards}
+    </ul>
+  );
+};
+
+export default CardFormList;
diff --git a/src/components/cardForm/cardForm.tsx b/src/components/cardForm/cardForm.tsx
index f13534a..4fca094 100644
--- a/src/components/cardForm/cardForm.tsx
+++ b/src/components/cardForm/cardForm.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 
 import './cardForm.scss';
 
@@ -14,40 +14,39 @@ export interface ICardForm {
 }
 
 type CardFormProps = { card: ICardForm };
-type CardFormState = {};
-
-export default class CardForm extends Component<CardFormProps, CardFormState> {
-  render() {
-    const { card } = this.props;
-    const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = card;
-
-    return (
-      <div className='card' role='card-form'>
-        <div className='card__img'>
-          <div className='card__img-wrapper'>
-            <img src={imageSrc} alt='image profile' />
-          </div>
-        </div>
-        <div className='card__main-info'>
-          <div className='card__title'>{userName}</div>
-          <div className='card__country'>{country}</div>
-        </div>
 
-        <div className='card__second-info'>
-          <div className='card__item'>
-            <span>Birthday: </span>
-            {birthday}
-          </div>
-          <div className='card__item'>{gender}</div>
-        </div>
+const CardForm: FC<CardFormProps> = (props: CardFormProps) => {
+  const { card } = props;
+  const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = card;
 
-        <div className='card__info'>
-          <p className='card__feedback-text'>{feedbackText}</p>
+  return (
+    <div className='card' role='card-form'>
+      <div className='card__img'>
+        <div className='card__img-wrapper'>
+          <img src={imageSrc} alt='image profile' />
         </div>
-        <div className='card__consent-data'>
-          Do you consent to my personal data? <span>{isConsentPersonalData ? 'Yes' : 'No'}</span>
+      </div>
+      <div className='card__main-info'>
+        <div className='card__title'>{userName}</div>
+        <div className='card__country'>{country}</div>
+      </div>
+
+      <div className='card__second-info'>
+        <div className='card__item'>
+          <span>Birthday: </span>
+          {birthday}
         </div>
+        <div className='card__item'>{gender}</div>
       </div>
-    );
-  }
-}
+
+      <div className='card__info'>
+        <p className='card__feedback-text'>{feedbackText}</p>
+      </div>
+      <div className='card__consent-data'>
+        Do you consent to my personal data? <span>{isConsentPersonalData ? 'Yes' : 'No'}</span>
+      </div>
+    </div>
+  );
+};
+
+export default CardForm;
diff --git a/src/components/cards-list/cards-list.tsx b/src/components/cards-list/cards-list.tsx
index d74bbc5..2ede2f0 100644
--- a/src/components/cards-list/cards-list.tsx
+++ b/src/components/cards-list/cards-list.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import './cards-list.scss';
 
@@ -8,10 +8,9 @@ import { IProduct } from '../types';
 type CardListProps = {
   products: IProduct[];
 };
-type CardListState = {};
 
-export default class CardList extends Component<CardListProps, CardListState> {
-  cards = this.props.products.slice(0, 8).map((product) => {
+const CardList = ({ products }: CardListProps) => {
+  const cards = products.map((product) => {
     const { id } = product;
 
     return (
@@ -21,11 +20,11 @@ export default class CardList extends Component<CardListProps, CardListState> {
     );
   });
 
-  render() {
-    return (
-      <ul className='cards-list' data-testid='cards-list'>
-        {this.cards}
-      </ul>
-    );
-  }
-}
+  return (
+    <ul className='cards-list' data-testid='cards-list'>
+      {cards}
+    </ul>
+  );
+};
+
+export default CardList;
diff --git a/src/components/footer/footer.test.tsx b/src/components/footer/footer.test.tsx
new file mode 100644
index 0000000..07e1643
--- /dev/null
+++ b/src/components/footer/footer.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Footer from './footer';
+
+describe('test Header component', () => {
+  test('it renders', () => {
+    render(<Footer />);
+    expect(screen.getByText(/avshir/i)).toBeInTheDocument();
+  });
+});
diff --git a/src/components/form/form.scss b/src/components/form/form.scss
index 2fc13c4..f98e2ab 100644
--- a/src/components/form/form.scss
+++ b/src/components/form/form.scss
@@ -79,4 +79,4 @@
 
   font-size: 20px;
   color: $accent2-color;
-}
\ No newline at end of file
+}
diff --git a/src/components/form/form.test.tsx b/src/components/form/form.test.tsx
index eaac760..cd4e2fd 100644
--- a/src/components/form/form.test.tsx
+++ b/src/components/form/form.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 import Form from './form';
 
@@ -25,6 +25,19 @@ describe('test Form component', () => {
     expect(screen.getByRole('user-name')).toBeInTheDocument();
   });
 
+  test('value of input type="text" field "userName" changes by user', () => {
+    render(
+      <Form
+        addCardForm={() => {
+          throw new Error();
+        }}
+      />
+    );
+    const input = screen.getByRole('user-name') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'Anna' } });
+    expect(input.value).toBe('Anna');
+  });
+
   test('should contain input type="date" field "date-birthday"', () => {
     render(
       <Form
@@ -88,7 +101,7 @@ describe('test Form component', () => {
         }}
       />
     );
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('textarea')).toBeInTheDocument();
   });
 
   test('should contain 1 input type="checkbox" name="agree-consent-data"', () => {
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index b173e5d..3a5757c 100644
--- a/src/components/form/form.tsx
+++ b/src/components/form/form.tsx
@@ -1,219 +1,171 @@
-import React, { Component, FormEvent } from 'react';
+import React, { FC, useState } from 'react';
+import { useForm, SubmitHandler } from 'react-hook-form';
 
 import './form.scss';
 import { ICardForm } from '../cardForm/cardForm';
-import { FormErrors, errorTextMessage } from './form-utils';
-import { feedbackTextValidate, userNameValidate, dateBirthdayValidate } from './formValidate';
+import { errorTextMessage } from './form-utils';
 
 type FormProps = {
   addCardForm: (card: ICardForm) => void;
 };
-type FormState = {
-  errors: FormErrors;
-  success: string;
+
+type FormValues = {
+  userName: string;
+  country: string;
+  birthday: string;
+  feedbackText: string;
+  image: FileList;
+  isConsentPersonalData: boolean;
+  gender: string;
 };
 
-export default class Form extends Component<FormProps, FormState> {
-  state: FormState = {
-    errors: {
-      userName: '',
-      country: '',
-      birthday: '',
-      feedbackText: '',
-      imageSrc: '',
-      isConsent: '',
-    },
-    success: '',
-  };
+const Form: FC<FormProps> = (props: FormProps) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<FormValues>({ mode: 'onSubmit' });
 
-  private formRef = React.createRef<HTMLFormElement>();
-  private userNameRef = React.createRef<HTMLInputElement>();
-  private birthdayRef = React.createRef<HTMLInputElement>();
-  private countryRef = React.createRef<HTMLSelectElement>();
-  private feedbackTextRef = React.createRef<HTMLTextAreaElement>();
-  private isConsentRef = React.createRef<HTMLInputElement>();
-  private imageRef = React.createRef<HTMLInputElement>();
-
-  createCardForm(): ICardForm {
-    const genderArr: HTMLInputElement[] = [...this.formRef.current?.['gender']];
-    const gender = (genderArr.find((el) => el.checked) as HTMLInputElement).value;
-
-    return {
-      userName: this.userNameRef.current?.value || '',
-      gender: gender || '',
-      birthday: this.birthdayRef.current?.value || '',
-      country: this.countryRef.current?.value || '',
-      feedbackText: this.feedbackTextRef.current?.value || '',
-      isConsentPersonalData: this.isConsentRef.current?.checked,
-      imageSrc: this.imageRef.current?.files ? URL.createObjectURL(this.imageRef.current.files[0]) : '',
-    };
-  }
-
-  validate() {
-    const errors: FormErrors = {
-      userName: userNameValidate(this.userNameRef.current?.value || '') ? '' : errorTextMessage.userName,
-      feedbackText: feedbackTextValidate(this.feedbackTextRef.current?.value || '')
-        ? ''
-        : errorTextMessage.feedbackText,
-      country: this.formRef.current?.['country'].value ? '' : errorTextMessage.country,
-      isConsent: this.formRef.current?.['agree-consent-data'].checked ? '' : errorTextMessage.isConsent,
-      birthday: dateBirthdayValidate(this.formRef.current?.['date-birthday'].value) ? '' : errorTextMessage.birthday,
-      imageSrc: this.imageRef.current?.value ? '' : errorTextMessage.imageSrc,
-    };
-
-    this.setState({ errors: errors });
-
-    const isValid = Object.values(errors).every((elem) => !elem);
-    return isValid;
-  }
-
-  resetErrorsInfo = () => {
-    this.setState({
-      errors: { userName: '', country: '', birthday: '', feedbackText: '', imageSrc: '', isConsent: '' },
-    });
-  };
+  const [success, setSuccess] = useState('');
 
-  showSuccessMessage() {
-    this.setState({ success: 'Your feedback will be added! Thanks' });
+  const showSuccessMessage = () => {
+    setSuccess('Your feedback will be added! Thanks');
 
     setTimeout(() => {
-      this.setState({ success: '' });
+      setSuccess('');
     }, 3000);
-  }
+  };
 
-  handleSubmit = (e: FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const onSubmit: SubmitHandler<FormValues> = (data) => {
+    const { image, ...dataLast } = data;
+    const imageSrc: string = URL.createObjectURL(image[0]);
+    const newCardForm: ICardForm = { imageSrc, ...dataLast };
 
-    const isValid = this.validate();
+    props.addCardForm(newCardForm);
 
-    if (isValid) {
-      const newCardForm = this.createCardForm();
-      this.props.addCardForm(newCardForm);
+    showSuccessMessage();
+    reset();
+  };
 
-      this.showSuccessMessage();
+  const successMessage = success ? (
+    <div className='form__success-message popup'>
+      <div className='popup__content'>{success}</div>
+    </div>
+  ) : null;
+
+  return (
+    <form id='add-card-form' role='form' className='form' action='/' method='post' onSubmit={handleSubmit(onSubmit)}>
+      {successMessage}
+
+      <h3 className='form__title'>Add feedback</h3>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='userName'>
+          Your name
+        </label>
+        <input
+          className='form__input user-name'
+          type='text'
+          placeholder='Name'
+          {...register('userName', { required: true, minLength: 3, maxLength: 20 })}
+          role='user-name'
+        ></input>
+        {errors.userName && <span className='form__error'>{errorTextMessage.userName}</span>}
+      </div>
 
-      if (this.formRef.current) {
-        this.formRef.current.reset();
-      }
-    }
-  };
+      <div className='form__item'>
+        <label className='form__label' htmlFor='birthday'>
+          Your birthday
+        </label>
+        <input
+          className='form__input date'
+          type='date'
+          {...register('birthday', { required: true })}
+          role='date-birthday'
+        ></input>
+        {errors.birthday && <span className='form__error'>{errorTextMessage.birthday}</span>}
+      </div>
 
-  render() {
-    const successMessage = this.state.success ? (
-      <div className='form__success-message popup'>
-        <div className='popup__content'>{this.state.success}</div>
+      <div className='form__item'>
+        <label className='form__label' htmlFor='country'>
+          Where are you from?
+        </label>
+        <select className='form__input' {...register('country', { required: true })} role='select-country'>
+          <option value=''>Choose country</option>
+          <option value='Belarus'>Belarus</option>
+          <option value='Poland'>Poland</option>
+          <option value='Lithuania'>Lithuania</option>
+          <option value='France'>France</option>
+          <option value='Sweden'>Sweden</option>
+        </select>
+        {errors.country && <span className='form__error'>{errorTextMessage.country}</span>}
       </div>
-    ) : null;
-
-    return (
-      <form
-        id='add-card-form'
-        role='form'
-        className='form'
-        action='/'
-        method='post'
-        onSubmit={this.handleSubmit}
-        onChange={this.resetErrorsInfo}
-        ref={this.formRef}
-      >
-        {successMessage}
-
-        <h3 className='form__title'>Add feedback</h3>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='userName'>
-            Your name
-          </label>
-          <input
-            className='form__input user-name'
-            type='text'
-            placeholder='Name'
-            name='userName'
-            ref={this.userNameRef}
-            role='user-name'
-          ></input>
-          <span className='form__error'>{this.state.errors.userName}</span>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='date-birthday'>
-            Your birthday
-          </label>
-          <input
-            className='form__input date'
-            type='date'
-            name='date-birthday'
-            ref={this.birthdayRef}
-            role='date-birthday'
-          ></input>
-          <span className='form__error'>{this.state.errors.birthday}</span>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='country'>
-            Where are you from?
-          </label>
-          <select className='form__input' name='country' ref={this.countryRef} role='select-country'>
-            <option value=''>Choose country</option>
-            <option value='Belarus'>Belarus</option>
-            <option value='Poland'>Poland</option>
-            <option value='Lithuania'>Lithuania</option>
-            <option value='France'>France</option>
-            <option value='Sweden'>Sweden</option>
-          </select>
-          <span className='form__error'>{this.state.errors.country}</span>
-        </div>
-        <div className='form__radio'>
-          <div className='form__radio-item'>
-            <input className='form__radio-input' type='radio' name='gender' defaultValue='female' defaultChecked />
-            <label htmlFor='female'>female</label>
-          </div>
-          <div className='form__radio-item'>
-            <input className='form__radio-input' type='radio' name='gender' defaultValue='male' />
-            <label htmlFor='male'>male</label>
-          </div>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='profile'>
-            Profile picture
-          </label>
-          <input
-            className='form__input user-image'
-            type='file'
-            name='profile'
-            accept='image/*,.pdf'
-            ref={this.imageRef}
-            role='profile'
-          ></input>
-          <span className='form__error'>{this.state.errors.imageSrc}</span>
-        </div>
-        <div className='form__item'>
-          <label className='form__label' htmlFor='feedback'>
-            Your feedback
-          </label>
-          <textarea className='form__input form__textarea' name='feedback' ref={this.feedbackTextRef}></textarea>
-          <span className='form__error'>{this.state.errors.feedbackText}</span>
-        </div>
 
-        <div className='form__item-checkbox'>
+      <div className='form__radio'>
+        <div className='form__radio-item'>
           <input
-            className='form__input-checkbox'
-            type='checkbox'
-            name='agree-consent-data'
-            ref={this.isConsentRef}
-          ></input>
-          <label className='form__label-checkbox' htmlFor='agree-consent-data'>
-            I consent to my personal data
-          </label>
+            className='form__radio-input'
+            type='radio'
+            defaultValue='female'
+            defaultChecked
+            {...register('gender')}
+          />
+          <label htmlFor='female'>female</label>
         </div>
-        <span className='form__error'>{this.state.errors.isConsent}</span>
-
-        <div className='form__wrapper'>
-          <button className='btn' type='submit'>
-            Submit
-          </button>
-          <button className='btn btn--col-5' type='reset'>
-            Reset
-          </button>
+        <div className='form__radio-item'>
+          <input className='form__radio-input' type='radio' defaultValue='male' {...register('gender')} />
+          <label htmlFor='male'>male</label>
         </div>
-      </form>
-    );
-  }
-}
+      </div>
+
+      <div className='form__item'>
+        <label className='form__label' htmlFor='image'>
+          Profile picture
+        </label>
+        <input
+          className='form__input user-image'
+          type='file'
+          accept='image/*,.pdf'
+          {...register('image', { required: true })}
+          role='profile'
+        ></input>
+        {errors.image && <span className='form__error'>{errorTextMessage.imageSrc}</span>}
+      </div>
+
+      <div className='form__item'>
+        <label className='form__label' htmlFor='feedbackText'>
+          Your feedback
+        </label>
+        <textarea
+          role='textarea'
+          className='form__input form__textarea'
+          {...register('feedbackText', { required: true, minLength: 5, maxLength: 50 })}
+        ></textarea>
+        {errors.feedbackText && <span className='form__error'>{errorTextMessage.feedbackText}</span>}
+      </div>
+
+      <div className='form__item-checkbox'>
+        <input
+          className='form__input-checkbox'
+          type='checkbox'
+          {...register('isConsentPersonalData', { required: true })}
+        ></input>
+        <label className='form__label-checkbox' htmlFor='isConsentPersonalData'>
+          I consent to my personal data
+        </label>
+      </div>
+      {errors.isConsentPersonalData && <span className='form__error'>{errorTextMessage.isConsent}</span>}
+
+      <div className='form__wrapper'>
+        <button className='btn' type='submit'>
+          Submit
+        </button>
+        <button className='btn btn--col-5' type='reset'>
+          Reset
+        </button>
+      </div>
+    </form>
+  );
+};
+
+export default Form;
diff --git a/src/components/form/formValidate.test.tsx b/src/components/form/formValidate.test.tsx
new file mode 100644
index 0000000..4d61248
--- /dev/null
+++ b/src/components/form/formValidate.test.tsx
@@ -0,0 +1,75 @@
+import { userNameValidate, feedbackTextValidate, dateBirthdayValidate } from './formValidate';
+
+describe('check userNameValidate function', () => {
+  test('case: unvalid - empty value', () => {
+    expect(userNameValidate('')).toBe(false);
+  });
+
+  test('case: unvalid - 2 letter ', () => {
+    expect(userNameValidate('An')).toBe(false);
+  });
+
+  test('case: unvalid - 21 letters', () => {
+    expect(userNameValidate('Annnnnnnnnnnnnnnnnnnn')).toBe(false);
+  });
+
+  test('case: unvalid - first letter is in lowerCase', () => {
+    expect(userNameValidate('ann')).toBe(false);
+  });
+
+  test('case: valid name value 3 letter', () => {
+    expect(userNameValidate('Ann')).toBe(true);
+  });
+
+  test('case: valid name value 10 letters', () => {
+    expect(userNameValidate('Anna-Maria')).toBe(true);
+  });
+});
+
+describe('check feedbackTextValidate function', () => {
+  test('case: unvalid - empty value', () => {
+    expect(feedbackTextValidate('')).toBe(false);
+  });
+  test('case: unvalid - 4 words ', () => {
+    expect(feedbackTextValidate('Anna go to the')).toBe(false);
+  });
+  test('case: unvalid - 51 words', () => {
+    const words51 =
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis ipsa numquam provident nisi ex ipsam repudiandae quam ut, hic rerum repellat sequi reprehenderit, magnam molestiae cupiditate porro autem est iusto eaque voluptate nihil ducimus saepe veniam! Repellendus, ullam voluptates consectetur facilis delectus deleniti maxime labore, aliquam fugit corrupti libero cupiditate jest?';
+    expect(feedbackTextValidate(words51)).toBe(false);
+  });
+
+  test('case: valid 5 words', () => {
+    expect(feedbackTextValidate('Anna go to the shop')).toBe(true);
+  });
+  test('case: valid 50 words', () => {
+    const words50 =
+      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis ipsa numquam provident nisi ex ipsam repudiandae quam ut, hic rerum repellat sequi reprehenderit, magnam molestiae cupiditate porro autem est iusto eaque voluptate nihil ducimus saepe veniam! Repellendus, ullam voluptates consectetur facilis delectus deleniti maxime labore, aliquam fugit corrupti libero cupiditate?';
+    expect(feedbackTextValidate(words50)).toBe(true);
+  });
+});
+
+describe('check dateBirthdayValidate function', () => {
+  test('case: unvalid - empty value', () => {
+    expect(dateBirthdayValidate('')).toBe(false);
+  });
+  test('case: unvalid - only 2 part of date ', () => {
+    expect(dateBirthdayValidate('2012-12')).toBe(false);
+  });
+  test('case: unvalid - year < 1900', () => {
+    expect(dateBirthdayValidate('1899-12-01')).toBe(false);
+  });
+  test('case: unvalid - year >= currentYear ', () => {
+    const currentYear: number = new Date().getFullYear();
+    const upperCurrentYear = currentYear + 1;
+    expect(dateBirthdayValidate(`${upperCurrentYear}-12-01`)).toBe(false);
+  });
+
+  test('case: valid full date, year > 1900', () => {
+    expect(dateBirthdayValidate('2012-05-12')).toBe(true);
+  });
+  test('case: valid full date and year <= currentYear ', () => {
+    const currentYear: number = new Date().getFullYear();
+    expect(dateBirthdayValidate(`${currentYear}-12-01`)).toBe(true);
+  });
+});
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index bb44dea..3da3c35 100644
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@@ -13,7 +13,7 @@
   margin: 0 0 0 auto;
 
   @media (max-width: 640px) {
-    max-width: 200px;;
+    max-width: 200px;
   }
 }
 
diff --git a/src/components/layout/layout.tsx b/src/components/layout/layout.tsx
index dc7bf78..3410314 100644
--- a/src/components/layout/layout.tsx
+++ b/src/components/layout/layout.tsx
@@ -1,18 +1,20 @@
-import { Component } from 'react';
+import React, { FC } from 'react';
 import { Outlet } from 'react-router-dom';
 
 import Header from '../header';
 
-export default class Layout extends Component {
-  render() {
-    return (
-      <>
-        <Header />
+const Layout: FC = () => {
+  return (
+    <>
+      <Header />
 
-        <main className='container main'>
+      <main className='main'>
+        <div className='container'>
           <Outlet />
-        </main>
-      </>
-    );
-  }
-}
+        </div>
+      </main>
+    </>
+  );
+};
+
+export default Layout;
diff --git a/src/components/search-panel/search-panel.test.tsx b/src/components/search-panel/search-panel.test.tsx
new file mode 100644
index 0000000..e424e2d
--- /dev/null
+++ b/src/components/search-panel/search-panel.test.tsx
@@ -0,0 +1,16 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import SearchPanel from './search-panel';
+
+describe('test SearchPanel component', () => {
+  test('should contains input', () => {
+    render(<SearchPanel />);
+    expect(screen.getByRole('search-input')).toBeInTheDocument();
+  });
+
+  test('value of input changes by user', () => {
+    render(<SearchPanel />);
+    const input = screen.getByRole('search-input') as HTMLInputElement;
+    fireEvent.change(input, { target: { value: 'some text for test' } });
+    expect(input.value).toBe('some text for test');
+  });
+});
diff --git a/src/components/search-panel/search-panel.tsx b/src/components/search-panel/search-panel.tsx
index e39275d..d7cbdb9 100644
--- a/src/components/search-panel/search-panel.tsx
+++ b/src/components/search-panel/search-panel.tsx
@@ -1,50 +1,38 @@
-import React, { Component, ChangeEvent } from 'react';
+import React, { FC, ChangeEvent, useState, useEffect, useRef } from 'react';
 
 import './search-panel.scss';
 
-type SearchPanelProps = {};
-type SearchPanelState = { searchValue: string };
+const SearchPanel: FC = () => {
+  const initSearchValue: string = localStorage.getItem('searchValue') || '';
+  const [searchValue, setSearchValue] = useState(initSearchValue);
+  const searchRef = useRef<string>(searchValue);
 
-export default class SearchPanel extends Component<SearchPanelProps, SearchPanelState> {
-  state = {
-    searchValue: localStorage.getItem('searchValue') || '',
-  };
-
-  componentDidMount() {
-    this.getSearchValue();
-  }
-
-  componentWillUnmount() {
-    localStorage.setItem('searchValue', this.state.searchValue);
-  }
+  useEffect(() => {
+    //like componentWillUnmount
+    return function saveToLS() {
+      const currentSearchValue = searchRef?.current || '';
+      localStorage.setItem('searchValue', currentSearchValue);
+    };
+  }, []);
 
-  getSearchValue(): void {
-    const searchValueLS = localStorage.getItem('searchValue') || '';
-    if (searchValueLS) {
-      this.setState({
-        searchValue: searchValueLS,
-      });
-    }
-  }
-
-  onSearchChange = (e: ChangeEvent<HTMLInputElement>): void => {
+  const onSearchChange = (e: ChangeEvent<HTMLInputElement>): void => {
     const newSearchValue = e.target.value.trimStart();
-    this.setState({
-      searchValue: newSearchValue,
-    });
+    setSearchValue(newSearchValue);
+    searchRef.current = newSearchValue;
   };
 
-  render() {
-    const searchText = 'Type here to search...';
-
-    return (
-      <input
-        type='text'
-        className='search-panel search-input btn--border'
-        placeholder={searchText}
-        value={this.state.searchValue}
-        onChange={this.onSearchChange}
-      />
-    );
-  }
-}
+  const searchText = 'Type here to search...';
+
+  return (
+    <input
+      type='text'
+      className='search-panel search-input btn--border'
+      placeholder={searchText}
+      value={searchValue}
+      onChange={(e) => onSearchChange(e)}
+      role='search-input'
+    />
+  );
+};
+
+export default SearchPanel;
diff --git a/src/pages/formPage/formPage.tsx b/src/pages/formPage/formPage.tsx
index 31251d7..6139756 100644
--- a/src/pages/formPage/formPage.tsx
+++ b/src/pages/formPage/formPage.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC, useState } from 'react';
 
 import './formPage.scss';
 
@@ -6,32 +6,22 @@ import Form from '../../components/form';
 import { ICardForm } from '../../components/cardForm/cardForm';
 import CardFormList from '../../components/cardForm-list';
 
-type FormPageProps = {};
-type FormPageState = {
-  cardsForm: ICardForm[];
-};
-
-export default class FormPage extends Component<FormPageProps, FormPageState> {
-  cardId = 1;
-
-  state = {
-    cardsForm: [],
-  };
+const FormPage: FC = () => {
+  let cardId = 1;
+  const [cardsForm, setCardsForm] = useState<ICardForm[]>([]);
 
-  addCardForm = (card: ICardForm): void => {
-    const newCard = this.createCard(card);
+  const addCardForm = (card: ICardForm): void => {
+    const newCard = createCard(card);
 
-    this.setState(({ cardsForm }) => {
-      const newArr = [...cardsForm];
+    setCardsForm((prevCardsForm) => {
+      const newArr = [...prevCardsForm];
       newArr.push(newCard);
 
-      return {
-        cardsForm: newArr,
-      };
+      return newArr;
     });
   };
 
-  createCard(cardData: ICardForm) {
+  const createCard = (cardData: ICardForm) => {
     const { userName, gender, birthday, country, isConsentPersonalData, feedbackText, imageSrc } = cardData;
 
     return {
@@ -42,19 +32,17 @@ export default class FormPage extends Component<FormPageProps, FormPageState> {
       isConsentPersonalData,
       feedbackText,
       imageSrc,
-      id: this.cardId++,
+      id: cardId++,
     };
-  }
-
-  render() {
-    const { cardsForm } = this.state;
-
-    return (
-      <div className='form-page container' role='form-page'>
-        <h2 className='page__title'>Form page</h2>
-        <Form addCardForm={this.addCardForm} />
-        <CardFormList cardsForm={cardsForm} />
-      </div>
-    );
-  }
-}
+  };
+
+  return (
+    <div className='form-page container' role='form-page'>
+      <h2 className='page__title'>Form page</h2>
+      <Form addCardForm={addCardForm} />
+      <CardFormList cardsForm={cardsForm} />
+    </div>
+  );
+};
+
+export default FormPage;
diff --git a/src/pages/homePage/homePage.tsx b/src/pages/homePage/homePage.tsx
index dc3d00b..00c514e 100644
--- a/src/pages/homePage/homePage.tsx
+++ b/src/pages/homePage/homePage.tsx
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FC } from 'react';
 
 import './homePage.scss';
 import { dataGoods } from '../../data/data';
@@ -6,19 +6,16 @@ import { IProduct } from '../../components/types';
 import CardList from '../../components/cards-list';
 import SearchPanel from '../../components/search-panel';
 
-type HomePageProps = {};
-type HomePageState = {};
+const HomePage: FC = () => {
+  const products: IProduct[] = dataGoods.products.slice(0, 8); //get only 8 products
 
-export default class HomePage extends Component<HomePageProps, HomePageState> {
-  render() {
-    const products: IProduct[] = dataGoods.products;
+  return (
+    <div className='home-page container'>
+      <h2 className='page__title'>HomePage</h2>
+      <SearchPanel />
+      <CardList products={products} />
+    </div>
+  );
+};
 
-    return (
-      <div className='home-page container '>
-        <h2 className='page__title'>HomePage</h2>
-        <SearchPanel />
-        <CardList products={products} />
-      </div>
-    );
-  }
-}
+export default HomePage;