diff --git a/projects/requisition-management/src/app/services/requisition-management-breadcrumb/requisition-management-breadcrumb.service.ts b/projects/requisition-management/src/app/services/requisition-management-breadcrumb/requisition-management-breadcrumb.service.ts
index ee040e9298..72f914b47b 100644
--- a/projects/requisition-management/src/app/services/requisition-management-breadcrumb/requisition-management-breadcrumb.service.ts
+++ b/projects/requisition-management/src/app/services/requisition-management-breadcrumb/requisition-management-breadcrumb.service.ts
@@ -4,10 +4,10 @@ import { TranslateService } from '@ngx-translate/core';
 import { EMPTY, Observable, of } from 'rxjs';
 import { map, switchMap, withLatestFrom } from 'rxjs/operators';
 
+import { AccountFacade } from 'ish-core/facades/account.facade';
 import { AppFacade } from 'ish-core/facades/app.facade';
 import { BreadcrumbItem } from 'ish-core/models/breadcrumb-item/breadcrumb-item.interface';
 import { selectRouteParam } from 'ish-core/store/core/router';
-import { log } from 'ish-core/utils/dev/operators';
 import { whenFalsy, whenTruthy } from 'ish-core/utils/operators';
 
 import { RequisitionManagementFacade } from '../../facades/requisition-management.facade';
@@ -18,6 +18,7 @@ export class RequisitionManagementBreadcrumbService {
     private appFacade: AppFacade,
     private store: Store,
     private requisitionManagementFacade: RequisitionManagementFacade,
+    private accountFacade: AccountFacade,
     private translateService: TranslateService
   ) {}
 
@@ -25,7 +26,6 @@ export class RequisitionManagementBreadcrumbService {
     return this.appFacade.routingInProgress$.pipe(
       whenFalsy(),
       withLatestFrom(this.appFacade.path$.pipe(whenTruthy())),
-      log('path'),
       switchMap(([, path]) => {
         if (path.endsWith('/buyer')) {
           return of([{ key: 'account.requisitions.requisitions' }]);
@@ -66,6 +66,21 @@ export class RequisitionManagementBreadcrumbService {
             )
           );
         }
+        if (path.includes('/recurring-orders/')) {
+          return this.accountFacade.selectedRecurringOrder$.pipe(
+            whenTruthy(),
+            withLatestFrom(this.translateService.get('account.recurring_order.details.breadcrumb')),
+            map(([recurringOrder, translation]) => [
+              {
+                key: 'account.recurring_orders.breadcrumb',
+                link: [`/account/recurring-orders`],
+              },
+              {
+                text: `${translation} - ${recurringOrder.number}`,
+              },
+            ])
+          );
+        }
         return EMPTY;
       })
     );
diff --git a/src/app/core/models/recurring-order/recurring-order.interface.ts b/src/app/core/models/recurring-order/recurring-order.interface.ts
index 985b575a82..1a6105d6ba 100644
--- a/src/app/core/models/recurring-order/recurring-order.interface.ts
+++ b/src/app/core/models/recurring-order/recurring-order.interface.ts
@@ -1,6 +1,8 @@
 import { AddressData } from 'ish-core/models/address/address.interface';
 import { Link } from 'ish-core/models/link/link.model';
+import { OrderLineItem } from 'ish-core/models/order/order.model';
 import { PriceData } from 'ish-core/models/price/price.interface';
+import { ShippingMethod } from 'ish-core/models/shipping-method/shipping-method.model';
 import { UserData } from 'ish-core/models/user/user.interface';
 
 export interface RecurringOrderData extends Omit<RecurringOrderLinkData, 'type' | 'link' | 'totalNet' | 'totalGross'> {
@@ -11,7 +13,7 @@ export interface RecurringOrderData extends Omit<RecurringOrderLinkData, 'type'
   totals: RecurringOrderTotalsData;
 
   invoiceToAddress?: AddressData;
-  shippingBuckets?: undefined;
+
   payments?: undefined;
 }
 
@@ -31,6 +33,9 @@ export interface RecurringOrderLinkData {
   lastOrderDate?: number;
   nextOrderDate?: number;
 
+  invoiceToAddress?: AddressData;
+  shippingBuckets?: [{ shipToAddress: AddressData; shippingMethod: ShippingMethod; lineItems: OrderLineItem[] }];
+
   buyer: UserData;
   itemCount: number;
   totalNet: PriceData;
diff --git a/src/app/core/models/recurring-order/recurring-order.mapper.ts b/src/app/core/models/recurring-order/recurring-order.mapper.ts
index e38e4e7360..b7006e35dd 100644
--- a/src/app/core/models/recurring-order/recurring-order.mapper.ts
+++ b/src/app/core/models/recurring-order/recurring-order.mapper.ts
@@ -43,7 +43,13 @@ export class RecurringOrderMapper {
       nextOrderDate: data.nextOrderDate,
       orderCount: detailData ? data.orderCount : undefined,
 
-      buyer: UserMapper.fromData(data.buyer),
+      invoiceToAddress: data.invoiceToAddress,
+      commonShipToAddress: data.shippingBuckets?.[0]?.shipToAddress,
+      commonShippingMethod: data.shippingBuckets?.[0]?.shippingMethod,
+
+      user: UserMapper.fromData(data.buyer),
+
+      lineItems: data.shippingBuckets?.[0]?.lineItems,
 
       totals: {
         total: detailData
diff --git a/src/app/core/models/recurring-order/recurring-order.model.ts b/src/app/core/models/recurring-order/recurring-order.model.ts
index b78258f5a3..b3318f803e 100644
--- a/src/app/core/models/recurring-order/recurring-order.model.ts
+++ b/src/app/core/models/recurring-order/recurring-order.model.ts
@@ -18,7 +18,7 @@ export interface RecurringOrder extends OrderBasket {
   nextOrderDate?: number;
   orderCount?: number;
 
-  buyer: User;
+  user: User;
 
   totals: BasketTotal;
 }
diff --git a/src/app/pages/account-recurring-order/account-recurring-order-page.component.html b/src/app/pages/account-recurring-order/account-recurring-order-page.component.html
index 961bce5e86..e23d27c3e5 100644
--- a/src/app/pages/account-recurring-order/account-recurring-order-page.component.html
+++ b/src/app/pages/account-recurring-order/account-recurring-order-page.component.html
@@ -1,3 +1,145 @@
-<h1>Recurring Order Details</h1>
+<h1>{{ 'account.recurring_order.heading' | translate }}</h1>
+
+<p>
+  {{ 'account.recurring_order.subtitle' | translate }}
+</p>
+
+<div *ngIf="recurringOrder$ | async as recurringOrder" class="section" data-testing-id="rec-order-summary-info">
+  <!-- Order Summary Info-->
+  <div class="row">
+    <div class="col-12 col-sm-6">
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.order_number.label' | translate }}</dt>
+        <dd class="col-6" data-testing-id="rec-order-number">{{ recurringOrder.number }}</dd>
+      </dl>
+
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.requisition_number.label' | translate }}</dt>
+        <dd class="col-6">{{ recurringOrder.number }}</dd>
+      </dl>
+
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.creation_date.label' | translate }}</dt>
+        <dd class="col-6">{{ recurringOrder.creationDate | ishDate }}</dd>
+      </dl>
+
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.last_order_date.label' | translate }}</dt>
+        <dd class="col-6">
+          {{ recurringOrder.lastOrderDate ? (recurringOrder.lastOrderDate | ishDate) : '-' }}
+        </dd>
+      </dl>
+
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.next_order_date.label' | translate }}</dt>
+        <dd class="col-6">
+          {{ recurringOrder.nextOrderDate ? (recurringOrder.nextOrderDate | ishDate) : '-' }}
+        </dd>
+      </dl>
+
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.status.label' | translate }}</dt>
+        <dd class="col-6">
+          <span *ngIf="recurringOrder.expired; else switch">{{ 'account.recurring_order.details.expired.text' }}</span>
+          <ng-template #switch
+            ><ish-switch
+              id="{{ recurringOrder.id }}"
+              [active]="recurringOrder.active"
+              (switchActiveStatus)="switchActiveStatus($event)"
+          /></ng-template>
+        </dd>
+      </dl>
+    </div>
+    <div class="col-12 col-sm-6">
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.order_count.label' | translate }}</dt>
+        <dd class="col-6">{{ recurringOrder.orderCount }}</dd>
+      </dl>
+
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.last_placed_orders.label' | translate }}</dt>
+        <dd class="col-6"></dd>
+      </dl>
+    </div>
+  </div>
+
+  <div class="row d-flex">
+    <!-- Buyer-->
+    <ish-info-box heading="account.recurring_order.details.buyer_info.heading" class="infobox-wrapper col-md-6">
+      <ish-basket-buyer [object]="recurringOrder" />
+    </ish-info-box>
+    <!-- Additional Information -->
+    <ish-info-box heading="account.recurring_order.details.additional_info.heading" class="infobox-wrapper col-md-6">
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.cost_center.label' | translate }}</dt>
+        <dd class="col-6">{{ recurringOrder.costCenter }}</dd>
+      </dl>
+      <dl class="row dl-horizontal dl-separator mb-0">
+        <dt class="col-6">{{ 'account.recurring_order.details.project_number.label' | translate }}</dt>
+        <dd class="col-6"></dd>
+      </dl>
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.basket_number.label' | translate }}</dt>
+        <dd class="col-6"></dd>
+      </dl>
+      <dl class="row dl-horizontal dl-separator mb-0">
+        <dt class="col-6">{{ 'account.recurring_order.details.order_frequency.label' | translate }}</dt>
+        <dd class="col-6">{{ recurringOrder.recurrence.interval | ishFrequency }}</dd>
+      </dl>
+      <dl class="row dl-horizontal dl-separator mb-0">
+        <dt class="col-6">{{ 'account.recurring_order.details.start_date.label' | translate }}</dt>
+        <dd class="col-6">
+          {{ recurringOrder.recurrence.startDate }}
+        </dd>
+      </dl>
+      <dl class="row dl-horizontal dl-separator">
+        <dt class="col-6">{{ 'account.recurring_order.details.end_date.label' | translate }}</dt>
+        <dd class="col-6">{{ recurringOrder.lastOrderDate ? (recurringOrder.lastOrderDate | ishDate) : '-' }}</dd>
+      </dl>
+    </ish-info-box>
+  </div>
+
+  <div class="row d-flex">
+    <!-- Invoice Address -->
+    <ish-info-box heading="account.recurring_order.details.billing_address.heading" class="infobox-wrapper col-md-6">
+      <ish-address [address]="recurringOrder.invoiceToAddress" />
+    </ish-info-box>
+    <!-- Shipping Address -->
+    <ish-info-box heading="account.recurring_order.details.shipping_address.heading" class="infobox-wrapper col-md-6">
+      <ish-address [address]="recurringOrder.commonShipToAddress" />
+    </ish-info-box>
+  </div>
+
+  <div class="row d-flex">
+    <!-- Shipping Method -->
+    <ish-info-box heading="account.recurring_order.details.shipping_method.heading" class="infobox-wrapper col-md-6">
+      <ish-basket-shipping-method [data]="recurringOrder" />
+    </ish-info-box>
+    <!-- Payment -->
+    <ish-info-box heading="account.recurring_order.details.payment_method.heading" class="infobox-wrapper col-md-6">
+      <ng-container *ngIf="recurringOrder.payment">
+        <div class="float-right">
+          <p class="badge badge-info">{{ recurringOrder.payment.status }}</p>
+        </div>
+        <p>
+          {{ recurringOrder.payment.displayName }}<br />{{ recurringOrder.payment.paymentInstrument.accountIdentifier }}
+          <ng-container
+            *ngIf="!recurringOrder.payment.displayName && !recurringOrder.payment.paymentInstrument.accountIdentifier"
+          >
+            {{ recurringOrder.payment.paymentInstrument }}
+          </ng-container>
+        </p>
+      </ng-container>
+    </ish-info-box>
+  </div>
+
+  <!-- Line Items
+  <ish-line-item-list
+    *ngIf="recurringOrder.lineItems?.length > 0"
+    [lineItems]="recurringOrder.lineItems"
+    [editable]="false"
+    lineItemViewType="simple"
+  />-->
+</div>
 
 <pre *ngIf="recurringOrder$ | async as recurringOrder">{{ recurringOrder | json }}</pre>
diff --git a/src/app/pages/account-recurring-order/account-recurring-order-page.component.ts b/src/app/pages/account-recurring-order/account-recurring-order-page.component.ts
index f43e9af1d8..f7d8664730 100644
--- a/src/app/pages/account-recurring-order/account-recurring-order-page.component.ts
+++ b/src/app/pages/account-recurring-order/account-recurring-order-page.component.ts
@@ -17,4 +17,8 @@ export class AccountRecurringOrderPageComponent implements OnInit {
   ngOnInit() {
     this.recurringOrder$ = this.accountFacade.selectedRecurringOrder$;
   }
+
+  switchActiveStatus(recurringOrder: { id: string; active: boolean }) {
+    this.accountFacade.switchActiveStatusRecurringOrder(recurringOrder.id, recurringOrder.active);
+  }
 }
diff --git a/src/app/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html b/src/app/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html
index a3ba3e5465..793e84433a 100644
--- a/src/app/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html
+++ b/src/app/pages/account-recurring-orders/recurring-order-list/recurring-order-list.component.html
@@ -76,7 +76,7 @@
         *cdkCellDef="let recurringOrder"
         [attr.data-label]="'account.recurring_orders.table.next_order_date' | translate"
       >
-        {{ recurringOrder.nextOrderDate | ishDate }}
+        {{ recurringOrder.nextOrderDate ? (recurringOrder.nextOrderDate | ishDate) : '-' }}
       </td>
     </ng-container>
 
@@ -99,11 +99,15 @@
     <ng-container cdkColumnDef="actions">
       <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-order-actions"></th>
       <td cdk-cell *cdkCellDef="let recurringOrder" class="column-price text-nowrap">
-        <ish-switch
-          id="{{ recurringOrder.id }}"
-          [active]="recurringOrder.active"
-          (switchActiveStatus)="switchActiveStatus($event)"
-        />
+        <span *ngIf="recurringOrder.expired; else switch">{{
+          'account.recurring_orders.expired.text' | translate
+        }}</span>
+        <ng-template #switch>
+          <ish-switch
+            id="{{ recurringOrder.id }}"
+            [active]="recurringOrder.active"
+            (switchActiveStatus)="switchActiveStatus($event)"
+        /></ng-template>
       </td>
     </ng-container>
 
diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
index 9862635894..87fc854e31 100644
--- a/src/assets/i18n/en_US.json
+++ b/src/assets/i18n/en_US.json
@@ -405,7 +405,32 @@
   "account.quotes.widget.responded.label": "Responded quotes",
   "account.quotes.widget.submitted.label": "Sent requests",
   "account.quotes.widget.view_all_quotes.link": "View all quotes",
-  "account.recurring_orders.breadcrumb": "Recurring orders",
+  "account.recurring_order.details.additional_info.heading": "Additional information",
+  "account.recurring_order.details.basket_number.label": "Basket number",
+  "account.recurring_order.details.billing_address.heading": "Invoice address",
+  "account.recurring_order.details.breadcrumb": "Recurring order",
+  "account.recurring_order.details.buyer_info.heading": "Buyer",
+  "account.recurring_order.details.cost_center.label": "Cost center",
+  "account.recurring_order.details.creation_date.label": "Creation date",
+  "account.recurring_order.details.end_date.label": "Until",
+  "account.recurring_order.details.expired.text": "Ended",
+  "account.recurring_order.details.last_order_date.label": "Last order date",
+  "account.recurring_order.details.last_placed_orders.label": "Last placed orders",
+  "account.recurring_order.details.next_order_date.label": "Next order date",
+  "account.recurring_order.details.order_count.label": "Order count",
+  "account.recurring_order.details.order_frequency.label": "Recur every",
+  "account.recurring_order.details.order_number.label": "Recurring order no.",
+  "account.recurring_order.details.payment_method.heading": "Payment method",
+  "account.recurring_order.details.project_number.label": "Project number",
+  "account.recurring_order.details.requisition_number.label": "Requisition no.",
+  "account.recurring_order.details.shipping_address.heading": "Shipping address",
+  "account.recurring_order.details.shipping_method.heading": "Shipping method",
+  "account.recurring_order.details.start_date.label": "Start from",
+  "account.recurring_order.details.status.label": "Status",
+  "account.recurring_order.heading": "Recurring Order Details",
+  "account.recurring_order.subtitle": "Below are details about the item(s) in your recurring order. If you ordered more than one item, please note that some items may display a different shipping method and/or status because they are shipped in a separate package.",
+  "account.recurring_orders.breadcrumb": "Recurring Order",
+  "account.recurring_orders.expired.text": "Ended",
   "account.recurring_orders.heading": "Recurring orders",
   "account.recurring_orders.navigation.link": "Recurring orders",
   "account.recurring_orders.no_placed_orders_message": "You have not placed a recurring order yet.",