diff --git a/src/ts/containers/config/SensorConfigPopup.tsx b/src/ts/containers/config/SensorConfigPopup.tsx
index 56aa815..23cf4a0 100644
--- a/src/ts/containers/config/SensorConfigPopup.tsx
+++ b/src/ts/containers/config/SensorConfigPopup.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { OFRest } from '../../components/Rest';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -8,6 +9,8 @@ import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import AppBar from 'material-ui/AppBar';
 import Checkbox from 'material-ui/Checkbox';
+import TextField from 'material-ui/TextField';
+import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 import {
     Table,
     TableBody,
@@ -57,6 +60,7 @@ export class SensorConfigPopup extends React.Component<any, any> {
                 "description": "mem free ",
             },
         ];
+
         this.setState({
             crawler: c,
             sensorItems: items,
@@ -106,96 +110,149 @@ export class SensorConfigPopup extends React.Component<any, any> {
                             <div>Version : </div>
                             <div>Port : </div>
                             <div>Port Type : </div>
-                            <div></div>
                         </CardText>
                     </Card>
 
                     <Card>
                         <CrawlerSelector target={this.props.target} onChange={this.handleCrawlerSelect} />
+                    </Card>
+                    <Card>
                         <SensorItemSelector items={this.state.sensorItems} onChange={this.handleSensorItemsSelect} />
                     </Card>
-
                 </Dialog>
             </div>
         );
     }
 }
 
-const styles = {
-    title: {
-        cursor: 'pointer',
-    },
-};
 
 export class CrawlerSelector extends React.Component<any, any> {
     constructor(props: any, context: any) {
         super(props, context);
         this.state = {
-            value: 0,
+            value: -1,
             crawlers: [],
+            authOpen: false,
+            authInputs: [],
         };
     }
 
     componentWillMount() {
-        var crawlers = [
-            {
-                "id": 0,
-                "name": "Protocol",
-                "description": "Alive check only using protocol.",
-                "type": "Protocol",
-            },
-            {
-                "id": 1,
-                "name": "SQL",
-                "description": "Query based sensors",
-                "type": "SQL",
-            },
-            {
-                "id": 2,
-                "name": "WMI",
-                "description": "Windows Management Instrumentation",
-                "type": "WMI",
-            },
-        ];
-        this.setState({
-            crawlers: crawlers,
+
+        let os: OFRest = new OFRest("Crawler", "List", null);
+        var that: any = this;
+        os.Call().then(function (res) {
+            return res.json();
+        }).then(function (json) {
+            let list = JSON.parse(json.resultStr);
+            that.setState({
+                crawlers: list,
+            });
+        }).catch(function (err) {
+            console.log(err);
         });
+
+
     }
 
     handleCrawlerChange = (event: any, index: any, v: number) => {
         this.setState({
             value: v,
         });
-        if (v === 0) {
+        if (v === -1) {
             return;
         }
-        this.props.onChange(this.state.crawlers[v]);
+        let selectedCrawler = this.state.crawlers[v];
+        this.props.onChange(selectedCrawler);
+        this.checkAuth(selectedCrawler);
+    }
+
+    checkAuth = (c: any) => {
+        //Todo. validate auth
+        this.setState({
+            authOpen: true,
+        });
+
+        let os: OFRest = new OFRest("Crawlerinputitemmapping", "List", c);
+        var that: any = this;
+        os.Call().then(function (res) {
+            return res.json();
+        }).then(function (json) {
+            var list = JSON.parse(json.resultStr);
+            that.setState({
+                authInputs: list,
+            });
+        }).catch(function (err) {
+            console.log(err);
+        });
     }
 
 
     getCrawlerTitle() {
-        if (this.state.value === 0) {
+        if (this.state.value === -1) {
             return "";
         }
-        return this.state.crawlers[this.state.value].description;
+        var c = this.state.crawlers[this.state.value];
+        return "[" + c.crawlerType + "] " + c.description;
     }
 
+    renderAuthRequester = () => {
+        if (this.state.authInputs.length === 0) {
+            return <div></div>;
+        }
+        return <div> Connection Info.  {
+            this.state.authInputs.map((data: any, index: number) => {
+                return <div key={index}>{this.renderInputs(data)}</div>;
+            })
+        }</div>;
+    }
+
+    renderInputs = (data: any) => {
+        let input = data.crawlerInputItem;
+        if (input.dataType === "String") {
+            return <div><TextField
+                hintText={input.description}
+                floatingLabelText={input.name}
+                underlineShow={true}
+            //value={this.state.email}
+            // onChange={(e, newValue) => this.setState({ email: newValue })}
+            /></div>;
+        }
+        else if (input.dataType === "Select") {
+            let values = input.description.split('||');
+            let radios = Array();
+            for (var i = 0; i < values.length; i++) {
+                radios.push(<RadioButton key={i} value={i} label={values[i]} />);
+            }
+            return <div>
+                <RadioButtonGroup name={input.name} defaultSelected="not_light">
+                    {radios}
+                </RadioButtonGroup>
+            </div>;
+        }
+    }
+
+    handleExpand = (b: boolean) => {
+        this.setState({
+            authOpen: b,
+        });
+    }
 
     render() {
         return (
             <div>
                 <DropDownMenu value={this.state.value} onChange={this.handleCrawlerChange} style={{ width: 300 }}>
-                    <MenuItem value={0} primaryText="Choose a Crawler type" />
+                    <MenuItem value={-1} primaryText="Choose a Crawler type" />
                     {this.state.crawlers.map((crawler: any, index: number) => {
                         return (<MenuItem
-                            value={crawler.id}
+                            value={index}
                             primaryText={crawler.name}
                             key={index}
                         />);
                     })}
 
                 </DropDownMenu>
-                <Card>
+                <Card expanded={this.state.authOpen} onExpandChange={this.handleExpand.bind(this)}>
                     <CardHeader
                         title={this.getCrawlerTitle()}
                         subtitle=''
@@ -203,7 +260,7 @@ export class CrawlerSelector extends React.Component<any, any> {
                         showExpandableButton={true}
                     />
                     <CardText expandable={true} >
-                        Crawler manual blahblahblah...
+                        {this.renderAuthRequester()}
                     </CardText>
                 </Card>
 
@@ -218,7 +275,7 @@ export class SensorItemSelector extends React.Component<any, any> {
     constructor(props: any, context: any) {
         super(props, context);
         this.state = {
-            selected:[]
+            selected: []
         };
     }
 
@@ -229,7 +286,7 @@ export class SensorItemSelector extends React.Component<any, any> {
 
     handleRowSelection = (selectedRows: any) => {
         this.setState({
-            selected :  selectedRows,
+            selected: selectedRows,
         });
         this.props.onChange(selectedRows);
     }