diff --git a/package-lock.json b/package-lock.json
index 0bf869b4a..cdbf9328f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3330,9 +3330,9 @@
       }
     },
     "@mate-academy/scripts": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.3.tgz",
-      "integrity": "sha512-clsxVN4sQap5pgFev+WOEi9GVSYU5/C6puBgwGFmwePMTK+ssFFw+tdE5agrKkqmRsEgT38+wRbzITh+rZs1Yw==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.2.8.tgz",
+      "integrity": "sha512-MqvuqrG8UUzQkRc375ZUIOd23nJ0BYqae/Nn5t01aDutSqZnz1ye65W4sLHiSuQJGIuHRO0CEyJxAO72wX1efw==",
       "dev": true,
       "requires": {
         "@octokit/rest": "^17.11.2",
@@ -3381,16 +3381,6 @@
             "universalify": "^2.0.0"
           }
         },
-        "open": {
-          "version": "7.4.2",
-          "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-          "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
-          "dev": true,
-          "requires": {
-            "is-docker": "^2.0.0",
-            "is-wsl": "^2.1.1"
-          }
-        },
         "universalify": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -3491,12 +3481,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         }
       }
@@ -3527,12 +3517,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         },
         "is-plain-object": {
@@ -3561,12 +3551,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         },
         "universal-user-agent": {
@@ -3578,27 +3568,27 @@
       }
     },
     "@octokit/openapi-types": {
-      "version": "12.10.0",
-      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.10.0.tgz",
-      "integrity": "sha512-xsgA7LKuQ/2QReMZQXNlBP68ferPlqw66Jmx5/J399Cn5EgIDaHXou6Rgn1GkpDNjkPji67fTlC2rz6ABaVFKw==",
+      "version": "12.11.0",
+      "resolved": "https://registry.npmjs.org/@octokit/openapi-types/-/openapi-types-12.11.0.tgz",
+      "integrity": "sha512-VsXyi8peyRq9PqIz/tpqiL2w3w80OgVMwBHltTml3LmVvXiphgeqmY9mvBw9Wu7e0QWk/fqD37ux8yP5uVekyQ==",
       "dev": true
     },
     "@octokit/plugin-paginate-rest": {
-      "version": "2.21.2",
-      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.2.tgz",
-      "integrity": "sha512-S24H0a6bBVreJtoTaRHT/gnVASbOHVTRMOVIqd9zrJBP3JozsxJB56TDuTUmd1xLI4/rAE2HNmThvVKtIdLLEw==",
+      "version": "2.21.3",
+      "resolved": "https://registry.npmjs.org/@octokit/plugin-paginate-rest/-/plugin-paginate-rest-2.21.3.tgz",
+      "integrity": "sha512-aCZTEf0y2h3OLbrgKkrfFdjRL6eSOo8komneVQJnYecAxIej7Bafor2xhuDJOIFau4pk0i/P28/XgtbyPF0ZHw==",
       "dev": true,
       "requires": {
-        "@octokit/types": "^6.39.0"
+        "@octokit/types": "^6.40.0"
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         }
       }
@@ -3645,12 +3635,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         },
         "is-plain-object": {
@@ -3679,12 +3669,12 @@
       },
       "dependencies": {
         "@octokit/types": {
-          "version": "6.40.0",
-          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.40.0.tgz",
-          "integrity": "sha512-MFZOU5r8SwgJWDMhrLUSvyJPtVsqA6VnbVI3TNbsmw+Jnvrktzvq2fYES/6RiJA/5Ykdwq4mJmtlYUfW7CGjmw==",
+          "version": "6.41.0",
+          "resolved": "https://registry.npmjs.org/@octokit/types/-/types-6.41.0.tgz",
+          "integrity": "sha512-eJ2jbzjdijiL3B4PrSQaSjuF2sPEQPVCPzBvTHJD9Nz+9dw2SGH4K4xeQJ77YfTq5bRQ+bD8wT11JbeDPmxmGg==",
           "dev": true,
           "requires": {
-            "@octokit/openapi-types": "^12.10.0"
+            "@octokit/openapi-types": "^12.11.0"
           }
         }
       }
@@ -3796,9 +3786,9 @@
       }
     },
     "@sinonjs/text-encoding": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.1.tgz",
-      "integrity": "sha512-+iTbntw2IZPb/anVDbypzfQa+ay64MW0Zo8aJ8gZPWMMK6/OubMVb6lUPMagqjOPnmtauXnFCACVl3O7ogjeqQ==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz",
+      "integrity": "sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==",
       "dev": true
     },
     "@stylelint/postcss-css-in-js": {
@@ -5658,9 +5648,9 @@
       }
     },
     "before-after-hook": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.2.tgz",
-      "integrity": "sha512-3pZEU3NT5BFUo/AD5ERPWOgQOCZITni6iavr5AUw5AUwQjMlI0kzu5btnyD39AF0gUEsDPwJT+oY1ORBJijPjQ==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-2.2.3.tgz",
+      "integrity": "sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==",
       "dev": true
     },
     "bfj": {
@@ -14174,9 +14164,9 @@
       "integrity": "sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw=="
     },
     "macos-release": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.0.tgz",
-      "integrity": "sha512-EIgv+QZ9r+814gjJj0Bt5vSLJLzswGmSUbUpbi9AIr/fsN2IWFBl2NucV9PAiek+U1STK468tEkxmVYUtuAN3g==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz",
+      "integrity": "sha512-DXqXhEM7gW59OjZO8NIjBCz9AQ1BEMrfiOAl4AYByHCtVHRF4KoGNO8mqQeM8lRCtQe/UnJ4imO/d2HdkKsd+A==",
       "dev": true
     },
     "magic-string": {
@@ -15041,15 +15031,6 @@
         "path-to-regexp": "^1.7.0"
       },
       "dependencies": {
-        "@sinonjs/fake-timers": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
-          "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
-          "dev": true,
-          "requires": {
-            "@sinonjs/commons": "^1.7.0"
-          }
-        },
         "isarray": {
           "version": "0.0.1",
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
@@ -15084,9 +15065,9 @@
       }
     },
     "node-fetch": {
-      "version": "2.6.7",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
       "dev": true,
       "requires": {
         "whatwg-url": "^5.0.0"
@@ -20397,15 +20378,6 @@
         "supports-color": "^7.1.0"
       },
       "dependencies": {
-        "@sinonjs/fake-timers": {
-          "version": "6.0.1",
-          "resolved": "https://registry.npmjs.org/@sinonjs/fake-timers/-/fake-timers-6.0.1.tgz",
-          "integrity": "sha512-MZPUxrmFubI36XS1DI3qmI0YdN1gks62JtFZvxR67ljjSNCeK6U08Zx4msEWOXuofgqUt6zPHSi1H9fbjR/NRA==",
-          "dev": true,
-          "requires": {
-            "@sinonjs/commons": "^1.7.0"
-          }
-        },
         "has-flag": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -23196,47 +23168,6 @@
       "dev": true,
       "requires": {
         "execa": "^1.0.0"
-      },
-      "dependencies": {
-        "execa": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
-          "integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^6.0.0",
-            "get-stream": "^4.0.0",
-            "is-stream": "^1.1.0",
-            "npm-run-path": "^2.0.0",
-            "p-finally": "^1.0.0",
-            "signal-exit": "^3.0.0",
-            "strip-eof": "^1.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
-          "integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "is-stream": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-          "integrity": "sha512-uQPm8kcs47jx38atAcWTVxyltQYoPT68y9aWYdV6yWXSyW8mzSat0TL6CiWdZeCdF3KrAvpVtnHbTv4RN+rqdQ==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
-          "integrity": "sha512-lJxZYlT4DW/bRUtFh1MQIWqmLwQfAxnqWG4HhEdjMlkrJYnJn0Jrr2u3mgxqaWsdiBc76TYkTG/mhrnYTuzfHw==",
-          "dev": true,
-          "requires": {
-            "path-key": "^2.0.0"
-          }
-        }
       }
     },
     "word-wrap": {
diff --git a/src/App.tsx b/src/App.tsx
index 34be670b0..31fd8ab10 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,23 @@
 import './App.scss';
+import { useState } from 'react';
 import { MoviesList } from './components/MoviesList';
 import { NewMovie } from './components/NewMovie';
 import moviesFromServer from './api/movies.json';
+import { Movie } from './types/Movie';
 
 export const App = () => {
+  const [movies, setMovies] = useState(moviesFromServer);
+  const onAdd = (newMovie: Movie) => {
+    setMovies([...movies, newMovie]);
+  };
+
   return (
     <div className="page">
       <div className="page-content">
-        <MoviesList movies={moviesFromServer} />
+        <MoviesList movies={movies} />
       </div>
       <div className="sidebar">
-        <NewMovie /* onAdd={(movie) => {}} */ />
+        <NewMovie onAdd={onAdd} />
       </div>
     </div>
   );
diff --git a/src/components/NewMovie/NewMovie.tsx b/src/components/NewMovie/NewMovie.tsx
index 34f22fb0a..0c48ce1a4 100644
--- a/src/components/NewMovie/NewMovie.tsx
+++ b/src/components/NewMovie/NewMovie.tsx
@@ -1,45 +1,103 @@
 import { useState } from 'react';
 import { TextField } from '../TextField';
+import { Movie } from '../../types/Movie';
 
-export const NewMovie = () => {
-  // Increase the count after successful form submission
-  // to reset touched status of all the `Field`s
-  const [count] = useState(0);
+type MovieProps = {
+  onAdd: (movie: Movie) => void;
+};
+
+export const NewMovie = ({ onAdd }: MovieProps) => {
+  const [count, setCount] = useState(0);
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [imgUrl, setImgUrl] = useState('');
+  const [imdbUrl, setImdbUrl] = useState('');
+  const [imdbId, setImdbId] = useState('');
+
+  const isDisabled = title.trim().length === 0
+    || imgUrl.trim().length === 0
+    || imdbUrl.trim().length === 0
+    || imdbId.trim().length === 0;
+
+  const handleSubmit: React.FormEventHandler = (event) => {
+    event.preventDefault();
+
+    const newMovie = {
+      title: title.trim(),
+      description: description.trim(),
+      imgUrl: imgUrl.trim(),
+      imdbUrl: imdbUrl.trim(),
+      imdbId: imdbId.trim(),
+    };
+
+    if (newMovie.title.trim().length === 0
+      || newMovie.imgUrl.trim().length === 0
+      || newMovie.imdbUrl.trim().length === 0
+      || newMovie.imdbId.trim().length === 0
+    ) {
+      setTitle(newMovie.title);
+      setDescription(newMovie.description);
+      setImgUrl(newMovie.imgUrl);
+      setImdbUrl(newMovie.imdbUrl);
+      setImdbId(newMovie.imdbId);
+
+      return;
+    }
+
+    onAdd(newMovie);
+    setCount(count + 1);
+    setTitle('');
+    setDescription('');
+    setImgUrl('');
+    setImdbUrl('');
+    setImdbId('');
+  };
 
   return (
-    <form className="NewMovie" key={count}>
+    <form
+      className="NewMovie"
+      key={count}
+      onSubmit={handleSubmit}
+    >
       <h2 className="title">Add a movie</h2>
 
       <TextField
         name="title"
         label="Title"
-        value=""
-        onChange={() => {}}
+        value={title}
+        onChange={setTitle}
         required
       />
 
       <TextField
         name="description"
         label="Description"
-        value=""
+        value={description}
+        onChange={setDescription}
       />
 
       <TextField
         name="imgUrl"
         label="Image URL"
-        value=""
+        value={imgUrl}
+        onChange={setImgUrl}
+        required
       />
 
       <TextField
         name="imdbUrl"
         label="Imdb URL"
-        value=""
+        value={imdbUrl}
+        onChange={setImdbUrl}
+        required
       />
 
       <TextField
         name="imdbId"
         label="Imdb ID"
-        value=""
+        value={imdbId}
+        onChange={setImdbId}
+        required
       />
 
       <div className="field is-grouped">
@@ -48,6 +106,7 @@ export const NewMovie = () => {
             type="submit"
             data-cy="submit-button"
             className="button is-link"
+            disabled={isDisabled}
           >
             Add
           </button>