diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 5ad311c..72d03e2 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -24,6 +24,7 @@ import { BusStopComponent } from './data/bus-stop/bus-stop.component';
 import { ServiceObjectComponent } from './data/service-object/service-object.component';
 import { RoadSurfaceComponent } from './data/road-surface/road-surface.component';
 import { RoadWidthComponent } from './data/road-width/road-width.component';
+import { CrossSectionComponent } from './data/cross-section/cross-section.component';
 import { EditorComponent } from '../helpers/editor.component';
 import { RendererComponent } from '../helpers/renderer.component';
 
@@ -36,6 +37,8 @@ import { RoadSurfaceService } from '../services/road-surface.service';
 import { RoadSurfaceCreateService } from '../services/road-surface-create.service';
 import { RoadWidthService } from '../services/road-width.service';
 import { RoadWidthCreateService } from '../services/road-width-create.service';
+import { CrossSectionService } from '../services/cross-section.service';
+import { CrossSectionCreateService } from '../services/cross-section-create.service';
 import { BooleanSelectListService } from '../services/boolean-select-list.service';
 
 const httpInterceptorProviders: Type<any>[] = [
@@ -56,6 +59,7 @@ const httpInterceptorProviders: Type<any>[] = [
     EditorComponent,
     RendererComponent,
     RoadWidthComponent,
+    CrossSectionComponent,
   ], // directives, components, and pipes owned by this NgModule
   imports: [
     BrowserModule,
@@ -66,6 +70,7 @@ const httpInterceptorProviders: Type<any>[] = [
       RendererComponent,
       RoadSurfaceComponent,
       RoadWidthComponent,
+      CrossSectionComponent,
     ]),
     CovalentCoreModule.forRoot(),
     CovalentChartsModule.forRoot(),
@@ -93,6 +98,8 @@ const httpInterceptorProviders: Type<any>[] = [
     RoadSurfaceService,
     RoadWidthCreateService,
     RoadWidthService,
+    CrossSectionCreateService,
+    CrossSectionService,
   ], // additional providers needed for this module
   entryComponents: [ ],
   bootstrap: [ AppComponent ],
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index 47b248d..564a188 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -7,6 +7,7 @@ import { TemplatesComponent } from './templates/templates.component';
 import { BusStopComponent } from './data/bus-stop/bus-stop.component';
 import { RoadSurfaceComponent } from './data/road-surface/road-surface.component';
 import { RoadWidthComponent } from './data/road-width/road-width.component';
+import { CrossSectionComponent } from './data/cross-section/cross-section.component';
 import { ServiceObjectComponent } from './data/service-object/service-object.component';
 
 const routes: Routes = [
@@ -18,6 +19,7 @@ const routes: Routes = [
         {path: 'service-object', component: ServiceObjectComponent},
         {path: 'road-surface', component: RoadSurfaceComponent},
         {path: 'road-width', component: RoadWidthComponent},
+        {path: 'cross-section', component: CrossSectionComponent}
       ]},
   ]},
 ];
diff --git a/src/app/data/cross-section/cross-section.component.html b/src/app/data/cross-section/cross-section.component.html
new file mode 100644
index 0000000..dad08a5
--- /dev/null
+++ b/src/app/data/cross-section/cross-section.component.html
@@ -0,0 +1,12 @@
+<div class="grid_containert" *ngIf="showGrid">
+    <ag-grid-ng2 #agGrid style="width: 100%; height: 100%;" class="ag-blue" [gridOptions]="gridOptions" [columnDefs]="columnDefs" [rowData]="rowData" enableColResize enableSorting enableFilter groupHeaders suppressRowClickSelection toolPanelSuppressGroups
+        toolPanelSuppressValues debug rowHeight="22" rowSelection="multiple" (cellClicked)="onCellClicked($event)" (cellDoubleClicked)="onCellDoubleClicked($event)" (cellContextMenu)="onCellContextMenu($event)" (cellValueChanged)="onCellValueChanged($event)"
+        (cellFocused)="onCellFocused($event)" (rowSelected)="onRowSelected($event)" (selectionChanged)="onSelectionChanged()" (beforeFilterChanged)="onBeforeFilterChanged()" (afterFilterChanged)="onAfterFilterChanged()" (filterModified)="onFilterModified()"
+        (beforeSortChanged)="onBeforeSortChanged()" (afterSortChanged)="onAfterSortChanged()" (virtualRowRemoved)="onVirtualRowRemoved($event)" (rowClicked)="onRowClicked($event)">
+    </ag-grid-ng2>
+    <div class="control_button">
+        <div *tdLoading="'loading'; mode:'indeterminate'; type:'circle'; strategy:'replace'; color:'accent'"></div>
+        <button md-fab color="accent" (click)="addNewRow()" type="button"><md-icon>add</md-icon></button>
+        <button md-fab color="warn" (click)="deleteRows()" type="button"><md-icon>delete</md-icon></button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/data/cross-section/cross-section.component.ts b/src/app/data/cross-section/cross-section.component.ts
new file mode 100644
index 0000000..c4722d6
--- /dev/null
+++ b/src/app/data/cross-section/cross-section.component.ts
@@ -0,0 +1,108 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+import {GridOptions} from 'ag-grid/main';
+import { TdLoadingService } from '@covalent/core';
+
+import { StatementBase } from '../../../models/statement.base';
+
+import { CrossSectionService } from '../../../services/cross-section.service';
+import { CrossSection } from '../../../models/cross-section';
+import { EditorComponent } from '../../../helpers/editor.component';
+import { RendererComponent } from '../../../helpers/renderer.component';
+import { CrossSectionCreateService } from '../../../services/cross-section-create.service';
+import { RegionSelectList } from '../../../models/region-select-list';
+import { RoadSelectList } from '../../../models/road-select-list';
+import { StateCommonSelectList } from '../../../models/state-common-select-list';
+import { SurfaceTypeSelectList } from '../../../models/surface-type-select-list';
+
+import { routerTransition } from '../../../animations/router.animation';
+
+@Component({
+    selector: 'cross-section',
+    templateUrl: 'cross-section.component.html',
+    styleUrls: ['cross-section.scss'],
+    encapsulation: ViewEncapsulation.None,
+})
+export class CrossSectionComponent extends StatementBase {
+
+    public regions: RegionSelectList[];
+    public roads: RoadSelectList[];
+    public surfaceTypes: SurfaceTypeSelectList[];
+    public states: StateCommonSelectList[];
+
+    constructor(
+        protected service: CrossSectionService,
+        protected dataService: CrossSectionCreateService,
+        protected loadingService: TdLoadingService,
+    ) {
+        super();
+    }
+
+  protected createColumnDefs(): any[] {
+    return [
+      {
+        headerName: '#',
+        width: 30,
+        checkboxSelection: true,
+        suppressSorting: true,
+        suppressMenu: true,
+        pinned: true,
+      },
+      {
+        headerName: 'ID',
+        field: 'id',
+      },
+      {
+        headerName: 'Назва дороги',
+        field: 'roadId',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.roads,
+          valueCol: 'roadId',
+          labelCol: 'name',
+        },
+      },
+      {
+        headerName: 'Область',
+        field: 'regionId',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.regions,
+          valueCol: 'regionId',
+          labelCol: 'name',
+        },
+      },
+      {
+        headerName: 'Стан покриття',
+        field: 'stateCommonId',
+        editable: true,
+        cellEditorFramework: EditorComponent,
+        cellRendererFramework: RendererComponent,
+        cellEditorParams: {
+          data: this.states,
+          valueCol: 'stateCommonId',
+          labelCol: 'value',
+        },
+      },
+    ];
+  }
+
+  protected initFunction(): void {
+    this.dataService.getModels().then((models: any) => {
+            this.regions = models.regionSelectListDsM as RegionSelectList[];
+            this.roads = models.roadSelectListDsM as RoadSelectList[];
+            this.surfaceTypes = models.surfaceTypeSelectListDsM as SurfaceTypeSelectList[];
+            this.states = models.stateCommonSelectListDsM as StateCommonSelectList[];
+      }).then(() => {
+            this.bootstrapGrid();
+      });
+  }
+
+  // tslint:disable-next-line:member-ordering
+  public CreateModel(): Object {
+    return new CrossSection();
+  }
+}
diff --git a/src/app/data/cross-section/cross-section.scss b/src/app/data/cross-section/cross-section.scss
new file mode 100644
index 0000000..de4dc3d
--- /dev/null
+++ b/src/app/data/cross-section/cross-section.scss
@@ -0,0 +1,4 @@
+.toolbar button {
+    margin: 2px;
+    padding: 0;
+}
\ No newline at end of file
diff --git a/src/app/data/data.component.html b/src/app/data/data.component.html
index 3cd9828..e892ff5 100644
--- a/src/app/data/data.component.html
+++ b/src/app/data/data.component.html
@@ -26,15 +26,15 @@
                 <md-icon md-list-icon>star</md-icon>
                 Прив'язки населених пунктів
             </a>
-            <a md-list-item (click)="!media.query('gt-sm') && manageList.close()" md-ripple class="block relative">
-                <md-icon md-list-icon>people</md-icon>
+            <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/product']">
+                <md-icon md-list-icon>dashboard</md-icon>
                 Інтенсивності
             </a>
             <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/product']">
                 <md-icon md-list-icon>dashboard</md-icon>
                 Категорія доріг
             </a>
-            <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['/product']">
+            <a md-list-item md-ripple class="block relative" (click)="!media.query('gt-sm') && manageList.close()" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}" [routerLink]="['cross-section']">
                 <md-icon md-list-icon>dashboard</md-icon>
                 З'їзди
             </a>
diff --git a/src/models/cross-section.ts b/src/models/cross-section.ts
new file mode 100644
index 0000000..a526721
--- /dev/null
+++ b/src/models/cross-section.ts
@@ -0,0 +1,20 @@
+export class CrossSection {
+    id: number;
+    roadId: number;
+    regionId: number;
+    stateCommonid: number;
+    locationLeft: number;
+    locationRight: number;
+    direction: string;
+    surfaceTypeId: number;
+    lengthSection: number;
+    lengthSurface: number;
+    distanceEdge: number;
+    width: number;
+    angle: number;
+    tubeAvailability: number;
+    safetyAvailability: number;
+    yearBuild: number;
+    yearRepair: number;
+
+}
diff --git a/src/services/cross-section-create.service.ts b/src/services/cross-section-create.service.ts
new file mode 100644
index 0000000..63d34fa
--- /dev/null
+++ b/src/services/cross-section-create.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { Http } from '@angular/http';
+
+import { CreateBaseService } from './create.base.service';
+
+@Injectable()
+export class CrossSectionCreateService extends CreateBaseService {
+    protected apiUrl: string = 'http://localhost:5000/crosssection/directory';
+    constructor(protected http: Http) {
+        super(http);
+    }
+}
diff --git a/src/services/cross-section.service.ts b/src/services/cross-section.service.ts
new file mode 100644
index 0000000..2de1127
--- /dev/null
+++ b/src/services/cross-section.service.ts
@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { Headers, Http } from '@angular/http';
+
+import { StatementBaseService } from './statement.base.service';
+
+import { CrossSection } from '../models/cross-section';
+
+@Injectable()
+export class CrossSectionService extends StatementBaseService {
+  protected url: string = 'http://localhost:5000/crosssection';
+  constructor(protected http: Http) {
+    super(http);
+   }
+   public createModel(): Object {
+     return new CrossSection();
+   }
+   protected parseModels(json: any): any {
+     return json.crossSectionEditDsM as CrossSection[];
+   }
+   protected parseModel(json: any): any {
+     return json as CrossSection;
+   }
+}
--
libgit2 0.21.4