diff --git a/package-lock.json b/package-lock.json
index e99a306fb..cbac0f588 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
       },
       "devDependencies": {
         "@cypress/react18": "^2.0.1",
-        "@mate-academy/scripts": "^1.8.5",
+        "@mate-academy/scripts": "^2.1.3",
         "@mate-academy/students-ts-config": "*",
         "@mate-academy/stylelint-config": "*",
         "@types/node": "^20.14.10",
@@ -1170,10 +1170,11 @@
       }
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz",
-      "integrity": "sha512-mHRY2FkuoYCf5U0ahIukkaRo5LSZsxrTSgMJheFoyf3VXsTvfM9OfWcZIDIDB521kdPrScHHnRp+JRNjCfUO5A==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.3.tgz",
+      "integrity": "sha512-a07wHTj/1QUK2Aac5zHad+sGw4rIvcNl5lJmJpAD7OxeSbnCdyI6RXUHwXhjF5MaVo9YHrJ0xVahyERS2IIyBQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
diff --git a/package.json b/package.json
index db76807cc..aba201d75 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "@cypress/react18": "^2.0.1",
-    "@mate-academy/scripts": "^1.8.5",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/students-ts-config": "*",
     "@mate-academy/stylelint-config": "*",
     "@types/node": "^20.14.10",
diff --git a/src/App.tsx b/src/App.tsx
index 168716b91..abd084b19 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,12 @@ import React from 'react';
 import 'bulma/css/bulma.css';
 import './App.scss';
 
+type State = {
+  selectedGood: string;
+};
+
+type Props = {};
+
 export const goods = [
   'Dumplings',
   'Carrot',
@@ -15,58 +21,87 @@ export const goods = [
   'Garlic',
 ];
 
-export const App: React.FC = () => (
-  <main className="section container">
-    <h1 className="title">No goods selected</h1>
-
-    <h1 className="title is-flex is-align-items-center">
-      Jam is selected
-      {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-      <button data-cy="ClearButton" type="button" className="delete ml-3" />
-    </h1>
+export class App extends React.Component<Props, State> {
+  state: State = {
+    selectedGood: 'Jam',
+  };
 
-    <table className="table">
-      <tbody>
-        <tr data-cy="Good">
-          <td>
-            <button data-cy="AddButton" type="button" className="button">
-              +
-            </button>
-          </td>
+  handelClick = (good: string) => {
+    if (good === this.state.selectedGood) {
+      this.clearSelection();
+    } else {
+      this.selectGood(good);
+    }
+  }
 
-          <td data-cy="GoodTitle" className="is-vcentered">
-            Dumplings
-          </td>
-        </tr>
+  clearSelection = () => {
+    this.setState({ selectedGood: '' });
+  };
 
-        <tr data-cy="Good" className="has-background-success-light">
-          <td>
-            <button
-              data-cy="RemoveButton"
-              type="button"
-              className="button is-info"
-            >
-              -
-            </button>
-          </td>
+  selectGood = (good: string) => {
+    this.setState({ selectedGood: good });
+  };
 
-          <td data-cy="GoodTitle" className="is-vcentered">
-            Jam
-          </td>
-        </tr>
+  render() {
+    return (
+      <main className="section container">
+        <h1 className="title is-flex is-align-items-center">
+          {this.state.selectedGood !== '' ? (
+            <>
+              {this.state.selectedGood} is selected
+              <button
+                data-cy="ClearButton"
+                type="button"
+                className="delete ml-3"
+                onClick={this.clearSelection}
+              />
+            </>
+          ) : (
+            'No goods selected'
+          )}
+        </h1>
 
-        <tr data-cy="Good">
-          <td>
-            <button data-cy="AddButton" type="button" className="button">
-              +
-            </button>
-          </td>
+        <table className="table">
+          <tbody>
+            {goods.map(good => {
+              return (
+                <tr
+                  key={good}
+                  data-cy="Good"
+                  className={
+                    good === this.state.selectedGood
+                      ? 'has-background-success-light'
+                      : ''
+                  }
+                >
+                  <td>
+                    <button
+                      data-cy={
+                        good === this.state.selectedGood
+                          ? 'RemoveButton'
+                          : 'AddButton'
+                      }
+                      type="button"
+                      className={
+                        good === this.state.selectedGood
+                          ? 'button is-info'
+                          : 'button'
+                      }
+                      onClick={() => this.handelClick(good)}
+                    >
+                      {good === this.state.selectedGood ? '-' : '+'}
+                    </button>
+                  </td>
 
-          <td data-cy="GoodTitle" className="is-vcentered">
-            Garlic
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </main>
-);
+                  <td data-cy="GoodTitle" className="is-vcentered">
+                    {good}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </main>
+    );
+  }
+}