diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx
index 4d23775..4268d6d 100644
--- a/src/app/components/App.jsx
+++ b/src/app/components/App.jsx
@@ -3,6 +3,7 @@ import { createGlobalStyle } from 'styled-components';
 
 // containers
 import SplitPane from '../container/SplitPane.jsx';
+import TimeSlider from '../container/TimeSlider.jsx';
 
 // left pane = events, right pane = details
 import Events from '../container/Events.jsx';
@@ -30,7 +31,6 @@ const GlobalStyle = createGlobalStyle`
   }
 `;
 
-
 class App extends Component {
   constructor(props) {
     super(props);
@@ -39,15 +39,19 @@ class App extends Component {
       data: [],
       isPlaying: false,
       isRecording: false,
+      isSearching: false,
+      isPlayingIndex: 0,
     };
+
     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);
+    this.handleBarChange = this.handleBarChange.bind(this);
+    this.searchChange = this.searchChange.bind(this);
   }
 
   componentDidMount() {
@@ -71,10 +75,11 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
-    if (this.isPlayingIndex === this.state.data.length - 1) {
-      this.isPlayingIndex = 0;
+    if (this.state.isPlayingIndex === this.state.data.length - 1) {
+      this.state.isPlayingIndex = 0;
     }
 
+    console.log('isplaying')
     let { isPlaying } = this.state;
     isPlaying = !isPlaying;
     this.setState({ isPlaying });
@@ -121,6 +126,25 @@ class App extends Component {
     });
   }
 
+  // filter search bar results
+  // *** NOT FINISHED ***
+  searchChange(e) {
+    const { data } = this.state;
+    console.log(data);
+  }
+
+  // time travel bar change
+  handleBarChange(e) {
+    const { data } = this.state;
+    const { id, action, state } = data[e.target.value];
+
+    this.setState({
+      id,
+      action,
+      state,
+      isPlayingIndex: e.target.value,
+    });
+  }
 
   // function to travel to the FUTURE
   toTheFuture() {
@@ -141,6 +165,7 @@ class App extends Component {
   }
 
   render() {
+    console.log(this.state.isPlayingIndex);
     const {
       action,
       id,
@@ -163,10 +188,6 @@ class App extends Component {
                 addAction={this.addActionToView}
                 toTheFuture={this.toTheFuture}
                 toThePast={this.toThePast}
-                isPlaying={isPlaying}
-                isRecording={isRecording}
-                setIsPlaying={this.setIsPlaying}
-                setIsRecording={this.setIsRecording}
                 activeEventId={id}
               />
             )}
@@ -179,6 +200,17 @@ class App extends Component {
               />
             )}
         />
+        <TimeSlider
+          data={data}
+          toTheFuture={this.toTheFuture}
+          toThePast={this.toThePast}
+          isPlaying={isPlaying}
+          isPlayingIndex={this.state.isPlayingIndex}
+          isRecording={isRecording}
+          setIsPlaying={this.setIsPlaying}
+          setIsRecording={this.setIsRecording}
+          handleBarChange={this.handleBarChange}
+        />
       </>
     );
   }
diff --git a/src/app/components/DetailCards/DetailsNav.jsx b/src/app/components/DetailCards/DetailsNav.jsx
index 4f25a35..69cd774 100644
--- a/src/app/components/DetailCards/DetailsNav.jsx
+++ b/src/app/components/DetailCards/DetailsNav.jsx
@@ -8,15 +8,10 @@ import { Buttons, Button, DetailsNavWrapper, Ul } from '../../styles/Nav.jsx';
 
 export default function RightNav(props) {
   return (
-    //make this nav bar with react router
-    //sync it so each active link displays appropriate div
-    //with info
-
-    //style pages so inputted information is styled correctly
     <>
       <DetailsNavWrapper>
         <Buttons>
-          <NavLink activeClassName='active' to='/actions'>
+          <NavLink activeClassName='active' to='/'>
             <Button>actions</Button>
           </NavLink>
           <NavLink activeClassName='active' to='/effects'>
@@ -28,5 +23,5 @@ export default function RightNav(props) {
         </Buttons>
       </DetailsNavWrapper>
     </>
-  )
+  );
 }
diff --git a/src/app/components/EventCards/EventCreator.jsx b/src/app/components/EventCards/EventCreator.jsx
index 3ea8355..108d2c2 100644
--- a/src/app/components/EventCards/EventCreator.jsx
+++ b/src/app/components/EventCards/EventCreator.jsx
@@ -9,9 +9,8 @@ export default function EventCreator(props) {
   } = props;
   return (
     <EventCard id={id} onClick={addAction} selectedEvent={selectedEvent}>
-      &#x2630;
-      {action}
-      <EventTimeDiv selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
+      &#x2630;{action}
+      <EventTimeDiv id={id} selectedEvent={selectedEvent}>{actionTime || '00:00:01'}</EventTimeDiv>
     </EventCard>
 
   );
diff --git a/src/app/components/EventCards/FilterBar.jsx b/src/app/components/EventCards/FilterBar.jsx
new file mode 100644
index 0000000..347bd7f
--- /dev/null
+++ b/src/app/components/EventCards/FilterBar.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function FilterBar(props) {
+  const {
+    searchChange,
+  } = props;
+
+  return (
+    <input
+      type="text"
+      placeholder="filter"
+      onChange={searchChange}
+    />
+  );
+}
diff --git a/src/app/components/EventCards/TimeTravel.jsx b/src/app/components/EventCards/TimeTravel.jsx
index 6fae855..d044257 100644
--- a/src/app/components/EventCards/TimeTravel.jsx
+++ b/src/app/components/EventCards/TimeTravel.jsx
@@ -1,29 +1,21 @@
 import React from 'react';
 
 // styled component
-import { TimeTravelContainer, EventTimeDiv } from '../../styles/Events.jsx';
+import { PreviousNextWrapper, PrevNextButton } from '../../styles/Events.jsx';
 
 export default function TimeTavel(props) {
   const {
     toTheFuture,
     toThePast,
-    setIsRecording,
-    isRecording,
-    setIsPlaying,
-    isPlaying,
   } = props;
 
 
   return (
     <>
-      <TimeTravelContainer>
-        <EventTimeDiv onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</EventTimeDiv>
-        <EventTimeDiv onClick={setIsPlaying}>{isPlaying ? 'STOP' : 'PLAY' }</EventTimeDiv>
-      </TimeTravelContainer>
-      <TimeTravelContainer>
-        <EventTimeDiv onClick={toThePast}>PREVIOUS</EventTimeDiv>
-        <EventTimeDiv onClick={toTheFuture}>NEXT</EventTimeDiv>
-      </TimeTravelContainer>
+      <PreviousNextWrapper>
+        <PrevNextButton onClick={toThePast}>PREVIOUS</PrevNextButton>
+        <PrevNextButton onClick={toTheFuture}>NEXT</PrevNextButton>
+      </PreviousNextWrapper>
     </>
   );
 }
diff --git a/src/app/container/Details.jsx b/src/app/container/Details.jsx
index 28800bb..b249d76 100644
--- a/src/app/container/Details.jsx
+++ b/src/app/container/Details.jsx
@@ -26,10 +26,10 @@ export default function Details(props) {
     <Router>
       <>
         <DetailsNav />
-
         {/* routing components and rendering them with props */}
         <Route
-          path='/actions'
+          exact
+          path='/'
           render={props => <ActionsDisplay {...props} action={action} />}
         />
         <Route
diff --git a/src/app/container/Events.jsx b/src/app/container/Events.jsx
index 391b1d6..07bda15 100644
--- a/src/app/container/Events.jsx
+++ b/src/app/container/Events.jsx
@@ -18,11 +18,6 @@ class Events extends Component {
       data,
       toTheFuture,
       toThePast,
-      setIsPlaying,
-      isPlaying,
-      setIsRecording,
-      isRecording,
-      isPlayingIndex,
     } = this.props;
     return (
       <>
@@ -35,10 +30,6 @@ class Events extends Component {
         <TimeTravel
           toTheFuture={toTheFuture}
           toThePast={toThePast}
-          setIsRecording={setIsRecording}
-          isRecording={isRecording}
-          setIsPlaying={setIsPlaying}
-          isPlaying={isPlaying}
         />
       </>
     );
diff --git a/src/app/container/TimeSlider.jsx b/src/app/container/TimeSlider.jsx
new file mode 100644
index 0000000..e7924c0
--- /dev/null
+++ b/src/app/container/TimeSlider.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+// styled component
+
+import { TimeTravelContainer, EventTimeDiv } from '../../app/styles/Events.jsx';
+import { SliderWrapper, Button } from '../styles/TimeSlider.jsx'
+
+const TimeSlider = (props) => {
+  const {
+    toTheFuture,
+    toThePast,
+    setIsRecording,
+    isRecording,
+    setIsPlaying,
+    isPlaying,
+    isPlayingIndex,
+    data,
+    handleBarChange,
+  } = props;
+
+  return (
+    <>
+      <SliderWrapper>
+        <Button onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</Button>
+        <Button onClick={setIsPlaying}>{ isPlaying ? <text>||</text> : <text>&#9658;</text> }</Button>
+      <input type="range" min="0" max={data.length - 1} value={isPlayingIndex}
+      onChange={handleBarChange} />
+      </SliderWrapper>
+    </>
+  );
+};
+
+export default TimeSlider;
diff --git a/src/app/data.jsx b/src/app/data.jsx
deleted file mode 100644
index 68e06e3..0000000
--- a/src/app/data.jsx
+++ /dev/null
@@ -1,181 +0,0 @@
-export default [
-  {
-    id: 1234,
-    action: '@@INIT',
-    state: {
-      totalMarkets: 0,
-      totalCards: 0,
-      marketList: [],
-      lastMarketId: 10000,
-      newLocation: ''
-    }
-  },
-  {
-    id: 1235,
-    action: 'SET_NEW_LOCATION',
-    payload: 'nyc',
-    state: {
-      totalMarkets: 0,
-      totalCards: 0,
-      marketList: [],
-      lastMarketId: 10000,
-      newLocation: 'nyc'
-    }
-  },
-  {
-    id: 1236,
-    action: 'ADD_MARKET',
-    payload: 'nyc',
-    state: {
-      totalMarkets: 1,
-      totalCards: 0,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        }
-      ],
-      lastMarketId: 10001,
-      newLocation: ''
-    }
-  },
-  {
-    id: 1237,
-    action: 'SET_NEW_LOCATION',
-    payload: 'la',
-    state: {
-      totalMarkets: 1,
-      totalCards: 0,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        }
-      ],
-      lastMarketId: 10001,
-      newLocation: 'la'
-    }
-  },
-  {
-    id: 1238,
-    action: 'ADD_MARKET',
-    payload: 'la',
-    state: {
-      totalMarkets: 2,
-      totalCards: 0,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        },
-        {
-          location: 'la',
-          cards: 0,
-          marketId: 10002
-        }
-      ],
-      lastMarketId: 10002,
-      newLocation: ''
-    }
-  },
-  {
-    id: 1239,
-    action: 'ADD_CARD',
-    payload: 'marketId: 10002',
-    state: {
-      totalMarkets: 2,
-      totalCards: 1,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        },
-        {
-          location: 'la',
-          cards: 1,
-          marketId: 10002
-        }
-      ],
-      lastMarketId: 10002,
-      newLocation: ''
-    }
-  },
-  {
-    id: 1240,
-    action: 'ADD_CARD',
-    payload: 'marketID: 10002',
-    state: {
-      totalMarkets: 2,
-      totalCards: 2,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        },
-        {
-          location: 'la',
-          cards: 2,
-          marketId: 10002
-        }
-      ],
-      lastMarketId: 10002,
-      newLocation: ''
-    }
-  },
-  {
-    id: 1249,
-    action: 'ADD_CARD',
-    payload: 'marketID: 10003',
-    state: {
-      totalMarkets: 2,
-      totalCards: 2,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        },
-        {
-          location: 'la',
-          cards: 2,
-          marketId: 10002
-        },
-        {
-          location: 'boston',
-          cards: 2,
-          marketId: 10002
-        }
-      ],
-      lastMarketId: 10002,
-      newLocation: ''
-    }
-  },
-  {
-    id: 1241,
-    action: 'DELETE_CARD',
-    payload: 'marketID: 10002',
-    state: {
-      totalMarkets: 2,
-      totalCards: 1,
-      marketList: [
-        {
-          location: 'nyc',
-          cards: 0,
-          marketId: 10001
-        },
-        {
-          location: 'la',
-          cards: 1,
-          marketId: 10002
-        }
-      ],
-      lastMarketId: 10002,
-      newLocation: ''
-    }
-  }
-];
\ No newline at end of file
diff --git a/src/app/index.html b/src/app/index.html
index 24eadc2..93e3bd3 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -3,6 +3,7 @@
 
 <head>
   <title>React Rewind</title>
+  <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
diff --git a/src/app/style.css b/src/app/style.css
new file mode 100644
index 0000000..0295f31
--- /dev/null
+++ b/src/app/style.css
@@ -0,0 +1,36 @@
+input[type=range] {
+  height: 25px;
+  -webkit-appearance: none;
+  margin: 10px 0;
+  width: 70%;
+  border-radius: 50px;
+  background-color: transparent;
+}
+input[type=range]:focus {
+  outline: none;
+}
+/* bar */
+input[type=range]::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 10px;
+  cursor: pointer;
+  animate: 0.2s;
+  box-shadow: 0px 0px 0px #000000;
+  background: white;
+  border-radius: 10px;
+  border: 0px solid #000000;
+}
+input[type=range]::-webkit-slider-thumb {
+  box-shadow: 0px 0px 0px #000000;
+  border: 0px solid rgb(123, 123, 123);
+  height: 28px;
+  width: 28px;
+  border-radius: 25px;
+  background: rgb(230, 230, 230);
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: -10px;
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+  background: rgb(255, 255, 255);
+}
\ No newline at end of file
diff --git a/src/app/styles/Events.jsx b/src/app/styles/Events.jsx
index 123433a..cd33569 100644
--- a/src/app/styles/Events.jsx
+++ b/src/app/styles/Events.jsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-// formats the events display
+// the entire events display wrapper
 export const EventsWrapper = styled.div`
   min-height: 100px;
   max-height: 200px;
@@ -8,9 +8,9 @@ export const EventsWrapper = styled.div`
   border-bottom: 1px solid white;
 `;
 
-// events actions bar
+// single event card
 export const EventCard = styled.div`
-  background-color: ${props => props.selectedEvent === 'false' ? 'none' : "#484C54"};
+  background-color: ${props => props.selectedEvent === 'false' ? 'none' : "#4F5A65"};
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -27,8 +27,7 @@ export const EventCard = styled.div`
   }
 `;
 
-
-
+// time card on event card
 export const EventTimeDiv = styled.div`
   width: 25%;
   text-align: center;
@@ -37,8 +36,20 @@ export const EventTimeDiv = styled.div`
   border-radius: 5px;
 `;
 
-export const TimeTravelContainer = styled.div`
-  padding-top: 5%;
+// wrapper for previous and next buttons
+export const PreviousNextWrapper = styled.div`
+  padding-top: 4%;
+  padding-bottom: 4%;
   display: flex;
   justify-content: space-evenly;
 `;
+
+// button for previous and next (copied from EventTimeDiv for trial)
+export const PrevNextButton = styled.div`
+  cursor: pointer;
+  width: 25%;
+  text-align: center;
+  background-color: ${props => props.selectedEvent === 'false' ? '#484C54' : "#3C444F"};
+  color: ${props => props.selectedEvent === 'false' ? 'white' : "white"};
+  border-radius: 5px;
+`;
diff --git a/src/app/styles/SplitPane.jsx b/src/app/styles/SplitPane.jsx
index 20f3b67..c2f47df 100644
--- a/src/app/styles/SplitPane.jsx
+++ b/src/app/styles/SplitPane.jsx
@@ -1,20 +1,19 @@
 import styled from 'styled-components';
 
-export const FullBackground = styled.div`
-  height: 100%;
-  background-color: blue;
-`;
-
+// wrapper for total split pane views
 export const PaneWrapper = styled.div`
   font-family: "arial";
   font-size: .80em;
   color: #E8E8F4;
   background-color: #2A2E3A;
-  height: 100vh;
+  /* CHANGED HEIGHT FROM 100VH */
+  height: 100%;
+  /* margin-bottom: 30px; */
   display: flex;
   justify-content: space-around;
 `;
 
+// wrapper for events (left hand side)
 export const LeftPane = styled.div`
   background-color: #2A2E3A;
   border-right: 3px double #484C54;
@@ -22,6 +21,7 @@ export const LeftPane = styled.div`
   width: 43%;
 `;
 
+// wrapper for details (right hand side)
 export const RightPane = styled.div`
   color: white;
   background-color: #2A2E3A;
diff --git a/src/app/styles/TimeSlider.jsx b/src/app/styles/TimeSlider.jsx
new file mode 100644
index 0000000..bc077a2
--- /dev/null
+++ b/src/app/styles/TimeSlider.jsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const SliderWrapper = styled.div`
+  display: flex;
+  height: 60px;
+  justify-content: space-evenly;
+  align-items: center;
+  border-top: 1px solid #191c23;
+  width: 100%;
+  background-color: #3C444F;
+`;
+
+export const Button = styled.div`
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  font-size: 20px;
+  width: 40px;
+  color: white;
+  font-family: 'arial';
+
+`;
\ No newline at end of file