diff --git a/packages/commercetools/api-client/src/fragments/index.ts b/packages/commercetools/api-client/src/fragments/index.ts
index 48e151c11..726c4afd7 100644
--- a/packages/commercetools/api-client/src/fragments/index.ts
+++ b/packages/commercetools/api-client/src/fragments/index.ts
@@ -133,6 +133,7 @@ export const CartFragment = `
 
 export const OrderFragment = `
   ${LineItemFragment}
+  ${AddressFragment}
 
   fragment DefaultOrder on Order {
     lineItems {
@@ -141,7 +142,29 @@ export const OrderFragment = `
     totalPrice {
       centAmount
     }
+    billingAddress {
+      ...DefaultAddress
+    }
+    shippingAddress {
+      ...DefaultAddress
+    }
+    orderNumber
     orderState
+    taxedPrice {
+      totalNet {
+        centAmount
+      }
+      totalGross {
+        centAmount
+      }
+      taxPortions {
+        rate
+        amount {
+          centAmount
+        }
+        name
+      }
+    }
     id
     version
     createdAt
diff --git a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts
index b5acf0cfe..d1b97addc 100644
--- a/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts
+++ b/packages/commercetools/composables/__tests__/getters/orderHelpers.spec.ts
@@ -2,33 +2,77 @@ import {
   getOrderDate,
   getOrderId,
   getOrderStatus,
-  getOrderPrice
+  getOrderPrice,
+  getOrderItems,
+  getOrderBillingAddress,
+  getOrderShippingAddress
 } from './../../src/getters/orderGetters';
 import { OrderState, Order } from './../../src/types/GraphQL';
 
-const order: Order = {
+const generatePrice = (centAmount: number) => ({
+  centAmount,
+  currencyCode: 'USD'
+});
+
+const order: Order = Object.freeze({
   createdAt: 123456789,
   id: '645ygdf',
   orderState: OrderState.Complete,
-  totalPrice: {
-    centAmount: 12345,
-    currencyCode: 'USD'
-  }
-} as any;
+  totalPrice: generatePrice(12345),
+  taxedPrice: {
+    totalNet: generatePrice(1111),
+    totalGross: generatePrice(2222),
+    taxPortions: [
+      {
+        name: '15% incl.',
+        amount: generatePrice(3333),
+        rate: 0.15
+      },
+      {
+        name: '25% incl.',
+        amount: generatePrice(4444),
+        rate: 0.25
+      }
+    ]
+  },
+  billingAddress: {
+    id: '1234',
+    firstName: 'Vue',
+    lastName: 'Developer',
+    __typename: 'Address'
+  },
+  shippingAddress: {
+    id: '5678',
+    firstName: 'Java',
+    lastName: 'Script',
+    __typename: 'Address'
+  },
+  lineItems: [
+    {
+      id: 'product-1'
+    },
+    {
+      id: 'product-2'
+    }
+  ]
+}) as any;
 
 describe('[commercetools-getters] order getters', () => {
   it('returns default values', () => {
     expect(getOrderDate(null)).toBe('');
     expect(getOrderId(null)).toBe('');
     expect(getOrderStatus(null)).toBe('');
-    expect(getOrderPrice(null)).toBe(null);
+    expect(typeof getOrderPrice(null)).toBe('object');
+    expect(typeof getOrderBillingAddress(null as any)).toEqual('string');
+    expect(typeof getOrderShippingAddress(null as any)).toEqual('string');
+    expect(getOrderItems(null as any)).toHaveLength(0);
   });
 
   it('returns date', () => {
     expect(getOrderDate(order)).toEqual(123456789);
   });
 
-  it('returns order number', () => {
+  it('returns order id', () => {
     expect(getOrderId(order)).toEqual('645ygdf');
   });
 
@@ -37,6 +81,23 @@ describe('[commercetools-getters] order getters', () => {
   });
 
   it('returns total gross', () => {
-    expect(getOrderPrice(order)).toEqual(123.45);
+    expect(getOrderPrice(order).regular).toEqual(123.45);
+  });
+
+  it('returns billing address', () => {
+    expect(typeof getOrderBillingAddress(order)).toEqual('string');
+  });
+
+  it('returns shipping address', () => {
+    expect(typeof getOrderShippingAddress(order)).toEqual('string');
+  });
+
+  it('returns line items', () => {
+    const items = getOrderItems(order);
+
+    expect(Array.isArray(items)).toBeTruthy();
+    expect(items).toHaveLength(2);
+    expect(items[0].id).toEqual('product-1');
+    expect(items[1].id).toEqual('product-2');
   });
 });
diff --git a/packages/commercetools/composables/src/getters/orderGetters.ts b/packages/commercetools/composables/src/getters/orderGetters.ts
index 9c5e1d7c2..9d33c9889 100644
--- a/packages/commercetools/composables/src/getters/orderGetters.ts
+++ b/packages/commercetools/composables/src/getters/orderGetters.ts
@@ -1,5 +1,5 @@
-import { UserOrderGetters, AgnosticOrderStatus } from '@vue-storefront/interfaces';
-import { Order, OrderState } from './../types/GraphQL';
+import { UserOrderGetters, AgnosticOrderStatus, AgnosticPrice } from '@vue-storefront/interfaces';
+import { Order, OrderState, LineItem, Money, Address } from './../types/GraphQL';
 
 export const getOrderDate = (order: Order): string => order?.createdAt || '';
 
@@ -12,15 +12,33 @@ const orderStatusMap = {
   [OrderState.Cancelled]: AgnosticOrderStatus.Cancelled
 };
 
+const getPrice = (money: Money): AgnosticPrice => ({
+  regular: money?.centAmount ? money.centAmount / 100 : 0
+});
+
 export const getOrderStatus = (order: Order): AgnosticOrderStatus | '' => order?.orderState ? orderStatusMap[order.orderState] : '';
 
-export const getOrderPrice = (order: Order): number | null => order ? order.totalPrice.centAmount / 100 : null;
+export const getOrderItems = (order: Order): LineItem[] => order?.lineItems || [];
+
+export const getOrderPrice = (order: Order): AgnosticPrice => getPrice(order?.totalPrice);
+
+// TODO: billing and shipping addresses are returned as string temporary. It's a part of discussion now: https://github.com/DivanteLtd/next/pull/361
+const transformAddressToString = (address: Address): string => (
+  `${address.country}, ${address.postalCode}, ${address.city}, ${address.streetName}, ${address.streetNumber}`
+);
+
+export const getOrderBillingAddress = (order: Order): string => transformAddressToString(order?.billingAddress || {} as Address);
+
+export const getOrderShippingAddress = (order: Order): string => transformAddressToString(order?.shippingAddress || {} as Address);
 
-const orderGetters: UserOrderGetters<Order> = {
+const orderGetters: UserOrderGetters<Order, LineItem> = {
   getDate: getOrderDate,
   getId: getOrderId,
   getStatus: getOrderStatus,
-  getPrice: getOrderPrice
+  getPrice: getOrderPrice,
+  getItems: getOrderItems,
+  getBillingAddress: getOrderBillingAddress,
+  getShippingAddress: getOrderShippingAddress
 };
 
 export default orderGetters;
diff --git a/packages/core/interfaces/src/index.ts b/packages/core/interfaces/src/index.ts
index 4b64b1faa..e28dfe79d 100644
--- a/packages/core/interfaces/src/index.ts
+++ b/packages/core/interfaces/src/index.ts
@@ -207,11 +207,14 @@ export interface CheckoutGetters<SHIPPING_METHOD> {
   [getterName: string]: (element: any, options?: any) => unknown;
 }
 
-export interface UserOrderGetters<ORDER> {
+export interface UserOrderGetters<ORDER, ORDER_ITEM> {
   getDate: (order: ORDER) => string;
   getId: (order: ORDER) => string;
   getStatus: (order: ORDER) => string;
-  getPrice: (order: ORDER) => number;
+  getPrice: (order: ORDER) => AgnosticPrice;
+  getItems: (order: ORDER) => ORDER_ITEM[];
+  getBillingAddress: (address: ORDER) => string;
+  getShippingAddress: (address: ORDER) => string;
   [getterName: string]: (element: any, options?: any) => unknown;
 }
 
diff --git a/packages/core/theme-module/index.js b/packages/core/theme-module/index.js
index b08237d77..8162a78f6 100644
--- a/packages/core/theme-module/index.js
+++ b/packages/core/theme-module/index.js
@@ -90,7 +90,7 @@ module.exports = function DefaultThemeModule(moduleOptions) {
     });
     routes.push({
       name: 'my-account',
-      path: '/my-account/:pageName?',
+      path: '/my-account/:pageName?/:id?',
       component: resolve(projectLocalThemeDir, 'pages/MyAccount.vue')
     });
     routes.push({
diff --git a/packages/core/theme-module/theme/pages/MyAccount.vue b/packages/core/theme-module/theme/pages/MyAccount.vue
index 45ed6ca73..cff4967d6 100644
--- a/packages/core/theme-module/theme/pages/MyAccount.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount.vue
@@ -37,6 +37,9 @@
         <SfContentPage title="My reviews">
           <MyReviews />
         </SfContentPage>
+        <SfContentPage title="Order details">
+          <OrderDetails />
+        </SfContentPage>
       </SfContentCategory>
       <SfContentPage title="Log out" />
     </SfContentPages>
@@ -44,11 +47,13 @@
 </template>
 <script>
 import { SfBreadcrumbs, SfContentPages } from '@storefront-ui/vue';
+import { ref } from '@vue/composition-api';
 import MyProfile from './MyAccount/MyProfile';
 import ShippingDetails from './MyAccount/ShippingDetails';
 import LoyaltyCard from './MyAccount/LoyaltyCard';
 import MyNewsletter from './MyAccount/MyNewsletter';
 import OrderHistory from './MyAccount/OrderHistory';
+import OrderDetails from './MyAccount/OrderDetails';
 import MyReviews from './MyAccount/MyReviews';
 import auth from '../middleware/auth';
 
@@ -63,10 +68,36 @@ export default {
     LoyaltyCard,
     MyNewsletter,
     OrderHistory,
+    OrderDetails,
     MyReviews
   },
-  data() {
+  setup(props, context) {
+    const { $route, $router } = context.root;
+    const activePage = ref('My profile');
+    const entityId = ref(null);
+
+    const changeActivePage = (title) => {
+      if (title === 'Log out') {
+        return;
+      }
+
+      $router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
+    };
+
+    const { pageName, id } = $route.params;
+
+    if (pageName) {
+      activePage.value = (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
+    }
+
+    if (id) {
+      entityId.value = id;
+    }
+
     return {
+      changeActivePage,
+      activePage,
+      entityId,
       breadcrumbs: [
         {
           text: 'Home',
@@ -118,26 +149,6 @@ export default {
         ]
       }
     };
-  },
-  computed: {
-    activePage() {
-      const { pageName } = this.$route.params;
-
-      if (pageName) {
-        return (pageName.charAt(0).toUpperCase() + pageName.slice(1)).replace('-', ' ');
-      }
-
-      return 'My profile';
-    }
-  },
-  methods: {
-    changeActivePage(title) {
-      if (title === 'Log out') {
-        return;
-      }
-
-      this.$router.push(`/my-account/${title.toLowerCase().replace(' ', '-')}`);
-    }
   }
 };
 </script>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue
new file mode 100644
index 000000000..dba0e5e6c
--- /dev/null
+++ b/packages/core/theme-module/theme/pages/MyAccount/OrderDetails.vue
@@ -0,0 +1,146 @@
+<template>
+  <section v-if="orderId" class="order-details">
+      <h2>Order #{{orderGetters.getId(order)}}</h2>
+      <p>Status: <strong>{{orderGetters.getStatus(order)}}</strong></p>
+      <p>Date: <strong>{{orderGetters.getDate(order)}}</strong></p>
+
+      <h3 class="title">Items</h3>
+      <SfCollectedProduct
+        v-for="product in orderGetters.getItems(order)"
+        :key="cartGetters.getItemSku(product)"
+        :image="cartGetters.getItemImage(product)"
+        :title="cartGetters.getItemName(product)"
+        :regular-price="'$' + cartGetters.getItemPrice(product).regular"
+        :qty="cartGetters.getItemQty(product)"
+        class="ordered-product"
+      />
+
+      <h3 class="title">Summary</h3>
+      <div class="order-details__summary">
+        <div class="order-details__summary__item">
+          <span class="property">Total price</span>
+          <span class="value">${{orderGetters.getPrice(order).regular}}</span>
+        </div>
+      </div>
+
+      <h3 class="title">Order addresses</h3>
+      <div class="order-details__addresses">
+        <div class="order-details__addresses__item">
+          <p class="order-details__addresses__item__title">Billing Address</p>
+          <div v-html="orderGetters.getBillingAddress(order)" />
+        </div>
+        <div class="order-details__addresses__item">
+          <p class="order-details__addresses__item__title">Shipping Address</p>
+          <div v-html="orderGetters.getShippingAddress(order)" />
+        </div>
+      </div>
+  </section>
+  <p v-else>Order not found</p>
+</template>
+
+<script>
+import { ref, computed } from '@vue/composition-api';
+import { SfCollectedProduct } from '@storefront-ui/vue';
+import { onSSR } from '@vue-storefront/utils';
+import { useUserOrders, orderGetters, cartGetters } from '<%= options.composables %>';
+
+export default {
+  name: 'OrderDetails',
+  components: {
+    SfCollectedProduct
+  },
+  setup(props, { root }) {
+    const { searchOrders, orders } = useUserOrders();
+    const orderId = ref(root.$route.params.id || null);
+
+    onSSR(async () => {
+      await searchOrders({ id: orderId.value });
+    });
+
+    return {
+      orderId,
+      // TODO: cartGetters is a temporary getter to provide product information. It's been proposed to extend orderGetters functionality here: https://github.com/DivanteLtd/next/issues/363
+      cartGetters,
+      orderGetters,
+      order: computed(() => orders.value[0] || {})
+    };
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@storefront-ui/vue/styles";
+
+.order-details {
+  .title {
+    margin-top: var(--spacer-extra-big);
+    font-size: var(--font-size-big);
+    font-weight: 500;
+  }
+
+  .property {
+    min-width: 10rem;
+  }
+
+  &__summary {
+    &__tax-title {
+      font-weight: 500;
+    }
+
+    &__item {
+      display: flex;
+      flex-direction: row;
+
+      .value {
+        font-weight: 500;
+      }
+    }
+  }
+
+  &__addresses__item {
+    &__title {
+      font-weight: 500;
+    }
+
+    &__field {
+      display: flex;
+    }
+  }
+
+}
+</style>
+
+<style lang="scss">
+@import "~@storefront-ui/vue/styles";
+
+.order-details {
+  .ordered-product {
+    input {
+      pointer-events: none;
+    }
+
+    .sf-collected-product__remove {
+      display: none;
+    }
+  }
+
+  @include for-desktop {
+    &__addresses {
+      display: flex;
+      justify-content: space-between;
+
+      &__item {
+        flex: 1;
+
+        &__field {
+          display: flex;
+
+          .property {
+            min-width: 10rem;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
index dbe2146f5..d67358b2a 100644
--- a/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
+++ b/packages/core/theme-module/theme/pages/MyAccount/OrderHistory.vue
@@ -30,7 +30,9 @@
           </SfTableData>
           <SfTableData class="orders__view">
             <SfButton class="sf-button--text color-secondary mobile-only">Download</SfButton>
-            <SfButton class="sf-button--text color-secondary desktop-only">VIEW</SfButton>
+            <nuxt-link :to="{ path: `/my-account/order-details/${orderGetters.getId(order)}`}">
+              <SfButton class="sf-button--text color-secondary desktop-only">VIEW</SfButton>
+            </nuxt-link>
           </SfTableData>
         </SfTableRow>
       </SfTable>