diff --git a/minimal-app/src/app.js b/minimal-app/src/app.js
index e875b5f1efaa2f9d67b50f129e9b056491157407..ff47ccc460632a5c525008d08d4020d27e6f288d 100644
--- a/minimal-app/src/app.js
+++ b/minimal-app/src/app.js
@@ -1,12 +1,18 @@
 import { Routes, Route } from 'react-router-dom';
-
-import { Counter } from './features/counter/counter.js';
+import React from 'react';
+import Result from './features/counter/Result';
+import Counter from './features/counter/counter.js';
 
 export function App() {
   const page =
     <>
-      <Counter label={'Taps'} />
+      <div >
+        <h1>Candy Shop</h1>
+        <Counter />
+        <Result />
+      </div>
     </>;
+
   return (
     <Routes>
       <Route path={'/*'} element={page} />
diff --git a/minimal-app/src/app/store.js b/minimal-app/src/app/store.js
index ff522e191c94a67fbc4f4aa5164fcd9fb6511ca9..7bd10e0df7ff5b3337bdf67682ee8ecba56f432b 100644
--- a/minimal-app/src/app/store.js
+++ b/minimal-app/src/app/store.js
@@ -1,9 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
+import counterReducer from '../features/counter/counterSlice.js'; // Import the slice
 
-import counterSlice from '../features/counter/counterSlice.js';
-
-export const store = configureStore({
+const store = configureStore({
   reducer: {
-    [counterSlice.name]: counterSlice.reducer,
+    counter: counterReducer,
   },
 });
+
+export default store;
diff --git a/minimal-app/src/features/counter/Result.js b/minimal-app/src/features/counter/Result.js
new file mode 100644
index 0000000000000000000000000000000000000000..779ff17d73305e367519a45c575bf3d67c9b5028
--- /dev/null
+++ b/minimal-app/src/features/counter/Result.js
@@ -0,0 +1,25 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { selectResult, selectCandies } from './counterSlice';
+
+const Result = () => {
+  const result = useSelector(selectResult);
+  const candies = useSelector(selectCandies);
+
+  return (
+    <div>
+      <h2>Result</h2>
+      <p>Total Tastiness: {result.totalTastiness}</p>
+      <h3>Candy Quantities</h3>
+      <ul>
+        {result.quantities.map((quantity, index) =>
+          <li key={index}>
+            {candies[index]?.name || `Candy ${index + 1}`}: {quantity}
+          </li>,
+        )}
+      </ul>
+    </div>
+  );
+};
+
+export default Result;
diff --git a/minimal-app/src/features/counter/counter.js b/minimal-app/src/features/counter/counter.js
index a09d3e487b6e5f738d16b32c4babedebd3181db4..733521e4509cf92ec0415395406bea1680c49cb6 100644
--- a/minimal-app/src/features/counter/counter.js
+++ b/minimal-app/src/features/counter/counter.js
@@ -1,36 +1,92 @@
-import { useSelector, useDispatch } from 'react-redux';
-import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { setCandies, setMaxWeight, knapsack } from './counterSlice';
+import './counter.module.css';
 
-import classNames from 'classnames';
-import styles from './counter.module.css';
+const Counter = () => {
+  const dispatch = useDispatch();
+  const [candyCount, setCandyCount] = useState(0);
+  const [candies, setCandiesState] = useState([]);
+  const [maxWeight, setMaxWeightState] = useState(0);
 
-import {
-  selectValue,
-  setValue,
-} from './counterSlice.js';
+  const handleCandyCountChange = (e) => {
+    const count = parseInt(e.target.value, 10);
+    setCandyCount(count);
+    setCandiesState(Array(count).fill({ name: '',
+      tastiness: 0,
+      weight: 0 }));
+  };
 
-export function Counter(props) {
-  const value = useSelector(selectValue);
-  const dispatch = useDispatch();
+  const handleCandyChange = (index, field, value) => {
+    const updatedCandies = candies.map((candy, i) =>
+      i === index ? { ...candy,
+        [field]: value } : candy,
+    );
+    setCandiesState(updatedCandies);
+  };
 
-  const classes = classNames({
-    [styles.red]: value % 2 === 0,
-    [styles.blue]: value % 2 === 1,
-  });
-  const onClick = () => dispatch(setValue({
-    value: value + 1,
-  }));
+  const handleSubmit = () => {
+    dispatch(setCandies(candies));
+    dispatch(setMaxWeight(maxWeight));
+    dispatch(knapsack());
+  };
 
   return (
-    <label>
-      {props.label}:&nbsp;
-      <button className={classes} onClick={onClick}>
-        {value}
-      </button>
-    </label>
+    <div>
+      <h2 classname="setUpStore">Set Up Candy Store</h2>
+      <label classname="numberOfCandies">
+        Number of candies:
+        <input
+          type="number"
+          value={candyCount}
+          onChange={(e) => handleCandyCountChange(e)}
+        />
+      </label>
+      {candies.map((candy, index) =>
+        <div key={index}>
+          <label classname="candieName">
+            Name:
+            <input
+              type="text"
+              value={candy.name}
+              onChange={(e) =>
+                handleCandyChange(index, 'name', e.target.value)
+              }
+            />
+          </label>
+          <label classname="candieTastiness">
+            Tastiness:
+            <input
+              type="number"
+              value={candy.tastiness}
+              onChange={(e) =>
+                handleCandyChange(index, 'tastiness', parseInt(e.target.value, 10))
+              }
+            />
+          </label>
+          <label classname="candieWeight">
+            Weight:
+            <input
+              type="number"
+              value={candy.weight}
+              onChange={(e) =>
+                handleCandyChange(index, 'weight', parseInt(e.target.value, 10))
+              }
+            />
+          </label>
+        </div>,
+      )}
+      <label>
+        Max Basket Weight:
+        <input
+          type="number"
+          value={maxWeight}
+          onChange={(e) => setMaxWeightState(parseInt(e.target.value, 10))}
+        />
+      </label>
+      <button onClick={handleSubmit}>Calculate Knapsack</button>
+    </div>
   );
-}
-
-Counter.propTypes = {
-  label: PropTypes.string.isRequired,
 };
+
+export default Counter;