diff --git a/package-lock.json b/package-lock.json
index e99a306fb..901eb7699 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.2",
         "@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.2",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-2.1.2.tgz",
+      "integrity": "sha512-gUXFdqqOfYzF9R3RSx2pCa5GLdOkxB9bFbF+dpUpzucdgGAANqOGdqpmNnMj+e3xA9YHraUWq3xo9cwe5vD9pQ==",
       "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..87c1ad065 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.2",
     "@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..76be10a82 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -15,58 +15,97 @@ export const goods = [
   'Garlic',
 ];
 
-export const App: React.FC = () => (
-  <main className="section container">
-    <h1 className="title">No goods selected</h1>
+type State = {
+  selectedGood: string;
+};
 
-    <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<{}, State> {
+  state = {
+    selectedGood: 'Jam',
+  };
 
-    <table className="table">
-      <tbody>
-        <tr data-cy="Good">
-          <td>
-            <button data-cy="AddButton" type="button" className="button">
-              +
-            </button>
-          </td>
+  selectGood = (goodName: string) => {
+    this.setState({ selectedGood: goodName });
+  };
 
-          <td data-cy="GoodTitle" className="is-vcentered">
-            Dumplings
-          </td>
-        </tr>
+  clearSelection = () => {
+    this.setState({ selectedGood: '' });
+  };
 
-        <tr data-cy="Good" className="has-background-success-light">
-          <td>
+  handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    const button = event.currentTarget;
+    const goodName = button.dataset.goodName;
+
+    if (goodName) {
+      this.selectGood(goodName);
+    }
+  };
+
+  render() {
+    const isSelected = this.state.selectedGood !== '';
+
+    return (
+      <main className="section container">
+        {!isSelected ? (
+          <h1 className="title">No goods selected</h1>
+        ) : (
+          <h1 className="title is-flex is-align-items-center">
+            {this.state.selectedGood} is selected
+            {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
             <button
-              data-cy="RemoveButton"
+              data-cy="ClearButton"
               type="button"
-              className="button is-info"
-            >
-              -
-            </button>
-          </td>
+              className="delete ml-3"
+              onClick={this.clearSelection}
+            />
+          </h1>
+        )}
+
+        <table className="table">
+          <tbody>
+            {goods.map(good => {
+              const rowClass =
+                good === this.state.selectedGood
+                  ? 'has-background-success-light'
+                  : '';
 
-          <td data-cy="GoodTitle" className="is-vcentered">
-            Jam
-          </td>
-        </tr>
+              const isCurrentGoodSelected = good === this.state.selectedGood;
+              // const isAnyGoodSelected = isSelected;
 
-        <tr data-cy="Good">
-          <td>
-            <button data-cy="AddButton" type="button" className="button">
-              +
-            </button>
-          </td>
+              return (
+                <tr data-cy="Good" key={good} className={rowClass}>
+                  <td>
+                    {isCurrentGoodSelected ? (
+                      <button
+                        data-cy="RemoveButton"
+                        type="button"
+                        className="button is-info"
+                        onClick={this.clearSelection}
+                      >
+                        -
+                      </button>
+                    ) : (
+                      <button
+                        data-cy="AddButton"
+                        type="button"
+                        className="button"
+                        data-good-name={good}
+                        onClick={this.handleClick}
+                      >
+                        +
+                      </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>
+    );
+  }
+}