diff --git a/package-lock.json b/package-lock.json
index c08d4c60b..8313dce0b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1051,9 +1051,9 @@
       "dev": true
     },
     "@manageiq/service-portal-api": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@manageiq/service-portal-api/-/service-portal-api-1.1.1.tgz",
-      "integrity": "sha512-x80oTOY708s0pvjyu2lwAYnMCi+XqoX0xr6w/UpD6aPDoivmIV9qVQVwTBuQBKxu4vu4pvio8ReGn/U/j6ycXA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@manageiq/service-portal-api/-/service-portal-api-1.2.0.tgz",
+      "integrity": "sha512-KJPB+tEeGwQzhkuE+nrleXd3rMQsC05jNTkan4D5bAwUPLVXso37EEhP2DjEJPaxSOJz/LG2Y8FowWVjUwWrRA==",
       "requires": {
         "superagent": "^3.8.3"
       }
@@ -1088,16 +1088,28 @@
       "integrity": "sha512-rb8eaEwFX0u8IHMKEkKB5AaWbQidvywZUHYSFn7fewO88aPvDewUnwb2fDd62ddtNjSp/jjZzeHOYB9JSVzKjQ=="
     },
     "@patternfly/react-core": {
-      "version": "1.49.1",
-      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.49.1.tgz",
-      "integrity": "sha512-wFUdu43yloQq9pCnttX1TnEfXAVjhEMCy4yT1wJdvun7mtCvxF7YAhuof/eU2RsmsEtxgpZQ8qi1TUjcepit7g==",
+      "version": "1.51.6",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-1.51.6.tgz",
+      "integrity": "sha512-SROyH59owrz3Qr3SF9pMayOeHixjI7DhPf/NB1ixLqedvdCjHeKbwYtbDRnDWBiScRfYoRFmcetzKG429eiVUg==",
       "requires": {
-        "@patternfly/react-icons": "^2.10.0",
+        "@patternfly/react-icons": "^2.10.5",
         "@patternfly/react-styles": "^2.3.0",
-        "@patternfly/react-tokens": "^1.10.0",
+        "@patternfly/react-tokens": "^1.10.2",
         "@tippy.js/react": "^1.1.1",
         "exenv": "^1.2.2",
         "focus-trap-react": "^4.0.1"
+      },
+      "dependencies": {
+        "@patternfly/react-icons": {
+          "version": "2.10.5",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-2.10.5.tgz",
+          "integrity": "sha512-dlsO8HMLtqvek2umKQjFotEfIKDOoQmq6pt9wemH/tvfOsffjWq94mcjkzEl3O/dhitoPN/T9/QIY7D2YaTY2Q=="
+        },
+        "@patternfly/react-tokens": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-1.10.2.tgz",
+          "integrity": "sha512-jGGYQT4x01JYfmyLwSZntKu0ko8o8D6wVXtQiuIYD2oyZHl6+dQ/p71SHb6QKF53cr6bWBEQh5am2Ns+6jS2Eg=="
+        }
       }
     },
     "@patternfly/react-icons": {
@@ -11203,6 +11215,7 @@
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
       "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "safe-buffer": "^5.1.2",
         "yallist": "^3.0.0"
@@ -11212,7 +11225,8 @@
           "version": "3.0.3",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.3.tgz",
           "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/package.json b/package.json
index 2b1e9b823..110fcf4a9 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,10 @@
   "dependencies": {
     "@data-driven-forms/pf4-component-mapper": "^0.3.0",
     "@data-driven-forms/react-form-renderer": "^1.4.3",
-    "@manageiq/service-portal-api": "^1.1.0",
+    "@manageiq/service-portal-api": "^1.2.0",
     "@manageiq/topological_inventory": "^1.0.3",
     "@patternfly/patternfly-next": "^1.0.131",
-    "@patternfly/react-core": "^1.49.1",
+    "@patternfly/react-core": "^1.51.6",
     "@patternfly/react-icons": "^2.10.0",
     "@patternfly/react-tokens": "^1.10.0",
     "@red-hat-insights/insights-frontend-components": "^3.33.4",
diff --git a/src/App.scss b/src/App.scss
index 30cb17e59..ddec13be8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -41,3 +41,7 @@ ul.navigation-secondary {
   }
   cursor: pointer;
 }
+
+.text-align-right {
+  text-align: right;
+}
diff --git a/src/Routes.js b/src/Routes.js
index 8f23b9f12..debac7cc4 100644
--- a/src/Routes.js
+++ b/src/Routes.js
@@ -42,7 +42,6 @@ const InsightsRoute = ({ rootClass, ...rest }) => {
 };
 
 InsightsRoute.propTypes = {
-  component: PropTypes.func,
   rootClass: PropTypes.string
 };
 
diff --git a/src/SmartComponents/Order/OrderServiceFormStepConfiguration.js b/src/SmartComponents/Order/OrderServiceFormStepConfiguration.js
index e1733cee4..cc56ad036 100644
--- a/src/SmartComponents/Order/OrderServiceFormStepConfiguration.js
+++ b/src/SmartComponents/Order/OrderServiceFormStepConfiguration.js
@@ -29,7 +29,6 @@ class OrderServiceFormStepConfiguration extends React.Component {
 
   handlePlanChange = (arg, event) =>  {
     const planId = event.currentTarget.value;
-    console.log('Plan value received:', planId);
     this.setState({ selectedPlanIdx: this.props.servicePlans.findIndex(plan=> plan.id === planId) });
   };
 
@@ -48,6 +47,7 @@ class OrderServiceFormStepConfiguration extends React.Component {
   };
 
   render() {
+    console.log('service plan', this.props);
     if (!this.props.isLoading) {
       return (
         <React.Fragment>
@@ -106,6 +106,10 @@ OrderServiceFormStepConfiguration.propTypes = {
   sendSubmitOrder: propTypes.func.isRequired
 };
 
+OrderServiceFormStepConfiguration.defaultProps = {
+  servicePlans: []
+};
+
 const mapStateToProps = ({ orderReducer: { isLoading, servicePlans }}) => ({
   isLoading,
   servicePlans
diff --git a/src/SmartComponents/Order/Orders.js b/src/SmartComponents/Order/Orders.js
index 2d71780a1..7dd3c9fbe 100644
--- a/src/SmartComponents/Order/Orders.js
+++ b/src/SmartComponents/Order/Orders.js
@@ -1,23 +1,95 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
+import {
+  DataList,
+  DataListItem,
+  DataListCell,
+  DataListToggle,
+  DataListContent,
+  Tabs,
+  Tab,
+  Text,
+  TextVariants,
+  TextContent
+} from '@patternfly/react-core';
 import { fetchOrderList } from '../../redux/Actions/OrderActions';
-import ContentList from '../ContentGallery/ContentList';
 import propTypes from 'prop-types';
+import OrdersToolbar from './orders-toolbar';
+import './orders.scss';
 
 class Orders extends Component {
+  state = {
+    orders: [],
+    activeTabKey: 0,
+    dataListExpanded: {}
+  }
 
   componentDidMount() {
-    this.props.fetchOrders();
+    this.props.fetchOrders()
+    .then(() => this.setState({ orders: this.props.orderList.items }));
   }
 
+  handleTabClick = (_event, activeTabKey) => this.setState({ activeTabKey })
+
+  handleDataItemToggle = id => this.setState(({ dataListExpanded }) => ({
+    dataListExpanded: { ...dataListExpanded, [id]: !dataListExpanded[id] }
+  }))
+
+  renderDataListItems = data => data.map((item, index) => (
+    <DataListItem key={ item.id } aria-labelledby={ `${item.id}-expand` } isExpanded={ this.state.dataListExpanded[item.id] }>
+      { data.id }
+      <DataListToggle
+        id={ item.id }
+        aria-label={ `${item.id}-expand` }
+        aria-labelledby={ `${item.id}-expand` }
+        onClick={ () => this.handleDataItemToggle(item.id) }
+        isExpanded={ this.state.dataListExpanded[item.id] }
+      />
+      <DataListCell>
+        <TextContent>
+          <Text component={ TextVariants.h4 }>Order { index }</Text>
+          <Text style={ { marginBottom: 0 } } component={ TextVariants.small }>{ item.created_at.toString() }</Text>
+        </TextContent>
+      </DataListCell>
+      <DataListCell className="order-cell" style={ { alignSelf: 'center' } }>
+        <TextContent className="text-align-right">
+          <Text component={ TextVariants.h5 }>{ item.state }</Text>
+        </TextContent>
+      </DataListCell>
+      <DataListContent aria-label={ `${item.id}-content` } isHidden={ !this.state.dataListExpanded[item.id] }>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+          dolore magna aliqua.
+        </p>
+      </DataListContent>
+    </DataListItem>
+  ))
+
   render() {
-    let orderList = {
-      ...this.props.orderList,
-      isLoading: this.props.isLoading
-    };
+    const { isLoading } = this.props.isLoading;
+    if (isLoading) {
+      return <div>Loading</div>;
+    }
+
+    const { orders, activeTabKey } = this.state;
+
     return (
-      <div className="pf-l-stack__item pf-m-secondary ">
-        <ContentList { ...orderList } />
+      <div>
+        <OrdersToolbar />
+        <div>
+          <Tabs className="order-tabs" activeKey={ activeTabKey } onSelect={ this.handleTabClick }>
+            <Tab eventKey={ 0 } title="My orders" className="pf-u-p-lg">
+              <DataList aria-label="all-orders">
+                { this.renderDataListItems(orders) }
+              </DataList>
+            </Tab>
+            <Tab eventKey={ 1 } title="All orders" className="pf-u-p-lg">
+              <DataList aria-label="all-orders">
+                { this.renderDataListItems(orders) }
+              </DataList>
+            </Tab>
+          </Tabs>
+        </div>
       </div>
     );
   }
diff --git a/src/SmartComponents/Order/orders-toolbar.js b/src/SmartComponents/Order/orders-toolbar.js
new file mode 100644
index 000000000..420aed104
--- /dev/null
+++ b/src/SmartComponents/Order/orders-toolbar.js
@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { NavLink, withRouter } from 'react-router-dom';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  Toolbar,
+  ToolbarGroup,
+  ToolbarSection,
+  ToolbarItem,
+  TextContent,
+  Text,
+  TextVariants
+} from '@patternfly/react-core';
+import './orders.scss';
+
+const OrdersToolbar = ({ match: { path }}) => (
+  <Toolbar className="pf-u-pt-xl pf-u-pr-xl pf-u-pl-xl order-toolbar-breadcrumbs" style={ { backgroundColor: '#FFFFFF' } }>
+    <ToolbarSection aria-label="order-toolbar-breadcrumbs">
+      <ToolbarGroup>
+        <ToolbarItem>
+          <Breadcrumb>
+            <BreadcrumbItem isActive={ path === '/portfolios' }>
+              <NavLink exact to="/portfolios">All Portfolios</NavLink>
+            </BreadcrumbItem>
+            <BreadcrumbItem isActive={ path === '/orders' }>
+              <NavLink exact to="/orders">Orders</NavLink>
+            </BreadcrumbItem>
+          </Breadcrumb>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </ToolbarSection>
+    <ToolbarSection aria-label="order-toolbar-heading">
+      <ToolbarGroup>
+        <ToolbarItem>
+          <TextContent>
+            <Text component={ TextVariants.h1 }>Orders</Text>
+          </TextContent>
+        </ToolbarItem>
+      </ToolbarGroup>
+    </ToolbarSection>
+  </Toolbar>
+);
+
+OrdersToolbar.propTypes = {
+  match: PropTypes.shape({
+    path: PropTypes.string.isRequired
+  }).isRequired
+};
+
+export default withRouter(OrdersToolbar);
diff --git a/src/SmartComponents/Order/orders.scss b/src/SmartComponents/Order/orders.scss
index 17677e7c2..db40b5c2d 100644
--- a/src/SmartComponents/Order/orders.scss
+++ b/src/SmartComponents/Order/orders.scss
@@ -1 +1,25 @@
 @import "../../App";
+
+.order-tabs {
+ background-color: #FFFFFF;
+ padding: 32px 32px 0 32px;
+ li {
+   padding: initial
+ }
+}
+
+.order-data-list {
+  .order-cell {
+    align-self: center
+  }
+}
+
+.order-toolbar-breadcrumbs {
+  .pf-c-breadcrumb__item {
+    .active{ 
+      color: var(--pf-c-breadcrumb__item--Color);
+      text-decoration: none;
+      pointer-events: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/test/redux/actions/portfolio-actions.test.js b/src/test/redux/actions/portfolio-actions.test.js
index 22a3339e3..c0064e27d 100644
--- a/src/test/redux/actions/portfolio-actions.test.js
+++ b/src/test/redux/actions/portfolio-actions.test.js
@@ -1,6 +1,7 @@
 import configureStore from 'redux-mock-store' ;
 import thunk from 'redux-thunk';
 import promiseMiddleware from 'redux-promise-middleware';
+import { Portfolio } from '@manageiq/service-portal-api';
 import { notificationsMiddleware, ADD_NOTIFICATION } from '@red-hat-insights/insights-frontend-components/components/Notifications';
 import {
   FETCH_PORTFOLIOS,
@@ -41,14 +42,11 @@ describe('Portfolio actions', () => {
       type: `${FETCH_PORTFOLIOS}_PENDING`
     }, {
       type: `${FETCH_PORTFOLIOS}_FULFILLED`,
-      payload: [{ id: '1', name: 'foo' }]
+      payload: [ new Portfolio('name', 'description') ]
     }];
 
     apiClientMock.get(SERVICE_PORTAL_API_BASE + '/portfolios', mockOnce({
-      body: [{
-        id: '1',
-        name: 'foo'
-      }]
+      body: [ new Portfolio('name', 'description') ]
     }));
 
     return store.dispatch(fetchPortfolios())