diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index 6ffb9d4..31519f9 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -60,11 +60,6 @@ class App extends Component {
   }
 
   componentDidMount() {
-    // *******************************************************
-    // need to impletement setState for filteredData to same value as data
-    // this.setState({ data, filteredData: data });
-    // *******************************************************
-
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
     chrome.runtime.onConnect.addListener((portFromExtension) => {
@@ -79,11 +74,14 @@ class App extends Component {
         this.setState((state) => ({
           data: [...state.data, newData],
           filteredData: [...state.data, newData],
+          isPlayingIndex: state.data.length - 1,
         }));
       });
     });
   }
 
+
+
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
     if (this.state.isPlayingIndex > this.state.data.length - 1) {
@@ -192,6 +190,20 @@ class App extends Component {
       type: 'TIMETRAVEL',
       direction: 'forward',
     });
+
+    // if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
+
+    const { data, isPlayingIndex } = this.state;
+    const { id, action, state } = data[isPlayingIndex + 1];
+    this.setState(prev => ({
+      ...prev,
+      id,
+      action,
+      state,
+      isPlayingIndex: isPlayingIndex + 1,
+    }));
+
+    console.log('isPlayingIndex', this.state.isPlayingIndex);
   }
 
   // function to travel to the PAST
@@ -201,6 +213,21 @@ class App extends Component {
       type: 'TIMETRAVEL',
       direction: 'backwards',
     });
+
+    const { data, isPlayingIndex } = this.state;
+
+    if (isPlayingIndex === 0) { 
+      console.log('is playingIdx in toThePast is 0');
+    } else {
+      const { id, action, state } = data[isPlayingIndex - 1];
+      this.setState(prev => ({
+        ...prev,
+        id,
+        action,
+        state,
+        isPlayingIndex: isPlayingIndex - 1,
+      }));
+    }
   }
 
   render() {