diff --git a/@overflow/target/component/list/list.component.html b/@overflow/target/component/list/list.component.html
index 383ecca..c75eb41 100644
--- a/@overflow/target/component/list/list.component.html
+++ b/@overflow/target/component/list/list.component.html
@@ -1,35 +1,30 @@
-<!--<h1>Targets</h1>-->
+<h1>Targets</h1>
 
-<!--<p-table [value]="infras" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >-->
-  <!--<ng-template pTemplate="header">-->
-    <!--<tr>-->
-      <!--<th style="width: 4em">No.</th>-->
-      <!--<th style="width: 8em">Status</th>-->
-      <!--<th style="width: 8em">Type</th>-->
-      <!--<th>Name</th>-->
-      <!--<th style="width: 15em">Sensors</th>-->
-      <!--<th style="width: 8em">Created at</th>-->
-      <!--<th style="width: 10em"></th>-->
-    <!--</tr>-->
-  <!--</ng-template>-->
-  <!--<ng-template pTemplate="body" let-infra let-rowIndex="rowIndex">-->
-    <!--<tr [pSelectableRow]="infra">-->
-      <!--<td>{{rowIndex + 1}}</td>-->
-      <!--<td>??</td>-->
-      <!--<td>{{infra.infraType.name}}</td>-->
-      <!--<td>{{infra.target.displayName}}</td>-->
-      <!--<td>{{infra.target.sensorCount}}</td>-->
-      <!--<td>{{infra.createDate | date: 'dd.MM.yyyy'}}</td>-->
-      <!--<td>-->
-        <!--<button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(infra.target)"></button>-->
-      <!--</td>-->
-    <!--</tr>-->
-  <!--</ng-template>-->
-<!--</p-table>-->
-<!--<p-paginator [rows]="pageSize" [totalRecords]="totalLength" (onPageChange)="onPaging($event)"></p-paginator>-->
-
-
-<!--<p-dialog [modal]="true" [width]="800" [(visible)]="sensorSettingDisplay" [showHeader]="false" [closeOnEscape]="false">-->
-  <!--<of-sensor-setting [visible]="sensorSettingDisplay" [preTarget]="target" (close)="onSensorSettingClose()"></of-sensor-setting>-->
-<!--</p-dialog>-->
-sdfsdfsdf
+<p-table [value]="page.content" selectionMode="single" (onRowSelect)="onRowSelect($event)" [resizableColumns]="true" >
+  <ng-template pTemplate="header">
+    <tr>
+      <th style="width: 4em">No.</th>
+      <th style="width: 8em">Status</th>
+      <th style="width: 8em">Type</th>
+      <th>Name</th>
+      <th style="width: 15em">Sensors</th>
+      <th style="width: 8em">Created at</th>
+      <th style="width: 10em"></th>
+    </tr>
+  </ng-template>
+  <ng-template pTemplate="body" let-target let-rowIndex="rowIndex">
+    <tr [pSelectableRow]="target">
+      <td>{{rowIndex + 1}}</td>
+      <td>??</td>
+      <td>{{target.infra.id}}</td>
+      <td>{{target.displayName}}</td>
+      <td>{{target.sensorCount}}</td>
+      <td>{{target.createDate | date: 'dd.MM.yyyy'}}</td>
+      <td>
+        <button type="button" label="Add Sensor" icon="ui-icon-add" pButton class="ui-s-button" (click)="onAddSensor(target)"></button>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+<p-paginator #paginator [rows]="page.size" [totalRecords]="page.totalElements"
+             (onPageChange)="onPaginate($event)" ></p-paginator>
diff --git a/@overflow/target/component/list/list.component.ts b/@overflow/target/component/list/list.component.ts
index c451320..1a12485 100644
--- a/@overflow/target/component/list/list.component.ts
+++ b/@overflow/target/component/list/list.component.ts
@@ -4,117 +4,119 @@ import { Infra } from '@overflow/commons-typescript/model/infra';
 import { Probe } from '@overflow/commons-typescript/model/probe';
 import { Target } from '@overflow/commons-typescript/model/target';
 
+import { Observable, of, Subscription } from 'rxjs';
 import { Store, select } from '@ngrx/store';
+import { catchError, map, tap, take } from 'rxjs/operators';
+
 import { TargetService } from '../../service/target.service';
 import { InfraService } from '@overflow/infra/service/infra.service';
-import {PageParams} from '@overflow/commons-typescript/model/commons/PageParams';
-import { catchError, map, tap, take } from 'rxjs/operators';
-import {Page} from '@overflow/commons-typescript/model/commons/Page';
+import { PageParams } from '@overflow/commons-typescript/model/commons/PageParams';
+import { Page } from '@overflow/commons-typescript/model/commons/Page';
 
 @Component({
-    selector: 'of-target-list',
-    templateUrl: './list.component.html',
+  selector: 'of-target-list',
+  templateUrl: './list.component.html',
 })
 export class ListComponent implements OnInit, AfterContentInit, OnDestroy {
 
-    // infrasSubscription$: Subscription;
-    // infras$: Observable<Infra[]>;
-    // infras: Infra[];
-    // probe: Probe;
-    // target: Target = null;
-    // sensorSettingDisplay = false;
+  // infrasSubscription$: Subscription;
+  // infras$: Observable<Infra[]>;
+  // infras: Infra[];
+  // probe: Probe;
+  // target: Target = null;
+  // sensorSettingDisplay = false;
 
-    // pageSize = '10';
-    // totalLength = 0;
-    // currPage = 0;
+  // pageSize = '10';
+  // totalLength = 0;
+  // currPage = 0;
+  page: Page<Target>;
+  pending$: Observable<boolean>;
+  error$: Observable<any>;
 
-    constructor(
-        private store: Store<any>,
-        private targetService: TargetService,
-    ) {
-    }
+  totalLength: number;
+  targets: Object;
 
-    ngOnInit() {
-        // this.infrasSubscription$ = this.infras$.subscribe(
-        //     (page: Page) => {
-        //         if (!page) {
-        //             return;
-        //         }
-        //         this.totalLength = page.totalElements;
-        //         this.infras = page.content;
-        //     },
-        //     (error: RPCClientError) => {
-        //         console.log(error);
-        //     }
-        // );
-      const pageParams: PageParams = {
-        pageNo: 0,
-        countPerPage: 10,
-        sortCol: 'id',
-        sortDirection: 'descending',
-      };
+  constructor(
+    private store: Store<any>,
+    private targetService: TargetService,
+  ) {
+  }
 
-      this.targetService.readAllByProbeID(1, pageParams)
-        .pipe(
-          tap(() => {
+  ngOnInit() {
+    const pageParams: PageParams = {
+      pageNo: 0,
+      countPerPage: 2,
+      sortCol: 'id',
+      sortDirection: 'descending',
+    };
 
-          }),
-          map((r: Page<Target>) => {
-              console.log(r);
-          }),
-          catchError(err => {
-            console.log(err);
-            return err;
-          }),
-          take(1),
-        ).subscribe();
-    }
+    this.targetService.readAllByProbeID(1, pageParams)
+      .pipe(
+        tap(() => {
+          this.pending$ = of(true);
+        }),
+        map((page: Page<Target>) => {
+          this.page = page;
+        }),
+        catchError(err => {
+          console.log(err);
+          return err;
+        }),
+        tap(() => {
+          this.pending$ = of(false);
+        }),
+        take(1),
+      ).subscribe();
+  }
 
-    ngAfterContentInit() {
-        // this.route.params.subscribe((params: any) => {
-        //     this.probe = {
-        //         id: params['id'],
-        //     };
-        //     this.getInfras(0);
-        // });
-    }
+  ngAfterContentInit() {
+    // this.route.params.subscribe((params: any) => {
+    //     this.probe = {
+    //         id: params['id'],
+    //     };
+    //     this.getInfras(0);
+    // });
+  }
 
-    ngOnDestroy() {
-        // if (this.infrasSubscription$) {
-        //     this.infrasSubscription$.unsubscribe();
-        // }
-    }
+  ngOnDestroy() {
+    // if (this.infrasSubscription$) {
+    //     this.infrasSubscription$.unsubscribe();
+    // }
+  }
 
-    getInfras(pageNo) {
-        // const pageParams: PageParams = {
-        //     pageNo: pageNo + '',
-        //     countPerPage: this.pageSize,
-        //     sortCol: 'id',
-        //     sortDirection: 'descending'
-        // };
-        // this.infraListStore.dispatch(
-        //     new InfraListStore.ReadAllByProbe(
-        //         { probe: this.probe, pageParams: pageParams }
-        //     )
-        // );
-    }
+  getInfras(pageNo) {
+    // const pageParams: PageParams = {
+    //     pageNo: pageNo + '',
+    //     countPerPage: this.pageSize,
+    //     sortCol: 'id',
+    //     sortDirection: 'descending'
+    // };
+    // this.infraListStore.dispatch(
+    //     new InfraListStore.ReadAllByProbe(
+    //         { probe: this.probe, pageParams: pageParams }
+    //     )
+    // );
+  }
 
-    onRowSelect(event) {
-        // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
-        // this.router.navigate(['target', event.data.id, 'info']);
-    }
+  onRowSelect(event) {
+    // this.router.navigate(['target'], { queryParams: { target: event.data.id } });
+    // this.router.navigate(['target', event.data.id, 'info']);
+  }
 
-    onAddSensor(target: Target) {
-        // this.target = target;
-        // this.sensorSettingDisplay = true;
-    }
+  onAddSensor(target: Target) {
+    // this.target = target;
+    // this.sensorSettingDisplay = true;
+  }
 
-    onSensorSettingClose() {
-        // this.sensorSettingDisplay = false;
-    }
+  onSensorSettingClose() {
+    // this.sensorSettingDisplay = false;
+  }
 
-    onPaging(e) {
-        // this.getInfras(e.page);
-    }
+  onPaging(e) {
+    // this.getInfras(e.page);
+  }
 
+  onPaginate(event) {
+
+  }
 }