diff --git a/opendatavisualization/src/components/MapContainer/dataPoints.js b/opendatavisualization/src/components/MapContainer/dataPoints.js
new file mode 100644
index 0000000..d7f95ca
--- /dev/null
+++ b/opendatavisualization/src/components/MapContainer/dataPoints.js
@@ -0,0 +1,65 @@
+import React from "react";
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button"
+import Accordion from 'react-bootstrap/Accordion'
+import ListGroup from 'react-bootstrap/ListGroup'
+
+export default class DataPoint extends React.Component {
+    constructor(props) {
+        super(props);
+        console.log(props)
+        this.filterList = this.filterList.bind(this)
+        this.state = {visibleItems:props.data}
+    }
+
+    filterList(event) {
+        var allItems = this.props.data.slice();
+        let visibleItems = allItems.filter((item) => {
+        return item[this.props.data_type.fields[0]].toLowerCase().search(
+          event.target.value.toLowerCase()) !== -1;
+      });
+      this.setState({visibleItems:visibleItems})
+    }
+
+    componentDidMount() {
+        console.log(this.props)
+    }
+
+    render(){
+        let props = this.props;
+        let visibleData = this.state.visibleItems.length > 0 ? this.state.visibleItems : props.data
+        return(
+        <Card>
+        <Accordion.Toggle as={Card.Header} eventKey="data_points">
+            Data Points
+        </Accordion.Toggle>
+        <Accordion.Collapse as={Card.Body} eventKey="data_points">
+            <div style={{overflowY:"auto"}}>
+            <input type="text" placeholder="Search" onChange={this.filterList} style={{width:'100%'}}/>
+                <Accordion>
+                    {visibleData.map((data,index)=>{
+                        return(
+                            <Card key={`card-${index}-${data[props.data_type.id]}`}>
+                                <Card.Header >
+                                    <Accordion.Toggle as={Button} variant="link" eventKey={data[props.data_type.id]}>
+                                    {data[props.data_type.fields[0]]}
+                                    </Accordion.Toggle>
+                                </Card.Header>
+                                <Accordion.Collapse eventKey={data[props.data_type.id]}>
+                                    <ListGroup>
+                                    {props.data_type.fields.map((field)=>{
+                                        return(
+                                            <ListGroup.Item key={`lg-${data[field]}`}><b>{field}:</b> {data[field]}</ListGroup.Item>
+                                        )
+                                    })}
+                                    </ListGroup>
+                                </Accordion.Collapse>
+                            </Card>
+                        )
+                    })}
+                </Accordion>
+            </div>
+        </Accordion.Collapse>
+        </Card> 
+        )}
+}
\ No newline at end of file
diff --git a/opendatavisualization/src/components/MapContainer/mapControls.js b/opendatavisualization/src/components/MapContainer/mapControls.js
index 687beea..86f2f03 100644
--- a/opendatavisualization/src/components/MapContainer/mapControls.js
+++ b/opendatavisualization/src/components/MapContainer/mapControls.js
@@ -7,6 +7,7 @@ import Accordion from 'react-bootstrap/Accordion'
 import ListGroup from 'react-bootstrap/ListGroup'
 import ButtonGroup from "react-bootstrap/ButtonGroup";
 import {getColor} from "./mapContainer";
+import DataPoint from "./dataPoints"
 
 function MapControls(props) {
     const data_type = DATA_SETS[props.data_set];
@@ -72,38 +73,7 @@ function MapControls(props) {
                             </Card>
                         )
                     })}
-                <Card>
-                    <Accordion.Toggle as={Card.Header} eventKey="data_points">
-                        Data Points
-                    </Accordion.Toggle>
-                    <Accordion.Collapse as={Card.Body} eventKey="data_points">
-                        <div style={{overflowY:"auto"}}>
-                            <Accordion>
-                                {props.data.map((data,index)=>{
-                                    return(
-                                        <Card key={`card-${index}-${data[data_type.id]}`}>
-                                            <Card.Header >
-                                                <Accordion.Toggle as={Button} variant="link" eventKey={data[data_type.id]}>
-                                                {data[data_type.fields[0]]}
-                                                </Accordion.Toggle>
-                                            </Card.Header>
-                                            <Accordion.Collapse eventKey={data[data_type.id]}>
-                                                <ListGroup>
-                                                {data_type.fields.map((field)=>{
-                                                    return(
-                                                        <ListGroup.Item key={`lg-${data[field]}`}><b>{field}:</b> {data[field]}</ListGroup.Item>
-                                                    )
-                                                })}
-                                                </ListGroup>
-                                            </Accordion.Collapse>
-                                        </Card>
-
-                                    )
-                                })}
-                            </Accordion>
-                        </div>
-                    </Accordion.Collapse>
-                </Card>
+                    <DataPoint data={props.data} data_type= {data_type}  />
             </Accordion>
         </div>
     )