diff --git a/minimal-app/src/app/store.js b/minimal-app/src/app/store.js
index c9650e098d75f6d4239cd1e92a93fd5295d548c1..6c672233878603802caccfc76d14b93e3e8eb9dc 100644
--- a/minimal-app/src/app/store.js
+++ b/minimal-app/src/app/store.js
@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 import counterSlice from '../features/counter/counterSlice.js';
+import invisibleMazeSlice from '../features/invisibleMaze/invisibleMazeSlice.js';
 
 export const store = configureStore({
   reducer: {
     [counterSlice.name]: counterSlice.reducer,
+    [invisibleMazeSlice.name]: invisibleMazeSlice.reducer,
   },
 });
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.js b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
index 87f75147b2f78ff7d4502b57ef56a164ee3a370f..bb875f73d838e2b10e22231baf3c3d1b39efdfe2 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.js
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.js
@@ -1,11 +1,63 @@
 import React from 'react';
 import styles from './invisibleMaze.module.css';
+import { useSelector, useDispatch } from 'react-redux';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  selectStepOne,
+  selectStepTwo,
+  selectStepThree,
+  selectButtonOne,
+  selectButtonTwo,
+  selectButtonThree,
+  setAllButtons,
+  setButtonOne,
+  setButtonTwo,
+  setButtonThree,
+} from './invisibleMazeSlice.js';
+
 export function InvisibleMaze() {
+  const stepOne = useSelector(selectStepOne);
+  const stepTwo = useSelector(selectStepTwo);
+  const stepThree = useSelector(selectStepThree);
+  const buttonOne = useSelector(selectButtonOne);
+  const buttonTwo = useSelector(selectButtonTwo);
+  const buttonThree = useSelector(selectButtonThree);
+  const dispatch = useDispatch();
 
+
+  const mazeStepOneCorrect = classNames({
+    [styles.panel] : buttonOne === 0,
+    [styles.correct] : buttonOne ===  stepOne,
+  });
+  const onClickPanelOne = () => dispatch(setButtonOne({
+    buttonOne : 1,
+  }));
+  const mazeStepTwoCorrect = classNames({
+    [styles.panel] : buttonTwo === 0,
+    [styles.correct] : buttonTwo ===  stepTwo,
+  });
+  const onClickPanelTwo = () => dispatch(setButtonTwo({
+    buttonTwo : 2,
+  }));
+  const mazeStepThreeCorrect = classNames({
+    [styles.panel] : buttonThree === 0,
+    [styles.correct] : buttonThree ===  stepThree,
+  });
+  const onClickPanelThree = () => dispatch(setButtonThree({
+    buttonThree : 3,
+  }));
+  const resetMaze = () => dispatch(setAllButtons({
+    buttonOne : 0,
+    buttonThree : 0,
+    buttonTwo : 0,
+  }));
+  
   return (
     <main>
         <div className={styles.maze}>
-          <button className={styles.panel}>
+          <button className={mazeStepOneCorrect} onClick={onClickPanelOne}>
           </button>
           <button className={styles.panel}>
           </button>
@@ -15,7 +67,7 @@ export function InvisibleMaze() {
         <div className={styles.maze}>
           <button className={styles.panel}>
           </button>
-          <button className={styles.panel}>
+          <button className={mazeStepTwoCorrect} onClick={onClickPanelTwo}>
           </button>
           <button className={styles.panel}>
           </button>
@@ -25,19 +77,13 @@ export function InvisibleMaze() {
           </button>
           <button className={styles.panel}>
           </button>
-          <button className={styles.panel}>
+          <button className={mazeStepThreeCorrect}onClick={onClickPanelThree}>
           </button>
         </div>
         <div className={styles.controlPanel}>
-          <button className={styles.create}>
-          {"Create Maze"}
-          </button>
-          <button className={styles.reset}>
+          <button className={styles.reset} onClick={resetMaze}>
           {"Reset Maze"}
           </button>
-          <button className={styles.play}>
-          {"Play Maze"}
-          </button>
         </div>
     </main>
   );
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
index e55ae8ef859cb95b194d2763c6515eedfde167e0..a1b4495a56baee0a116f74464a42992b7efe8480 100644
--- a/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
+++ b/minimal-app/src/features/invisibleMaze/invisibleMaze.module.css
@@ -2,18 +2,18 @@
   width: 50%;
   height: 5em;
 }
-.create {
+.correct {
   width: 50%;
   height: 5em;
-  font-weight: bold;
+  background-color: darkgreen;
 }
-.reset {
+.wrong {
   width: 50%;
   height: 5em;
-  font-weight: bold;
+  color: darkred;
 }
-.play {
-  width: 50%;
+.reset {
+  width: 100%;
   height: 5em;
   font-weight: bold;
 }
diff --git a/minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js b/minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js
new file mode 100644
index 0000000000000000000000000000000000000000..0db84f917aeaf3e4971bb163e3f131e5a1486ccb
--- /dev/null
+++ b/minimal-app/src/features/invisibleMaze/invisibleMazeSlice.js
@@ -0,0 +1,68 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const invisibleMazeSlice = createSlice({
+  name: 'invisibleMaze',
+  initialState: {
+    stepOne :1,
+    stepTwo :2,
+    stepThree :3,
+    buttonOne :0,
+    buttonTwo :0,
+    buttonThree : 0,
+  },
+  reducers: {
+    setButtonOne: (invisibleMaze, action) => {
+      const {
+        buttonOne,
+      } = action.payload;
+      invisibleMaze.buttonOne = buttonOne;
+    },
+    setButtonTwo: (invisibleMaze, action) => {
+      const {
+        buttonTwo,
+      } = action.payload;
+      invisibleMaze.buttonTwo = buttonTwo;
+    },
+      setButtonThree: (invisibleMaze, action) => {
+      const {
+        buttonThree,
+      } = action.payload;
+      invisibleMaze.buttonThree = buttonThree;
+    },
+    setAllButtons: (invisibleMaze, action) => {
+      const {
+        buttonThree,buttonOne,buttonTwo,
+      } = action.payload;
+      invisibleMaze.buttonThree = buttonThree;
+      invisibleMaze.buttonTwo = buttonTwo;
+      invisibleMaze.buttonOne = buttonOne;
+    },
+  },
+});
+export default invisibleMazeSlice;
+
+export const {
+  setButtonOne,
+  setButtonTwo,
+  setButtonThree,
+  setAllButtons,
+} = invisibleMazeSlice.actions;
+
+export function selectStepOne(state) {
+  return state.invisibleMaze.stepOne;
+}
+export function selectStepTwo(state) {
+  return state.invisibleMaze.stepTwo;
+}
+export function selectStepThree(state) {
+  return state.invisibleMaze.stepThree;
+}
+export function selectButtonOne(state) {
+  return state.invisibleMaze.buttonOne;
+}
+export function selectButtonTwo(state) {
+  return state.invisibleMaze.buttonTwo;
+}
+export function selectButtonThree(state) {
+  return state.invisibleMaze.buttonThree;
+}
\ No newline at end of file