diff --git a/apps/angular/projects/ordering/src/lib/ordering.service.spec.ts b/apps/angular/projects/ordering/src/lib/ordering.service.spec.ts
deleted file mode 100644
index 187fa810..00000000
--- a/apps/angular/projects/ordering/src/lib/ordering.service.spec.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { OrderingService } from './ordering.service';
-
-describe('OrderingService', () => {
-  let service: OrderingService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(OrderingService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/apps/angular/projects/ordering/src/lib/ordering.service.ts b/apps/angular/projects/ordering/src/lib/ordering.service.ts
deleted file mode 100644
index fd106cf5..00000000
--- a/apps/angular/projects/ordering/src/lib/ordering.service.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class OrderingService {
-
-  constructor() { }
-}
diff --git a/apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.html b/apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.html
new file mode 100644
index 00000000..f1398c61
--- /dev/null
+++ b/apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.html
@@ -0,0 +1,17 @@
+
+
+<abp-modal [visible]="visible && !!order" (visibleChange)='visibleChange.emit($event)'  >
+  <ng-template #abpHeader>
+    <h3>Modal Title</h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    <p>Modal content</p>
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-secondary" abpClose>{{
+      'AbpUi::Close' | abpLocalization
+      }}</button>
+  </ng-template>
+</abp-modal>
diff --git a/apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.ts b/apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.ts
new file mode 100644
index 00000000..cbd0d0b9
--- /dev/null
+++ b/apps/angular/projects/ordering/src/pages/orders/order-detail/order-detail.component.ts
@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { OrderDto } from '../../../lib/proxy/orders';
+
+@Component({
+  selector: 'lib-order-detail',
+  templateUrl: './order-detail.component.html'
+})
+export class OrderDetailComponent implements OnInit {
+
+  @Input()
+  visible: boolean;
+  @Input()
+  order: OrderDto | undefined;
+
+  @Output() readonly visibleChange = new EventEmitter<boolean>();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/apps/angular/projects/ordering/src/pages/orders/orders.component.html b/apps/angular/projects/ordering/src/pages/orders/orders.component.html
index 66000b4f..1e66c318 100644
--- a/apps/angular/projects/ordering/src/pages/orders/orders.component.html
+++ b/apps/angular/projects/ordering/src/pages/orders/orders.component.html
@@ -1 +1,39 @@
-<p>orders works!</p>
+
+
+<div class="card">
+  <div class="card-header">
+    <div class="row">
+      <div class="col col-md-6">
+        <h5 class="card-title">{{ 'AbpCatalog::Products' | abpLocalization }}</h5>
+      </div>
+      <div class="text-end col col-md-6">
+        <button class="btn btn-primary">{{ 'AbpCatalog::NewProduct' | abpLocalization }}</button>
+      </div>
+    </div>
+  </div>
+  <div class="card-body">
+    <ngx-datatable [rows]="(list$ | async)" default>
+      <!-- TODO: localize column headers -->
+      <ngx-datatable-column name="OrderNo" prop="orderNo"></ngx-datatable-column>
+      <ngx-datatable-column name="OrderStatus" prop="orderStatus"></ngx-datatable-column>
+      <ngx-datatable-column name="OrderDate" prop="orderDate" >
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <span>{{ value | date }}</span>
+        </ng-template>
+      </ngx-datatable-column>
+
+      <ngx-datatable-column name="Id" prop="id" >
+        <ng-template let-id="value" let-row="row" ngx-datatable-cell-template>
+          <abp-button (click)='openModal(id)'>
+              {{ 'AbpCatalog::Detail' | abpLocalization }}
+          </abp-button>
+        </ng-template>
+      </ngx-datatable-column>
+
+    </ngx-datatable>
+
+
+    <lib-order-detail  [(visible)]='isModalVisible' [order]='selectedOrder'>
+    </lib-order-detail>
+  </div>
+</div>
diff --git a/apps/angular/projects/ordering/src/pages/orders/orders.component.ts b/apps/angular/projects/ordering/src/pages/orders/orders.component.ts
index a07554f1..cf83d309 100644
--- a/apps/angular/projects/ordering/src/pages/orders/orders.component.ts
+++ b/apps/angular/projects/ordering/src/pages/orders/orders.component.ts
@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { OrderDto, OrderService } from '../../lib/proxy/orders';
 
 @Component({
   selector: 'lib-orders',
@@ -6,10 +7,14 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./orders.component.css']
 })
 export class OrdersComponent implements OnInit {
+  constructor(private orderService: OrderService) { }
+  list$ = this.orderService.getOrders({});
+  selectedOrder: OrderDto | undefined;
+  isModalVisible = false;
+  ngOnInit(): void {}
 
-  constructor() { }
 
-  ngOnInit(): void {
+  openModal(id: string) {
+    this.isModalVisible = true;
   }
-
 }
diff --git a/apps/angular/projects/ordering/src/pages/orders/orders.module.ts b/apps/angular/projects/ordering/src/pages/orders/orders.module.ts
index 0b6e8a06..78ea50b9 100644
--- a/apps/angular/projects/ordering/src/pages/orders/orders.module.ts
+++ b/apps/angular/projects/ordering/src/pages/orders/orders.module.ts
@@ -3,15 +3,21 @@ import { CommonModule } from '@angular/common';
 
 import { OrdersRoutingModule } from './orders-routing.module';
 import { OrdersComponent } from './orders.component';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { CoreModule } from '@abp/ng.core';
+import { OrderDetailComponent } from './order-detail/order-detail.component';
 
 
 @NgModule({
   declarations: [
-    OrdersComponent
+    OrdersComponent,
+    OrderDetailComponent
   ],
   imports: [
     CommonModule,
-    OrdersRoutingModule
+    OrdersRoutingModule,
+    ThemeSharedModule,
+    CoreModule,
   ]
 })
 export class OrdersModule { }