diff --git a/src/components/ArrowComponent.tsx b/src/components/ArrowComponent.tsx
index 28f773a..1b9f0ba 100644
--- a/src/components/ArrowComponent.tsx
+++ b/src/components/ArrowComponent.tsx
@@ -1,25 +1,29 @@
 import React from 'react';
 import PropType from 'prop-types';
 import { Fab } from '@material-ui/core';
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
+import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 
 type ArrowProps = {
-    // TODO check for MouseEvent
-    handleClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    suppliedIcon: JSX.Element;
+    handleClick: (direction: Number) => void;
+    direction: String;
 }
 
 const ArrowComponent: React.FC<ArrowProps> = (props: ArrowProps) => {
+    const directionNumber = (props.direction === "right") ? 1 : -1;
     return (
         <div>
-            <Fab size='large' aria-label='add' variant='extended'>
-                {props.suppliedIcon}
+            <Fab size='large' aria-label='add' variant='extended' 
+                onClick={() => props.handleClick(directionNumber)}>
+                {(directionNumber == 1) ? <ChevronRightIcon /> : <ChevronLeftIcon />}
             </Fab>
         </div>
     );
 }
 
 ArrowComponent.propTypes = {
-    // TODO add suppliedIcon and handleClick
+    handleClick: PropType.func.isRequired,
+    direction: PropType.instanceOf(String).isRequired
 }
 
 export default ArrowComponent;
\ No newline at end of file