diff --git a/src/ts/@overflow/noauthprobe/react/components/NoauthProbeList.tsx b/src/ts/@overflow/noauthprobe/react/components/NoauthProbeList.tsx
index 7b4bc17..ddebdd7 100644
--- a/src/ts/@overflow/noauthprobe/react/components/NoauthProbeList.tsx
+++ b/src/ts/@overflow/noauthprobe/react/components/NoauthProbeList.tsx
@@ -8,6 +8,7 @@ import {
 } from 'semantic-ui-react';
 import NoAuthProbe from '@overflow/noauthprobe/api/model/NoAuthProbe';
 import Domain from '@overflow/domain/api/model/Domain';
+import { ListContainer } from '@overflow/commons/react/component/ListContainer';
 
 export interface StateProps {
 }
@@ -20,6 +21,7 @@ export type Props = StateProps & DispatchProps;
 
 export interface State {
   selected: NoAuthProbe[];
+  list: NoAuthProbe[];
 }
 
 export class NoauthProbeList extends React.Component<any, any> {
@@ -31,6 +33,7 @@ export class NoauthProbeList extends React.Component<any, any> {
     super(props, context);
     this.state = {
       selected: [],
+      list: null,
     };
     this.selectedIds = new Array();
   }
@@ -72,6 +75,9 @@ export class NoauthProbeList extends React.Component<any, any> {
         },
       },
     ];
+    this.setState({
+      list: this.data,
+    });
   }
 
   public handleSelect(id: string): void {
@@ -86,6 +92,12 @@ export class NoauthProbeList extends React.Component<any, any> {
     });
   }
 
+  public handleSearch = (result: any[]): void => {
+    this.setState({
+      list: result,
+    });
+  }
+
   public checkExist(id: string): boolean {
     if (this.state.selected.indexOf(id) === -1) {
       return false;
@@ -109,8 +121,7 @@ export class NoauthProbeList extends React.Component<any, any> {
   }
 
   public render(): JSX.Element {
-
-    return (
+    let noauth =
       <Container fluid>
         <Table celled selectable striped>
           <Table.Header>
@@ -126,7 +137,7 @@ export class NoauthProbeList extends React.Component<any, any> {
           </Table.Header>
 
           <Table.Body>
-            {this.data.map((probe: any, index: number) => (
+            {this.state.list.map((probe: any, index: number) => (
               <Table.Row key={index} onClick={this.handleSelect.bind(this, probe.id)} active={this.handleRowActive(probe.id)}>
                 <Table.Cell collapsing>
                   <Checkbox checked={this.checkExist(probe.id)} />
@@ -149,8 +160,14 @@ export class NoauthProbeList extends React.Component<any, any> {
             </Table.Row>
           </Table.Footer>
         </Table>
-
-      </Container>
+      </Container>;
+    return (
+      <ListContainer
+        contents={noauth}
+        data={this.data}
+        onSearch={this.handleSearch}
+        filter={null}
+      />
     );
   }
 }
diff --git a/src/ts/@overflow/temp/react/components/NoauthProbes.tsx b/src/ts/@overflow/temp/react/components/NoauthProbes.tsx
deleted file mode 100644
index 369ce46..0000000
--- a/src/ts/@overflow/temp/react/components/NoauthProbes.tsx
+++ /dev/null
@@ -1,147 +0,0 @@
-import * as React from 'react';
-import { Table,
-  Checkbox,
-  Button,
-  Header,
-  Container,
-} from 'semantic-ui-react';
-import NoAuthProbe from '@overflow/noauthprobe/api/model/NoAuthProbe';
-
-export interface Props {
-
-}
-
-export interface State {
-
-}
-
-export class NoauthProbes extends React.Component<any, any> {
-
-  private data: any;
-  private selectedIds: Array<string>;
-
-  constructor(props: Props, context: State) {
-    super(props, context);
-    this.state = {
-      selected: [],
-    };
-    this.selectedIds = new Array();
-  }
-
-  public componentWillMount(): void {
-    this.data = [
-      {
-        'id': '11',
-        'MetaNoAuthProbeStatus': {
-          'name': 'NORMAL',
-        },
-        'hostName': 'insanity windows',
-        'macAddress': '14:fe:b5:9d:54:7e',
-        'ipAddress': '192.168.1.105',
-        'tempProbeKey': '45374d4egsdfw332',
-        'apiKey': '45374d4egsdfw332',
-        'domain': {
-
-        },
-        'probe': {
-
-        },
-      },
-      {
-        'id': '22',
-        'MetaNoAuthProbeStatus': {
-          'name': 'NORMAL',
-        },
-        'hostName': 'insanity ubuntu',
-        'macAddress': '14:fe:b5:9d:54:7e',
-        'ipAddress': '192.168.1.105',
-        'tempProbeKey': '45374d4egsdfw332',
-        'apiKey': '45374d4egsdfw332',
-        'domain': {
-
-        },
-        'probe': {
-
-        },
-      },
-    ];
-  }
-
-  public handleSelect(id: string): void {
-    let idx = this.selectedIds.indexOf(id);
-    if (idx === -1) {
-      this.selectedIds.push(id);
-    } else {
-      this.selectedIds.splice(idx, 1);
-    }
-    this.setState({
-      selected: this.selectedIds,
-    });
-  }
-
-  public checkExist(id: string): boolean {
-    if (this.state.selected.indexOf(id) === -1) {
-      return false;
-    }
-    return true;
-  }
-
-  public handleAccept(): void {
-    alert(this.state.selected);
-  }
-
-  public handleDeny(): void {
-    alert(this.state.selected);
-  }
-
-  public handleRowActive(id: string):boolean {
-    if (this.state.selected.indexOf(id) === -1) {
-      return false;
-    }
-    return true;
-  }
-
-  public render(): JSX.Element {
-
-    return (
-      <Container fluid>
-        <Header as='h3' dividing>Noauth Probes</Header>
-        <Table celled selectable striped>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell />
-              <Table.HeaderCell textAlign={'center'}>No.</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Host IP</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Host Mac</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Host Name</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>Created At</Table.HeaderCell>
-              <Table.HeaderCell textAlign={'center'}>API Key</Table.HeaderCell>
-            </Table.Row>
-          </Table.Header>
-
-          <Table.Body>
-            {this.data.map((probe: any, index: number) => (
-              <Table.Row key={index} onClick={this.handleSelect.bind(this, probe.id)} active={this.handleRowActive(probe.id)}>
-                <Table.Cell collapsing>
-                  <Checkbox checked={this.checkExist(probe.id)} />
-                </Table.Cell>
-                <Table.Cell textAlign={'center'}>{index + 1}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{probe.ipAddress}</Table.Cell>
-                <Table.Cell textAlign={'center'}>{probe.macAddress}</Table.Cell>
-                <Table.Cell>{probe.hostName}</Table.Cell>
-                <Table.Cell textAlign={'center'}></Table.Cell>
-                <Table.Cell textAlign={'center'}>{probe.apiKey}</Table.Cell>
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-
-        <Button primary floated={'right'} onClick={this.handleAccept.bind(this)}>Accept</Button>
-        <Button floated={'right'} onClick={this.handleDeny.bind(this)}>Deny</Button>
-      </Container>
-    );
-  }
-}
-
-
-