diff --git a/src/ts/@overflow/temp/react/components/SensorConfiguration.tsx b/src/ts/@overflow/temp/react/components/SensorConfiguration.tsx
index a4b81df..20e21fd 100644
--- a/src/ts/@overflow/temp/react/components/SensorConfiguration.tsx
+++ b/src/ts/@overflow/temp/react/components/SensorConfiguration.tsx
@@ -2,8 +2,17 @@ import * as React from 'react';
 import { Icon, Step, Button, Table, Radio, Form, Container, Checkbox } from 'semantic-ui-react';
 import { Grid, Image, Label, Segment, Dropdown, Input, List, Accordion, Loader } from 'semantic-ui-react';
 
+import MetaCrawler from '@overflow/meta/api/model/MetaCrawler';
 
-export class SensorConfiguration extends React.Component<any, any> {
+export interface SensorConfigurationProps {
+
+}
+
+export interface SensorConfigurationState {
+
+}
+
+export class SensorConfiguration extends React.Component<SensorConfigurationProps, SensorConfigurationState> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -22,7 +31,15 @@ export class SensorConfiguration extends React.Component<any, any> {
 }
 
 
-export class ConfigStepper extends React.Component<any, any> {
+export interface ConfigStepperProps {
+  steps: Array<JSX.Element>;
+}
+
+export interface ConfigStepperState {
+  currentStep: number;
+}
+
+export class ConfigStepper extends React.Component<ConfigStepperProps, ConfigStepperState> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -125,8 +142,17 @@ export class ConfigStepper extends React.Component<any, any> {
   }
 }
 
+export interface CrawlerSelectorProps {
 
-export class CrawlerSelector extends React.Component<any, any> {
+}
+
+export interface CrawlerSelectorState {
+  isInstalling: boolean;
+  selected: MetaCrawler;
+
+}
+
+export class CrawlerSelector extends React.Component<CrawlerSelectorProps, CrawlerSelectorState> {
 
   private crawlers: object[];
 
@@ -194,7 +220,7 @@ export class CrawlerSelector extends React.Component<any, any> {
       this.setState({
         isInstalling: false,
       });
-    }, 1500);
+    },          1500);
   }
 
   public render(): JSX.Element {
@@ -226,7 +252,15 @@ export class CrawlerSelector extends React.Component<any, any> {
   }
 }
 
-export class CrawlerAuthInputs extends React.Component<any, any> {
+export interface CrawlerAuthInputsProps {
+  crawler?: MetaCrawler;
+}
+
+export interface CrawlerAuthInputsState {
+  isVerifying: boolean;
+}
+
+export class CrawlerAuthInputs extends React.Component<CrawlerAuthInputsProps, CrawlerAuthInputsState> {
 
   private data: object[];
   constructor(props: any, context: any) {
@@ -328,9 +362,15 @@ export class CrawlerAuthInputs extends React.Component<any, any> {
   }
 }
 
+export interface SensorItemSelectorProps {
 
+}
 
-export class SensorItemSelector extends React.Component<any, any> {
+export interface SensorItemSelectorState {
+
+}
+
+export class SensorItemSelector extends React.Component<SensorItemSelectorProps, SensorItemSelectorState> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -365,12 +405,20 @@ export class SensorItemSelector extends React.Component<any, any> {
   }
 }
 
-export class ETCSelector extends React.Component<any, any> {
+export interface ETCSelectorProps {
+
+}
+
+export interface ETCSelectorState {
+  interval: string;
+}
+
+export class ETCSelector extends React.Component<ETCSelectorProps, ETCSelectorState> {
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = {
-      interval: 5,
-    };
+    // this.state = {
+    //   interval: 5,
+    // };
   }
   public handleIntervalChange(e: any, { value }: any): void {
     this.setState({ interval: value });
diff --git a/src/ts/@overflow/temp/react/components/SensorDetails.tsx b/src/ts/@overflow/temp/react/components/SensorDetails.tsx
index 2924a4c..fe6689b 100644
--- a/src/ts/@overflow/temp/react/components/SensorDetails.tsx
+++ b/src/ts/@overflow/temp/react/components/SensorDetails.tsx
@@ -2,8 +2,20 @@ import * as React from 'react';
 import { Button, Table, Label, Segment, Header, Container } from 'semantic-ui-react';
 import { DetailContainer } from './commons/DetailContainer';
 import { SensorItems } from './SensorItems';
+import Sensor from '@overflow/sensor/api/model/Sensor';
+import Probe from '@overflow/probe/api/model/Probe';
 
-export class SensorDetails extends React.Component<any, any> {
+export interface SensorDetailsProps {
+  sensor?: Sensor;
+  probe?: Probe;
+}
+
+export interface SensorDetailsState {
+
+}
+
+
+export class SensorDetails extends React.Component<SensorDetailsProps, SensorDetailsState> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -27,7 +39,17 @@ export class SensorDetails extends React.Component<any, any> {
   }
 }
 
-export class SensorBasicInfo extends React.Component<any, any> {
+export interface SensorBasicInfoProps {
+  sensor?: Sensor;
+  probe?: Probe;
+  onBack?(): void;
+}
+
+export interface SensorBasicInfoState {
+
+}
+
+export class SensorBasicInfo extends React.Component<SensorBasicInfoProps, SensorBasicInfoState> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -48,7 +70,7 @@ export class SensorBasicInfo extends React.Component<any, any> {
 
 
   public showStartStopBtn(): JSX.Element {
-    if (this.props.probe.metaProbeStatus.name === 'STARTED') {
+    if (this.props.probe.status.name === 'STARTED') {
       return <Button content='Stop' icon='stop' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
     } else {
       return <Button content='Start' icon='play' labelPosition='left' color={'blue'} floated={'right'} onClick={this.handleStartStop} />;
@@ -71,7 +93,7 @@ export class SensorBasicInfo extends React.Component<any, any> {
               <Table.Cell>
                 <Header size='small'>Status</Header>
               </Table.Cell>
-              <Table.Cell>{this.props.probe.metaProbeStatus.name}</Table.Cell>
+              <Table.Cell>{this.props.probe.status.name}</Table.Cell>
             </Table.Row>
             <Table.Row>
               <Table.Cell>
diff --git a/src/ts/@overflow/temp/react/components/SensorItems.tsx b/src/ts/@overflow/temp/react/components/SensorItems.tsx
index 3760e60..b202a1a 100644
--- a/src/ts/@overflow/temp/react/components/SensorItems.tsx
+++ b/src/ts/@overflow/temp/react/components/SensorItems.tsx
@@ -1,7 +1,18 @@
 import * as React from 'react';
 import { Table, Button, Header, Container } from 'semantic-ui-react';
 
-export class SensorItems extends React.Component<any, any> {
+import Sensor from '@overflow/sensor/api/model/Sensor';
+
+export interface Props {
+  sensor?: Sensor;
+}
+
+export interface State {
+
+}
+
+
+export class SensorItems extends React.Component<Props, State> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -9,7 +20,7 @@ export class SensorItems extends React.Component<any, any> {
     };
   }
 
-  public componentWillMount():void {
+  public componentWillMount(): void {
     super.componentWillMount();
   }
 
diff --git a/src/ts/@overflow/temp/react/components/Sensors.tsx b/src/ts/@overflow/temp/react/components/Sensors.tsx
index f3734ce..335cc04 100644
--- a/src/ts/@overflow/temp/react/components/Sensors.tsx
+++ b/src/ts/@overflow/temp/react/components/Sensors.tsx
@@ -2,16 +2,29 @@ import * as React from 'react';
 import { Table, Button, Header, Container } from 'semantic-ui-react';
 import { SensorDetails } from './SensorDetails';
 
-export class Sensors extends React.Component<any, any> {
+import Probe from '@overflow/probe/api/model/Probe';
+import Sensor from '@overflow/sensor/api/model/Sensor';
+
+export interface Props {
+  probe?: Probe;
+}
+
+export interface State {
+  isDetail: boolean;
+  selected: Sensor;
+}
+
+
+export class Sensors extends React.Component<Props, State> {
 
   private data: any;
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = {
-      selected: null,
-      isDetail: false, // temp
-    };
+    // this.state = {
+    //   selected: null,
+    //   isDetail: false, // temp
+    // };
   }
 
   public componentWillMount(): void {
@@ -65,7 +78,7 @@ export class Sensors extends React.Component<any, any> {
     ];
   }
 
-  public handleSelect(selectedSensor: object): void {
+  public handleSelect(selectedSensor: Sensor): void {
     this.setState({
       selected: selectedSensor,
       isDetail: true,
diff --git a/src/ts/@overflow/temp/react/components/TableExampleSortable.tsx b/src/ts/@overflow/temp/react/components/TableExampleSortable.tsx
index 13c76cd..be6acb4 100644
--- a/src/ts/@overflow/temp/react/components/TableExampleSortable.tsx
+++ b/src/ts/@overflow/temp/react/components/TableExampleSortable.tsx
@@ -9,20 +9,30 @@ const tableData = [
   { name: 'Ben', age: 70, gender: 'Male' },
 ];
 
-export class TableExampleSortable extends React.Component<any, any>  {
+export interface Props {
+
+}
+
+export interface State {
+  column: string;
+  data: any;
+  direction: 'ascending' | 'descending';
+}
+
+export class TableExampleSortable extends React.Component<Props, State>  {
 
   constructor(props: any, context: any) {
     super(props, context);
 
-    this.state = {
-      column: null,
-      data: tableData,
-      direction: null,
-    };
+    // this.state = {
+    //   column: null,
+    //   data: tableData,
+    //   direction: null,
+    // };
   }
 
 
-  public handleSort = (clickedColumn: any) => () => {
+  public handleSort = (clickedColumn: string) => () => {
     const { column, data, direction } = this.state;
 
     if (column !== clickedColumn) {
@@ -48,10 +58,10 @@ export class TableExampleSortable extends React.Component<any, any>  {
       <Table sortable celled fixed>
         <Table.Header>
           <Table.Row>
-            <Table.HeaderCell sorted={column === 'name' ? direction : null} onClick={this.handleSort('name')}>
+            <Table.HeaderCell sorted={column === 'name' ? direction : 'ascending'} onClick={this.handleSort('name')}>
               Name
             </Table.HeaderCell>
-            <Table.HeaderCell sorted={column === 'age' ? direction : null} onClick={this.handleSort('age')}>
+            <Table.HeaderCell sorted={column === 'age' ? direction : 'ascending'} onClick={this.handleSort('age')}>
               Age
             </Table.HeaderCell>
             <Table.HeaderCell sorted={column === 'gender' ? direction : null} onClick={this.handleSort('gender')}>
diff --git a/src/ts/@overflow/temp/react/components/TargetDetails.tsx b/src/ts/@overflow/temp/react/components/TargetDetails.tsx
index 878134c..5fc99aa 100644
--- a/src/ts/@overflow/temp/react/components/TargetDetails.tsx
+++ b/src/ts/@overflow/temp/react/components/TargetDetails.tsx
@@ -3,7 +3,18 @@ import { Button, Table, Header, Container } from 'semantic-ui-react';
 import { Sensors } from './Sensors';
 import { DetailContainer } from './commons/DetailContainer';
 
-export class TargetDetails extends React.Component<any, any> {
+import Probe from '@overflow/probe/api/model/Probe';
+
+export interface TargetDetailsProps {
+  probe?: Probe;
+  target?: boolean;
+}
+
+export interface TargetDetailsState {
+
+}
+
+export class TargetDetails extends React.Component<TargetDetailsProps, TargetDetailsState> {
 
   constructor(props: any, context: any) {
     super(props, context);
@@ -37,8 +48,15 @@ export class TargetDetails extends React.Component<any, any> {
 }
 
 
+export interface TargetBasicInfoProps {
+  probe?: Probe;
+}
 
-export class TargetBasicInfo extends React.Component<any, any> {
+export interface TargetBasicInfoState {
+
+}
+
+export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, TargetBasicInfoState> {
 
   constructor(props: any, context: any) {
     super(props, context);
diff --git a/src/ts/@overflow/temp/react/components/Targets.tsx b/src/ts/@overflow/temp/react/components/Targets.tsx
index 624e731..2cfd435 100644
--- a/src/ts/@overflow/temp/react/components/Targets.tsx
+++ b/src/ts/@overflow/temp/react/components/Targets.tsx
@@ -2,13 +2,24 @@ import * as React from 'react';
 import { Table, Button, Modal, Input, Header, Container, InputOnChangeData, ButtonProps } from 'semantic-ui-react';
 import { TargetDetails } from './TargetDetails';
 
-export class Targets extends React.Component<any, any> {
+import Target from '@overflow/target/api/model/Target';
+
+export interface TargetsProps {
+
+}
+
+export interface TargetsState {
+  selected: boolean;
+  openAddTarget: boolean;
+}
+
+export class Targets extends React.Component<TargetsProps, TargetsState> {
 
   constructor(props: any, context: any) {
     super(props, context);
-    this.state = {
-      openAddTarget: false,
-    };
+    // this.state = {
+    //   openAddTarget: false,
+    // };
   }
 
   public handleAddTarget(event: React.MouseEvent<HTMLButtonElement>, data: ButtonProps): void {
@@ -55,8 +66,16 @@ export class Targets extends React.Component<any, any> {
   }
 }
 
+export interface TargetTableProps {
 
-export class TargetTable extends React.Component<any, any> {
+}
+
+export interface TargetTableState {
+  list: Array<Target>;
+  selected: object;
+}
+
+export class TargetTable extends React.Component<TargetTableProps, TargetTableState> {
   private data: any;
 
   constructor(props: any, context: any) {
@@ -102,10 +121,10 @@ export class TargetTable extends React.Component<any, any> {
           </Table.Header>
 
           <Table.Body>
-            {this.state.list.map((target: any, index: number) => (
+            {this.state.list.map((target: Target, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, target)}>
                 <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{target.infra.metaInfraType.name}</Table.Cell>
+                <Table.Cell textAlign={'center'}>{target.infra.type.name}</Table.Cell>
                 <Table.Cell>todo</Table.Cell>
                 <Table.Cell>todo</Table.Cell>
               </Table.Row>
diff --git a/src/ts/@overflow/temp/react/components/TopBar.tsx b/src/ts/@overflow/temp/react/components/TopBar.tsx
deleted file mode 100644
index b2cb940..0000000
--- a/src/ts/@overflow/temp/react/components/TopBar.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import *as React from 'react';
-import {
-  Dropdown, Icon, Menu, Label,
-
-  Sidebar, Segment, Button, Image, Header,
-} from 'semantic-ui-react';
-
-import { Link, Route } from 'react-router-dom';
-import * as History from 'history';
-
-const options = [
-  { key: 'angular', text: 'Angular', value: 'angular' },
-  { key: 'css', text: 'CSS', value: 'css' },
-  { key: 'design', text: 'Graphic Design', value: 'design' },
-  { key: 'ember', text: 'Ember', value: 'ember' },
-  { key: 'html', text: 'HTML', value: 'html' },
-  { key: 'ia', text: 'Information Architecture', value: 'ia' },
-  { key: 'javascript', text: 'Javascript', value: 'javascript' },
-  { key: 'mech', text: 'Mechanical Engineering', value: 'mech' },
-  { key: 'meteor', text: 'Meteor', value: 'meteor' },
-  { key: 'node', text: 'NodeJS', value: 'node' },
-  { key: 'plumbing', text: 'Plumbing', value: 'plumbing' },
-  { key: 'python', text: 'Python', value: 'python' },
-  { key: 'rails', text: 'Rails', value: 'rails' },
-  { key: 'react', text: 'React', value: 'react' },
-  { key: 'repair', text: 'Kitchen Repair', value: 'repair' },
-  { key: 'ruby', text: 'Ruby', value: 'ruby' },
-  { key: 'ui', text: 'UI Design', value: 'ui' },
-  { key: 'ux', text: 'User Experience', value: 'ux' },
-];
-
-
-
-
-export class TopBar extends React.Component<any, any> {
-  constructor(props: any, context: any) {
-    super(props, context);
-
-    this.state = {
-      notification_visible: false,
-    };
-
-  }
-
-
-  public render(): JSX.Element {
-    {/*<h1>React Redux sample</h1>
-        <li><Link to='/test' >TopBar</Link></li>
-        <li><Link to='/test2' >Signup</Link></li>
-        <li><Link to='/test3' >SignIn</Link></li>
-        <li><Link to='/test4' >PWChange</Link></li>
-        <li><Link to='/test5' >ProbeDown</Link></li>
-        <li><Link to='/test6' >DiscoveryDetails</Link></li>
-
-        <li><Link to='/test14' >Insanity</Link></li>*/}
-
-    return (
-
-
-      <div>
-        <Menu inverted borderless size='tiny'>
-          <Menu.Item>  overFlow   </Menu.Item>
-          <Menu.Item href='/' > Home   </Menu.Item>
-          <Dropdown text='Monitoring' pointing className='link item'>
-            <Dropdown.Menu>
-              <Dropdown.Header icon='angle right' content='Probe' />
-              <Dropdown.Divider />
-              <Dropdown.Item href='#/test14'> Probe List </Dropdown.Item>
-              <Dropdown.Item href='#/test14'> Noauth Probes </Dropdown.Item>
-              <Dropdown.Item href='#/test14'> Download </Dropdown.Item>
-              <Dropdown.Divider />
-              <Dropdown.Item href='#/test21'>Sensors</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-
-          <Dropdown text='Infrastructure' pointing className='link item'>
-            <Dropdown.Menu>
-              <Dropdown.Item> Maps </Dropdown.Item>
-              <Dropdown.Item>Targets</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-          <Menu.Item link>            Dashboard    </Menu.Item>
-          <Menu.Item link>            Metrics    </Menu.Item>
-          <Menu.Item link>            Alert    </Menu.Item>
-          <Menu.Item link>            History    </Menu.Item>
-          <Dropdown text='Custom' pointing className='link item'>
-            <Dropdown.Menu>
-              <Dropdown.Item href='#/test2'> SignUp </Dropdown.Item>
-              <Dropdown.Item href='#/test3'>SignIn</Dropdown.Item>
-              <Dropdown.Item href='#/test4'> PWChange </Dropdown.Item>
-              <Dropdown.Item href='#/test5'>ProbeDown</Dropdown.Item>
-              <Dropdown.Item href='#/test14'> Insanity </Dropdown.Item>
-              <Dropdown.Item href='#/test6'>DiscoveryDetails</Dropdown.Item>
-              <Dropdown.Item href='#/test7'>Tree</Dropdown.Item>
-            </Dropdown.Menu>
-          </Dropdown>
-
-
-          <Menu.Item position='right' link>
-            <Icon name='setting' size='large' />
-          </Menu.Item>
-          <Menu.Item onClick={() => {
-            this.props.onSidebar();
-          }}>
-            <Label color='teal' horizontal>22</Label>
-          </Menu.Item>
-          <Menu.Item link>
-            <Dropdown icon='user' className='ui pointing dropdown top right'>
-              <Dropdown.Menu >
-                <Dropdown.Item text='Log out' />
-                <Dropdown.Divider />
-                <Dropdown.Item text='Settings' />
-                <Dropdown.Item text='- Profile' />
-                <Dropdown.Item text='- Preferences' />
-                <Dropdown.Item text='- Change Password' />
-                <Dropdown.Divider />
-                <Dropdown.Item text='Help' />
-              </Dropdown.Menu>
-            </Dropdown>
-          </Menu.Item>
-
-
-        </Menu>
-
-
-        {/*<Sidebar.Pushable as={Segment}  >
-          <Sidebar
-            as={Menu}
-            animation='overlay'
-            width='thin'
-            direction='right'
-            visible={this.state.notification_visible}
-            icon='labeled'
-            vertical
-            inverted
-
-          >
-            <Menu.Item name='home'>
-              <Icon name='home' />
-              Home
-            </Menu.Item>
-            <Menu.Item name='gamepad'>
-              <Icon name='gamepad' />
-              Games
-            </Menu.Item>
-            <Menu.Item name='camera'>
-              <Icon name='camera' />
-              Channels
-            </Menu.Item>
-          </Sidebar>
-          <Sidebar.Pusher >
-            <Segment basic >
-
-            </Segment>
-          </Sidebar.Pusher>
-        </Sidebar.Pushable>*/}
-      </div>
-    );
-  }
-
-
-
-}
-