diff --git a/src/app/features/home/transaction/transaction-routing.module.ts b/src/app/features/home/activities/activities-routing.module.ts
similarity index 59%
rename from src/app/features/home/transaction/transaction-routing.module.ts
rename to src/app/features/home/activities/activities-routing.module.ts
index 6d56d80bc..b77463fd8 100644
--- a/src/app/features/home/transaction/transaction-routing.module.ts
+++ b/src/app/features/home/activities/activities-routing.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TransactionPage } from './transaction.page';
+import { TransactionPage } from './activities.page';
 
 const routes: Routes = [
   {
@@ -8,11 +8,11 @@ const routes: Routes = [
     component: TransactionPage,
   },
   {
-    path: 'transaction-details',
+    path: 'capture-transaction-details',
     loadChildren: () =>
-      import('./transaction-details/transaction-details.module').then(
-        m => m.TransactionDetailsPageModule
-      ),
+      import(
+        './capture-transaction-details/capture-transaction-details.module'
+      ).then(m => m.TransactionDetailsPageModule),
   },
 ];
 
diff --git a/src/app/features/home/activities/activities.module.ts b/src/app/features/home/activities/activities.module.ts
new file mode 100644
index 000000000..fd2127e22
--- /dev/null
+++ b/src/app/features/home/activities/activities.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { TransactionPageRoutingModule } from './activities-routing.module';
+import { TransactionPage } from './activities.page';
+import { CaptureTransactionsComponent } from './capture-transactions/capture-transactions.component';
+import { NetworkActionOrdersComponent } from './network-action-orders/network-action-orders.component';
+
+@NgModule({
+  imports: [SharedModule, TransactionPageRoutingModule],
+  declarations: [
+    TransactionPage,
+    CaptureTransactionsComponent,
+    NetworkActionOrdersComponent,
+  ],
+})
+export class TransactionPageModule {}
diff --git a/src/app/features/home/activities/activities.page.html b/src/app/features/home/activities/activities.page.html
new file mode 100644
index 000000000..e8f8976da
--- /dev/null
+++ b/src/app/features/home/activities/activities.page.html
@@ -0,0 +1,26 @@
+<mat-toolbar *transloco="let t">
+  <button routerLink=".." routerDirection="back" mat-icon-button>
+    <mat-icon>arrow_back</mat-icon>
+  </button>
+  <span>{{ t('activity') }}</span>
+</mat-toolbar>
+
+<ion-content *transloco="let t">
+  <ion-segment #segment value="networkActionOrders">
+    <ion-segment-button value="transactions">
+      <ion-label>{{ t('captureTransactions') }}</ion-label>
+    </ion-segment-button>
+    <ion-segment-button value="networkActionOrders">
+      <ion-label>{{ t('message.moreActions') }}</ion-label>
+    </ion-segment-button>
+  </ion-segment>
+
+  <div class="page-content">
+    <div *ngIf="segment.value === 'transactions'">
+      <app-capture-transactions></app-capture-transactions>
+    </div>
+    <div *ngIf="segment.value === 'networkActionOrders'">
+      <app-network-action-orders></app-network-action-orders>
+    </div>
+  </div>
+</ion-content>
diff --git a/src/app/features/home/activities/activities.page.scss b/src/app/features/home/activities/activities.page.scss
new file mode 100644
index 000000000..f9aa9a8dc
--- /dev/null
+++ b/src/app/features/home/activities/activities.page.scss
@@ -0,0 +1,5 @@
+mat-toolbar {
+  span {
+    padding-right: 40px;
+  }
+}
diff --git a/src/app/features/home/transaction/transaction.page.spec.ts b/src/app/features/home/activities/activities.page.spec.ts
similarity index 92%
rename from src/app/features/home/transaction/transaction.page.spec.ts
rename to src/app/features/home/activities/activities.page.spec.ts
index 45b46d4a4..b6659ae67 100644
--- a/src/app/features/home/transaction/transaction.page.spec.ts
+++ b/src/app/features/home/activities/activities.page.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../shared/shared-testing.module';
-import { TransactionPage } from './transaction.page';
+import { TransactionPage } from './activities.page';
 
 describe('TransactionPage', () => {
   let component: TransactionPage;
diff --git a/src/app/features/home/activities/activities.page.ts b/src/app/features/home/activities/activities.page.ts
new file mode 100644
index 000000000..caaf4ed4f
--- /dev/null
+++ b/src/app/features/home/activities/activities.page.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { UntilDestroy } from '@ngneat/until-destroy';
+
+@UntilDestroy({ checkProperties: true })
+@Component({
+  selector: 'app-activities',
+  templateUrl: './activities.page.html',
+  styleUrls: ['./activities.page.scss'],
+})
+export class TransactionPage {}
diff --git a/src/app/features/home/transaction/transaction-details/transaction-details-routing.module.ts b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details-routing.module.ts
similarity index 80%
rename from src/app/features/home/transaction/transaction-details/transaction-details-routing.module.ts
rename to src/app/features/home/activities/capture-transaction-details/capture-transaction-details-routing.module.ts
index b662d9605..2dd947340 100644
--- a/src/app/features/home/transaction/transaction-details/transaction-details-routing.module.ts
+++ b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details-routing.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { TransactionDetailsPage } from './transaction-details.page';
+import { TransactionDetailsPage } from './capture-transaction-details.page';
 
 const routes: Routes = [
   {
diff --git a/src/app/features/home/transaction/transaction-details/transaction-details.module.ts b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.module.ts
similarity index 60%
rename from src/app/features/home/transaction/transaction-details/transaction-details.module.ts
rename to src/app/features/home/activities/capture-transaction-details/capture-transaction-details.module.ts
index 4c6812e69..8e56c3e39 100644
--- a/src/app/features/home/transaction/transaction-details/transaction-details.module.ts
+++ b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.module.ts
@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { SharedModule } from '../../../../shared/shared.module';
-import { TransactionDetailsPageRoutingModule } from './transaction-details-routing.module';
-import { TransactionDetailsPage } from './transaction-details.page';
+import { TransactionDetailsPageRoutingModule } from './capture-transaction-details-routing.module';
+import { TransactionDetailsPage } from './capture-transaction-details.page';
 
 @NgModule({
   imports: [SharedModule, TransactionDetailsPageRoutingModule],
diff --git a/src/app/features/home/transaction/transaction-details/transaction-details.page.html b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.html
similarity index 100%
rename from src/app/features/home/transaction/transaction-details/transaction-details.page.html
rename to src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.html
diff --git a/src/app/features/home/transaction/transaction-details/transaction-details.page.scss b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.scss
similarity index 100%
rename from src/app/features/home/transaction/transaction-details/transaction-details.page.scss
rename to src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.scss
diff --git a/src/app/features/home/transaction/transaction-details/transaction-details.page.spec.ts b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.spec.ts
similarity index 90%
rename from src/app/features/home/transaction/transaction-details/transaction-details.page.spec.ts
rename to src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.spec.ts
index dc5d2df63..9468670ff 100644
--- a/src/app/features/home/transaction/transaction-details/transaction-details.page.spec.ts
+++ b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.spec.ts
@@ -1,6 +1,6 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SharedTestingModule } from '../../../../shared/shared-testing.module';
-import { TransactionDetailsPage } from './transaction-details.page';
+import { TransactionDetailsPage } from './capture-transaction-details.page';
 
 describe('TransactionDetailsPage', () => {
   let component: TransactionDetailsPage;
diff --git a/src/app/features/home/transaction/transaction-details/transaction-details.page.ts b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.ts
similarity index 93%
rename from src/app/features/home/transaction/transaction-details/transaction-details.page.ts
rename to src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.ts
index a525da38c..6a225e44d 100644
--- a/src/app/features/home/transaction/transaction-details/transaction-details.page.ts
+++ b/src/app/features/home/activities/capture-transaction-details/capture-transaction-details.page.ts
@@ -11,9 +11,9 @@ import { ErrorService } from '../../../../shared/error/error.service';
 import { isNonNullable } from '../../../../utils/rx-operators/rx-operators';
 @UntilDestroy({ checkProperties: true })
 @Component({
-  selector: 'app-transaction-details',
-  templateUrl: './transaction-details.page.html',
-  styleUrls: ['./transaction-details.page.scss'],
+  selector: 'app-capture-transaction-details',
+  templateUrl: './capture-transaction-details.page.html',
+  styleUrls: ['./capture-transaction-details.page.scss'],
 })
 export class TransactionDetailsPage {
   readonly transaction$ = this.route.paramMap.pipe(
diff --git a/src/app/features/home/transaction/transaction.page.html b/src/app/features/home/activities/capture-transactions/capture-transactions.component.html
similarity index 75%
rename from src/app/features/home/transaction/transaction.page.html
rename to src/app/features/home/activities/capture-transactions/capture-transactions.component.html
index 091166e11..e9dd273bd 100644
--- a/src/app/features/home/transaction/transaction.page.html
+++ b/src/app/features/home/activities/capture-transactions/capture-transactions.component.html
@@ -1,10 +1,3 @@
-<mat-toolbar *transloco="let t">
-  <button routerLink=".." routerDirection="back" mat-icon-button>
-    <mat-icon>arrow_back</mat-icon>
-  </button>
-  <span>{{ t('transaction') }}</span>
-</mat-toolbar>
-
 <div *transloco="let t" class="page-content">
   <mat-list>
     <ng-container
@@ -14,7 +7,7 @@
       "
     >
       <mat-list-item
-        [routerLink]="['transaction-details', { id: transaction.id }]"
+        [routerLink]="['capture-transaction-details', { id: transaction.id }]"
       >
         <img
           decoding="async"
diff --git a/src/app/features/home/activities/capture-transactions/capture-transactions.component.scss b/src/app/features/home/activities/capture-transactions/capture-transactions.component.scss
new file mode 100644
index 000000000..477af9113
--- /dev/null
+++ b/src/app/features/home/activities/capture-transactions/capture-transactions.component.scss
@@ -0,0 +1,50 @@
+mat-list-item {
+  height: initial;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  img[matListAvatar] {
+    border-radius: 4px;
+    width: calc(100vw / 5);
+    height: calc(100vw / 8);
+    max-width: 150px;
+    max-height: 80px;
+  }
+
+  button {
+    flex-shrink: 0;
+  }
+
+  button.received {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-simple);
+    background-color: var(--noir-simple);
+  }
+
+  button.delivered {
+    color: var(--noir-simple);
+    border-color: var(--noir-simple);
+  }
+
+  button.inProgress {
+    color: var(--noir-secondary-dark);
+    border-color: var(--noir-secondary-dark);
+  }
+
+  button.waitingToBeAccepted {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-secondary-dark);
+    background-color: var(--noir-secondary-dark);
+  }
+
+  button.returned {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-warn);
+    background-color: var(--noir-warn);
+  }
+
+  button.missed {
+    color: var(--noir-warn);
+    border-color: var(--noir-warn);
+  }
+}
diff --git a/src/app/features/home/activities/capture-transactions/capture-transactions.component.spec.ts b/src/app/features/home/activities/capture-transactions/capture-transactions.component.spec.ts
new file mode 100644
index 000000000..a41943ba6
--- /dev/null
+++ b/src/app/features/home/activities/capture-transactions/capture-transactions.component.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { SharedTestingModule } from '../../../../shared/shared-testing.module';
+import { CaptureTransactionsComponent } from './capture-transactions.component';
+
+describe('CaptureTransactionsComponent', () => {
+  let component: CaptureTransactionsComponent;
+  let fixture: ComponentFixture<CaptureTransactionsComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [CaptureTransactionsComponent],
+        imports: [IonicModule.forRoot(), SharedTestingModule],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(CaptureTransactionsComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/home/transaction/transaction.page.ts b/src/app/features/home/activities/capture-transactions/capture-transactions.component.ts
similarity index 57%
rename from src/app/features/home/transaction/transaction.page.ts
rename to src/app/features/home/activities/capture-transactions/capture-transactions.component.ts
index c59b68fb0..d2ca80c27 100644
--- a/src/app/features/home/transaction/transaction.page.ts
+++ b/src/app/features/home/activities/capture-transactions/capture-transactions.component.ts
@@ -1,18 +1,16 @@
 import { Component } from '@angular/core';
-import { UntilDestroy } from '@ngneat/until-destroy';
 import { catchError, map, shareReplay } from 'rxjs/operators';
-import { DiaBackendAuthService } from '../../../shared/dia-backend/auth/dia-backend-auth.service';
-import { DiaBackendTransactionRepository } from '../../../shared/dia-backend/transaction/dia-backend-transaction-repository.service';
-import { ErrorService } from '../../../shared/error/error.service';
-import { getStatus } from './transaction-details/transaction-details.page';
+import { DiaBackendAuthService } from '../../../../shared/dia-backend/auth/dia-backend-auth.service';
+import { DiaBackendTransactionRepository } from '../../../../shared/dia-backend/transaction/dia-backend-transaction-repository.service';
+import { ErrorService } from '../../../../shared/error/error.service';
+import { getStatus } from '../capture-transaction-details/capture-transaction-details.page';
 
-@UntilDestroy({ checkProperties: true })
 @Component({
-  selector: 'app-transaction',
-  templateUrl: './transaction.page.html',
-  styleUrls: ['./transaction.page.scss'],
+  selector: 'app-capture-transactions',
+  templateUrl: './capture-transactions.component.html',
+  styleUrls: ['./capture-transactions.component.scss'],
 })
-export class TransactionPage {
+export class CaptureTransactionsComponent {
   readonly transactionsWithStatus$ =
     this.diaBackendTransactionRepository.all$.pipe(
       catchError((err: unknown) => this.errorService.toastError$(err)),
diff --git a/src/app/features/home/activities/network-action-orders/network-action-orders.component.html b/src/app/features/home/activities/network-action-orders/network-action-orders.component.html
new file mode 100644
index 000000000..7a32328b9
--- /dev/null
+++ b/src/app/features/home/activities/network-action-orders/network-action-orders.component.html
@@ -0,0 +1,28 @@
+<mat-list *transloco="let t">
+  <ng-container
+    *ngFor="
+      let order of networkActionOrders$ | ngrxPush;
+      last as isLast;
+      trackBy: trackNetworkActionOrderHistoryRecords
+    "
+  >
+    <mat-list-item>
+      <img
+        decoding="async"
+        loading="lazy"
+        matListAvatar
+        [src]="
+          (order.assetThumbnailUrl$ | ngrxPush) ||
+          '/assets/images/image-placeholder.png'
+        "
+      />
+      <div mat-line>{{ order.network_app_name_text }}</div>
+      <div mat-line>{{ order.asset_id_text }}</div>
+      <div mat-line>{{ order['Created Date'] | date: 'short' }}</div>
+      <button [class]="order.status_text" mat-stroked-button disableRipple>
+        {{ t('networkActionOrderState.' + order.status_text) }}
+      </button>
+    </mat-list-item>
+    <mat-divider *ngIf="!isLast"></mat-divider>
+  </ng-container>
+</mat-list>
diff --git a/src/app/features/home/activities/network-action-orders/network-action-orders.component.scss b/src/app/features/home/activities/network-action-orders/network-action-orders.component.scss
new file mode 100644
index 000000000..f8fd79252
--- /dev/null
+++ b/src/app/features/home/activities/network-action-orders/network-action-orders.component.scss
@@ -0,0 +1,42 @@
+mat-list-item {
+  height: initial;
+  padding-top: 16px;
+  padding-bottom: 16px;
+
+  img[matListAvatar] {
+    border-radius: 4px;
+    width: calc(100vw / 5);
+    height: calc(100vw / 8);
+    max-width: 150px;
+    max-height: 80px;
+  }
+
+  button {
+    flex-shrink: 0;
+    min-width: 25%;
+  }
+
+  button.completed {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-simple);
+    background-color: var(--noir-simple);
+  }
+
+  button.paid {
+    color: var(--noir-secondary-dark);
+    border-color: var(--noir-secondary-dark);
+  }
+
+  button.submitted {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-secondary-dark);
+    background-color: var(--noir-secondary-dark);
+  }
+
+  button.failed,
+  button.payment_failed {
+    color: var(--ion-color-dark-contrast);
+    border-color: var(--noir-warn);
+    background-color: var(--noir-warn);
+  }
+}
diff --git a/src/app/features/home/activities/network-action-orders/network-action-orders.component.spec.ts b/src/app/features/home/activities/network-action-orders/network-action-orders.component.spec.ts
new file mode 100644
index 000000000..82f350ebf
--- /dev/null
+++ b/src/app/features/home/activities/network-action-orders/network-action-orders.component.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+import { SharedTestingModule } from '../../../../shared/shared-testing.module';
+import { NetworkActionOrdersComponent } from './network-action-orders.component';
+
+describe('NetworkActionOrdersComponent', () => {
+  let component: NetworkActionOrdersComponent;
+  let fixture: ComponentFixture<NetworkActionOrdersComponent>;
+
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [NetworkActionOrdersComponent],
+        imports: [IonicModule.forRoot(), SharedTestingModule],
+      }).compileComponents();
+
+      fixture = TestBed.createComponent(NetworkActionOrdersComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    })
+  );
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/features/home/activities/network-action-orders/network-action-orders.component.ts b/src/app/features/home/activities/network-action-orders/network-action-orders.component.ts
new file mode 100644
index 000000000..5028e84b6
--- /dev/null
+++ b/src/app/features/home/activities/network-action-orders/network-action-orders.component.ts
@@ -0,0 +1,77 @@
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { combineLatest, EMPTY } from 'rxjs';
+import { first, map, pluck } from 'rxjs/operators';
+import {
+  ActionsService,
+  BubbleOrderHistoryRecord,
+} from '../../../../shared/actions/service/actions.service';
+import { DiaBackendAssetRepository } from '../../../../shared/dia-backend/asset/dia-backend-asset-repository.service';
+import { DiaBackendTransactionRepository } from '../../../../shared/dia-backend/transaction/dia-backend-transaction-repository.service';
+import { Proof } from '../../../../shared/repositories/proof/proof';
+import { ProofRepository } from '../../../../shared/repositories/proof/proof-repository.service';
+@UntilDestroy({ checkProperties: true })
+@Component({
+  selector: 'app-network-action-orders',
+  templateUrl: './network-action-orders.component.html',
+  styleUrls: ['./network-action-orders.component.scss'],
+})
+export class NetworkActionOrdersComponent {
+  readonly networkActionOrders$ = combineLatest([
+    this.proofRepository.all$,
+    this.actionsService.getOrdersHistory$(),
+  ]).pipe(
+    first(),
+    map(([proofs, orders]) => {
+      orders.map(order => {
+        order.assetThumbnailUrl$ = this.fetchThumbnailUrl$(proofs, order);
+      });
+      return orders;
+    }),
+    untilDestroyed(this)
+  );
+
+  constructor(
+    private readonly proofRepository: ProofRepository,
+    private readonly actionsService: ActionsService,
+    private readonly sanitizer: DomSanitizer,
+    private readonly diaBackendTransactionRepository: DiaBackendTransactionRepository,
+    private readonly diaBackendAssetRepository: DiaBackendAssetRepository
+  ) {}
+
+  fetchThumbnailUrl$(proofs: Proof[], order: BubbleOrderHistoryRecord) {
+    // Since Web 3.0 Archive is actually a Capture transaction, grab the thumbnail from
+    // `/transactions/{id}/` endpoint.
+    if (order.network_app_name_text.includes('Web 3.0 Archive')) {
+      if (order.result_tx_text)
+        return this.diaBackendTransactionRepository
+          .fetchById$(order.result_tx_text)
+          .pipe(pluck('asset'), pluck('asset_file_thumbnail'));
+      return EMPTY;
+    }
+
+    const proof = proofs.find(
+      proof => proof.diaBackendAssetId === order.asset_id_text
+    );
+
+    return proof
+      ? proof.thumbnailUrl$.pipe(
+          map(url => {
+            if (url) return this.sanitizer.bypassSecurityTrustUrl(url);
+            return EMPTY;
+          })
+        )
+      : this.diaBackendAssetRepository
+          .fetchById$(order.asset_id_text)
+          .pipe(pluck('asset_file_thumbnail'));
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  trackNetworkActionOrderHistoryRecords(
+    _: number,
+    item: BubbleOrderHistoryRecord
+  ) {
+    return item._id;
+  }
+}
diff --git a/src/app/features/home/details/actions/actions.page.ts b/src/app/features/home/details/actions/actions.page.ts
index 874d9a798..f55ddad99 100644
--- a/src/app/features/home/details/actions/actions.page.ts
+++ b/src/app/features/home/details/actions/actions.page.ts
@@ -16,7 +16,7 @@ import { BlockingActionService } from '../../../../shared/blocking-action/blocki
 import { DiaBackendAuthService } from '../../../../shared/dia-backend/auth/dia-backend-auth.service';
 import {
   DiaBackendStoreService,
-  NetworkAppOrderStatus,
+  NetworkAppOrder,
 } from '../../../../shared/dia-backend/store/dia-backend-store.service';
 import { ErrorService } from '../../../../shared/error/error.service';
 import { OrderDetailDialogComponent } from '../../../../shared/order-detail-dialog/order-detail-dialog.component';
@@ -80,7 +80,7 @@ export class ActionsPage {
     );
   }
 
-  openOrderDialog$(orderStatus: NetworkAppOrderStatus) {
+  openOrderDialog$(orderStatus: NetworkAppOrder) {
     const dialogRef = this.dialog.open<OrderDetailDialogComponent>(
       OrderDetailDialogComponent,
       {
@@ -120,7 +120,21 @@ export class ActionsPage {
     );
   }
 
+  createOrderHistory$(networkAppOrder: NetworkAppOrder) {
+    return this.id$.pipe(
+      first(),
+      isNonNullable(),
+      concatMap(cid =>
+        this.actionsService.createOrderHistory$(networkAppOrder, cid)
+      ),
+      catchError((err: unknown) => {
+        return this.errorService.toastError$(err);
+      })
+    );
+  }
+
   doAction(action: Action) {
+    let networkAppOrder: NetworkAppOrder;
     this.openActionDialog$(action)
       .pipe(
         concatMap(createOrderInput =>
@@ -131,7 +145,11 @@ export class ActionsPage {
             )
           )
         ),
-        concatMap(orderStatus => this.openOrderDialog$(orderStatus)),
+        concatMap(orderStatus => {
+          networkAppOrder = orderStatus;
+          return this.openOrderDialog$(orderStatus);
+        }),
+        tap(() => this.createOrderHistory$(networkAppOrder).subscribe()),
         concatMap(orderId =>
           this.blockingActionService.run$(this.confirmOrder$(orderId))
         ),
diff --git a/src/app/features/home/home-routing.module.ts b/src/app/features/home/home-routing.module.ts
index 185785553..fd87a9764 100644
--- a/src/app/features/home/home-routing.module.ts
+++ b/src/app/features/home/home-routing.module.ts
@@ -13,9 +13,9 @@ const routes: Routes = [
       import('./inbox/inbox.module').then(m => m.InboxPageModule),
   },
   {
-    path: 'transaction',
+    path: 'activities',
     loadChildren: () =>
-      import('./transaction/transaction.module').then(
+      import('./activities/activities.module').then(
         m => m.TransactionPageModule
       ),
   },
diff --git a/src/app/features/home/home.page.html b/src/app/features/home/home.page.html
index a7cdee91a..16580d11b 100644
--- a/src/app/features/home/home.page.html
+++ b/src/app/features/home/home.page.html
@@ -46,7 +46,7 @@
           <mat-icon>menu</mat-icon>
         </button>
         <span class="toolbar-spacer"></span>
-        <button routerLink="transaction" mat-icon-button>
+        <button routerLink="activities" mat-icon-button>
           <mat-icon>history</mat-icon>
         </button>
         <button routerLink="inbox" mat-icon-button>
diff --git a/src/app/features/home/transaction/transaction.module.ts b/src/app/features/home/transaction/transaction.module.ts
deleted file mode 100644
index ca0b8d4f8..000000000
--- a/src/app/features/home/transaction/transaction.module.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../../../shared/shared.module';
-import { TransactionPageRoutingModule } from './transaction-routing.module';
-import { TransactionPage } from './transaction.page';
-
-@NgModule({
-  imports: [SharedModule, TransactionPageRoutingModule],
-  declarations: [TransactionPage],
-})
-export class TransactionPageModule {}
diff --git a/src/app/features/home/transaction/transaction.page.scss b/src/app/features/home/transaction/transaction.page.scss
deleted file mode 100644
index 635dff816..000000000
--- a/src/app/features/home/transaction/transaction.page.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-mat-toolbar {
-  span {
-    padding-right: 40px;
-  }
-}
-
-.page-content {
-  mat-spinner {
-    margin: 36px auto 0;
-  }
-
-  mat-list-item {
-    height: initial;
-    padding-top: 16px;
-    padding-bottom: 16px;
-
-    img[matListAvatar] {
-      border-radius: 4px;
-      width: calc(100vw / 5);
-      height: calc(100vw / 8);
-      max-width: 150px;
-      max-height: 80px;
-    }
-
-    button {
-      flex-shrink: 0;
-    }
-
-    button.received {
-      color: var(--ion-color-dark-contrast);
-      border-color: var(--noir-simple);
-      background-color: var(--noir-simple);
-    }
-
-    button.delivered {
-      color: var(--noir-simple);
-      border-color: var(--noir-simple);
-    }
-
-    button.inProgress {
-      color: var(--noir-secondary-dark);
-      border-color: var(--noir-secondary-dark);
-    }
-
-    button.waitingToBeAccepted {
-      color: var(--ion-color-dark-contrast);
-      border-color: var(--noir-secondary-dark);
-      background-color: var(--noir-secondary-dark);
-    }
-
-    button.returned {
-      color: var(--ion-color-dark-contrast);
-      border-color: var(--noir-warn);
-      background-color: var(--noir-warn);
-    }
-
-    button.missed {
-      color: var(--noir-warn);
-      border-color: var(--noir-warn);
-    }
-  }
-}
diff --git a/src/app/shared/actions/service/actions.service.ts b/src/app/shared/actions/service/actions.service.ts
index c50477fc1..4c75b95f4 100644
--- a/src/app/shared/actions/service/actions.service.ts
+++ b/src/app/shared/actions/service/actions.service.ts
@@ -1,14 +1,20 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { defer, forkJoin } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { SafeUrl } from '@angular/platform-browser';
+import { defer, forkJoin, Observable } from 'rxjs';
+import { concatMap, map } from 'rxjs/operators';
+import { WebCryptoApiSignatureProvider } from '../../collector/signature/web-crypto-api-signature-provider/web-crypto-api-signature-provider.service';
 import { BUBBLE_DB_URL } from '../../dia-backend/secret';
+import { NetworkAppOrder } from '../../dia-backend/store/dia-backend-store.service';
 
 @Injectable({
   providedIn: 'root',
 })
 export class ActionsService {
-  constructor(private readonly httpClient: HttpClient) {}
+  constructor(
+    private readonly httpClient: HttpClient,
+    private readonly webCryptoApiSignatureProvider: WebCryptoApiSignatureProvider
+  ) {}
 
   getActions$() {
     return defer(() =>
@@ -30,6 +36,54 @@ export class ActionsService {
     );
   }
 
+  createOrderHistory$(networkAppOrder: NetworkAppOrder, cid: string) {
+    return defer(() =>
+      this.webCryptoApiSignatureProvider.publicKey$.pipe(
+        concatMap(publicKey =>
+          this.httpClient.post<BubbleCreateNewThingResponse>(
+            `${BUBBLE_DB_URL}/api/1.1/obj/order`,
+            {
+              asset_id_text: cid,
+              gas_fee_number: Number(networkAppOrder.fee),
+              network_app_id_text: networkAppOrder.network_app_id,
+              network_app_name_text: networkAppOrder.network_app_name,
+              order_id_text: networkAppOrder.id,
+              price_number: Number(networkAppOrder.price),
+              status_text: OrderStatus.Submitted,
+              total_cost_number: Number(networkAppOrder.total_cost),
+              uid_text: publicKey,
+            }
+          )
+        )
+      )
+    );
+  }
+
+  /*
+  By default, bubble data api GET requests return the first 100 items in the list. I think this 
+  should be sufficient for most cases. Will support paging to fetch more items in the future.
+  */
+  getOrdersHistory$() {
+    return defer(() =>
+      this.webCryptoApiSignatureProvider.publicKey$.pipe(
+        concatMap(publicKey =>
+          this.httpClient
+            .get<GetActionsResponse<BubbleOrderHistoryRecord>>(
+              `${BUBBLE_DB_URL}/api/1.1/obj/order`,
+              {
+                params: {
+                  constraints: `[{"key": "uid", "constraint_type": "equals", "value": "${publicKey}" } ]`,
+                  sort_field: 'Created Date',
+                  descending: true,
+                },
+              }
+            )
+            .pipe(map(response => response.response.results))
+        )
+      )
+    );
+  }
+
   send$(url: string, body: any) {
     return this.httpClient.post(url, body);
   }
@@ -69,3 +123,45 @@ export interface GetActionsResponse<T> {
 export interface GetParamResponse {
   readonly response: Param;
 }
+
+export interface BubbleCreateNewThingResponse {
+  id: string;
+  status: string;
+}
+
+export interface BubbleOrderHistoryRecord {
+  asset_id_text: string;
+  gas_fee_number: number;
+  network_app_id_text: string;
+  network_app_name_text: string;
+  order_id_text: string;
+  price_number: number;
+  status_text:
+    | OrderStatus.Submitted
+    | OrderStatus.Paid
+    | OrderStatus.PaymentFailed
+    | OrderStatus.Completed
+    | OrderStatus.Failed;
+  total_cost_number: number;
+  uid_text: string;
+  'Created Date': string;
+  'Created By': string;
+  'Modified Date': string;
+  blockchain_name_text: string;
+  cost_token_ticker_text: string;
+  network_action_cost_number: number;
+  result_tx_text: string;
+  result_url_text: string;
+  _id: string;
+  // `assetThumbnailUrl$` field is used only when displaying asset thumbnail at
+  // /home/activities
+  assetThumbnailUrl$?: Observable<SafeUrl>;
+}
+
+export enum OrderStatus {
+  Submitted = 'submitted',
+  Paid = 'paid',
+  PaymentFailed = 'payment_failed',
+  Completed = 'completed',
+  Failed = 'failed',
+}
diff --git a/src/app/shared/dia-backend/store/dia-backend-store.service.ts b/src/app/shared/dia-backend/store/dia-backend-store.service.ts
index 9a13ab012..a8fd730e1 100644
--- a/src/app/shared/dia-backend/store/dia-backend-store.service.ts
+++ b/src/app/shared/dia-backend/store/dia-backend-store.service.ts
@@ -17,7 +17,7 @@ export class DiaBackendStoreService {
   createNetworkAppOrder(networkApp: string, actionArgs: any) {
     return defer(() => this.authService.getAuthHeadersWithApiKey()).pipe(
       concatMap(headers => {
-        return this.httpClient.post<NetworkAppOrderStatus>(
+        return this.httpClient.post<NetworkAppOrder>(
           `${BASE_URL}/api/v3/store/network-app-orders/`,
           {
             network_app: networkApp,
@@ -32,7 +32,7 @@ export class DiaBackendStoreService {
   confirmNetworkAppOrder(id: string) {
     return defer(() => this.authService.getAuthHeadersWithApiKey()).pipe(
       concatMap(headers => {
-        return this.httpClient.post<NetworkAppOrderStatus>(
+        return this.httpClient.post<NetworkAppOrder>(
           `${BASE_URL}/api/v3/store/network-app-orders/${id}/confirm/`,
           {},
           { headers }
@@ -42,10 +42,11 @@ export class DiaBackendStoreService {
   }
 }
 
-export interface NetworkAppOrderStatus {
+export interface NetworkAppOrder {
   id: string;
   status: 'completed' | 'canceled' | 'pending';
-  network_app: string;
+  network_app_id: string;
+  network_app_name: string;
   action: string;
   action_args: Record<string, unknown>;
   price: string;
diff --git a/src/app/shared/order-detail-dialog/order-detail-dialog.component.ts b/src/app/shared/order-detail-dialog/order-detail-dialog.component.ts
index 900492b4b..2039081e2 100644
--- a/src/app/shared/order-detail-dialog/order-detail-dialog.component.ts
+++ b/src/app/shared/order-detail-dialog/order-detail-dialog.component.ts
@@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NetworkAppOrderStatus } from '../dia-backend/store/dia-backend-store.service';
+import { NetworkAppOrder } from '../dia-backend/store/dia-backend-store.service';
 
 @Component({
   selector: 'app-order-detail-dialog',
@@ -8,11 +8,11 @@ import { NetworkAppOrderStatus } from '../dia-backend/store/dia-backend-store.se
   styleUrls: ['./order-detail-dialog.component.scss'],
 })
 export class OrderDetailDialogComponent {
-  readonly orderStatus: NetworkAppOrderStatus;
+  readonly orderStatus: NetworkAppOrder;
 
   constructor(
     private readonly dialogRef: MatDialogRef<OrderDetailDialogComponent>,
-    @Inject(MAT_DIALOG_DATA) public data: NetworkAppOrderStatus
+    @Inject(MAT_DIALOG_DATA) public data: NetworkAppOrder
   ) {
     this.orderStatus = data;
   }
diff --git a/src/assets/i18n/en-us.json b/src/assets/i18n/en-us.json
index 13cc3d20d..6cc1a24af 100644
--- a/src/assets/i18n/en-us.json
+++ b/src/assets/i18n/en-us.json
@@ -66,7 +66,8 @@
   "inbox": "Inbox",
   "ignore": "Ignore",
   "accept": "Accept",
-  "transaction": "Activity",
+  "activity": "Activity",
+  "captureTransactions": "Capture Transactions",
   "numTransactionHistory": "View transaction history",
   "transactionDetails": "Activity Details",
   "sentFrom": "Sent from",
@@ -215,6 +216,13 @@
     "inProgress": "In Progress",
     "waitingToBeAccepted": "In Progress"
   },
+  "networkActionOrderState": {
+    "submitted": "Submitted",
+    "paid": "Paid",
+    "payment_failed": "Payment Failed",
+    "completed": "Completed",
+    "failed": "Failed"
+  },
   "payment": {
     "confirmPayment": "Your Order",
     "price": "Fee",
diff --git a/src/assets/i18n/zh-tw.json b/src/assets/i18n/zh-tw.json
index 7524ef216..950a025f3 100644
--- a/src/assets/i18n/zh-tw.json
+++ b/src/assets/i18n/zh-tw.json
@@ -66,7 +66,8 @@
   "inbox": "收件匣",
   "ignore": "忽略",
   "accept": "接收",
-  "transaction": "活動紀錄",
+  "activity": "活動紀錄",
+  "captureTransactions": "Capture 交易",
   "numTransactionHistory": "查詢交易紀錄",
   "transactionDetails": "活動資訊",
   "sentFrom": "發送自",
@@ -215,6 +216,13 @@
     "inProgress": "等待中",
     "waitingToBeAccepted": "等待中"
   },
+  "networkActionOrderState": {
+    "submitted": "送出",
+    "paid": "繳費成功",
+    "payment_failed": "繳費失敗",
+    "completed": "完成",
+    "failed": "失敗"
+  },
   "payment": {
     "confirmPayment": "你的訂單",
     "price": "費用",
diff --git a/src/assets/images/image-placeholder.png b/src/assets/images/image-placeholder.png
new file mode 100644
index 000000000..02c3925a1
Binary files /dev/null and b/src/assets/images/image-placeholder.png differ