4 files changed, 33 insertions, 18 deletions
diff --git a/ui/app/components/page-container/index.scss b/ui/app/components/page-container/index.scss
index ba1215e84..6fc97820a 100644
--- a/ui/app/components/page-container/index.scss
+++ b/ui/app/components/page-container/index.scss
@@ -6,6 +6,7 @@
   display: flex;
   flex-flow: column;
   border-radius: 8px;
+  overflow-y: auto;
 
   &__header {
     display: flex;
@@ -194,10 +195,10 @@
   .page-container {
     height: 100%;
     width: 100%;
-    overflow-y: auto;
     background-color: $white;
     border-radius: 0;
     flex: 1;
+    overflow-y: auto;
   }
 }
 
diff --git a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
index 773fe1f56..85b16cefe 100644
--- a/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
+++ b/ui/app/components/page-container/page-container-footer/page-container-footer.component.js
@@ -12,6 +12,7 @@ export default class PageContainerFooter extends Component {
     submitText: PropTypes.string,
     disabled: PropTypes.bool,
     submitButtonType: PropTypes.string,
+    hideCancel: PropTypes.bool,
   }
 
   static contextTypes = {
@@ -27,20 +28,21 @@ export default class PageContainerFooter extends Component {
       submitText,
       disabled,
       submitButtonType,
+      hideCancel,
     } = this.props
 
     return (
       <div className="page-container__footer">
 
         <header>
-          <Button
+          {!hideCancel && <Button
             type="default"
             large
             className="page-container__footer-button"
             onClick={e => onCancel(e)}
           >
             { cancelText || this.context.t('cancel') }
-          </Button>
+          </Button>}
 
           <Button
             type={submitButtonType || 'primary'}
diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js
index a8458604e..08f9c7544 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js
@@ -12,6 +12,7 @@ export default class PageContainerHeader extends Component {
     backButtonStyles: PropTypes.object,
     backButtonString: PropTypes.string,
     tabs: PropTypes.node,
+    headerCloseText: PropTypes.string,
   }
 
   renderTabs () {
@@ -41,7 +42,7 @@ export default class PageContainerHeader extends Component {
   }
 
   render () {
-    const { title, subtitle, onClose, tabs } = this.props
+    const { title, subtitle, onClose, tabs, headerCloseText } = this.props
 
     return (
       <div className={
@@ -66,10 +67,12 @@ export default class PageContainerHeader extends Component {
         }
 
         {
-          onClose && <div
-            className="page-container__header-close"
-            onClick={() => onClose()}
-          />
+          onClose && headerCloseText
+            ? <div className="page-container__header-close-text" onClick={() => onClose()}>{ headerCloseText }</div>
+            : onClose && <div
+              className="page-container__header-close"
+              onClick={() => onClose()}
+            />
         }
 
         { this.renderTabs() }
diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js
index 3a2274a29..45dfff517 100644
--- a/ui/app/components/page-container/page-container.component.js
+++ b/ui/app/components/page-container/page-container.component.js
@@ -9,6 +9,7 @@ export default class PageContainer extends PureComponent {
     // PageContainerHeader props
     backButtonString: PropTypes.string,
     backButtonStyles: PropTypes.object,
+    headerCloseText: PropTypes.string,
     onBackButtonClick: PropTypes.func,
     onClose: PropTypes.func,
     showBackButton: PropTypes.bool,
@@ -22,6 +23,7 @@ export default class PageContainer extends PureComponent {
     // PageContainerFooter props
     cancelText: PropTypes.string,
     disabled: PropTypes.bool,
+    hideCancel: PropTypes.bool,
     onCancel: PropTypes.func,
     onSubmit: PropTypes.func,
     submitText: PropTypes.string,
@@ -58,7 +60,8 @@ export default class PageContainer extends PureComponent {
 
   renderActiveTabContent () {
     const { tabsComponent } = this.props
-    const { children } = tabsComponent.props
+    let { children } = tabsComponent.props
+    children = children.filter(child => child)
     const { activeTabIndex } = this.state
 
     return children[activeTabIndex]
@@ -92,6 +95,8 @@ export default class PageContainer extends PureComponent {
       onSubmit,
       submitText,
       disabled,
+      headerCloseText,
+      hideCancel,
     } = this.props
 
     return (
@@ -105,17 +110,21 @@ export default class PageContainer extends PureComponent {
           backButtonStyles={backButtonStyles}
           backButtonString={backButtonString}
           tabs={this.renderTabs()}
+          headerCloseText={headerCloseText}
         />
-        <div className="page-container__content">
-          { this.renderContent() }
+        <div className="page-container__bottom">
+          <div className="page-container__content">
+            { this.renderContent() }
+          </div>
+          <PageContainerFooter
+            onCancel={onCancel}
+            cancelText={cancelText}
+            hideCancel={hideCancel}
+            onSubmit={onSubmit}
+            submitText={submitText}
+            disabled={disabled}
+          />
         </div>
-        <PageContainerFooter
-          onCancel={onCancel}
-          cancelText={cancelText}
-          onSubmit={onSubmit}
-          submitText={submitText}
-          disabled={disabled}
-        />
       </div>
     )
   }