diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index 980d239..4d23775 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -37,16 +37,17 @@ class App extends Component {
 
     this.state = {
       data: [],
-      isPlaying: true,
-      isRecording: true,
+      isPlaying: false,
+      isRecording: false,
     };
-
     this.port = null;
+    this.isPlayingIndex = 0;
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
     this.toThePast = this.toThePast.bind(this);
     this.setIsPlaying = this.setIsPlaying.bind(this);
     this.setIsRecording = this.setIsRecording.bind(this);
+    this.actionInPlay = this.actionInPlay.bind(this);
   }
 
   componentDidMount() {
@@ -70,28 +71,53 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
+    if (this.isPlayingIndex === this.state.data.length - 1) {
+      this.isPlayingIndex = 0;
+    }
+
     let { isPlaying } = this.state;
     isPlaying = !isPlaying;
     this.setState({ isPlaying });
+
+    if (isPlaying) {
+      this.actionInPlay();
+    }
   }
 
   // functionality to change 'record' button to 'pause'
   setIsRecording() {
+    console.log('setIsRecording:', this.state.isRecording)
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
   }
 
+  actionInPlay() {
+    this.isPlayingIndex++;
+
+    const { id, action, state } = this.state.data[this.isPlayingIndex];
+    setTimeout(() => {
+      this.setState((prev, props) => {
+        return { ...prev, id, action, state }
+      });
+      if (this.state.isPlaying && this.isPlayingIndex < this.state.data.length - 1) {
+        this.actionInPlay();
+      } else {
+        this.setState({ isPlaying: false });
+      }
+    }, 1000);
+  }
+
   // function to select an event from the data
   // and set state with all required info
   addActionToView(e) {
     const { data } = this.state;
     const actionToView = data.filter(action => e.target.id === String(action.id));
     const {
-      action, id, payload, state,
+      action, id, state,
     } = actionToView[0];
     this.setState({
-      action, id, payload, state,
+      action, id, state,
     });
   }
 
@@ -118,7 +144,6 @@ class App extends Component {
     const {
       action,
       id,
-      payload,
       state,
       data,
       setIsPlaying,
@@ -134,7 +159,7 @@ class App extends Component {
           left={
             (
               <Events
-                data={data}
+                data={data} 
                 addAction={this.addActionToView}
                 toTheFuture={this.toTheFuture}
                 toThePast={this.toThePast}
@@ -142,6 +167,7 @@ class App extends Component {
                 isRecording={isRecording}
                 setIsPlaying={this.setIsPlaying}
                 setIsRecording={this.setIsRecording}
+                activeEventId={id}
               />
             )}
           right={
@@ -149,7 +175,6 @@ class App extends Component {
               <Details
                 action={action}
                 id={id}
-                payload={payload}
                 actionState={state}
               />
             )}
diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx
index 39da857..3ea8355 100644
--- a/src/app/components/EventCards/EventCreator.jsx
+++ b/src/app/components/EventCards/EventCreator.jsx
@@ -4,11 +4,14 @@ import { EventCard, EventTimeDiv } from '../../styles/Events.jsx';
 
 export default function EventCreator(props) {
   // renders individual action
-  const { action, id, addAction, actionTime } = props;
+  const {
+    action, id, addAction, actionTime, selectedEvent,
+  } = props;
   return (
-    <EventCard id={id} onClick={addAction}>
-      &#x2630; {action}
-      <EventTimeDiv>{actionTime || '00:00:01'}</EventTimeDiv>
+    <EventCard id={id} onClick={addAction} selectedEvent={selectedEvent}>
+      &#x2630;
+      {action}
+      <EventTimeDiv selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
     </EventCard>
 
   );
diff --git a/src/app/components/EventCards/EventsDisplay.jsx b/src/app/components/EventCards/EventsDisplay.jsx
index 0e7e180..71e0a1c 100644
--- a/src/app/components/EventCards/EventsDisplay.jsx
+++ b/src/app/components/EventCards/EventsDisplay.jsx
@@ -7,17 +7,18 @@ import EventCreator from './EventCreator.jsx';
 import { EventsWrapper } from '../../styles/Events.jsx';
 
 export default function Events(props) {
+  const { data, activeEventId } = props;
   return (
     <EventsWrapper>
-      {props.data.map((e, i) => (
+      {data.map((e, i) => (
         <EventCreator
+          selectedEvent={activeEventId === e.id ? 'true' : 'false'}
           action={e.action.type}
           key={i}
           id={e.id}
           addAction={props.addAction}
         />
       ))}
-      {/* time travel doesn't work yet */}
     </EventsWrapper>
   );
 }
diff --git a/src/app/components/EventCards/TimeTravel.jsx b/src/app/components/EventCards/TimeTravel.jsx
index 9980441..6fae855 100644
--- a/src/app/components/EventCards/TimeTravel.jsx
+++ b/src/app/components/EventCards/TimeTravel.jsx
@@ -17,8 +17,8 @@ export default function TimeTavel(props) {
   return (
     <>
       <TimeTravelContainer>
-        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'RECORD' : 'PAUSE'}</EventTimeDiv>
-        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'PLAY' : 'STOP' }</EventTimeDiv>
+        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</EventTimeDiv>
+        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'STOP' : 'PLAY' }</EventTimeDiv>
       </TimeTravelContainer>
       <TimeTravelContainer>
         <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>
diff --git a/src/app/container/Events.jsx b/src/app/container/Events.jsx
index d5cdeeb..391b1d6 100644
--- a/src/app/container/Events.jsx
+++ b/src/app/container/Events.jsx
@@ -13,6 +13,7 @@ class Events extends Component {
 
   render() {
     const {
+      activeEventId,
       addAction,
       data,
       toTheFuture,
@@ -21,6 +22,7 @@ class Events extends Component {
       isPlaying,
       setIsRecording,
       isRecording,
+      isPlayingIndex,
     } = this.props;
     return (
       <>
@@ -28,6 +30,7 @@ class Events extends Component {
         <EventsDisplay
           data={data}
           addAction={addAction}
+          activeEventId={activeEventId}
         />
         <TimeTravel
           toTheFuture={toTheFuture}
diff --git a/src/app/index.html b/src/app/index.html
index 1ea0a76..24eadc2 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -2,7 +2,7 @@
 <html>
 
 <head>
-  <title>styleish</title>
+  <title>React Rewind</title>
 </head>
 
 <body>
diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx
index 9ed2e31..123433a 100644
--- a/src/app/styles/Events.jsx
+++ b/src/app/styles/Events.jsx
@@ -10,6 +10,7 @@ export const EventsWrapper = styled.div`
 
 // events actions bar
 export const EventCard = styled.div`
+  background-color: ${props => props.selectedEvent === 'false' ? 'none' : "#484C54"};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -21,16 +22,18 @@ export const EventCard = styled.div`
   cursor: pointer;
 
   &:hover {
-    color: #4F5A65;
+    color: ${props => props.selectedEvent === 'false' ? '#4F5A65' : "white"};
     border-bottom: 1px solid #4F5A65;
   }
 `;
 
+
+
 export const EventTimeDiv = styled.div`
   width: 25%;
   text-align: center;
-  background-color: #484C54;
-  color: #BCBCBB;
+  background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"};
+  color: ${props => props.selectedEvent === 'false' ? 'white' : "white"};
   border-radius: 5px;
 `;
 
diff --git a/src/app/styles/Nav.jsx b/src/app/styles/Nav.jsx
index 1450883..646c422 100644
--- a/src/app/styles/Nav.jsx
+++ b/src/app/styles/Nav.jsx
@@ -41,7 +41,7 @@ export const Buttons = styled.div`
     &.active {
     color: white;
     background-color: #4F5A65;
-    /* border-bottom: 3px solid white; */
+    /* border-bottom: 3px solid hotpink; */
     }
   }