diff --git a/README.md b/README.md
index 34c007b7b2a2..4086fbc73fea 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,7 @@ If the CA bundle of the OpenShift API server is unavailable, fetch the CA certif
 
 ```
 oc get secrets -n default --field-selector type=kubernetes.io/service-account-token -o json | \
-    jq '.items[0].data."service-ca.crt"' -r | python -m base64 -d > examples/ca.crt
+    jq '.items[0].data."ca.crt"' -r | python -m base64 -d > examples/ca.crt
 # Note: use "openssl base64" because the "base64" tool is different between mac and linux
 ```
 
diff --git a/auth/auth.go b/auth/auth.go
index eceea80515b5..357b00bd327b 100644
--- a/auth/auth.go
+++ b/auth/auth.go
@@ -70,6 +70,9 @@ type loginMethod interface {
 	logout(http.ResponseWriter, *http.Request)
 	// authenticate fetches the bearer token from the cookie of a request.
 	authenticate(*http.Request) (*User, error)
+	// getKubeAdminLogoutURL returns the logout URL for the special
+	// kube:admin user in OpenShift
+	getKubeAdminLogoutURL() string
 }
 
 // AuthSource allows callers to switch between Tectonic and OpenShift login support.
@@ -274,6 +277,11 @@ func (a *Authenticator) LogoutFunc(w http.ResponseWriter, r *http.Request) {
 	a.loginMethod.logout(w, r)
 }
 
+// GetKubeAdminLogoutURL returns the logout URL for the special kube:admin user in OpenShift
+func (a *Authenticator) GetKubeAdminLogoutURL() string {
+	return a.loginMethod.getKubeAdminLogoutURL()
+}
+
 // ExchangeAuthCode allows callers to return a raw token response given a OAuth2
 // code. This is useful for clients which need to request refresh tokens.
 func (a *Authenticator) ExchangeAuthCode(code string) (idToken, refreshToken string, err error) {
diff --git a/auth/auth_oidc.go b/auth/auth_oidc.go
index 4b5d32e51d12..ad0bb5d479f6 100644
--- a/auth/auth_oidc.go
+++ b/auth/auth_oidc.go
@@ -131,3 +131,7 @@ func (o *oidcAuth) authenticate(r *http.Request) (*User, error) {
 		Token:    ls.rawToken,
 	}, nil
 }
+
+func (o *oidcAuth) getKubeAdminLogoutURL() string {
+	return ""
+}
diff --git a/auth/auth_openshift.go b/auth/auth_openshift.go
index 8fe770d10aa2..57bb0e00a3bc 100644
--- a/auth/auth_openshift.go
+++ b/auth/auth_openshift.go
@@ -10,13 +10,16 @@ import (
 	"time"
 
 	"golang.org/x/oauth2"
+
+	"github.com/openshift/console/pkg/proxy"
 )
 
 // openShiftAuth implements OpenShift Authentication as defined in:
 // https://docs.openshift.com/container-platform/3.9/architecture/additional_concepts/authentication.html
 type openShiftAuth struct {
-	cookiePath    string
-	secureCookies bool
+	cookiePath         string
+	secureCookies      bool
+	kubeAdminLogoutURL string
 }
 
 type openShiftConfig struct {
@@ -83,10 +86,11 @@ func newOpenShiftAuth(ctx context.Context, c *openShiftConfig) (oauth2.Endpoint,
 		return oauth2.Endpoint{}, nil, err
 	}
 
+	kubeAdminLogoutURL := proxy.SingleJoiningSlash(metadata.Issuer, "/logout")
 	return oauth2.Endpoint{
 		AuthURL:  metadata.Auth,
 		TokenURL: metadata.Token,
-	}, &openShiftAuth{c.cookiePath, c.secureCookies}, nil
+	}, &openShiftAuth{c.cookiePath, c.secureCookies, kubeAdminLogoutURL}, nil
 
 }
 
@@ -157,3 +161,7 @@ func (o *openShiftAuth) authenticate(r *http.Request) (*User, error) {
 		Token: cookie.Value,
 	}, nil
 }
+
+func (o *openShiftAuth) getKubeAdminLogoutURL() string {
+	return o.kubeAdminLogoutURL
+}
diff --git a/frontend/__tests__/components/operator-lifecycle-manager/create-crd-yaml.spec.tsx b/frontend/__tests__/components/operator-lifecycle-manager/create-crd-yaml.spec.tsx
index 55d60f38aab8..e7ca08dc8693 100644
--- a/frontend/__tests__/components/operator-lifecycle-manager/create-crd-yaml.spec.tsx
+++ b/frontend/__tests__/components/operator-lifecycle-manager/create-crd-yaml.spec.tsx
@@ -41,6 +41,16 @@ describe(CreateCRDYAML.displayName, () => {
     expect(createYAML.props().template).toEqual(safeDump(testResourceInstance));
   });
 
+  it('handles invalid JSON example object on annotation', () => {
+    const data = _.cloneDeep(testClusterServiceVersion);
+    data.metadata.annotations = {'alm-examples': 'invalid === true'};
+    wrapper = wrapper.setProps({ClusterServiceVersion: {loaded: true, data}} as any);
+
+    const createYAML = wrapper.find(Firehose).childAt(0).dive<CreateYAMLProps, {}>();
+
+    expect(createYAML.props().template).toEqual(null);
+  });
+
   it('does not render YAML editor component if ClusterServiceVersion has not loaded yet', () => {
     wrapper = wrapper.setProps({ClusterServiceVersion: {loaded: false}} as any);
 
diff --git a/frontend/__tests__/features.spec.tsx b/frontend/__tests__/features.spec.tsx
index 44425bab1f09..df08f938c8a0 100644
--- a/frontend/__tests__/features.spec.tsx
+++ b/frontend/__tests__/features.spec.tsx
@@ -43,6 +43,7 @@ describe('featureReducer', () => {
       [FLAGS.OPERATOR_LIFECYCLE_MANAGER]: true,
       [FLAGS.OPERATOR_HUB]: false,
       [FLAGS.CLUSTER_API]: false,
+      [FLAGS.MACHINE_CONFIG]: false,
     }));
   });
 });
diff --git a/frontend/integration-tests/tests/operator-hub/operator-hub.scenario.ts b/frontend/integration-tests/tests/operator-hub/operator-hub.scenario.ts
index d9edda7de4a0..db2a8292f854 100644
--- a/frontend/integration-tests/tests/operator-hub/operator-hub.scenario.ts
+++ b/frontend/integration-tests/tests/operator-hub/operator-hub.scenario.ts
@@ -44,10 +44,10 @@ describe('Viewing the operators in Operator Hub', () => {
     await catalogPageView.clickFilterCheckbox('Red Hat');
   });
 
-  it('displays "Dynatrace OneAgent" as an operator when using the filter "dy"', async() => {
-    await catalogPageView.filterByKeyword('dy');
+  it('displays "AMQ Streams" as an operator when using the filter "stre"', async() => {
+    await catalogPageView.filterByKeyword('stre');
 
-    expect(catalogPageView.catalogTileFor('Dynatrace OneAgent').isDisplayed()).toBe(true);
+    expect(catalogPageView.catalogTileFor('AMQ Streams').isDisplayed()).toBe(true);
 
     await catalogPageView.filterByKeyword('');
   });
diff --git a/frontend/public/components/app.jsx b/frontend/public/components/app.jsx
index 6dc451272175..8487a32c3fba 100644
--- a/frontend/public/components/app.jsx
+++ b/frontend/public/components/app.jsx
@@ -104,12 +104,22 @@ class App extends React.PureComponent {
     this._onNavToggle = this._onNavToggle.bind(this);
     this._onNavSelect = this._onNavSelect.bind(this);
     this._isDesktop = this._isDesktop.bind(this);
+    this._onResize = this._onResize.bind(this);
+    this.previousDesktopState = this._isDesktop();
 
     this.state = {
       isNavOpen: this._isDesktop(),
     };
   }
 
+  componentWillMount() {
+    window.addEventListener('resize', this._onResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this._onResize);
+  }
+
   componentDidUpdate(prevProps) {
     const props = this.props;
     // Prevent infinite loop in case React Router decides to destroy & recreate the component (changing key)
@@ -143,6 +153,14 @@ class App extends React.PureComponent {
     }
   }
 
+  _onResize() {
+    const isDesktop = this._isDesktop();
+    if (this.previousDesktopState !== isDesktop) {
+      this.setState({isNavOpen: isDesktop});
+      this.previousDesktopState = isDesktop;
+    }
+  }
+
   render() {
     const { isNavOpen } = this.state;
 
diff --git a/frontend/public/components/cluster-settings/_cluster-settings.scss b/frontend/public/components/cluster-settings/_cluster-settings.scss
new file mode 100644
index 000000000000..c3fcaa9a3a43
--- /dev/null
+++ b/frontend/public/components/cluster-settings/_cluster-settings.scss
@@ -0,0 +1,7 @@
+.cluster-channel-modal__dropdown,
+.cluster-update-modal__dropdown {
+  .btn-dropdown,
+  .dropdown-menu {
+    width: 100%;
+  }
+}
diff --git a/frontend/public/components/cluster-settings/cluster-operator.tsx b/frontend/public/components/cluster-settings/cluster-operator.tsx
index 0a2ccdc5859e..c305952a9bb7 100644
--- a/frontend/public/components/cluster-settings/cluster-operator.tsx
+++ b/frontend/public/components/cluster-settings/cluster-operator.tsx
@@ -2,50 +2,31 @@
 import * as React from 'react';
 import * as _ from 'lodash-es';
 
-import { K8sResourceKind, K8sResourceKindReference, referenceForModel } from '../../module/k8s';
 import { ClusterOperatorModel } from '../../models';
-import { ColHead, DetailsPage, List, ListHeader, ListPage } from '../factory';
 import {
+  ColHead,
+  DetailsPage,
+  List,
+  ListHeader,
+  ListPage,
+} from '../factory';
+import {
+  getClusterOperatorStatus,
+  getStatusAndMessage,
+  K8sResourceKind,
+  K8sResourceKindReference,
+  OperatorStatus,
+  referenceForModel,
+} from '../../module/k8s';
+import {
+  navFactory,
   ResourceLink,
   ResourceSummary,
   SectionHeading,
-  navFactory,
 } from '../utils';
 
-enum OperatorStatus {
-  Available = 'Available',
-  Updating = 'Updating',
-  Failing = 'Failing',
-  Unknown = 'Unknown',
-}
-
 export const clusterOperatorReference: K8sResourceKindReference = referenceForModel(ClusterOperatorModel);
 
-const getStatusAndMessage = (operator: K8sResourceKind) => {
-  const conditions = _.get(operator, 'status.conditions');
-  const failing: any = _.find(conditions, { type: 'Failing', status: 'True' });
-  if (failing) {
-    return { status: OperatorStatus.Failing, message: failing.message };
-  }
-
-  const progressing: any = _.find(conditions, { type: 'Progressing', status: 'True' });
-  if (progressing) {
-    return { status: OperatorStatus.Updating, message: progressing.message };
-  }
-
-  const available: any = _.find(conditions, { type: 'Available', status: 'True' });
-  if (available) {
-    return { status: OperatorStatus.Available, message: available.message };
-  }
-
-  return { status: OperatorStatus.Unknown, message: '' };
-};
-
-export const getClusterOperatorStatus = (operator: K8sResourceKind) => {
-  const { status } = getStatusAndMessage(operator);
-  return status;
-};
-
 const getIconClass = (status: OperatorStatus) => {
   return {
     [OperatorStatus.Available]: 'pficon pficon-ok text-success',
@@ -81,7 +62,7 @@ const ClusterOperatorRow: React.SFC<ClusterOperatorRowProps> = ({obj}) => {
       {message ? _.truncate(message, { length: 256, separator: ' ' }) : '-'}
     </div>
     <div className="col-md-3 col-sm-3 hidden-xs">
-      {obj.status.version || <span className="text-muted">Unknown</span>}
+      {_.get(obj, 'status.version') || <span className="text-muted">Unknown</span>}
     </div>
   </div>;
 };
diff --git a/frontend/public/components/cluster-settings/cluster-settings.tsx b/frontend/public/components/cluster-settings/cluster-settings.tsx
index fc325b028a37..c8c375a05e11 100644
--- a/frontend/public/components/cluster-settings/cluster-settings.tsx
+++ b/frontend/public/components/cluster-settings/cluster-settings.tsx
@@ -8,12 +8,20 @@ import { Helmet } from 'react-helmet';
 import { Button } from 'patternfly-react';
 import { Link } from 'react-router-dom';
 
-import { Firehose, HorizontalNav, ResourceLink, resourcePathFromModel } from '../utils';
-import { K8sResourceKind, referenceForModel } from '../../module/k8s';
+import { ClusterVersionKind, K8sResourceKind, referenceForModel } from '../../module/k8s';
 import { ClusterAutoscalerModel, ClusterVersionModel } from '../../models';
 import { ClusterOperatorPage } from './cluster-operator';
-import { clusterUpdateModal } from '../modals';
+import { clusterChannelModal, clusterUpdateModal } from '../modals';
 import { GlobalConfigPage } from './global-config';
+import {
+  EmptyBox,
+  Firehose,
+  HorizontalNav,
+  ResourceLink,
+  resourcePathFromModel,
+  SectionHeading,
+  Timestamp,
+} from '../utils';
 
 enum ClusterUpdateStatus {
   UpToDate = 'Up to Date',
@@ -24,22 +32,27 @@ enum ClusterUpdateStatus {
 }
 
 const clusterAutoscalerReference = referenceForModel(ClusterAutoscalerModel);
-const clusterVersionReference = referenceForModel(ClusterVersionModel);
+export const clusterVersionReference = referenceForModel(ClusterVersionModel);
 
-export const getAvailableClusterUpdates = (cv) => {
+export const getAvailableClusterChannels = () => ({'nightly-4.0': 'nightly-4.0', 'pre-release-4.0': 'pre-release-4.0', 'stable-4.0': 'stable-4.0'});
+
+export const getAvailableClusterUpdates = (cv: ClusterVersionKind) => {
   return _.get(cv, 'status.availableUpdates');
 };
 
-export const getCurrentClusterVersion = (cv) => {
+export const getDesiredClusterVersion = (cv: ClusterVersionKind) => {
   return _.get(cv, 'status.desired.version');
 };
 
-
-const launchUpdateModal = (cv) => {
+const launchUpdateModal = (cv: ClusterVersionKind) => {
   clusterUpdateModal({cv});
 };
 
-const getClusterUpdateStatus = (cv: K8sResourceKind): ClusterUpdateStatus => {
+const CurrentChannel: React.SFC<CurrentChannelProps> = ({cv}) => <button className="btn btn-link co-m-modal-link" onClick={() => (clusterChannelModal({cv}))}>
+  {cv.spec.channel || '-'}
+</button>;
+
+const getClusterUpdateStatus = (cv: ClusterVersionKind): ClusterUpdateStatus => {
   const conditions = _.get(cv, 'status.conditions', []);
   const isFailingCondition = _.find(conditions, { type: 'Failing', status: 'True' });
   if (isFailingCondition) {
@@ -111,63 +124,93 @@ const UpdateStatus: React.SFC<UpdateStatusProps> = ({cv}) => {
   </React.Fragment>;
 };
 
-const CurrentVersion: React.SFC<CurrentVersionProps> = ({cv}) => {
-  const currentVersion = getCurrentClusterVersion(cv);
-  return currentVersion || <React.Fragment><i className="pficon pficon-warning-triangle-o" aria-hidden="true" />&nbsp;Unknown</React.Fragment>;
+const DesiredVersion: React.SFC<DesiredVersionProps> = ({cv}) => {
+  const version = getDesiredClusterVersion(cv);
+  return version
+    ? <React.Fragment>{version}</React.Fragment>
+    : <React.Fragment><i className="pficon pficon-warning-triangle-o" aria-hidden="true" />&nbsp;Unknown</React.Fragment>;
 };
 
 const ClusterVersionDetailsTable: React.SFC<ClusterVersionDetailsTableProps> = ({obj: cv, autoscalers}) => {
-  const conditions = _.get(cv, 'status.conditions', []);
+  const { history = [], conditions = [] } = cv.status;
   const status = getClusterUpdateStatus(cv);
   const retrievedUpdatesFailedCondition = _.find(conditions, { type: 'RetrievedUpdates', status: 'False' });
   const isFailingCondition = _.find(conditions, { type: 'Failing', status: 'True' });
 
-  return <div className="co-m-pane__body">
-    <div className="co-m-pane__body-group">
-      { status === ClusterUpdateStatus.Updating && <UpdateInProgressAlert /> }
-      { status === ClusterUpdateStatus.UpdatesAvailable && <UpdatesAvailableAlert cv={cv} /> }
-      { isFailingCondition && <FailedConditionAlert message="Update is failing." condition={isFailingCondition} /> }
-      { retrievedUpdatesFailedCondition && <FailedConditionAlert message="Could not retrieve updates." condition={retrievedUpdatesFailedCondition} /> }
-      <div className="co-detail-table">
-        <div className="co-detail-table__row row">
-          <div className="co-detail-table__section">
-            <dl className="co-m-pane__details">
-              <dt className="co-detail-table__section-header">Channel</dt>
-              <dd>{cv.spec.channel}</dd>
-            </dl>
-          </div>
-          <div className="co-detail-table__section">
-            <dl className="co-m-pane__details">
-              <dt className="co-detail-table__section-header">Update Status</dt>
-              <dd><UpdateStatus cv={cv} /></dd>
-            </dl>
-          </div>
-          <div className="co-detail-table__section">
-            <dl className="co-m-pane__details">
-              <dt className="co-detail-table__section-header">Current Version</dt>
-              <dd><CurrentVersion cv={cv} /></dd>
-            </dl>
+  return <React.Fragment>
+    <div className="co-m-pane__body">
+      <div className="co-m-pane__body-group">
+        { status === ClusterUpdateStatus.Updating && <UpdateInProgressAlert /> }
+        { status === ClusterUpdateStatus.UpdatesAvailable && <UpdatesAvailableAlert cv={cv} /> }
+        { isFailingCondition && <FailedConditionAlert message="Update is failing." condition={isFailingCondition} /> }
+        { retrievedUpdatesFailedCondition && <FailedConditionAlert message="Could not retrieve updates." condition={retrievedUpdatesFailedCondition} /> }
+        <div className="co-detail-table">
+          <div className="co-detail-table__row row">
+            <div className="co-detail-table__section">
+              <dl className="co-m-pane__details">
+                <dt className="co-detail-table__section-header">Channel</dt>
+                <dd><CurrentChannel cv={cv} /></dd>
+              </dl>
+            </div>
+            <div className="co-detail-table__section">
+              <dl className="co-m-pane__details">
+                <dt className="co-detail-table__section-header">Update Status</dt>
+                <dd><UpdateStatus cv={cv} /></dd>
+              </dl>
+            </div>
+            <div className="co-detail-table__section">
+              <dl className="co-m-pane__details">
+                <dt className="co-detail-table__section-header">Desired Version</dt>
+                <dd><DesiredVersion cv={cv} /></dd>
+              </dl>
+            </div>
           </div>
         </div>
       </div>
+      <div className="co-m-pane__body-group">
+        <dl className="co-m-pane__details">
+          <dt>Cluster ID</dt>
+          <dd className="co-break-all">{cv.spec.clusterID}</dd>
+          <dt>Desired Release Image</dt>
+          <dd className="co-break-all">{_.get(cv, 'status.desired.image') || '-'}</dd>
+          <dt>Cluster Autoscaler</dt>
+          <dd>
+            {_.isEmpty(autoscalers)
+              ? <Link to={`${resourcePathFromModel(ClusterAutoscalerModel)}/new`}>
+                <i className="pficon pficon-add-circle-o" aria-hidden="true" /> Create Autoscaler
+              </Link>
+              : autoscalers.map(autoscaler => <div key={autoscaler.metadata.uid}><ResourceLink kind={clusterAutoscalerReference} name={autoscaler.metadata.name} /></div>)}
+          </dd>
+        </dl>
+      </div>
     </div>
-    <div className="co-m-pane__body-group">
-      <dl className="co-m-pane__details">
-        <dt>Cluster ID</dt>
-        <dd className="co-break-all">{cv.spec.clusterID}</dd>
-        <dt>Current Payload</dt>
-        <dd className="co-break-all">{_.get(cv, 'status.desired.payload') || '-'}</dd>
-        <dt>Cluster Autoscaler</dt>
-        <dd>
-          {_.isEmpty(autoscalers)
-            ? <Link to={`${resourcePathFromModel(ClusterAutoscalerModel)}/new`}>
-              <i className="pficon pficon-add-circle-o" aria-hidden="true" /> Create Autoscaler
-            </Link>
-            : autoscalers.map(autoscaler => <div key={autoscaler.metadata.uid}><ResourceLink kind={clusterAutoscalerReference} name={autoscaler.metadata.name} /></div>)}
-        </dd>
-      </dl>
+    <div className="co-m-pane__body">
+      <SectionHeading text="Update History" />
+      {_.isEmpty(history)
+        ? <EmptyBox label="History" />
+        : <div className="co-table-container">
+          <table className="table">
+            <thead>
+              <tr>
+                <th>Version</th>
+                <th>State</th>
+                <th>Started</th>
+                <th>Completed</th>
+              </tr>
+            </thead>
+            <tbody>
+              {_.map(history, (update, i) => <tr key={i}>
+                <td className="co-break-all">{update.version || '-'}</td>
+                <td>{update.state || '-'}</td>
+                <td><Timestamp timestamp={update.startedTime} /></td>
+                <td>{update.completionTime ? <Timestamp timestamp={update.completionTime} /> : '-'}</td>
+              </tr>)}
+            </tbody>
+          </table>
+        </div>
+      }
     </div>
-  </div>;
+  </React.Fragment>;
 };
 
 const ClusterOperatorTabPage: React.SFC = () => <ClusterOperatorPage autoFocus={false} showTitle={false} />;
@@ -207,15 +250,19 @@ export const ClusterSettingsPage: React.SFC<ClusterSettingsPageProps> = ({match}
 };
 
 type UpdateStatusProps = {
-  cv: K8sResourceKind;
+  cv: ClusterVersionKind;
 };
 
-type CurrentVersionProps = {
+type CurrentChannelProps = {
   cv: K8sResourceKind;
 };
 
+type DesiredVersionProps = {
+  cv: ClusterVersionKind;
+};
+
 type ClusterVersionDetailsTableProps = {
-  obj: K8sResourceKind;
+  obj: ClusterVersionKind;
   autoscalers: K8sResourceKind[];
 };
 
diff --git a/frontend/public/components/factory/list.tsx b/frontend/public/components/factory/list.tsx
index 877f060d926a..af95e45bb9b7 100644
--- a/frontend/public/components/factory/list.tsx
+++ b/frontend/public/components/factory/list.tsx
@@ -14,13 +14,17 @@ import {
   WindowScroller,
 } from 'react-virtualized';
 
-import { alertState, alertStateOrder, silenceState, silenceStateOrder } from '../../monitoring';
 import { UIActions } from '../../ui/ui-actions';
 import { ingressValidHosts } from '../ingress';
 import { routeStatus } from '../routes';
-import { getClusterOperatorStatus } from '../cluster-settings/cluster-operator';
 import { secretTypeFilterReducer } from '../secret';
 import { bindingType, roleType } from '../RBAC';
+import {
+  alertState,
+  alertStateOrder,
+  silenceState,
+  silenceStateOrder,
+} from '../../monitoring';
 import {
   containerLinuxUpdateOperator,
   EmptyBox,
@@ -43,6 +47,7 @@ import {
   podReadiness,
   serviceCatalogStatus,
   serviceClassDisplayName,
+  getClusterOperatorStatus,
 } from '../../module/k8s';
 
 const fuzzyCaseInsensitive = (a, b) => fuzzy(_.toLower(a), _.toLower(b));
@@ -230,6 +235,7 @@ const sorts = {
   serviceClassDisplayName,
   silenceStateOrder,
   string: val => JSON.stringify(val),
+  getClusterOperatorStatus,
 };
 
 export class ColHead extends React.Component<ColHeadProps> {
@@ -443,9 +449,7 @@ export const List = connect(stateToProps, {sortList: UIActions.sortList})(
     render() {
       const {currentSortField, currentSortFunc, currentSortOrder, expand, Header, label, listId, mock, Row, sortList} = this.props;
       const componentProps: any = _.pick(this.props, ['data', 'filters', 'selected', 'match', 'kindObj']);
-
       const ListRows = this.props.virtualize ? VirtualRows : Rows;
-
       const children = <React.Fragment>
         <Header
           {...componentProps}
diff --git a/frontend/public/components/machine-config-pool.tsx b/frontend/public/components/machine-config-pool.tsx
new file mode 100644
index 000000000000..34f8c60cb9a2
--- /dev/null
+++ b/frontend/public/components/machine-config-pool.tsx
@@ -0,0 +1,262 @@
+/* eslint-disable no-undef, no-unused-vars */
+import * as _ from 'lodash-es';
+import * as React from 'react';
+
+import { Conditions } from './conditions';
+import { errorModal } from './modals';
+import { Tooltip } from './utils/tooltip';
+import { MachineConfigPoolModel, NodeModel } from '../models';
+import { machineConfigReference, MachineConfigPage } from './machine-config';
+import {
+  K8sResourceConditionStatus,
+  MachineConfigPoolConditionType,
+  MachineConfigPoolKind,
+  referenceForModel,
+} from '../module/k8s';
+import {
+  ColHead,
+  DetailsPage,
+  List,
+  ListHeader,
+  ListPage,
+} from './factory';
+import {
+  Kebab,
+  navFactory,
+  pluralize,
+  ResourceKebab,
+  ResourceLink,
+  ResourceSummary,
+  SectionHeading,
+  Selector,
+  togglePaused,
+  WorkloadPausedAlert,
+} from './utils';
+
+const pauseAction = (kind, obj) => ({
+  label: obj.spec.paused ? 'Resume Updates' : 'Pause Updates',
+  callback: () => togglePaused(kind, obj).catch((err) => errorModal({error: err.message})),
+});
+
+const machineConfigPoolReference = referenceForModel(MachineConfigPoolModel);
+const nodeReference = referenceForModel(NodeModel);
+const machineConfigPoolMenuActions = [pauseAction, ...Kebab.factory.common];
+const getConditionStatus = (mcp: MachineConfigPoolKind, type: MachineConfigPoolConditionType): K8sResourceConditionStatus => {
+  const {conditions} = mcp.status;
+  const condition = _.find(conditions, {type});
+  return condition ? condition.status : K8sResourceConditionStatus.Unknown;
+};
+
+const MachineConfigPoolCharacteristics: React.SFC<MachineConfigPoolCharacteristicsProps> = ({obj}) => {
+  const { maxUnavailable } = obj.spec;
+  const { configuration } = obj.status;
+  return <dl className="co-m-pane__details">
+    <dt>Max Unavailable Machines</dt>
+    <dd>{maxUnavailable || 1}</dd>
+    { configuration &&
+      <React.Fragment>
+        <dt>Current Configuration</dt>
+        <dd>
+          {
+            configuration.name
+              ? <ResourceLink kind={machineConfigReference} name={configuration.name} title={configuration.name} />
+              : '-'
+          }
+        </dd>
+        <dt>Current Configuration Source</dt>
+        <dd>
+          {
+            configuration.source
+              ? _.map(configuration.source, ({apiVersion, kind, name}) =>
+                <ResourceLink key={`${apiVersion}-${kind}-${name}`} kind={machineConfigReference} name={name} title={name} />
+              )
+              : '-'
+          }
+        </dd>
+      </React.Fragment>
+    }
+  </dl>;
+};
+
+const MachineConfigPoolCounts: React.SFC<MachineConfigPoolCountsProps> = ({obj}) => {
+  const { machineCount, readyMachineCount, updatedMachineCount, unavailableMachineCount } = obj.status;
+  return <div className="co-m-pane__body-group">
+    <div className="co-detail-table">
+      <div className="co-detail-table__row row">
+        <div className="co-detail-table__section">
+          <dl className="co-m-pane__details">
+            <dt className="co-detail-table__section-header">Total Machine Count</dt>
+            <dd>
+              <Tooltip content="Total number of machines in the machine pool.">
+                {pluralize(machineCount, 'machine')}
+              </Tooltip>
+            </dd>
+          </dl>
+        </div>
+        <div className="co-detail-table__section">
+          <dl className="co-m-pane__details">
+            <dt className="co-detail-table__section-header">Ready Machines</dt>
+            <dd>
+              <Tooltip content="Total number of ready machines targeted by the pool.">
+                {pluralize(readyMachineCount, 'machine')}
+              </Tooltip>
+            </dd>
+          </dl>
+        </div>
+        <div className="co-detail-table__section">
+          <dl className="co-m-pane__details">
+            <dt className="co-detail-table__section-header">Updated Count</dt>
+            <dd>
+              <Tooltip content="Total number of machines targeted by the pool that have the CurrentMachineConfig as their config.">
+                {pluralize(updatedMachineCount, 'machine')}
+              </Tooltip>
+            </dd>
+          </dl>
+        </div>
+        <div className="co-detail-table__section co-detail-table__section--last">
+          <dl className="co-m-pane__details">
+            <dt className="co-detail-table__section-header">Unavailable Count</dt>
+            <dd>
+              <Tooltip content="Total number of unavailable (non-ready) machines targeted by the pool. A node is marked unavailable if it is in updating state or NodeReady condition is false.">
+                {pluralize(unavailableMachineCount, 'machine')}
+              </Tooltip>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>;
+};
+
+const MachineConfigPoolSummary: React.SFC<MachineConfigPoolSummaryProps> = ({obj}) => {
+  const { machineConfigSelector, machineSelector } = obj.spec;
+  return <ResourceSummary resource={obj} showPodSelector={false} showNodeSelector={false}>
+    <dt>Machine Config Selector</dt>
+    <dd>
+      <Selector
+        kind={machineConfigReference}
+        selector={machineConfigSelector}
+      />
+    </dd>
+    <dt>Machine Selector</dt>
+    <dd>
+      <Selector
+        kind={nodeReference}
+        selector={machineSelector}
+      />
+    </dd>
+  </ResourceSummary>;
+};
+
+const MachineConfigList: React.SFC<MachineConfigListProps> = ({obj}) => (
+  <MachineConfigPage canCreate={false} showTitle={false} selector={obj.spec.machineConfigSelector} />
+);
+
+const MachineConfigPoolDetails: React.SFC<MachineConfigPoolDetailsProps> = ({obj}) => {
+  const { paused } = obj.spec;
+  return <React.Fragment>
+    <div className="co-m-pane__body">
+      <SectionHeading text="Machine Config Pool Overview " />
+      {paused && <WorkloadPausedAlert model={MachineConfigPoolModel} obj={obj} />}
+      <MachineConfigPoolCounts obj={obj} />
+      <div className="row">
+        <div className="col-sm-6">
+          <MachineConfigPoolSummary obj={obj} />
+        </div>
+        <div className="col-sm-6">
+          <MachineConfigPoolCharacteristics obj={obj} />
+        </div>
+      </div>
+    </div>
+    <div className="co-m-pane__body">
+      <SectionHeading text="Conditions" />
+      <Conditions conditions={_.get(obj, 'status.conditions')} />
+    </div>
+  </React.Fragment>;
+};
+
+const pages = [
+  navFactory.details(MachineConfigPoolDetails),
+  navFactory.editYaml(),
+  navFactory.machineConfigs(MachineConfigList),
+];
+
+export const MachineConfigPoolDetailsPage: React.SFC<any> = props => (
+  <DetailsPage
+    {...props}
+    kind={machineConfigPoolReference}
+    menuActions={machineConfigPoolMenuActions}
+    pages={pages}
+  />
+);
+
+const MachineConfigPoolHeader: React.SFC<any> = props => <ListHeader>
+  <ColHead {...props} className="col-xs-6 col-lg-4" sortField="metadata.name">Name</ColHead>
+  <ColHead {...props} className="hidden-xs hidden-sm hidden-md col-lg-5" sortField="status.configuration.name">Configuration</ColHead>
+  <ColHead {...props} className="col-xs-3  col-sm-2 col-lg-1">Updated</ColHead>
+  <ColHead {...props} className="hidden-xs col-sm-2 col-lg-1">Updating</ColHead>
+  <ColHead {...props} className="col-xs-3  col-sm-2 col-lg-1">Degraded</ColHead>
+</ListHeader>;
+
+const MachineConfigPoolRow: React.SFC<MachineConfigPoolRowProps> = ({obj}) => <div className="row co-resource-list__item">
+  <div className="col-xs-6 col-lg-4 co-break-word">
+    <ResourceLink kind={machineConfigPoolReference} name={obj.metadata.name} title={obj.metadata.name} />
+  </div>
+  <div className="hidden-xs hidden-sm hidden-md col-lg-5 co-break-word">
+    {_.get(obj, 'status.configuration.name') ? <ResourceLink kind={machineConfigReference} name={obj.status.configuration.name} title={obj.status.configuration.name} /> : '-'}
+  </div>
+  <div className="col-xs-3  col-sm-2 col-lg-1">
+    {getConditionStatus(obj, MachineConfigPoolConditionType.Updated)}
+  </div>
+  <div className="hidden-xs col-sm-2 col-lg-1">
+    {getConditionStatus(obj, MachineConfigPoolConditionType.Updating)}
+  </div>
+  <div className="col-xs-3  col-sm-2 col-lg-1">
+    {getConditionStatus(obj, MachineConfigPoolConditionType.Degraded)}
+  </div>
+
+  <div className="dropdown-kebab-pf">
+    <ResourceKebab actions={machineConfigPoolMenuActions} kind={machineConfigPoolReference} resource={obj} />
+  </div>
+</div>;
+
+const MachineConfigPoolList: React.SFC<any> = props => (
+  <List
+    {...props}
+    Header={MachineConfigPoolHeader}
+    Row={MachineConfigPoolRow}
+  />
+);
+
+export const MachineConfigPoolPage: React.SFC<any> = props => (
+  <ListPage
+    {...props}
+    ListComponent={MachineConfigPoolList}
+    kind={machineConfigPoolReference}
+    canCreate
+  />
+);
+
+type MachineConfigPoolCountsProps = {
+  obj: MachineConfigPoolKind;
+};
+
+type MachineConfigPoolDetailsProps = {
+  obj: MachineConfigPoolKind;
+};
+
+type MachineConfigListProps = {
+  obj: MachineConfigPoolKind;
+};
+
+type MachineConfigPoolCharacteristicsProps = {
+  obj: MachineConfigPoolKind;
+};
+
+type MachineConfigPoolSummaryProps = {
+  obj: MachineConfigPoolKind;
+};
+
+type MachineConfigPoolRowProps = {
+  obj: MachineConfigPoolKind;
+};
diff --git a/frontend/public/components/machine-config.tsx b/frontend/public/components/machine-config.tsx
new file mode 100644
index 000000000000..2946f920eb86
--- /dev/null
+++ b/frontend/public/components/machine-config.tsx
@@ -0,0 +1,111 @@
+/* eslint-disable no-undef, no-unused-vars */
+import * as _ from 'lodash-es';
+import * as React from 'react';
+
+import { MachineConfigKind, referenceForModel } from '../module/k8s';
+import { MachineConfigModel } from '../models';
+import { fromNow } from './utils/datetime';
+import {
+  ColHead,
+  DetailsPage,
+  List,
+  ListHeader,
+  ListPage,
+} from './factory';
+import {
+  Kebab,
+  navFactory,
+  ResourceKebab,
+  ResourceLink,
+  ResourceSummary,
+  SectionHeading,
+} from './utils';
+
+
+export const machineConfigReference = referenceForModel(MachineConfigModel);
+const machineConfigMenuActions = [...Kebab.factory.common];
+
+const MachineConfigSummary: React.SFC<MachineConfigSummaryProps> = ({obj}) => (
+  <ResourceSummary resource={obj} showPodSelector={false} showNodeSelector={false}>
+    <dt>OS Image URL</dt>
+    <dd>{obj.spec.osImageURL || '-'}</dd>
+  </ResourceSummary>
+);
+
+const MachineConfigDetails: React.SFC<MachineConfigDetailsProps> = ({obj}) => (
+  <div className="co-m-pane__body">
+    <SectionHeading text="Machine Config Overview" />
+    <div className="row">
+      <div className="col-xs-12">
+        <MachineConfigSummary obj={obj} />
+      </div>
+    </div>
+  </div>
+);
+
+const pages = [
+  navFactory.details(MachineConfigDetails),
+  navFactory.editYaml(),
+];
+
+export const MachineConfigDetailsPage: React.SFC<any> = props => {
+  return <DetailsPage {...props} kind={machineConfigReference} menuActions={machineConfigMenuActions} pages={pages} />;
+};
+
+const MachineConfigHeader: React.SFC<any> = props => <ListHeader>
+  <ColHead {...props} className="col-xs-6  col-sm-4  col-md-3  col-lg-2" sortField="metadata.name">Name</ColHead>
+  <ColHead {...props} className="hidden-xs col-sm-6  col-md-4  col-lg-3" sortField="metadata.annotations['machineconfiguration.openshift.io/generated-by-controller-version']">Generated By Controller</ColHead>
+  <ColHead {...props} className="hidden-xs hidden-sm col-md-3  col-lg-3" sortField="spec.config.ignition.version">Ignition Version</ColHead>
+  <ColHead {...props} className="hidden-xs hidden-sm hidden-md col-lg-2" sortField="spec.osImageURL">OS Image URL</ColHead>
+  <ColHead {...props} className="col-xs-6  col-sm-2  col-md-2  col-lg-2" sortField="metadata.creationTimestamp">Created</ColHead>
+</ListHeader>;
+
+const MachineConfigRow: React.SFC<MachineConfigRowProps> = ({obj}) => <div className="row co-resource-list__item">
+  <div className="col-xs-6  col-sm-4  col-md-3  col-lg-2">
+    <ResourceLink kind={machineConfigReference} name={obj.metadata.name} title={obj.metadata.name} />
+  </div>
+  <div className="hidden-xs col-sm-6  col-md-4  col-lg-3">
+    { _.get(obj, ['metadata', 'annotations', 'machineconfiguration.openshift.io/generated-by-controller-version'], '-')}
+  </div>
+  <div className="hidden-xs hidden-sm col-md-3  col-lg-3">
+    {_.get(obj, 'spec.config.ignition.version') || '-'}
+  </div>
+  <div className="hidden-xs hidden-sm hidden-md col-lg-2 co-break-word">
+    {_.get(obj, 'spec.osImageURL') || '-'}
+  </div>
+  <div className="col-xs-6  col-sm-2  col-md-2  col-lg-2">
+    {fromNow(obj.metadata.creationTimestamp)}
+  </div>
+  <div className="dropdown-kebab-pf">
+    <ResourceKebab actions={machineConfigMenuActions} kind={machineConfigReference} resource={obj} />
+  </div>
+</div>;
+
+const MachineConfigList: React.SFC<any> = props => (
+  <List
+    {...props}
+    Header={MachineConfigHeader}
+    Row={MachineConfigRow}
+  />
+);
+
+export const MachineConfigPage: React.SFC<any> = ({canCreate = true, ...rest}) => (
+  <ListPage
+    {...rest}
+    canCreate={canCreate}
+    ListComponent={MachineConfigList}
+    kind={machineConfigReference}
+  />
+);
+
+type MachineConfigRowProps = {
+  obj: MachineConfigKind;
+};
+
+type MachineConfigDetailsProps = {
+  obj: MachineConfigKind;
+};
+
+type MachineConfigSummaryProps = {
+  obj: MachineConfigKind;
+};
diff --git a/frontend/public/components/machine.tsx b/frontend/public/components/machine.tsx
index 94f72c9b8e27..3ee01d769a93 100644
--- a/frontend/public/components/machine.tsx
+++ b/frontend/public/components/machine.tsx
@@ -20,7 +20,7 @@ import { breadcrumbsForOwnerRefs } from './utils/breadcrumbs';
 
 const { common } = Kebab.factory;
 const menuActions = [...common];
-const machineReference = referenceForModel(MachineModel);
+export const machineReference = referenceForModel(MachineModel);
 const getAWSPlacement = (machine: MachineKind) => _.get(machine, 'spec.providerSpec.value.placement') || {};
 
 export const getMachineRole = (obj: MachineKind | MachineSetKind | MachineDeploymentKind) => _.get(obj, ['metadata', 'labels', 'sigs.k8s.io/cluster-api-machine-role']);
diff --git a/frontend/public/components/masthead-toolbar.jsx b/frontend/public/components/masthead-toolbar.jsx
index fd4d406b9acd..e914cc70bef3 100644
--- a/frontend/public/components/masthead-toolbar.jsx
+++ b/frontend/public/components/masthead-toolbar.jsx
@@ -6,9 +6,21 @@ import { Button, Dropdown, DropdownToggle, DropdownSeparator, DropdownItem, Keba
 
 import { FLAGS, stateToProps as flagStateToProps, flagPending } from '../features';
 import { authSvc } from '../module/auth';
-import { history } from './utils';
+import { history, Firehose } from './utils';
 import { openshiftHelpBase } from './utils/documentation';
 import { AboutModal } from './about-modal';
+import { getAvailableClusterUpdates, clusterVersionReference } from './cluster-settings/cluster-settings';
+
+const UpdatesAvailableButton = ({obj, onClick}) => {
+  const updatesAvailable = !_.isEmpty(getAvailableClusterUpdates(obj.data));
+  return updatesAvailable
+    ? <ToolbarItem>
+      <Button variant="plain" aria-label="Cluster Updates Available" onClick={onClick}>
+        <ArrowCircleUpIcon />
+      </Button>
+    </ToolbarItem>
+    : null;
+};
 
 class MastheadToolbar_ extends React.Component {
   constructor(props) {
@@ -18,6 +30,7 @@ class MastheadToolbar_ extends React.Component {
       isUserDropdownOpen: false,
       isKebabDropdownOpen: false,
       username: null,
+      isKubeAdmin: false,
       showAboutModal: false,
     };
 
@@ -53,7 +66,10 @@ class MastheadToolbar_ extends React.Component {
     if (!flags[FLAGS.OPENSHIFT]) {
       this.setState({ username: authSvc.name() });
     }
-    this.setState({ username: _.get(user, 'fullName') || _.get(user, 'metadata.name', '') });
+    this.setState({
+      username: _.get(user, 'fullName') || _.get(user, 'metadata.name', ''),
+      isKubeAdmin: _.get(user, 'metadata.name') === 'kube:admin',
+    });
   }
 
   _onUserDropdownToggle(isUserDropdownOpen) {
@@ -147,7 +163,7 @@ class MastheadToolbar_ extends React.Component {
       const logout = e => {
         e.preventDefault();
         if (flags[FLAGS.OPENSHIFT]) {
-          authSvc.deleteOpenShiftToken().then(() => authSvc.logout());
+          authSvc.logoutOpenShift(this.state.isKubeAdmin);
         } else {
           authSvc.logout();
         }
@@ -214,16 +230,20 @@ class MastheadToolbar_ extends React.Component {
   render() {
     const { isApplicationLauncherDropdownOpen, isHelpDropdownOpen, showAboutModal } = this.state;
     const { flags } = this.props;
+    const resources = [{
+      kind: clusterVersionReference,
+      name: 'version',
+      isList: false,
+      prop: 'obj',
+    }];
     return (
       <React.Fragment>
         <Toolbar>
           <ToolbarGroup className="pf-u-sr-only pf-u-visible-on-md">
             {/* desktop -- (updates button) */}
-            {flags[FLAGS.CLUSTER_UPDATES_AVAILABLE] && <ToolbarItem>
-              <Button variant="plain" aria-label="Cluster Updates Available" onClick={this._onClusterUpdatesAvailable}>
-                <ArrowCircleUpIcon />
-              </Button>
-            </ToolbarItem>}
+            <Firehose resources={resources}>
+              <UpdatesAvailableButton onClick={this._onClusterUpdatesAvailable} />
+            </Firehose>
             {/* desktop -- (application launcher dropdown), help dropdown [documentation, about] */}
             {flags[FLAGS.OPENSHIFT] && <ToolbarItem>
               <Dropdown
@@ -277,7 +297,7 @@ class MastheadToolbar_ extends React.Component {
 }
 
 const mastheadToolbarStateToProps = state => {
-  const desiredFlags = [FLAGS.AUTH_ENABLED, FLAGS.OPENSHIFT, FLAGS.CLUSTER_UPDATES_AVAILABLE];
+  const desiredFlags = [FLAGS.AUTH_ENABLED, FLAGS.OPENSHIFT];
   const flagProps = flagStateToProps(desiredFlags, state);
   const user = state.UI.get('user');
   return { ...flagProps, user };
diff --git a/frontend/public/components/modals/_modals.scss b/frontend/public/components/modals/_modals.scss
index 20be2e9dde83..0edac8202d05 100644
--- a/frontend/public/components/modals/_modals.scss
+++ b/frontend/public/components/modals/_modals.scss
@@ -19,14 +19,6 @@
   z-index: $zindex-modal;
 }
 
-.cluster-update-modal__dropdown {
-  .btn-dropdown,
-  .dropdown-menu {
-    width: 100%;
-  }
-}
-
-// Modal modifications to enable vertical scrolling with shadow overlays
 .modal-body {
   display: flex;
   flex: 1 1 auto;
diff --git a/frontend/public/components/modals/cluster-channel-modal.tsx b/frontend/public/components/modals/cluster-channel-modal.tsx
new file mode 100644
index 000000000000..be320de0e6a4
--- /dev/null
+++ b/frontend/public/components/modals/cluster-channel-modal.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable no-undef, no-unused-vars */
+
+import * as React from 'react';
+
+import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter, ModalComponentProps } from '../factory/modal';
+import { Dropdown, PromiseComponent } from '../utils';
+import { k8sPatch, K8sResourceKind } from '../../module/k8s';
+import { ClusterVersionModel } from '../../models';
+import { getAvailableClusterChannels } from '../cluster-settings/cluster-settings';
+
+class ClusterChannelModal extends PromiseComponent {
+  readonly state: ClusterChannelModalState;
+
+  constructor(public props: ClusterChannelModalProps) {
+    super(props);
+  }
+
+  _submit = (e) => {
+    e.preventDefault();
+    const {cv} = this.props;
+    const {selectedChannel} = this.state;
+    const patch = [{ op: 'add', path: '/spec/channel', value: selectedChannel }];
+    this.handlePromise(k8sPatch(ClusterVersionModel, cv, patch)).then(this.props.close);
+  }
+
+  _cancel = () => {
+    this.props.close();
+  }
+
+  _change = (selectedChannel) => {
+    this.setState({selectedChannel});
+  }
+
+  render() {
+    const {cv} = this.props;
+    const availableChannels = getAvailableClusterChannels();
+    return <form onSubmit={this._submit} name="form" className="modal-content modal-content--small">
+      <ModalTitle>Update Channel</ModalTitle>
+      <ModalBody>
+        {/* <p>
+          // TODO: Determine what content goes here.
+        </p> */}
+        <div className="form-group">
+          <label htmlFor="channel_dropdown">Channel</label>
+          <Dropdown
+            className="cluster-channel-modal__dropdown"
+            id="channel_dropdown"
+            items={availableChannels}
+            onChange={this._change}
+            selectedKey={cv.spec.channel}
+          />
+        </div>
+      </ModalBody>
+      <ModalSubmitFooter errorMessage={this.state.errorMessage} inProgress={this.state.inProgress} submitText="Update" cancel={this._cancel} />
+    </form>;
+  }
+}
+
+export const clusterChannelModal = createModalLauncher(ClusterChannelModal);
+
+type ClusterChannelModalProps = {
+  cv: K8sResourceKind;
+} & ModalComponentProps;
+
+type ClusterChannelModalState = {
+  selectedChannel: string;
+  inProgress: boolean;
+  errorMessage: string;
+};
diff --git a/frontend/public/components/modals/cluster-update-modal.tsx b/frontend/public/components/modals/cluster-update-modal.tsx
index 1be36ab082a6..d2638a6112c2 100644
--- a/frontend/public/components/modals/cluster-update-modal.tsx
+++ b/frontend/public/components/modals/cluster-update-modal.tsx
@@ -5,9 +5,9 @@ import * as React from 'react';
 
 import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter, ModalComponentProps } from '../factory/modal';
 import { Dropdown, PromiseComponent, ExternalLink } from '../utils';
-import { k8sPatch, K8sResourceKind } from '../../module/k8s';
+import { ClusterVersionKind, k8sPatch } from '../../module/k8s';
 import { ClusterVersionModel } from '../../models';
-import { getAvailableClusterUpdates, getCurrentClusterVersion } from '../cluster-settings/cluster-settings';
+import { getAvailableClusterUpdates, getDesiredClusterVersion } from '../cluster-settings/cluster-settings';
 
 class ClusterUpdateModal extends PromiseComponent {
   readonly state: ClusterUpdateModalState;
@@ -36,11 +36,9 @@ class ClusterUpdateModal extends PromiseComponent {
 
   render() {
     const {cv} = this.props;
-    const {selectedVersion} = this.state;
     const availableUpdates = getAvailableClusterUpdates(cv);
-    const currentVersion = getCurrentClusterVersion(cv);
+    const currentVersion = getDesiredClusterVersion(cv);
     const dropdownItems = _.map(availableUpdates, 'version');
-    const dropdownTitle = _.get(availableUpdates[selectedVersion], 'version');
     return <form onSubmit={this._submit} name="form" className="modal-content">
       <ModalTitle>Update Cluster</ModalTitle>
       <ModalBody>
@@ -53,13 +51,13 @@ class ClusterUpdateModal extends PromiseComponent {
           <p>{currentVersion}</p>
         </div>
         <div className="form-group">
-          <label htmlFor="version_dropdown">Select New Version</label>
+          <label htmlFor="version_dropdown">New Version</label>
           <Dropdown
             className="cluster-update-modal__dropdown"
-            id="version_dropdwon"
+            id="version_dropdown"
             items={dropdownItems}
             onChange={this._change}
-            title={dropdownTitle}
+            title="Select Version"
           />
         </div>
       </ModalBody>
@@ -71,7 +69,7 @@ class ClusterUpdateModal extends PromiseComponent {
 export const clusterUpdateModal = createModalLauncher(ClusterUpdateModal);
 
 type ClusterUpdateModalProps = {
-  cv: K8sResourceKind;
+  cv: ClusterVersionKind;
 } & ModalComponentProps;
 
 type ClusterUpdateModalState = {
diff --git a/frontend/public/components/modals/index.ts b/frontend/public/components/modals/index.ts
index 92957dc24da3..f41f991df03a 100644
--- a/frontend/public/components/modals/index.ts
+++ b/frontend/public/components/modals/index.ts
@@ -52,5 +52,8 @@ export const tokenInfoModal = (props) => import('./token-info-modal' /* webpackC
 export const deleteModal = (props) => import('./delete-modal' /* webpackChunkName: "delete-modal" */)
   .then(m => m.deleteModal(props));
 
+export const clusterChannelModal = (props) => import('./cluster-channel-modal' /* webpackChunkName: "cluster-channel-modal" */)
+  .then(m => m.clusterChannelModal(props));
+
 export const clusterUpdateModal = (props) => import('./cluster-update-modal' /* webpackChunkName: "cluster-update-modal" */)
   .then(m => m.clusterUpdateModal(props));
diff --git a/frontend/public/components/nav.jsx b/frontend/public/components/nav.jsx
index 00a5bc439993..d0882feaf0fd 100644
--- a/frontend/public/components/nav.jsx
+++ b/frontend/public/components/nav.jsx
@@ -16,6 +16,8 @@ import {
   DeploymentConfigModel,
   ImageStreamModel,
   InstallPlanModel,
+  MachineConfigModel,
+  MachineConfigPoolModel,
   MachineDeploymentModel,
   MachineModel,
   MachineSetModel,
@@ -139,7 +141,9 @@ HrefLink.propTypes = {
 
 const navSectionStateToProps = (state, {required}) => {
   const flags = state[featureReducerName];
-  const canRender = required ? flags.get(required) : true;
+  // `required` can either be a single flag or array. Cast to an array when it's a single value.
+  const requiredArray = required ? _.castArray(required) : [];
+  const canRender = _.every(requiredArray, flag => flags.get(flag));
 
   return {
     flags, canRender,
@@ -387,13 +391,18 @@ export const Navigation = ({ isNavOpen, onNavSelect }) => {
 
         <MonitoringNavSection />
 
+        <NavSection title="Machines" required={[FLAGS.CLUSTER_API, FLAGS.MACHINE_CONFIG, FLAGS.CAN_LIST_MACHINE_CONFIG]}>
+          <ResourceNSLink resource={referenceForModel(MachineModel)} name="Machines" />
+          <ResourceNSLink resource={referenceForModel(MachineSetModel)} name="Machine Sets" />
+          <ResourceNSLink resource={referenceForModel(MachineDeploymentModel)} name="Machine Deployments" />
+          <ResourceClusterLink resource={referenceForModel(MachineConfigModel)} name="Machine Configs" />
+          <ResourceClusterLink resource={referenceForModel(MachineConfigPoolModel)} name="Machine Config Pools" />
+        </NavSection>
+
         <NavSection title="Administration">
           <HrefLink href="/settings/cluster" activePath="/settings/cluster/" name="Cluster Settings" required={FLAGS.CLUSTER_VERSION} startsWith={clusterSettingsStartsWith} />
           <ResourceClusterLink resource="namespaces" name="Namespaces" required={FLAGS.CAN_LIST_NS} />
           <ResourceClusterLink resource="nodes" name="Nodes" required={FLAGS.CAN_LIST_NODE} />
-          <ResourceNSLink resource={referenceForModel(MachineDeploymentModel)} name="Machine Deployments" required={FLAGS.CLUSTER_API} />
-          <ResourceNSLink resource={referenceForModel(MachineSetModel)} name="Machine Sets" required={FLAGS.CLUSTER_API} />
-          <ResourceNSLink resource={referenceForModel(MachineModel)} name="Machines" required={FLAGS.CLUSTER_API} />
           <ResourceNSLink resource="serviceaccounts" name="Service Accounts" />
           <ResourceNSLink resource="roles" name="Roles" startsWith={rolesStartsWith} />
           <ResourceNSLink resource="rolebindings" name="Role Bindings" startsWith={rolebindingsStartsWith} />
diff --git a/frontend/public/components/operator-lifecycle-manager/create-crd-yaml.tsx b/frontend/public/components/operator-lifecycle-manager/create-crd-yaml.tsx
index 1005d11ed097..3ebc0ac77748 100644
--- a/frontend/public/components/operator-lifecycle-manager/create-crd-yaml.tsx
+++ b/frontend/public/components/operator-lifecycle-manager/create-crd-yaml.tsx
@@ -19,10 +19,12 @@ export const CreateCRDYAML: React.SFC<CreateCRDYAMLProps> = (props) => {
 
   const Create = (createProps: {ClusterServiceVersion: {loaded: boolean, data: ClusterServiceVersionKind}}) => {
     if (createProps.ClusterServiceVersion.loaded && createProps.ClusterServiceVersion.data) {
-      const templates = _.get(createProps.ClusterServiceVersion.data.metadata.annotations, annotationKey, '[]');
-      const templateObj = (JSON.parse(templates) as K8sResourceKind[])
-        .find(obj => referenceFor(obj) === props.match.params.plural);
-      const template = templateObj ? _.attempt(() => safeDump(templateObj)) : null;
+      const templatesJSON = _.get(createProps.ClusterServiceVersion.data.metadata.annotations, annotationKey, '[]');
+      const template = _.attempt(() => safeDump((JSON.parse(templatesJSON) as K8sResourceKind[]).find(obj => referenceFor(obj) === props.match.params.plural)));
+      if (_.isError(template)) {
+        // eslint-disable-next-line no-console
+        console.error('Error parsing example JSON from annotation. Falling back to default.');
+      }
 
       return <CreateYAML {...props as any} template={!_.isError(template) ? template : null} />;
     }
diff --git a/frontend/public/components/resource-pages.ts b/frontend/public/components/resource-pages.ts
index 513deeca78ea..69a25057d2d0 100644
--- a/frontend/public/components/resource-pages.ts
+++ b/frontend/public/components/resource-pages.ts
@@ -29,6 +29,8 @@ import {
   InstallPlanModel,
   JobModel,
   LimitRangeModel,
+  MachineConfigPoolModel,
+  MachineConfigModel,
   MachineDeploymentModel,
   MachineModel,
   MachineSetModel,
@@ -78,6 +80,8 @@ export const resourceDetailPages = ImmutableMap<GroupVersionKind | string, () =>
   .set(referenceForModel(NamespaceModel), () => import('./namespace' /* webpackChunkName: "namespace" */).then(m => m.NamespacesDetailsPage))
   .set(referenceForModel(NetworkPolicyModel), () => import('./network-policy' /* webpackChunkName: "network-policy" */).then(m => m.NetworkPoliciesDetailsPage))
   .set(referenceForModel(NodeModel), () => import('./node' /* webpackChunkName: "node" */).then(m => m.NodesDetailsPage))
+  .set(referenceForModel(MachineConfigModel), () => import('./machine-config' /* webpackChunkName: "machine-config" */).then(m => m.MachineConfigDetailsPage))
+  .set(referenceForModel(MachineConfigPoolModel), () => import('./machine-config-pool' /* webpackChunkName: "machine-config-pool" */).then(m => m.MachineConfigPoolDetailsPage))
   .set(referenceForModel(MachineModel), () => import('./machine' /* webpackChunkName: "machine" */).then(m => m.MachineDetailsPage))
   .set(referenceForModel(MachineSetModel), () => import('./machine-set' /* webpackChunkName: "machine-set" */).then(m => m.MachineSetDetailsPage))
   .set(referenceForModel(MachineDeploymentModel), () => import('./machine-deployment' /* webpackChunkName: "machine-deployment" */).then(m => m.MachineDeploymentDetailsPage))
@@ -127,6 +131,8 @@ export const resourceListPages = ImmutableMap<GroupVersionKind | string, () => P
   .set(referenceForModel(NamespaceModel), () => import('./namespace' /* webpackChunkName: "namespace" */).then(m => m.NamespacesPage))
   .set(referenceForModel(NetworkPolicyModel), () => import('./network-policy' /* webpackChunkName: "network-policy" */).then(m => m.NetworkPoliciesPage))
   .set(referenceForModel(NodeModel), () => import('./node' /* webpackChunkName: "node" */).then(m => m.NodesPage))
+  .set(referenceForModel(MachineConfigModel), () => import('./machine-config' /* webpackChunkName: "machine-config" */).then(m => m.MachineConfigPage))
+  .set(referenceForModel(MachineConfigPoolModel), () => import('./machine-config-pool' /* webpackChunkName: "machine-config-pool" */).then(m => m.MachineConfigPoolPage))
   .set(referenceForModel(MachineModel), () => import('./machine' /* webpackChunkName: "machine" */).then(m => m.MachinePage))
   .set(referenceForModel(MachineDeploymentModel), () => import('./machine-deployment' /* webpackChunkName: "machine-deployment" */).then(m => m.MachineDeploymentPage))
   .set(referenceForModel(MachineSetModel), () => import('./machine-set' /* webpackChunkName: "machine-set" */).then(m => m.MachineSetPage))
diff --git a/frontend/public/components/utils/horizontal-nav.tsx b/frontend/public/components/utils/horizontal-nav.tsx
index 6d4dacd846b8..84aff27b5095 100644
--- a/frontend/public/components/utils/horizontal-nav.tsx
+++ b/frontend/public/components/utils/horizontal-nav.tsx
@@ -96,9 +96,9 @@ export const navFactory: NavFactory = {
     name: 'Cluster Operators',
     component,
   }),
-  machines: component => ({
-    href: 'machines',
-    name: 'Machines',
+  machineConfigs: component => ({
+    href: 'machineconfigs',
+    name: 'Machine Configs',
     component,
   }),
 };
diff --git a/frontend/public/components/utils/log-window.jsx b/frontend/public/components/utils/log-window.jsx
index 87355edd9bd7..d62d8c9c27ce 100644
--- a/frontend/public/components/utils/log-window.jsx
+++ b/frontend/public/components/utils/log-window.jsx
@@ -21,6 +21,7 @@ export class LogWindow extends React.PureComponent {
       content: '',
       height: '',
     };
+    this.prevScrollLeft = null;
   }
 
   static getDerivedStateFromProps(nextProps) {
@@ -50,11 +51,19 @@ export class LogWindow extends React.PureComponent {
   }
 
   _handleScroll() {
+    const scrollLeftChanged = this.prevScrollLeft !== this.scrollPane.scrollLeft;
+
     // Stream is finished, take no action on scroll
     if (this.props.status === STREAM_EOF) {
       return;
     }
 
+    // If horizontal scrolling, take no action
+    if (scrollLeftChanged) {
+      this.prevScrollLeft = this.scrollPane.scrollLeft;
+      return;
+    }
+
     // 1px fudge for fractional heights
     const scrollTarget = this.scrollPane.scrollHeight - (this.scrollPane.clientHeight + 1);
     if (this.scrollPane.scrollTop < scrollTarget) {
@@ -73,6 +82,7 @@ export class LogWindow extends React.PureComponent {
 
     const targetHeight = Math.floor(window.innerHeight - this.scrollPane.getBoundingClientRect().top -
       (this.props.isFullscreen ? FULLSCREEN_FUDGE_FACTOR : FUDGE_FACTOR));
+    this.prevScrollLeft = this.scrollPane.scrollLeft;
     this.setState({
       height: targetHeight,
     });
diff --git a/frontend/public/features.ts b/frontend/public/features.ts
index 24aed5b22273..4eed22d2a0fa 100644
--- a/frontend/public/features.ts
+++ b/frontend/public/features.ts
@@ -9,10 +9,12 @@ import {
   ClusterServiceClassModel,
   ClusterServiceVersionModel,
   MachineModel,
+  MachineConfigModel,
   OperatorSourceModel,
   PrometheusModel,
   SelfSubjectAccessReviewModel,
 } from './models';
+import { ClusterVersionKind } from './module/k8s';
 import { k8sBasePath, referenceForModel } from './module/k8s/k8s';
 import { k8sCreate } from './module/k8s/resource';
 import { types } from './module/k8s/k8s-actions';
@@ -37,9 +39,9 @@ import { UIActions } from './ui/ui-actions';
   SHOW_OPENSHIFT_START_GUIDE: false,
   SERVICE_CATALOG: false,
   OPERATOR_HUB: false,
-  CLUSTER_API false,
+  CLUSTER_API: false,
   CLUSTER_VERSION: false,
-  CLUSTER_UPDATES_AVAILABLE: false,
+  MACHINE_CONFIG: false,
  */
 export enum FLAGS {
   AUTH_ENABLED = 'AUTH_ENABLED',
@@ -53,13 +55,14 @@ export enum FLAGS {
   CAN_LIST_PV = 'CAN_LIST_PV',
   CAN_LIST_STORE = 'CAN_LIST_STORE',
   CAN_LIST_CRD = 'CAN_LIST_CRD',
+  CAN_LIST_MACHINE_CONFIG = 'CAN_LIST_MACHINE_CONFIG',
   CAN_CREATE_PROJECT = 'CAN_CREATE_PROJECT',
   SHOW_OPENSHIFT_START_GUIDE = 'SHOW_OPENSHIFT_START_GUIDE',
   SERVICE_CATALOG = 'SERVICE_CATALOG',
   OPERATOR_HUB = 'OPERATOR_HUB',
   CLUSTER_API = 'CLUSTER_API',
   CLUSTER_VERSION = 'CLUSTER_VERSION',
-  CLUSTER_UPDATES_AVAILABLE = 'CLUSTER_UPDATES_AVAILABLE',
+  MACHINE_CONFIG = 'MACHINE_CONFIG',
 }
 
 export const DEFAULTS_ = _.mapValues(FLAGS, flag => flag === FLAGS.AUTH_ENABLED
@@ -74,6 +77,7 @@ export const CRDs = {
   [referenceForModel(ClusterServiceVersionModel)]: FLAGS.OPERATOR_LIFECYCLE_MANAGER,
   [referenceForModel(OperatorSourceModel)]: FLAGS.OPERATOR_HUB,
   [referenceForModel(MachineModel)]: FLAGS.CLUSTER_API,
+  [referenceForModel(MachineConfigModel)]: FLAGS.MACHINE_CONFIG,
 };
 
 const SET_FLAG = 'SET_FLAG';
@@ -105,21 +109,17 @@ const detectOpenShift = dispatch => coFetchJSON(openshiftPath)
 const clusterVersionPath = `${k8sBasePath}/apis/config.openshift.io/v1/clusterversions/version`;
 const detectClusterVersion = dispatch => coFetchJSON(clusterVersionPath)
   .then(
-    clusterVersion => {
+    (clusterVersion: ClusterVersionKind) => {
       const hasClusterVersion = !_.isEmpty(clusterVersion);
       setFlag(dispatch, FLAGS.CLUSTER_VERSION, hasClusterVersion);
 
       if (hasClusterVersion && !_.isEmpty(clusterVersion.spec)) {
         dispatch(UIActions.setClusterID(clusterVersion.spec.clusterID));
       }
-
-      const availableUpdates = _.get(clusterVersion, 'status.availableUpdates');
-      setFlag(dispatch, FLAGS.CLUSTER_UPDATES_AVAILABLE, !_.isEmpty(availableUpdates));
     },
     err => {
       if (_.includes([403, 404], _.get(err, 'response.status'))) {
         setFlag(dispatch, FLAGS.CLUSTER_VERSION, false);
-        setFlag(dispatch, FLAGS.CLUSTER_UPDATES_AVAILABLE, false);
       } else {
         handleError(err, FLAGS.OPENSHIFT, dispatch, detectOpenShift);
       }
@@ -241,6 +241,9 @@ const ssarChecks = [{
 }, {
   flag: FLAGS.CAN_LIST_CRD,
   resourceAttributes:{ group: 'apiextensions.k8s.io', resource: 'customresourcedefinitions', verb: 'list' },
+}, {
+  flag: FLAGS.CAN_LIST_MACHINE_CONFIG,
+  resourceAttributes:{ group: MachineConfigModel.apiGroup, resource: MachineConfigModel.plural, verb: 'list' },
 }];
 
 ssarChecks.forEach(({flag, resourceAttributes, after}) => {
diff --git a/frontend/public/models/index.ts b/frontend/public/models/index.ts
index f5ef115021af..f5aa7bc52818 100644
--- a/frontend/public/models/index.ts
+++ b/frontend/public/models/index.ts
@@ -818,13 +818,13 @@ export const APIServiceModel: K8sKind = {
 };
 
 // Cluster API resources
-// https://github.com/kubernetes-sigs/cluster-api
+// https://github.com/openshift/cluster-api
 export const MachineModel: K8sKind = {
   label: 'Machine',
   labelPlural: 'Machines',
-  apiVersion: 'v1alpha1',
+  apiVersion: 'v1beta1',
   path: 'machines',
-  apiGroup: 'cluster.k8s.io',
+  apiGroup: 'machine.openshift.io',
   plural: 'machines',
   abbr: 'M',
   namespaced: true,
@@ -836,9 +836,9 @@ export const MachineModel: K8sKind = {
 export const MachineSetModel: K8sKind = {
   label: 'Machine Set',
   labelPlural: 'Machine Sets',
-  apiVersion: 'v1alpha1',
+  apiVersion: 'v1beta1',
   path: 'machinesets',
-  apiGroup: 'cluster.k8s.io',
+  apiGroup: 'machine.openshift.io',
   plural: 'machinesets',
   abbr: 'MS',
   namespaced: true,
@@ -850,9 +850,9 @@ export const MachineSetModel: K8sKind = {
 export const MachineDeploymentModel: K8sKind = {
   label: 'Machine Deployment',
   labelPlural: 'Machine Deployments',
-  apiVersion: 'v1alpha1',
+  apiVersion: 'v1beta1',
   path: 'machinedeployments',
-  apiGroup: 'cluster.k8s.io',
+  apiGroup: 'machine.openshift.io',
   plural: 'machinedeployments',
   abbr: 'MD',
   namespaced: true,
@@ -861,7 +861,35 @@ export const MachineDeploymentModel: K8sKind = {
   crd: true,
 };
 
-// OpenShift cluster resources
+export const MachineConfigPoolModel: K8sKind = {
+  label: 'Machine Config Pool',
+  labelPlural: 'Machine Config Pools',
+  apiVersion: 'v1',
+  path: 'machineconfigpools',
+  apiGroup: 'machineconfiguration.openshift.io',
+  plural: 'machineconfigpools',
+  abbr: 'MCP',
+  namespaced: false,
+  kind: 'MachineConfigPool',
+  id: 'machineconfigpool',
+  crd: true,
+};
+
+export const MachineConfigModel: K8sKind = {
+  label: 'Machine Config',
+  labelPlural: 'Machine Configs',
+  apiVersion: 'v1',
+  path: 'machineconfigs',
+  apiGroup: 'machineconfiguration.openshift.io',
+  plural: 'machineconfigs',
+  abbr: 'MC',
+  namespaced: false,
+  kind: 'MachineConfig',
+  id: 'machineconfigpool',
+  crd: true,
+};
+
+// Openshift cluster resources
 export const ClusterOperatorModel: K8sKind = {
   label: 'Cluster Operator',
   labelPlural: 'Cluster Operators',
diff --git a/frontend/public/models/yaml-templates.ts b/frontend/public/models/yaml-templates.ts
index af500f5c00e2..71622b182ec8 100644
--- a/frontend/public/models/yaml-templates.ts
+++ b/frontend/public/models/yaml-templates.ts
@@ -702,7 +702,7 @@ apiVersion: v1
 kind: ResourceQuota
 metadata:
   name: compute-quota
-  namespace: 
+  namespace:
 spec:
   hard:
     requests.cpu: '1'
@@ -714,7 +714,7 @@ apiVersion: v1
 kind: ResourceQuota
 metadata:
   name: storage-class-quota
-  namespace: 
+  namespace:
 spec:
   hard:
     requests.storage: 100Gi
@@ -731,7 +731,7 @@ apiVersion: v1
 kind: ResourceQuota
 metadata:
   name: object-counts
-  namespace: 
+  namespace:
 spec:
   hard:
     configmaps: "10"
@@ -747,7 +747,7 @@ metadata:
   name: "default"
 spec: {}
 `).setIn([referenceForModel(k8sModels.MachineDeploymentModel), 'default'], `
-apiVersion: "cluster.k8s.io/v1alpha1"
+apiVersion: "machine.openshift.io/v1beta1"
 kind: MachineDeployment
 metadata:
   name: example
@@ -765,7 +765,7 @@ spec:
       versions:
         kubelet: ""
 `).setIn([referenceForModel(k8sModels.MachineSetModel), 'default'], `
-apiVersion: "cluster.k8s.io/v1alpha1"
+apiVersion: "machine.openshift.io/v1beta1"
 kind: MachineSet
 metadata:
   name: example
@@ -783,10 +783,22 @@ spec:
       versions:
         kubelet: ""
 `).setIn([referenceForModel(k8sModels.MachineModel), 'default'], `
-apiVersion: "cluster.k8s.io/v1alpha1"
+apiVersion: "machine.openshift.io/v1beta1"
 kind: Machine
 metadata:
   name: example
 spec:
   providerSpec: {}
+`).setIn([referenceForModel(k8sModels.MachineConfigPoolModel), 'default'], `
+apiVersion: machineconfiguration.openshift.io/v1
+kind: MachineConfigPool
+metadata:
+  name: example
+spec:
+  machineConfigSelector:
+    matchLabels:
+      machineconfiguration.openshift.io/role: master
+  machineSelector:
+    matchLabels:
+      node-role.kubernetes.io/master: ""
 `);
diff --git a/frontend/public/module/auth.js b/frontend/public/module/auth.js
index 67401d6da053..1e202de260e6 100644
--- a/frontend/public/module/auth.js
+++ b/frontend/public/module/auth.js
@@ -21,6 +21,17 @@ const setNext = next => {
   }
 };
 
+const clearLocalStorage = () => {
+  [userID, name, email].forEach(key => {
+    try {
+      localStorage.removeItem(key);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(e);
+    }
+  });
+};
+
 export const authSvc = {
   userID: () => {
     const id = loginStateItem(userID);
@@ -35,23 +46,9 @@ export const authSvc = {
   name: () => loginStateItem(name),
   email: () => loginStateItem(email),
 
-  deleteOpenShiftToken: () => {
-    return coFetch('/api/openshift/delete-token', { method: 'POST' })
-      // eslint-disable-next-line no-console
-      .catch(e => console.error('Error deleting token', e));
-  },
-
   logout: (next) => {
     setNext(next);
-    [userID, name, email].forEach(key => {
-      try {
-        localStorage.removeItem(key);
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.error(e);
-      }
-    });
-
+    clearLocalStorage();
     coFetch(window.SERVER_FLAGS.logoutURL, { method: 'POST' })
       // eslint-disable-next-line no-console
       .catch(e => console.error('Error logging out', e))
@@ -64,6 +61,54 @@ export const authSvc = {
       });
   },
 
+  // Extra steps are needed if this is OpenShift to delete the user's access
+  // token and logout the kube:admin user.
+  logoutOpenShift: (isKubeAdmin = false) => {
+    return authSvc.deleteOpenShiftToken().then(() => {
+      if (isKubeAdmin) {
+        authSvc.logoutKubeAdmin();
+      } else {
+        authSvc.logout();
+      }
+    });
+  },
+
+  deleteOpenShiftToken: () => {
+    return coFetch('/api/openshift/delete-token', { method: 'POST' })
+      // eslint-disable-next-line no-console
+      .catch(e => console.error('Error deleting token', e));
+  },
+
+  // The kube:admin user has a special logout flow. The OAuth server has a
+  // session cookie that must be cleared by POSTing to the kube:admin logout
+  // endpoint, otherwise the user will be logged in again immediately after
+  // logging out.
+  logoutKubeAdmin: () => {
+    clearLocalStorage();
+    // First POST to the console server to clear the console session cookie.
+    coFetch(window.SERVER_FLAGS.logoutURL, { method: 'POST' })
+      // eslint-disable-next-line no-console
+      .catch(e => console.error('Error logging out', e))
+      .then(() => {
+        // We need to POST to the kube:admin logout URL. Since this is a
+        // cross-origin request, use a hidden form to POST.
+        const form = document.createElement('form');
+        form.action = window.SERVER_FLAGS.kubeAdminLogoutURL;
+        form.method = 'POST';
+
+        // Redirect back to the console when logout is complete by passing a
+        // `then` parameter.
+        const input = document.createElement('input');
+        input.type = 'hidden';
+        input.name = 'then';
+        input.value = window.SERVER_FLAGS.loginSuccessURL;
+        form.appendChild(input);
+
+        document.body.appendChild(form);
+        form.submit();
+      });
+  },
+
   login: () => {
     window.location = window.SERVER_FLAGS.loginURL;
   },
diff --git a/frontend/public/module/k8s/cluster-operator.ts b/frontend/public/module/k8s/cluster-operator.ts
new file mode 100644
index 000000000000..ca509f32b2c3
--- /dev/null
+++ b/frontend/public/module/k8s/cluster-operator.ts
@@ -0,0 +1,35 @@
+/* eslint-disable no-unused-vars, no-undef */
+import * as _ from 'lodash-es';
+import { K8sResourceKind } from '.';
+
+export enum OperatorStatus {
+  Available = 'Available',
+  Updating = 'Updating',
+  Failing = 'Failing',
+  Unknown = 'Unknown',
+}
+
+export const getStatusAndMessage = (operator: K8sResourceKind) => {
+  const conditions = _.get(operator, 'status.conditions');
+  const failing: any = _.find(conditions, { type: 'Failing', status: 'True' });
+  if (failing) {
+    return { status: OperatorStatus.Failing, message: failing.message };
+  }
+
+  const progressing: any = _.find(conditions, { type: 'Progressing', status: 'True' });
+  if (progressing) {
+    return { status: OperatorStatus.Updating, message: progressing.message };
+  }
+
+  const available: any = _.find(conditions, { type: 'Available', status: 'True' });
+  if (available) {
+    return { status: OperatorStatus.Available, message: available.message };
+  }
+
+  return { status: OperatorStatus.Unknown, message: '' };
+};
+
+export const getClusterOperatorStatus = (operator: K8sResourceKind) => {
+  const { status } = getStatusAndMessage(operator);
+  return status;
+};
diff --git a/frontend/public/module/k8s/index.ts b/frontend/public/module/k8s/index.ts
index 283c6e1c2f9a..27ce31dfabbb 100644
--- a/frontend/public/module/k8s/index.ts
+++ b/frontend/public/module/k8s/index.ts
@@ -10,6 +10,7 @@ export * from './autocomplete';
 export * from './get-resources';
 export * from './k8s-models';
 export * from './label-selector';
+export * from './cluster-operator';
 
 export type OwnerReference = {
   name: string;
@@ -18,6 +19,16 @@ export type OwnerReference = {
   apiVersion: string;
 };
 
+export type ObjectReference = {
+  kind?: string;
+  namespace?: string;
+  name?: string;
+  uid?: string;
+  apiVersion?: string;
+  resourceVersion?: string;
+  fieldPath?: string;
+};
+
 export type ObjectMetadata = {
   annotations?: {[key: string]: string},
   name: string,
@@ -27,6 +38,20 @@ export type ObjectMetadata = {
   [key: string]: any,
 };
 
+export enum K8sResourceConditionStatus {
+  True = 'True',
+  False = 'False',
+  Unknown = 'Unknown',
+}
+
+export type K8sResourceCondition<T> = {
+  type: T;
+  status: K8sResourceConditionStatus;
+  lastTransitionTime: string;
+  reason: string;
+  message: string;
+};
+
 export type MatchExpression = {key: string, operator: 'Exists' | 'DoesNotExist'} | {key: string, operator: 'In' | 'NotIn' | 'Equals' | 'NotEquals', values: string[]};
 
 export type Selector = {
@@ -46,6 +71,7 @@ export type K8sResourceKind = {
   type?: {[key: string]: any};
 };
 
+
 export type ConfigMapKind = {
   apiVersion: string;
   kind: string;
@@ -136,7 +162,7 @@ export type MachineDeploymentKind = {
       rollingUpdate?: {
         maxUnavailable?: number | string;
         maxSurge?: number | string;
-      }
+      };
     };
   };
   status?: {
@@ -147,6 +173,74 @@ export type MachineDeploymentKind = {
   };
 } & K8sResourceKind;
 
+export type MachineConfigKind = {
+  spec: {
+    osImageURL: string;
+    config: any;
+  };
+} & K8sResourceKind;
+
+export enum MachineConfigPoolConditionType {
+  Updated = 'Updated',
+  Updating = 'Updating',
+  Degraded = 'Degraded',
+}
+
+export type MachineConfigPoolCondition = K8sResourceCondition<MachineConfigPoolConditionType>;
+
+export type MachineConfigPoolStatus = {
+  observedGeneration?: number;
+  configuration:{
+    name: string;
+    source: ObjectReference[];
+  };
+  machineCount: number;
+  updatedMachineCount: number;
+  readyMachineCount: number;
+  unavailableMachineCount: number;
+  conditions: MachineConfigPoolCondition[];
+};
+
+export type MachineConfigPoolSpec = {
+  machineConfigSelector?: Selector;
+  machineSelector?: Selector;
+  paused: boolean;
+  maxUnavailable: number | string;
+};
+
+export type MachineConfigPoolKind = {
+  spec: MachineConfigPoolSpec;
+  status: MachineConfigPoolStatus;
+} & K8sResourceKind;
+
+type ClusterUpdate = {
+  image: string;
+  version: string;
+};
+
+type UpdateHistory = {
+  state: 'Completed' | 'Partial';
+  startedTime: string;
+  completionTime: string;
+  version: string;
+  image: string;
+};
+
+export type ClusterVersionKind = {
+  spec: {
+    channel: string;
+    clusterID: string;
+    desiredUpdate: ClusterUpdate;
+    upstream: string;
+  };
+  status: {
+    availableUpdates: ClusterUpdate[];
+    conditions: any[];
+    desired: ClusterUpdate;
+    history: UpdateHistory[];
+  };
+} & K8sResourceKind;
+
 export type K8sKind = {
   abbr: string;
   kind: string;
diff --git a/frontend/public/style.scss b/frontend/public/style.scss
index 9047bfa8d554..8ee6bc6a78d6 100644
--- a/frontend/public/style.scss
+++ b/frontend/public/style.scss
@@ -88,3 +88,4 @@
 @import "components/routes/create-route";
 @import "components/storage-class-form";
 @import "components/quota";
+@import "components/cluster-settings/cluster-settings";
diff --git a/frontend/public/style/_overrides.scss b/frontend/public/style/_overrides.scss
index cb3a56e08aa4..c6a941d278e1 100644
--- a/frontend/public/style/_overrides.scss
+++ b/frontend/public/style/_overrides.scss
@@ -284,11 +284,16 @@ tags-input .autocomplete .suggestion-item em {
   --pf-c-page__sidebar--PaddingBottom: 0;
   --pf-c-page__sidebar--PaddingTop: 0;
   position: relative; // fix z-index bug in Edge
+  width: 0 !important; // only set size when expanded (.pf-m-expanded is added)
 
   @media screen and (min-width: $grid-float-breakpoint) {
     --pf-c-page__sidebar--BoxShadow: none;
   }
 
+  &.pf-m-expanded {
+    width: var(--pf-c-page__sidebar--md--Width) !important; // maintain desktop width so size doesn't animate before hiding when resizing to mobile
+  }
+
   .pf-c-nav {
     // List link
     --pf-c-nav__list-link--active--after--BackgroundColor: var(--pf-c-nav__list-link--hover--after--BackgroundColor);
diff --git a/server/server.go b/server/server.go
index 24a3d7d72297..29a51eb6d008 100644
--- a/server/server.go
+++ b/server/server.go
@@ -48,6 +48,7 @@ type jsGlobals struct {
 	LoginErrorURL            string `json:"loginErrorURL"`
 	LogoutURL                string `json:"logoutURL"`
 	LogoutRedirect           string `json:"logoutRedirect"`
+	KubeAdminLogoutURL       string `json:"kubeAdminLogoutURL"`
 	KubeAPIServerURL         string `json:"kubeAPIServerURL"`
 	PrometheusBaseURL        string `json:"prometheusBaseURL"`
 	PrometheusTenancyBaseURL string `json:"prometheusTenancyBaseURL"`
@@ -261,6 +262,10 @@ func (s *Server) indexHandler(w http.ResponseWriter, r *http.Request) {
 		LoadTestFactor:       s.LoadTestFactor,
 	}
 
+	if !s.authDisabled() {
+		jsg.KubeAdminLogoutURL = s.Auther.GetKubeAdminLogoutURL()
+	}
+
 	if s.prometheusProxyEnabled() {
 		jsg.PrometheusBaseURL = proxy.SingleJoiningSlash(s.BaseURL.Path, prometheusProxyEndpoint)
 		jsg.PrometheusTenancyBaseURL = proxy.SingleJoiningSlash(s.BaseURL.Path, prometheusTenancyProxyEndpoint)
diff --git a/test-prow-e2e.sh b/test-prow-e2e.sh
index a0589db7cc69..53314e523948 100755
--- a/test-prow-e2e.sh
+++ b/test-prow-e2e.sh
@@ -5,6 +5,13 @@ set -exuo pipefail
 ARTIFACT_DIR=/tmp/artifacts
 export ARTIFACT_DIR
 
+function copyArtifacts {
+  echo "Copying artifacts from $(pwd)..."
+  cp -rv ./frontend/gui_test_screenshots "${ARTIFACT_DIR}/gui_test_screenshots"
+}
+
+trap copyArtifacts EXIT
+
 ./build.sh
 
 oc login -u kubeadmin -p $(cat "${ARTIFACT_DIR}/installer/auth/kubeadmin-password")
@@ -15,5 +22,3 @@ kubectl create -f https://raw.githubusercontent.com/operator-framework/operator-
 kubectl create -f https://raw.githubusercontent.com/operator-framework/operator-lifecycle-manager/master/deploy/okd/manifests/0.8.0/0000_30_09-rh-operators.catalogsource.yaml
 
 ./test-gui.sh e2e
-
-cp -rv ./frontend/gui_test_screenshots "${ARTIFACT_DIR}/gui_test_screenshots"