diff --git a/src/components/ViewSightings.js b/src/components/ViewSightings.js
index 46da41a..4e62ace 100644
--- a/src/components/ViewSightings.js
+++ b/src/components/ViewSightings.js
@@ -1,80 +1,227 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import PropTypes from 'prop-types';
 import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField'
+import Button from '@material-ui/core/Button'
+import Paper from '@material-ui/core/Paper'
+import { withStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
 import firebase from '../firebase.js';
 
-class ViewSightings extends React.Component {
+const styles = theme => ({
+    root: {
+      ...theme.mixins.gutters(),
+      paddingTop: theme.spacing.unit * 2,
+      paddingBottom: theme.spacing.unit * 2,
+    },
+    container: {
+        display: 'flex',
+        flexWrap: 'wrap',
+      },
+    textField: {
+        marginLeft: theme.spacing.unit * 2,
+        marginRight: theme.spacing.unit * 2,
+        marginTop: theme.spacing.unit * 2,
+        flexBasis: 280,
+    },
+    button: {
+        marginLeft: theme.spacing.unit * 3,
+        marginRight: theme.spacing.unit * 3,
+        marginTop: theme.spacing.unit * 3,
+      },
+    paper: {
+        marginLeft: theme.spacing.unit * 2,
+        marginRight: theme.spacing.unit,
+        marginTop: theme.spacing.unit * 2,
+      },
+  });
 
-    /*TODO:
-    * Constructor in case functions
-    * need to be state bound
-    */
+  /** 
+  * Types of sightings. Label is what is
+  * viewed in the application, value is
+  * what is stored in the database.
+  */
+  const sightingTypes = [
+    {
+      value: 'visual',
+      label: 'Visual',
+    },
+    {
+      value: 'roadkill',
+      label: 'Roadkill',
+    },
+    {
+      value: 'trapped',
+      label: 'Trapped',
+    },
+    {
+      value: 'viewed_tracks',
+      label: 'Viewed Tracks',
+    },
+    {
+      value: 'photo',
+      label: 'Photo',
+    },
+    {
+      value: 'other',
+      label: 'Other',
+    },
+  ];
+  
+  /** 
+   * Levels of confidence. Label is what is
+   * viewed in the application, value is
+   * what is stored in the database.
+  */
+  const confidenceLevels = [
+      {
+        value: '1',
+        label: '1 - Strongly unconfident',
+      },
+      {
+        value: '2',
+        label: '2 - Unconfident',
+      },
+      {
+        value: '3',
+        label: '3 - Somewhat confident',
+      },
+      {
+        value: '4',
+        label: '4 - Confident',
+      },
+      {
+        value: '5',
+        label: '5 - Very confident',
+      },
+    ];
+
+    /**
+     * Gets formatted confidence value.
+     */
+    function getConfidence(item) {
+        for (var i = 0; i < confidenceLevels.length; i++) {
+            if (confidenceLevels[i].value === item) {
+                return confidenceLevels[i].label;
+            }
+        }
+        
+    }
+
+    /**
+     * Gets formatted type value.
+     */
+    function getType(item) {
+        for (var i = 0; i < sightingTypes.length; i++) {
+            if (sightingTypes[i].value === item) {
+                return sightingTypes[i].label;
+            }
+        }
+    }
+
+class ViewSightings extends React.Component {
     constructor(props){
         super(props);
-        this.state = {
-            type:[],
-            confidence: [],
-            date: [],
-            time: [],
-            desc: [],
-            items: []
-        };
 
-        this.handleChange = this.handleChange.bind(this);
-//        this.handleSubmit = this.handleSubmit.bind(this);
+       this.handleSubmit = this.handleSubmit.bind(this);
     }
 
-    handleChange(e) {
+    state = {
+        id: '',
+        type: 'N/A',
+        confidence: 'N/A',
+        date: 'N/A',
+        time: 'N/A',
+        desc: 'N/A',
+        lat: 'N/A',
+        lng: 'N/A'
+    };
+    
+
+    /**
+     * Handles state change in form
+     * components.
+     */
+    handleChange = name => event => {
         this.setState({
-            [e.target.name]: e.target.value
+        [name]: event.target.value,
         });
-    }
+    };
 
-    //FIXME: Do I Need this function?
-    // handleSubmit(e){
-    //     e.preventDefault();
-    //     const itemsRef = firebase.database().ref('items').orderByKey();
-    //     const item = {
-    //         type: this.state.type,
-    //         confidence: this.state.confidence,
-    //         date: this.state.date,
-    //         time: this.state.time,
-    //         desc: this.state.desc
-    //     }
-    //     itemsRef.push(item);
-    // }
-
-    componentDidMount(){
-        const itemsRef = firebase.database().ref('items').orderByKey();
-        
-        itemsRef.on('value', (snapshot) => {
-            let items = snapshot.val();
-            let newState = [];
-            for (let item in items) {
-                newState.push({
-                    id: item,
-                    type: items[item].type,
-                    confidence: items[item].confidence,
-                    date: items[item].date,
-                    time: items[item].time,
-                    desc: items[item].desc
-                });
-            }
+    /**
+     * Handles submit on search.
+     */
+    handleSubmit(e){
+        e.preventDefault();
+        const itemSighting = firebase.database().ref("sightings/" + this.state.id);
+        itemSighting.once("value").then((snapshot) => {
+            let data = snapshot.val();
             this.setState({
-                items: newState
+                date: data.date,
+                time: data.time,
+                type: getType(data.type),
+                confidence: getConfidence(data.confidence),
+                desc: data.desc,
+                lat: data.lat,
+                lng: data.lng
             });
         });
-    
-    }
-    render(){
+    };
 
+    render(){
+        const { classes } = this.props;
         return (
-            console.log("hello"),
-            null
-        );
+            /**
+             * The below houses the search
+             * and submit button along with
+             * the sighting information
+             * it pulls.
+             */
+            <Fragment>
+                <Grid container justify="center">
+                    <form className={classes.container} onSubmit={this.handleSubmit}>
+                    <Grid item xs={6}>
+                        <TextField
+                        id="sighting-id"
+                        name="sighting-id"
+                        label="Input ID"
+                        value={this.state.id}
+                        margin="normal"
+                        onChange={this.handleChange('id')}
+                        />
+                    </Grid>
+                    <Grid item xs={6}>
+                        <Button variant="contained" type="submit" color="primary" className={classes.button}>
+                            Submit
+                        </Button>
+                    </Grid>
+                    </form>
+                    <Grid item xs={12}>
+                        <Paper elevation={2}>
+                            <Typography variant="headline" component="h3">
+                            Sighting
+                            </Typography>
+                            <Typography component="p">
+                            <b>Type:</b> {this.state.type} {<br/>}
+                            <b>Confidence:</b> {this.state.confidence} {<br/>}
+                            <b>Date:</b> {this.state.date} {<br/>}
+                            <b>Time:</b> {this.state.time} {<br/>}
+                            <b>Latitude:</b> {this.state.lat} {<br/>}
+                            <b>Longitude:</b> {this.state.lng} {<br/>}
+                            <b>Description:</b> {this.state.desc}
+                            </Typography>
+                        </Paper>
+                    </Grid>
+                </Grid>
+            </Fragment>
+        )
 
     }
 
 }
 
-export default ViewSightings;
\ No newline at end of file
+ViewSightings.propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+export default withStyles(styles)(ViewSightings);
\ No newline at end of file