diff --git a/blueocean-core-js/package.json b/blueocean-core-js/package.json
index c09f0241031..b7bc778f864 100644
--- a/blueocean-core-js/package.json
+++ b/blueocean-core-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jenkins-cd/blueocean-core-js",
-  "version": "0.0.53-jm-a",
+  "version": "0.0.53-jm-b",
   "description": "Shared JavaScript libraries for use with Jenkins Blue Ocean",
   "main": "dist/js/index.js",
   "scripts": {
diff --git a/blueocean-core-js/src/js/components/ResultPageHeader.jsx b/blueocean-core-js/src/js/components/ResultPageHeader.jsx
index 2e4b9097422..dab13d58a2c 100644
--- a/blueocean-core-js/src/js/components/ResultPageHeader.jsx
+++ b/blueocean-core-js/src/js/components/ResultPageHeader.jsx
@@ -46,7 +46,7 @@ export const ResultPageHeader = props => {
     const topNavLinks = _wrap(props.topNavLinks, 'nav');
     const runButton = _wrap(props.runButton, 'div', { className: 'ResultPageHeader-run' });
 
-    const classNames = ["ResultPageHeader"];
+    const classNames = ['ResultPageHeader'];
     if (props.className) {
         classNames.push(props.className);
     }
diff --git a/blueocean-core-js/src/less/header.less b/blueocean-core-js/src/less/header.less
index 020a4eae18a..fb7f93ee211 100644
--- a/blueocean-core-js/src/less/header.less
+++ b/blueocean-core-js/src/less/header.less
@@ -54,8 +54,10 @@
 
 .ResultPageHeader-run {
     padding-left: 1em;
+    display:flex;
+    align-items: center;
 
-    * {
+    &>*+* {
         margin-left: 1em;
     }
 
diff --git a/blueocean-dashboard/npm-shrinkwrap.json b/blueocean-dashboard/npm-shrinkwrap.json
index 58c1514c570..005f4f90db3 100644
--- a/blueocean-dashboard/npm-shrinkwrap.json
+++ b/blueocean-dashboard/npm-shrinkwrap.json
@@ -3,9 +3,9 @@
   "version": "0.0.1",
   "dependencies": {
     "@jenkins-cd/blueocean-core-js": {
-      "version": "0.0.53-jm-a",
-      "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-a",
-      "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-a.tgz",
+      "version": "0.0.53-jm-b",
+      "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-b",
+      "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-b.tgz",
       "dependencies": {
         "react-router": {
           "version": "3.0.0",
diff --git a/blueocean-dashboard/package.json b/blueocean-dashboard/package.json
index f4e62047f34..e94c54b5ebc 100644
--- a/blueocean-dashboard/package.json
+++ b/blueocean-dashboard/package.json
@@ -39,7 +39,7 @@
     "skin-deep": "0.16.0"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.53-jm-a",
+    "@jenkins-cd/blueocean-core-js": "0.0.53-jm-b",
     "@jenkins-cd/design-language": "0.0.102",
     "@jenkins-cd/js-extensions": "0.0.32",
     "@jenkins-cd/js-modules": "0.0.8",
diff --git a/blueocean-dashboard/src/main/js/components/FullScreen.jsx b/blueocean-dashboard/src/main/js/components/FullScreen.jsx
index d3c73077688..cb4f48ca400 100644
--- a/blueocean-dashboard/src/main/js/components/FullScreen.jsx
+++ b/blueocean-dashboard/src/main/js/components/FullScreen.jsx
@@ -41,6 +41,9 @@ export class FullScreen extends Component {
             this.transitionTimeout = setTimeout(() => {
                 this.transitionTimeout = undefined;
                 this.forceUpdate();
+                if (this.props.afterClose) {
+                    this.props.afterClose();
+                }
             }, transitionDuration);
         }
     }
@@ -89,6 +92,7 @@ FullScreen.propTypes = {
     isVisible: PropTypes.bool,
     children: PropTypes.node,
     style: PropTypes.object,
+    afterClose: PropTypes.func,
 };
 
 FullScreen.defaultProps = {
diff --git a/blueocean-dashboard/src/main/js/components/RunDetails.jsx b/blueocean-dashboard/src/main/js/components/RunDetails.jsx
index 97b2436fdc3..91896f1377f 100644
--- a/blueocean-dashboard/src/main/js/components/RunDetails.jsx
+++ b/blueocean-dashboard/src/main/js/components/RunDetails.jsx
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React, {Component, PropTypes} from 'react';
 import {
     ModalView,
     ModalBody,
@@ -6,9 +6,9 @@ import {
     PageTabsOld,
     TabLink,
 } from '@jenkins-cd/design-language';
-import { i18nTranslator, ReplayButton, RunButton } from '@jenkins-cd/blueocean-core-js';
+import {i18nTranslator, ReplayButton, RunButton} from '@jenkins-cd/blueocean-core-js';
 
-import { Icon } from '@jenkins-cd/react-material-icons';
+import {Icon} from '@jenkins-cd/react-material-icons';
 
 import {
     buildOrganizationUrl,
@@ -16,17 +16,18 @@ import {
     buildRunDetailsUrl,
     buildClassicConfigUrl,
 } from '../util/UrlUtils';
-import { MULTIBRANCH_PIPELINE } from '../Capabilities';
-import { RunDetailsHeader } from './RunDetailsHeader';
-import { RunRecord } from './records';
+import {MULTIBRANCH_PIPELINE} from '../Capabilities';
+import {RunDetailsHeader} from './RunDetailsHeader';
+import {RunRecord} from './records';
+import {FullScreen} from './FullScreen';
 import PageLoading from './PageLoading';
-import { Paths, capable, locationService } from '@jenkins-cd/blueocean-core-js';
-import { observer } from 'mobx-react';
-import { User } from '@jenkins-cd/blueocean-core-js';
+import {Paths, capable, locationService} from '@jenkins-cd/blueocean-core-js';
+import {observer} from 'mobx-react';
+import {User} from '@jenkins-cd/blueocean-core-js';
 
-const { func, object, any, string } = PropTypes;
+const {func, object, any, string} = PropTypes;
 
-const { rest: RestPaths } = Paths;
+const {rest: RestPaths} = Paths;
 
 const classicConfigLink = (pipeline) => {
     let link = null;
@@ -34,7 +35,7 @@ const classicConfigLink = (pipeline) => {
         let url = buildClassicConfigUrl(pipeline);
         link = (
             <a href={url} target="_blank" style={{ height: '24px' }}>
-                <Icon size={24} icon="settings" style={{ fill: '#fff' }} />
+                <Icon size={24} icon="settings" style={{ fill: '#fff' }}/>
             </a>
         );
     }
@@ -72,7 +73,7 @@ class RunDetails extends Component {
                 runId: props.params.runId,
             });
 
-            this.context.activityService.fetchActivity(this.href, { useCache: true });
+            this.context.activityService.fetchActivity(this.href, {useCache: true});
             if (storePreviousRoute) {
                 this.opener = locationService.previous;
             }
@@ -81,26 +82,28 @@ class RunDetails extends Component {
 
     _didRunChange(oldParams, newParams) {
         return oldParams.organization !== newParams.organization ||
-                oldParams.pipeline !== newParams.pipeline ||
-                oldParams.branch !== newParams.branch ||
-                oldParams.runId !== newParams.runId;
+            oldParams.pipeline !== newParams.pipeline ||
+            oldParams.branch !== newParams.branch ||
+            oldParams.runId !== newParams.runId;
     }
 
-    navigateToOrganization() {
-        const { organization } = this.props.pipeline;
-        const { location } = this.context;
+    navigateToOrganization = () => {
+        const {organization} = this.props.pipeline;
+        const {location} = this.context;
         const organizationUrl = buildOrganizationUrl(organization);
         location.pathname = organizationUrl;
         this.context.router.push(location);
-    }
-    navigateToPipeline() {
-        const { organization, fullName } = this.props.pipeline;
-        const { location } = this.context;
+    };
+
+    navigateToPipeline = () => {
+        const {organization, fullName} = this.props.pipeline;
+        const {location} = this.context;
         const pipelineUrl = buildPipelineUrl(organization, fullName);
         location.pathname = pipelineUrl;
         this.context.router.push(location);
-    }
-    navigateToChanges() {
+    };
+
+    navigateToChanges = () => {
         const {
             location,
             params: {
@@ -114,7 +117,16 @@ class RunDetails extends Component {
         const changesUrl = buildRunDetailsUrl(organization, pipeline, branch, runId, 'changes');
         location.pathname = changesUrl;
         this.context.router.push(location);
-    }
+    };
+
+    closeButtonClicked = () => {
+        console.log("TODO: CLOSE");
+    };
+
+    afterClose = () => {
+
+    };
+
     render() {
         const run = this.context.activityService.getActivity(this.href);
         // early out
@@ -123,9 +135,8 @@ class RunDetails extends Component {
             return null;
         }
 
-
-        const { router, location, params } = this.context;
-        const { pipeline, setTitle, t, locale } = this.props;
+        const {router, location, params} = this.context;
+        const {pipeline, setTitle, t, locale} = this.props;
 
         if (!run || !pipeline) {
             return <PageLoading />;
@@ -148,31 +159,96 @@ class RunDetails extends Component {
             location.pathname = this.opener || fallbackUrl;
             // reset query
             /*
-            FIXME: reset query when you go back, we may want to store the whole location object in previous so we have a perfect prev.
-            this.opener would then be location and we the above location = this.opener || {pathname: fallbackUrl]
+             FIXME: reset query when you go back, we may want to store the whole location object in previous so we have a perfect prev.
+             this.opener would then be location and we the above location = this.opener || {pathname: fallbackUrl]
              */
             location.query = null;
             router.push(location);
         };
 
+        const isVisible = true; // TODO: Change this on close button click? Set on initial render?
+
+        const base = {base: baseUrl};
+
+        const tabs = [
+            <TabLink to="/pipeline" {...base}>{t('rundetail.header.tab.pipeline', {
+                defaultValue: 'Pipeline',
+            })}</TabLink>,
+            <TabLink to="/changes" {...base}>{t('rundetail.header.tab.changes', {
+                defaultValue: 'Changes',
+            })}</TabLink>,
+            <TabLink to="/tests" {...base}>{t('rundetail.header.tab.tests', {
+                defaultValue: 'Tests',
+            })}</TabLink>,
+            <TabLink to="/artifacts" {...base}>{t('rundetail.header.tab.artifacts', {
+                defaultValue: 'Artifacts',
+            })}</TabLink>
+        ];
+
+        const runButton = [
+            <ReplayButton className="dark"
+                          runnable={this.props.pipeline}
+                          latestRun={currentRun}
+                          onNavigation={switchRunDetails}
+                          autoNavigate/>,
+            <RunButton className="dark"
+                       runnable={this.props.pipeline}
+                       latestRun={currentRun}
+                       buttonType="stop-only"/>,
+            classicConfigLink(pipeline)
+        ];
+
+        return (
+            <FullScreen isVisible={isVisible} afterClose={this.afterClose}>
+
+                <RunDetailsHeader
+                    t={ t }
+                    locale={locale}
+                    pipeline={pipeline}
+                    data={currentRun}
+                    runButton={runButton}
+                    topNavLinks={tabs}
+                    onOrganizationClick={this.navigateToOrganization}
+                    onNameClick={this.navigateToPipeline}
+                    onAuthorsClick={this.navigateToChanges}
+                    onCloseClick={this.closeButtonClicked}
+                />
+
+                <div className="RunDetails-content">
+                    {run && React.cloneElement(
+                        this.props.children,
+                        {
+                            locale: translate.lng,
+                            baseUrl,
+                            t: translate,
+                            result: currentRun,
+                            isMultiBranch: this.isMultiBranch, ...this.props
+                        }
+                    )}
+                </div>
+
+            </FullScreen>
+        );
+
+
         return (
             <ModalView
-              isVisible
-              transitionClass="expand-in"
-              transitionDuration={150}
-              result={status}
-              {...{ afterClose }}
+                isVisible
+                transitionClass="expand-in"
+                transitionDuration={150}
+                result={status}
+                {...{afterClose}}
             >
                 <ModalHeader>
                     <div>
                         <RunDetailsHeader
-                          t={ t }
-                          locale={locale}
-                          pipeline={pipeline}
-                          data={currentRun}
-                          onOrganizationClick={() => this.navigateToOrganization()}
-                          onNameClick={() => this.navigateToPipeline()}
-                          onAuthorsClick={() => this.navigateToChanges()}
+                            t={ t }
+                            locale={locale}
+                            pipeline={pipeline}
+                            data={currentRun}
+                            onOrganizationClick={() => this.navigateToOrganization()}
+                            onNameClick={() => this.navigateToPipeline()}
+                            onAuthorsClick={() => this.navigateToChanges()}
                         />
                         <PageTabsOld base={baseUrl}>
                             <TabLink to="/pipeline">{t('rundetail.header.tab.pipeline', {
@@ -191,18 +267,18 @@ class RunDetails extends Component {
 
                         <div className="button-bar">
                             <ReplayButton
-                              className="dark"
-                              runnable={this.props.pipeline}
-                              latestRun={currentRun}
-                              onNavigation={switchRunDetails}
-                              autoNavigate
+                                className="dark"
+                                runnable={this.props.pipeline}
+                                latestRun={currentRun}
+                                onNavigation={switchRunDetails}
+                                autoNavigate
                             />
 
                             <RunButton
-                              className="dark"
-                              runnable={this.props.pipeline}
-                              latestRun={currentRun}
-                              buttonType="stop-only"
+                                className="dark"
+                                runnable={this.props.pipeline}
+                                latestRun={currentRun}
+                                buttonType="stop-only"
                             />
                             {classicConfigLink(pipeline)}
                         </div>
@@ -212,7 +288,13 @@ class RunDetails extends Component {
                     <div>
                         {run && React.cloneElement(
                             this.props.children,
-                            { locale: translate.lng, baseUrl, t: translate, result: currentRun, isMultiBranch: this.isMultiBranch, ...this.props }
+                            {
+                                locale: translate.lng,
+                                baseUrl,
+                                t: translate,
+                                result: currentRun,
+                                isMultiBranch: this.isMultiBranch, ...this.props
+                            }
                         )}
                     </div>
                 </ModalBody>
diff --git a/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx b/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx
index 60cb9a51989..a598d5c90f2 100644
--- a/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx
+++ b/blueocean-dashboard/src/main/js/components/RunDetailsHeader.jsx
@@ -18,7 +18,9 @@ class RunDetailsHeader extends Component {
             onCloseClick,
             onAuthorsClick,
             onOrganizationClick,
-            onNameClick
+            onNameClick,
+            topNavLinks,
+            runButton,
         } = this.props;
 
         const {fullDisplayName} = pipeline;
@@ -94,7 +96,12 @@ class RunDetailsHeader extends Component {
         );
 
         return (
-            <ResultPageHeader title={title} status={status} onCloseClick={onCloseClick} className="RunDetailsHeader">
+            <ResultPageHeader title={title}
+                              status={status}
+                              onCloseClick={onCloseClick}
+                              className="RunDetailsHeader"
+                              topNavLinks={topNavLinks}
+                              runButton={runButton}>
                 <div className="RunDetailsHeader-sources">
                     { branchSourceDetails }
                     { commitSourceDetails }
@@ -111,18 +118,18 @@ class RunDetailsHeader extends Component {
     }
 }
 
-const { object, func, string } = PropTypes;
-
 RunDetailsHeader.propTypes = {
-    data: object.isRequired,
-    pipeline: object,
-    colors: object,
-    onOrganizationClick: func,
-    onNameClick: func,
-    onAuthorsClick: func,
+    data: PropTypes.object.isRequired,
+    pipeline: PropTypes.object,
+    colors: PropTypes.object,
+    onOrganizationClick: PropTypes.func,
+    onNameClick: PropTypes.func,
+    onAuthorsClick: PropTypes.func,
     onCloseClick: PropTypes.func,
-    t: func,
-    locale: string,
+    t: PropTypes.func,
+    locale: PropTypes.string,
+    topNavLinks: PropTypes.node,
+    runButton: PropTypes.node,
 };
 
 export { RunDetailsHeader };
diff --git a/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js b/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js
index f1886906c27..5d952ad0cea 100644
--- a/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js
+++ b/blueocean-dashboard/src/main/js/components/stories/RunDetailsHeaderStories.js
@@ -40,6 +40,14 @@ storiesOf('Run Details Header', module)
 ;
 
 function someChanges() {
+
+    const topNavLinks = [
+        <a href="#" className="selected">Pipeline</a>,
+        <a href="#">Changes</a>,
+        <a href="#">Tests</a>,
+        <a href="#">Artifacts</a>,
+    ];
+
     return (
         <RunDetailsHeader
             locale="en"
@@ -48,7 +56,8 @@ function someChanges() {
             data={currentRun}
             onOrganizationClick={ action('button-click')}
             onNameClick={ action('button-click')}
-            onAuthorsClick={ action('button-click')}/>
+            onAuthorsClick={ action('button-click')}
+            topNavLinks={topNavLinks}/>
     );
 }
 
diff --git a/blueocean-dashboard/src/main/less/run-details-header.less b/blueocean-dashboard/src/main/less/run-details-header.less
index 937d2dd4343..e45ae3b513d 100644
--- a/blueocean-dashboard/src/main/less/run-details-header.less
+++ b/blueocean-dashboard/src/main/less/run-details-header.less
@@ -34,3 +34,7 @@
 .RunDetailsHeader-authors {
     flex-grow: 1;
 }
+
+.RunDetails-content {
+    margin: 21px 42px;
+}
diff --git a/blueocean-personalization/npm-shrinkwrap.json b/blueocean-personalization/npm-shrinkwrap.json
index f1330a7bd66..422d52d101e 100644
--- a/blueocean-personalization/npm-shrinkwrap.json
+++ b/blueocean-personalization/npm-shrinkwrap.json
@@ -3,9 +3,9 @@
   "version": "0.0.2-unpublished",
   "dependencies": {
     "@jenkins-cd/blueocean-core-js": {
-      "version": "0.0.53-jm-a",
-      "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-a",
-      "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-a.tgz",
+      "version": "0.0.53-jm-b",
+      "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-b",
+      "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-b.tgz",
       "dependencies": {
         "react-router": {
           "version": "3.0.0",
diff --git a/blueocean-personalization/package.json b/blueocean-personalization/package.json
index 9de5f6bb357..b21abb6ee9d 100644
--- a/blueocean-personalization/package.json
+++ b/blueocean-personalization/package.json
@@ -35,7 +35,7 @@
     "react-addons-test-utils": "15.3.2"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.53-jm-a",
+    "@jenkins-cd/blueocean-core-js": "0.0.53-jm-b",
     "@jenkins-cd/design-language": "0.0.102",
     "@jenkins-cd/js-extensions": "0.0.32",
     "@jenkins-cd/js-modules": "0.0.8",
diff --git a/blueocean-web/npm-shrinkwrap.json b/blueocean-web/npm-shrinkwrap.json
index f53220d87e3..887d2138d35 100644
--- a/blueocean-web/npm-shrinkwrap.json
+++ b/blueocean-web/npm-shrinkwrap.json
@@ -3,9 +3,9 @@
   "version": "0.0.1",
   "dependencies": {
     "@jenkins-cd/blueocean-core-js": {
-      "version": "0.0.53-jm-a",
-      "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-a",
-      "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-a.tgz",
+      "version": "0.0.53-jm-b",
+      "from": "@jenkins-cd/blueocean-core-js@0.0.53-jm-b",
+      "resolved": "https://registry.npmjs.org/@jenkins-cd/blueocean-core-js/-/blueocean-core-js-0.0.53-jm-b.tgz",
       "dependencies": {
         "history": {
           "version": "3.2.1",
diff --git a/blueocean-web/package.json b/blueocean-web/package.json
index de5e8019d85..09a957c149f 100644
--- a/blueocean-web/package.json
+++ b/blueocean-web/package.json
@@ -29,7 +29,7 @@
     "zombie": "4.2.1"
   },
   "dependencies": {
-    "@jenkins-cd/blueocean-core-js": "0.0.53-jm-a",
+    "@jenkins-cd/blueocean-core-js": "0.0.53-jm-b",
     "@jenkins-cd/design-language": "0.0.102",
     "@jenkins-cd/js-extensions": "0.0.32",
     "@jenkins-cd/js-modules": "0.0.8",