diff --git a/examples/docker-info/plugin.html b/examples/docker-info/plugin.html
index d786720f1..e31e7367e 100644
--- a/examples/docker-info/plugin.html
+++ b/examples/docker-info/plugin.html
@@ -5,15 +5,19 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body>
-    <div class="container-fluid">
-        <h2>Docker Daemon Info</h2>
-        <ul>
-            <li>Total Memory: <span id="docker-memory">?</span></li>
-            <li>Go Routines: <span id="docker-routines">?</span></li>
-            <li>File Descriptors: <span id="docker-files">?</span></li>
-            <li>Containers: <span id="docker-containers">?</span></li>
-            <li>Images: <span id="docker-images">?</span></li>
-        </ul>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h2>Docker Daemon Info</h2>
+                <ul>
+                    <li>Total Memory: <span id="docker-memory">?</span></li>
+                    <li>Go Routines: <span id="docker-routines">?</span></li>
+                    <li>File Descriptors: <span id="docker-files">?</span></li>
+                    <li>Containers: <span id="docker-containers">?</span></li>
+                    <li>Images: <span id="docker-images">?</span></li>
+                </ul>
+            </section>
+        </main>
     </div>
 
     <script>
diff --git a/examples/long-running-process/index.html b/examples/long-running-process/index.html
index 4a7c5b4c3..3624622b9 100644
--- a/examples/long-running-process/index.html
+++ b/examples/long-running-process/index.html
@@ -11,10 +11,14 @@
 </head>
 
 <body>
-    <div class="container-fluid">
-        <p><label>State:</label> <span id="state"></span></p>
-        <p><input id="command" type="text" /> <button id="run" disabled>Start</button></p>
-        <pre id="output"></pre>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <p><label>State:</label> <span id="state"></span></p>
+                <p><input id="command" type="text" /> <button id="run" disabled>Start</button></p>
+                <pre id="output"></pre>
+            </section>
+        </main>
     </div>
 </body>
 </html>
diff --git a/examples/ocserv/ocserv.html b/examples/ocserv/ocserv.html
index 56fa7197a..cf81b7ae1 100644
--- a/examples/ocserv/ocserv.html
+++ b/examples/ocserv/ocserv.html
@@ -28,48 +28,49 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
 </head>
 <body hidden>
-
-    <div class="curtain-ocserv blank-slate-pf" hidden>
-      <div class="blank-slate-pf-icon">
-        <div class="fa fa-exclamation-circle"></div>
-      </div>
-      <h1>Couldn't connect to OpenConnect Server</h1>
-      <p></p>
-    </div>
-
-    <div id="status-info" class="container-fluid page-ct">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-               <span id="head">Server status</span>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <div class="curtain-ocserv blank-slate-pf" hidden>
+              <div class="blank-slate-pf-icon">
+                <div class="fa fa-exclamation-circle"></div>
+              </div>
+              <h1>Couldn't connect to OpenConnect Server</h1>
+              <p></p>
             </div>
-            <table class="info-table-ct" id="status-table">
-            </table>
-        </div>
+
+            <section id="status-info" class="pf-c-page__main-section pf-m-light">
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                       <span id="head">Server status</span>
+                    </div>
+                    <table class="info-table-ct" id="status-table">
+                    </table>
+                </div>
+            </section>
+
+            <section id="users-info" class="pf-c-page__main-section pf-m-light">
+                <div class="panel panel-default">
+                    <div class="panel-heading">
+                        <span id="head">Connected users</span>
+                    </div>
+                    <table class="table table-hover" id="users-table">
+                        <thead>
+                            <tr>
+                                <th class="ocserv-users-id">ID</th>
+                                <th class="ocserv-users-name">Username</th>
+                                <th class="ocserv-users-remote-ip">Remote IP</th>
+                                <th class="ocserv-users-ip">VPN IP</th>
+                                <th class="ocserv-users-since">Since</th>
+                                <th class="ocserv-users-state">State</th>
+                            </tr>
+                        </thead>
+                        <tbody id="users-table-tbody">
+                        </tbody>
+                        </table>
+                </div>
+            </section>
+        </main>
     </div>
-
-    <div id="users-info" class="container-fluid">
-        <div class="panel panel-default">
-            <div class="panel-heading">
-                <span id="head">Connected users</span>
-            </div>
-            <table class="table table-hover" id="users-table">
-                <thead>
-                    <tr>
-                        <th class="ocserv-users-id">ID</th>
-                        <th class="ocserv-users-name">Username</th>
-                        <th class="ocserv-users-remote-ip">Remote IP</th>
-                        <th class="ocserv-users-ip">VPN IP</th>
-                        <th class="ocserv-users-since">Since</th>
-                        <th class="ocserv-users-state">State</th>
-                    </tr>
-                </thead>
-                <tbody id="users-table-tbody">
-                </tbody>
-                </table>
-        </div>
-    </div>
-
-
 <script>
 var raw;
 var status_raw;
diff --git a/examples/package-simple/test.html b/examples/package-simple/test.html
index bbbe1e05e..3590be2dc 100644
--- a/examples/package-simple/test.html
+++ b/examples/package-simple/test.html
@@ -6,42 +6,46 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body>
-    <div class="container-fluid">
-        <h2>Example: Simple Package</h2>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h2>Example: Simple Package</h2>
 
-        <p>This example is an installable cockpit package that runs a simple command
-            to ping a remote address.</p>
+                <p>This example is an installable cockpit package that runs a simple command
+                    to ping a remote address.</p>
 
-        <p>Link the package into your home directory:</p>
-        <ol>
-            <li>Make sure Cockpit works on the local machine.</li>
-            <li>Link this directory into your home directory:
-<pre>$ mkdir -p ~/.local/share/cockpit
-$ ln -snf $(pwd) ~/.local/share/cockpit/playground
-$ sudo systemctl restart cockpit</pre>
-</li>
-            <li>Log into cockpit using your web browser, with the same account as the above.</li>
-            <li>Choose this item from the sidebar menu</li>
-            <li>Feel free to edit this file and refresh in the browser.</li>
-        </ol>
-    </div>
+                <p>Link the package into your home directory:</p>
+                <ol>
+                    <li>Make sure Cockpit works on the local machine.</li>
+                    <li>Link this directory into your home directory:
+        <pre>$ mkdir -p ~/.local/share/cockpit
+        $ ln -snf $(pwd) ~/.local/share/cockpit/playground
+        $ sudo systemctl restart cockpit</pre>
+        </li>
+                    <li>Log into cockpit using your web browser, with the same account as the above.</li>
+                    <li>Choose this item from the sidebar menu</li>
+                    <li>Feel free to edit this file and refresh in the browser.</li>
+                </ol>
+            </section>
 
-    <div class="container-fluid">
-        <table class="form-table-ct">
-            <tr>
-                <td><label class="control-label" for="address">URL</label></td>
-                <td><input class="form-control" id="address" value="8.8.8.8"></td>
-            </tr>
-            <tr>
-                <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
-                <td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
-            </tr>
-        </table>
-        <p>
-            <pre id="output" style="display: none;">
-            </pre>
-        </p>
-        <p id="failure" class="warning"></p>
+            <section class="pf-c-page__main-section pf-m-light">
+                <table class="form-table-ct">
+                    <tr>
+                        <td><label class="control-label" for="address">URL</label></td>
+                        <td><input class="form-control" id="address" value="8.8.8.8"></td>
+                    </tr>
+                    <tr>
+                        <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="ping">Ping</button></td>
+                        <td><button class="pf-c-button pf-m-secondary pf-m-danger" disabled id="stop">Stop</button></td>
+                    </tr>
+                </table>
+                <p>
+                    <pre id="output" style="display: none;">
+                    </pre>
+                </p>
+                <p id="failure" class="warning"></p>
+            </section>
+        </main>
     </div>
 
     <script>
diff --git a/examples/pinger/ping.html b/examples/pinger/ping.html
index 5f35d337f..3a518b76b 100644
--- a/examples/pinger/ping.html
+++ b/examples/pinger/ping.html
@@ -7,18 +7,22 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body>
-    <div class="container-fluid">
-        <table class="form-table-ct">
-            <tr>
-                <td><label class="control-label" for="address">Address</label></td>
-                <td><input class="form-control" id="address" value="8.8.8.8"></td>
-            </tr>
-            <tr>
-                <td><button class="pf-c-button pf-m-primary" id="ping">Ping</button></td>
-                <td><span id="result"></span></td>
-            </tr>
-        </table>
-        <pre id="output"></pre>
+   <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <table class="form-table-ct">
+                    <tr>
+                        <td><label class="control-label" for="address">Address</label></td>
+                        <td><input class="form-control" id="address" value="8.8.8.8"></td>
+                    </tr>
+                    <tr>
+                        <td><button class="pf-c-button pf-m-primary" id="ping">Ping</button></td>
+                        <td><span id="result"></span></td>
+                    </tr>
+                </table>
+                <pre id="output"></pre>
+            </section>
+        </main>
     </div>
 
     <script src="pinger.js"></script>
diff --git a/examples/poc-cim/test.html b/examples/poc-cim/test.html
index d56e9c813..6ae34fc32 100644
--- a/examples/poc-cim/test.html
+++ b/examples/poc-cim/test.html
@@ -7,27 +7,30 @@
     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 </head>
 <body>
-    <div class="container-fluid">
-        <h2>Proof of Concept: CIM Access</h2>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h2>Proof of Concept: CIM Access</h2>
 
-        <p>This is a proof of concept for accessing CIM data via Pegasus in Cockpit.</p>
+                <p>This is a proof of concept for accessing CIM data via Pegasus in Cockpit.</p>
 
-        <p><button class="pf-c-button pf-m-secondary pf-m-primary" id="process">Process List</button>
-        <span id="message" class="warning" hidden></span></p>
-
-        <table class="table table-hover" style="font-size: 11px" hidden>
-            <thead>
-                <tr>
-                    <td>PID</td>
-                    <td>Name</td>
-                    <td>UID</td>
-                    <td>Priority</td>
-                </tr>
-            </thead>
-            <tbody>
-            </tbody>
-        </table>
+                <p><button class="pf-c-button pf-m-secondary pf-m-primary" id="process">Process List</button>
+                <span id="message" class="warning" hidden></span></p>
 
+                <table class="table table-hover" style="font-size: 11px" hidden>
+                    <thead>
+                        <tr>
+                            <td>PID</td>
+                            <td>Name</td>
+                            <td>UID</td>
+                            <td>Priority</td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                    </tbody>
+                </table>
+            </section>
+        </main>
     </div>
 
     <script>
diff --git a/examples/xhr-proxy/xhrproxy.html b/examples/xhr-proxy/xhrproxy.html
index 14ab05405..4438097c0 100644
--- a/examples/xhr-proxy/xhrproxy.html
+++ b/examples/xhr-proxy/xhrproxy.html
@@ -7,24 +7,27 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body>
-    <div class="container-fluid">
-        <table class="form-table-ct">
-            <tr>
-                <th><label class="control-label" for="address">URL</label></th>
-                <td><input class="form-control" id="address" value="http://localhost:12345"></td>
-            </tr>
-            <tr>
-                <th></th>
-                <td><button class="pf-c-button pf-m-primary" id="get">GET request</button></td>
-            <tr>
-                <th>Code</th>
-                <td><span id="result"></span></td>
-            </tr>
-            <tr>
-                <th>Output</th>
-                <td><pre id="output"></pre></td>
-        </table>
-
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <table class="form-table-ct">
+                    <tr>
+                        <th><label class="control-label" for="address">URL</label></th>
+                        <td><input class="form-control" id="address" value="http://localhost:12345"></td>
+                    </tr>
+                    <tr>
+                        <th></th>
+                        <td><button class="pf-c-button pf-m-primary" id="get">GET request</button></td>
+                    <tr>
+                        <th>Code</th>
+                        <td><span id="result"></span></td>
+                    </tr>
+                    <tr>
+                        <th>Output</th>
+                        <td><pre id="output"></pre></td>
+                </table>
+            </section>
+        </main>
     </div>
 
     <script src="xhrproxy.js"></script>
diff --git a/examples/zoner/tz.html b/examples/zoner/tz.html
index e7f6e2b35..36f173d20 100644
--- a/examples/zoner/tz.html
+++ b/examples/zoner/tz.html
@@ -5,21 +5,25 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body>
-    <div class="container-fluid" style='max-width: 400px'>
-        <table class="form-table-ct">
-            <tr>
-                <td><label class="control-label">Time Zone</label></td>
-                <td><span id="current"></span></td>
-            </tr>
-            <tr>
-                <td><label class="control-label" for="new">New Zone</label></td>
-                <td><input class="form-control" id="new" value="UTC"></td>
-            </tr>
-            <tr>
-                <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="change">Change</button></td>
-		<td><span id="failure"></span></td>
-            </tr>
-        </table>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <table class="form-table-ct">
+                    <tr>
+                        <td><label class="control-label">Time Zone</label></td>
+                        <td><span id="current"></span></td>
+                    </tr>
+                    <tr>
+                        <td><label class="control-label" for="new">New Zone</label></td>
+                        <td><input class="form-control" id="new" value="UTC"></td>
+                    </tr>
+                    <tr>
+                        <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="change">Change</button></td>
+                        <td><span id="failure"></span></td>
+                    </tr>
+                </table>
+            </section>
+        </main>
     </div>
 
     <script>
diff --git a/pkg/apps/application-list.jsx b/pkg/apps/application-list.jsx
index f62d93af3..6351324d7 100644
--- a/pkg/apps/application-list.jsx
+++ b/pkg/apps/application-list.jsx
@@ -24,6 +24,7 @@ import {
     DataList, DataListItem, DataListItemRow, DataListCell,
     DataListAction,
     DataListItemCells,
+    Page, PageSection, PageSectionVariants,
 } from "@patternfly/react-core";
 import { RebootingIcon } from "@patternfly/react-icons";
 
@@ -162,20 +163,22 @@ export class ApplicationList extends React.Component {
         }
 
         return (
-            <>
-                <header className='ct-table-header'>
-                    <h2 className='ct-table-heading'>{_("Applications")}</h2>
-                    <div className='ct-table-actions'>
-                        <div className="right-menu">
-                            {refresh_progress}
-                            {refresh_button}
+            <Page>
+                <PageSection variant={PageSectionVariants.light}>
+                    <header className='ct-table-header'>
+                        <h2 className='ct-table-heading'>{_("Applications")}</h2>
+                        <div className='ct-table-actions'>
+                            <div className="right-menu">
+                                {refresh_progress}
+                                {refresh_button}
+                            </div>
                         </div>
-                    </div>
-                </header>
-                <DataList aria-label={_("Applications list")}>
-                    { tbody }
-                </DataList>
-            </>
+                    </header>
+                    <DataList aria-label={_("Applications list")}>
+                        { tbody }
+                    </DataList>
+                </PageSection>
+            </Page>
         );
     }
 }
diff --git a/pkg/apps/application.css b/pkg/apps/application.css
index dbcad6b2b..77345233f 100644
--- a/pkg/apps/application.css
+++ b/pkg/apps/application.css
@@ -8,11 +8,6 @@
     margin: 0;
 }
 
-.ct-table-header {
-    /* Add enough spacing to align header & refresh to the list edges */
-    padding: 0 var(--pf-global--spacer--md) var(--pf-global--spacer--md);
-}
-
 .app-list-empty {
     color: var(--color-subtle-copy);
     text-align: center;
diff --git a/pkg/apps/index.html b/pkg/apps/index.html
index bacb0f19b..aa727f2b0 100644
--- a/pkg/apps/index.html
+++ b/pkg/apps/index.html
@@ -30,11 +30,11 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
   </head>
   <body class="pf-m-redhat-font" hidden>
 
-    <div id="list-page" class="container-fluid page-ct">
+    <div id="list-page">
       <div id="list"></div>
     </div>
 
-    <div id="app-page" class="container-fluid page-ct">
+    <div id="app-page">
       <div id="app"></div>
     </div>
 
diff --git a/pkg/dashboard/index.html b/pkg/dashboard/index.html
index 743d4b285..455c767c3 100644
--- a/pkg/dashboard/index.html
+++ b/pkg/dashboard/index.html
@@ -32,9 +32,9 @@
 </head>
 <body class="pf-m-redhat-font" hidden>
 
-    <div id="dashboard" class="container-fluid page-ct">
-        <div class="row" role="presentation">
-            <div class="col-md-12">
+    <div id="dashboard" class="pf-c-page">
+        <main class="pf-c-page__main">
+            <section class="pf-c-page__main-section pf-m-light">
                 <div id="dashboard-toolbar" class="pull-right zoom-controls">
                     <div class="dropdown">
                         <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
@@ -80,10 +80,8 @@
                 <div class="dashboard-plot zoomable-plot" id="dashboard-plot-1"></div>
                 <div class="dashboard-plot zoomable-plot" id="dashboard-plot-2"></div>
                 <div class="dashboard-plot zoomable-plot" id="dashboard-plot-3"></div>
-            </div>
-        </div>
-        <div class="row">
-            <div class="col-md-12">
+            </section>
+            <section class="pf-c-page__main-section pf-m-light">
                 <div class="panel panel-default" id="dashboard-hosts">
                     <div class="panel-heading">
                         <h2 class="panel-title" translate>Servers</h2>
@@ -101,90 +99,90 @@
                     <div class="list-group">
                     </div>
                 </div>
+            </section>
+        </main>
+
+        <script id="dashboard-hosts-tmpl" type="x-template/mustache">
+            {{#machines}}
+                {{! state can be 'failed' or 'connected' }}
+                <a data-address="{{address}}" class="list-group-item {{state}}"
+                    data-color="{{ color }}" target="_parent" href="/@{{address}}">
+                    <button class="pf-c-button pf-m-danger delete-button servers-privileged delete-{{address}} btn-sm">
+                        <span class='pficon pficon-delete' />
+                    </button>
+                    <button class="pf-c-button pf-m-secondary edit-button servers-privileged btn-sm">
+                        <span class="pficon pficon-edit" />
+                    </button>
+                    <img class="host-avatar {{avatar_display}}" role="{{aria_role}}" alt="{{alt_text}}" title="{{alt_text}}" src="{{render_avatar}}">
+                    <div class="spinner {{connecting_display}}"></div>
+                    <div class="os">{{os}}</div>
+                    <span class="host-label">{{label}}
+                        <span class="reconnecting {{connecting_display}}"
+                            translate="yes">Lost connection. Trying to reconnect</span></span>
+                </a>
+            {{/machines}}
+        </script>
+
+        <div class="modal" id="dashboard_setup_server_dialog" tabindex="-1" role="dialog"
+            data-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                </div>
             </div>
         </div>
-    </div>
 
-    <script id="dashboard-hosts-tmpl" type="x-template/mustache">
-        {{#machines}}
-            {{! state can be 'failed' or 'connected' }}
-            <a data-address="{{address}}" class="list-group-item {{state}}"
-                data-color="{{ color }}" target="_parent" href="/@{{address}}">
-                <button class="pf-c-button pf-m-danger delete-button servers-privileged delete-{{address}} btn-sm">
-                    <span class='pficon pficon-delete' />
-                </button>
-                <button class="pf-c-button pf-m-secondary edit-button servers-privileged btn-sm">
-                    <span class="pficon pficon-edit" />
-                </button>
-                <img class="host-avatar {{avatar_display}}" role="{{aria_role}}" alt="{{alt_text}}" title="{{alt_text}}" src="{{render_avatar}}">
-                <div class="spinner {{connecting_display}}"></div>
-                <div class="os">{{os}}</div>
-                <span class="host-label">{{label}}
-                    <span class="reconnecting {{connecting_display}}"
-                        translate="yes">Lost connection. Trying to reconnect</span></span>
-            </a>
-        {{/machines}}
-    </script>
-
-    <div class="modal" id="dashboard_setup_server_dialog" tabindex="-1" role="dialog"
-        data-backdrop="static">
-        <div class="modal-dialog">
-            <div class="modal-content">
-            </div>
-        </div>
-    </div>
-
-    <div class="modal" id="host-edit-dialog" tabindex="-1" role="dialog" data-backdrop="static">
-        <div class="modal-dialog">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title" translate>Edit server</h4>
-                </div>
-                <div class="modal-body">
-                <div>
-                    <input data-role="none" type="file" id="host-edit-file-input" hidden/>
-                    <table class="form-table-ct">
-                        <tr>
-                            <td class="top" translate="yes">Host name</td>
-                            <td>
-                                <input class="form-control" id="host-edit-name"/>
-                            </td>
-                            <td></td>
-                        </tr>
-                        <tr id="host-edit-user-row">
-                            <td class="top" translate="yes">User</td>
-                            <td>
-                                <input class="form-control" id="host-edit-user"/>
-                            </td>
-                            <td>
-                                <a tabindex="0" role="button" data-toggle="popover"
-                                    data-trigger="focus" data-placement="bottom" translate="data-content"
-                                    data-content="Leave blank to connect to this machine as the currently logged in user. If you enter a different username, that user will always be used when connecting to this machine.">
-                                    <span class="fa fa-lg fa-info-circle"></span>
-                                </a>
-                            </td>
-                        </tr>
-                        <tr>
-                            <td translate="yes">Color</td>
-                            <td id="host-edit-colorpicker">
-                            </td>
-                            <td></td>
-                        </tr>
-                        <tr>
-                            <td class="top" translate="yes">Avatar</td>
-                            <td>
-                                <div id="host-edit-avatar"></div>
-                                <div id="host-edit-fail"></div>
-                            </td>
-                            <td></td>
-                        </tr>
-                    </table>
-                </div>
-                </div>
-                <div class="modal-footer">
-                    <button class="pf-c-button pf-m-primary" id="host-edit-apply" translate="yes">Set</button>
-                    <button class="pf-c-button pf-m-link" data-dismiss="modal" translate="yes">Cancel</button>
-                    <div class="pull-right"><a role="link" tabindex="0" id="host-edit-sync-users" translate="yes">Synchronize users</a></div>
+        <div class="modal" id="host-edit-dialog" tabindex="-1" role="dialog" data-backdrop="static">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h4 class="modal-title" translate>Edit server</h4>
+                    </div>
+                    <div class="modal-body">
+                    <div>
+                        <input data-role="none" type="file" id="host-edit-file-input" hidden/>
+                        <table class="form-table-ct">
+                            <tr>
+                                <td class="top" translate="yes">Host name</td>
+                                <td>
+                                    <input class="form-control" id="host-edit-name"/>
+                                </td>
+                                <td></td>
+                            </tr>
+                            <tr id="host-edit-user-row">
+                                <td class="top" translate="yes">User</td>
+                                <td>
+                                    <input class="form-control" id="host-edit-user"/>
+                                </td>
+                                <td>
+                                    <a tabindex="0" role="button" data-toggle="popover"
+                                        data-trigger="focus" data-placement="bottom" translate="data-content"
+                                        data-content="Leave blank to connect to this machine as the currently logged in user. If you enter a different username, that user will always be used when connecting to this machine.">
+                                        <span class="fa fa-lg fa-info-circle"></span>
+                                    </a>
+                                </td>
+                            </tr>
+                            <tr>
+                                <td translate="yes">Color</td>
+                                <td id="host-edit-colorpicker">
+                                </td>
+                                <td></td>
+                            </tr>
+                            <tr>
+                                <td class="top" translate="yes">Avatar</td>
+                                <td>
+                                    <div id="host-edit-avatar"></div>
+                                    <div id="host-edit-fail"></div>
+                                </td>
+                                <td></td>
+                            </tr>
+                        </table>
+                    </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button class="pf-c-button pf-m-primary" id="host-edit-apply" translate="yes">Set</button>
+                        <button class="pf-c-button pf-m-link" data-dismiss="modal" translate="yes">Cancel</button>
+                        <div class="pull-right"><a role="link" tabindex="0" id="host-edit-sync-users" translate="yes">Synchronize users</a></div>
+                    </div>
                 </div>
             </div>
         </div>
diff --git a/pkg/kdump/kdump.scss b/pkg/kdump/kdump.scss
index b396355f5..d6caaf969 100644
--- a/pkg/kdump/kdump.scss
+++ b/pkg/kdump/kdump.scss
@@ -26,7 +26,6 @@
 
 .popover-ct-kdump {
     margin-left: 5px;
-    /* Don't escape the container-fluid */
     white-space: nowrap;
 }
 
diff --git a/pkg/lib/page.scss b/pkg/lib/page.scss
index 16e7001bd..14b5989a9 100644
--- a/pkg/lib/page.scss
+++ b/pkg/lib/page.scss
@@ -1,4 +1,5 @@
 @import "./patternfly/patternfly-4-overrides.scss";
+@import "../../node_modules/@patternfly/patternfly/components/Page/page.scss";
 
 a {
     cursor: pointer;
diff --git a/pkg/lib/patternfly/patternfly-overrides.scss b/pkg/lib/patternfly/patternfly-overrides.scss
index 67dccacd9..765225f2c 100644
--- a/pkg/lib/patternfly/patternfly-overrides.scss
+++ b/pkg/lib/patternfly/patternfly-overrides.scss
@@ -452,8 +452,7 @@ small {
 // Bump content away from cards
 .content,
 .page-ct,
-.container,
-.container-fluid {
+.container {
   --container-padding-x: var(--pf-global--spacer--md);
   --container-padding-y: var(--pf-global--spacer--lg);
   --container-padding: var(--container-padding-y) var(--container-padding-x);
@@ -468,8 +467,7 @@ small {
   // Add PF4 padding to desktop mode
   .content,
   .page-ct,
-  .container,
-  .container-fluid {
+  .container {
     --container-padding-x: var(--pf-global--spacer--lg);
     --container-padding-y: var(--pf-global--spacer--xl);
 
@@ -481,7 +479,7 @@ small {
 
   // Rely on page-ct padding; don't duplicate
   .page-ct .container,
-  .page-ct .container-fluid {
+  .page-ct {
     padding: 0;
   }
 
@@ -494,8 +492,7 @@ small {
 // Bump content away from cards
 .content,
 .page-ct,
-.container,
-.container-fluid {
+.container {
   .cards-pf + & {
     padding-top: 1rem;
   }
diff --git a/pkg/lib/table.css b/pkg/lib/table.css
index 4b4b7217c..c1aafa2df 100644
--- a/pkg/lib/table.css
+++ b/pkg/lib/table.css
@@ -73,9 +73,8 @@
 @media screen and (max-width: 640px) {
     /* Remove _most_ of the gaps on the sides of small screens */
     /* to maximize space, but still keep the boxy panel look */
-    /* (container-fluid & page-ct adds 20px, so we remove 1/2 of that) */
+    /* (page-ct adds 20px, so we remove 1/2 of that) */
     .page-ct > .panel,
-    .container-fluid > .panel,
     .col-md-12 > .panel {
         margin-left: -10px;
         margin-right: -10px;
diff --git a/pkg/playground/exception.html b/pkg/playground/exception.html
index 640c0d703..dc264b600 100644
--- a/pkg/playground/exception.html
+++ b/pkg/playground/exception.html
@@ -7,12 +7,16 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-    <div id="internal" class="container-fluid">
-        <h2>Exception</h2>
+    <div id="internal" class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h2>Exception</h2>
 
-        <p>Clicking this button should make a javascript exception happen.<p>
+                <p>Clicking this button should make a javascript exception happen.<p>
 
-        <button id="exception">Exception</button>
+                <button id="exception">Exception</button>
+            </section>
+        </main>
     </div>
     <script src="exception.js"></script>
 </body>
diff --git a/pkg/playground/index.html b/pkg/playground/index.html
index ad18809f1..b8d381a43 100644
--- a/pkg/playground/index.html
+++ b/pkg/playground/index.html
@@ -10,16 +10,20 @@
     <script src="index.js"></script>
 </head>
 <body class="pf-m-redhat-font">
-  <section class="container-fluid">
-    <h2>Development Playground</h2>
-    <ul id="nav"></ul>
-  </section>
-  <section class="container-fluid">
-    <h2>Page Status</h2>
-    <label>Type <input id="type"></label>
-    <label>Title <input id="title"></label>
-    <button id="set-status">Set</button>
-    <button id="clear-status">Clear</button>
-  </section>
+  <div class="pf-c-page">
+    <main class="pf-c-page__main" tabindex="-1">
+        <section class="pf-c-page__main-section pf-m-light">
+          <h2>Development Playground</h2>
+          <ul id="nav"></ul>
+        </section>
+        <section class="pf-c-page__main-section pf-m-light">
+          <h2>Page Status</h2>
+          <label>Type <input id="type"></label>
+          <label>Title <input id="title"></label>
+          <button id="set-status">Set</button>
+          <button id="clear-status">Clear</button>
+        </section>
+    </main>
+  </div>
 </body>
 </html>
diff --git a/pkg/playground/journal.html b/pkg/playground/journal.html
index 5af14b9c7..df2743a75 100644
--- a/pkg/playground/journal.html
+++ b/pkg/playground/journal.html
@@ -10,10 +10,12 @@
 </head>
 
 <body class="pf-m-redhat-font">
-
-<div class="container-fluid">
-    <div id="journal-box"></div>
-</div>
-
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <div id="journal-box"></div>
+            </section>
+        </main>
+    </div>
 </body>
 </html>
diff --git a/pkg/playground/jquery-patterns.html b/pkg/playground/jquery-patterns.html
index b52401ea7..8b7fde62e 100644
--- a/pkg/playground/jquery-patterns.html
+++ b/pkg/playground/jquery-patterns.html
@@ -10,364 +10,365 @@
     <script src="jquery-patterns.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-
-<div class="modal" id="test-dialog" tabindex="-1" role="dialog" data-backdrop="static">
-    <div class="modal-dialog">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h4 class="modal-title">Example Dialog</h4>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <div class="modal" id="test-dialog" tabindex="-1" role="dialog" data-backdrop="static">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h4 class="modal-title">Example Dialog</h4>
+                        </div>
+                        <div class="modal-body">
+                            <table class="form-table-ct">
+                                <tbody>
+                                    <tr>
+                                        <td class="top">
+                                            <label class="control-label" for="control-1">
+                                                Label
+                                            </label>
+                                        </td>
+                                        <td>
+                                            <input id="control-1" class="form-control" type="text">
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td class="top">
+                                            <label class="control-label" for="control-2">
+                                                Select
+                                            </label>
+                                        </td>
+                                        <td>
+                                            <!-- Note that bootstrap-select is horrible ... but we use the styling -->
+                                            <div class="btn-group bootstrap-select dropdown form-control" id="control-2">
+                                                <button class="btn btn-default dropdown-toggle" type="button"
+                                                                                                data-toggle="dropdown">
+                                                    <span class="pull-left">One</span>
+                                                    <span class="caret"></span>
+                                                </button>
+                                                <ul class="dropdown-menu">
+                                                    <li value="one"><a role="link" tabindex="0">One</a></li>
+                                                    <li value="two"><a role="link" tabindex="0">Two</a></li>
+                                                </ul>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                        <div class="modal-footer">
+                            <button class="pf-c-button pf-m-link" data-dismiss="modal">
+                                Cancel
+                            </button>
+                            <button class="pf-c-button pf-m-secondary" id="clear-button">
+                                Clear
+                            </button>
+                            <button class="pf-c-button pf-m-danger" id="error-button">
+                                Error
+                            </button>
+                            <button class="pf-c-button pf-m-primary" id="wait-button">
+                                Wait
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="modal-body">
-                <table class="form-table-ct">
-                    <tbody>
+
+            <section class="pf-c-page__main-section pf-m-light">
+                <h3>Dialogs</h3>
+                <button class="pf-c-button pf-m-secondary" data-target="#test-dialog" data-toggle="modal">
+                    Show Dialog
+                </button>
+                <hr>
+            </section>
+
+            <section class="pf-c-page__main-section pf-m-light">
+                <table class="listing-ct">
+                    <thead>
                         <tr>
-                            <td class="top">
-                                <label class="control-label" for="control-1">
-                                    Label
-                                </label>
-                            </td>
-                            <td>
-                                <input id="control-1" class="form-control" type="text">
+                            <td colspan="5">
+                                <h3>Listing with Panels</h3>
                             </td>
                         </tr>
                         <tr>
-                            <td class="top">
-                                <label class="control-label" for="control-2">
-                                    Select
-                                </label>
+                            <th class="listing-ct-toggle"></th>
+                            <th>Name</th>
+                            <th>Project</th>
+                            <th>Address</th>
+                            <th>Status</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr class="listing-ct-item">
+                            <td class="listing-ct-toggle">
+                                <i class="fa fa-fw"></i>
                             </td>
-                            <td>
-                                <!-- Note that bootstrap-select is horrible ... but we use the styling -->
-                                <div class="btn-group bootstrap-select dropdown form-control" id="control-2">
-                                    <button class="btn btn-default dropdown-toggle" type="button"
-                                        data-toggle="dropdown">
-                                        <span class="pull-left">One</span>
-                                        <span class="caret"></span>
-                                    </button>
-                                    <ul class="dropdown-menu">
-                                        <li value="one"><a role="link" tabindex="0">One</a></li>
-                                        <li value="two"><a role="link" tabindex="0">Two</a></li>
+                            <th>frontend</th>
+                            <td>aoeuaoeu</td>
+                            <td>127.30.168.10</td>
+                            <td>Running</td>
+                        </tr>
+                        <tr class="ct-listing-panel">
+                            <td colspan="5">
+                                <div class=ct-listing-panel-head">
+                                    <div class="ct-listing-panel-actions">
+                                        <button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
+                                    </div>
+                                    <ul class="nav nav-tabs nav-tabs-pf">
+                                        <li class="active"><a href="#">Pod</a></li>
+                                        <li><a href="#">Containers</a></li>
+                                        <li><a href="#">Logs</a></li>
+                                        <li><a href="#">Shell</a></li>
                                     </ul>
                                 </div>
+                                <div class="ct-listing-panel-body">
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <dl>
+                                                <dt>Project</dt>
+                                                <dd>aoeuaoeu</dd>
+                                                <dt>Created</dt>
+                                                <dd title="2015-09-26 15:33">14 days ago</dd>
+                                                <dt>Restart policy</dt>
+                                                <dd>Always</dd>
+                                                <dt>Service Account</dt>
+                                                <dd>default</dd>
+                                                <dt>DNS Policy</dt>
+                                                <dd>ClusterFirst</dd>
+                                                <dt>Phase</dt>
+                                                <dd>running</dd>
+                                                <dt>Node</dt>
+                                                <dd>openshiftdev.local</dd>
+                                                <dt>Pod Address</dt>
+                                                <dd>1.2.3.4</dd>
+                                            </dl>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <dl class="full-width">
+                                                <dt>Labels</dt>
+                                                <dd>name=frontend</dd>
+                                                <dd>template=ruby-hello-world</dd>
+                                            </dl>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr class="listing-ct-item">
+                            <td class="listing-ct-toggle">
+                                <i class="fa fa-fw"></i>
+                            </td>
+                            <th>redis-master</th>
+                            <td>aoeuaoeu</td>
+                            <td>127.30.173.79:6379</td>
+                            <td>Ready</td>
+                        </tr>
+                        <tr class="ct-listing-panel">
+                            <td colspan="5">
+                                <div class="ct-listing-panel-head">
+                                    <div class="ct-listing-panel-actions">
+                                        <button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
+                                    </div>
+                                    <ul class="nav nav-tabs nav-tabs-pf">
+                                        <li class="active"><a href="#">Pod</a></li>
+                                        <li><a href="#">Containers</a></li>
+                                        <li><a href="#">Logs</a></li>
+                                        <li><a href="#">Shell</a></li>
+                                    </ul>
+                                </div>
+                                <div class="listing-ct-body">
+                                    <div class="row">
+                                        <div class="col-sm-6">
+                                            <dl>
+                                                <dt>Project</dt>
+                                                <dd>aoeuaoeu</dd>
+                                                <dt>Created</dt>
+                                                <dd title="2015-09-26 15:33">10 days ago</dd>
+                                                <dt>Restart policy</dt>
+                                                <dd>Always</dd>
+                                                <dt>Service Account</dt>
+                                                <dd>default</dd>
+                                                <dt>DNS Policy</dt>
+                                                <dd>ClusterFirst</dd>
+                                                <dt>Phase</dt>
+                                                <dd>running</dd>
+                                                <dt>Node</dt>
+                                                <dd>openshiftdev.local</dd>
+                                                <dt>Pod Address</dt>
+                                                <dd>1.2.3.5</dd>
+                                            </dl>
+                                        </div>
+                                        <div class="col-sm-6">
+                                            <dl class="full-width">
+                                                <dt>Labels</dt>
+                                                <dd>name=redis-master</dd>
+                                                <dd>template=ruby-hello-world</dd>
+                                            </dl>
+                                        </div>
+                                    </div>
+                                </div>
                             </td>
                         </tr>
                     </tbody>
                 </table>
-            </div>
-            <div class="modal-footer">
-                <button class="pf-c-button pf-m-link" data-dismiss="modal">
-                    Cancel
-                </button>
-                <button class="pf-c-button pf-m-secondary" id="clear-button">
-                    Clear
-                </button>
-                <button class="pf-c-button pf-m-danger" id="error-button">
-                    Error
-                </button>
-                <button class="pf-c-button pf-m-primary" id="wait-button">
-                    Wait
-                </button>
-            </div>
-        </div>
+
+                <table class="listing-ct">
+                    <thead>
+                        <tr>
+                            <td colspan="2">
+                                <h3>Listing with Timeline</h3>
+                            </td>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div class="timeline-ct timeline-ct-end">
+                                    <i class="fa fa-caret-up timeline-ct-point timeline-ct-md"></i>
+                                    <div class="ct-listing-panel listing-ct-maybe">
+                                        <div class="listing-ct-head">
+                                            <div class="listing-ct-actions">
+                                                <button class="pf-c-button pf-m-secondary">Check for updates</button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div class="timeline-ct">
+                                    <i class="fa fa-circle timeline-ct-point"></i>
+                                    <div class="ct-listing-panel">
+                                        <div class="ct-listing-panel-head">
+                                            <div class="ct-listing-panel-actions">
+                                                <button class="pf-c-button pf-m-primary">Update and reboot</button>
+                                            </div>
+                                            <h3>fedora-atomic: 24.2</h3>
+                                            <div class="listing-ct-status">
+                                                Available
+                                            </div>
+                                            <ul class="nav nav-tabs nav-tabs-pf">
+                                                <li><a href="#">Tree</a></li>
+                                                <li class="active"><a href="#">Packages</a></li>
+                                            </ul>
+                                        </div>
+                                        <div class="listing-ct-error alert" ng-if="error">
+                                            <span class="pficon pficon-warning-triangle-o"></span>
+                                            There was an error
+                                        </div>
+                                        <div class="listing-ct-body">
+                                            <div class="row">
+                                                <div class="col-sm-6">
+                                                    <dl>
+                                                        <dt>Operating system</dt>
+                                                        <dd>fedora-atomic</dd>
+                                                        <dt>Revision Number</dt>
+                                                        <dd>24.2</dd>
+                                                        <dt>Released</dt>
+                                                        <dd title="2015-09-26 15:33">3 days ago</dd>
+                                                    </dl>
+                                                </div>
+                                                <div class="col-sm-6">
+                                                    <dl>
+                                                        <dt>Additions</dt>
+                                                        <dd>10 packages</dd>
+                                                        <dt>Removals</dt>
+                                                        <dd>3 packages</dd>
+                                                        <dt>Changes</dt>
+                                                        <dd>18 packages</dd>
+                                                    </dl>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody class="active">
+                        <tr>
+                            <td>
+                                <div class="timeline-ct">
+                                    <i class="fa fa-check-circle-o timeline-ct-point timeline-ct-lg active"></i>
+                                    <div class="ct-listing-panel">
+                                        <div class="ct-listing-panel-head">
+                                            <div class="ct-listing-panel-actions">
+                                            </div>
+                                            <div class="listing-ct-status">
+                                                Installed
+                                            </div>
+                                            <h3>fedora-atomic: 24.1</h3>
+                                            <ul class="nav nav-tabs nav-tabs-pf">
+                                                <li class="active"><a href="#">Tree</a></li>
+                                                <li><a href="#">Packages</a></li>
+                                            </ul>
+                                        </div>
+                                        <div class="listing-ct-body">
+                                            <div class="row">
+                                                <div class="col-sm-6">
+                                                    <dl>
+                                                        <dt>Operating system</dt>
+                                                        <dd>fedora-atomic</dd>
+                                                        <dt>Revision Number</dt>
+                                                        <dd>24.1</dd>
+                                                        <dt>Released</dt>
+                                                        <dd title="2015-08-29 15:33">1 month ago</dd>
+                                                    </dl>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <div class="timeline-ct">
+                                    <div class="timeline-ct-point timeline-ct-md">
+                                        <div class="spinner"></div>
+                                    </div>
+                                    <div class="ct-listing-panel">
+                                        <div class="ct-listing-panel-head">
+                                            <div class="ct-listing-panel-actions">
+                                            </div>
+                                            <div class="listing-ct-status">
+                                                Downloading manifests 85%
+                                            </div>
+                                            <h3>fedora-atomic: 24.0</h3>
+                                            <ul class="nav nav-tabs nav-tabs-pf">
+                                                <li class="active"><a href="#">Tree</a></li>
+                                                <li><a href="#">Packages</a></li>
+                                            </ul>
+                                        </div>
+                                        <div class="listing-ct-body">
+                                            <div class="row">
+                                                <div class="col-sm-6">
+                                                    <dl>
+                                                        <dt>Operating system</dt>
+                                                        <dd>fedora-atomic</dd>
+                                                        <dt>Revision Number</dt>
+                                                        <dd>24.1</dd>
+                                                        <dt>Released</dt>
+                                                        <dd title="2015-08-29 15:33">1 month ago</dd>
+                                                    </dl>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+
+            </section>
+        </main>
     </div>
-</div>
-
-<div class="container-fluid">
-    <h3>Dialogs</h3>
-    <button class="pf-c-button pf-m-secondary" data-target="#test-dialog" data-toggle="modal">
-        Show Dialog
-    </button>
-    <hr>
-</div>
-
-<div class="container-fluid">
-
-    <table class="listing-ct">
-        <thead>
-            <tr>
-                <td colspan="5">
-                    <h3>Listing with Panels</h3>
-                </td>
-            </tr>
-            <tr>
-                <th class="listing-ct-toggle"></th>
-                <th>Name</th>
-                <th>Project</th>
-                <th>Address</th>
-                <th>Status</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr class="listing-ct-item">
-                <td class="listing-ct-toggle">
-                    <i class="fa fa-fw"></i>
-                </td>
-                <th>frontend</th>
-                <td>aoeuaoeu</td>
-                <td>127.30.168.10</td>
-                <td>Running</td>
-            </tr>
-            <tr class="ct-listing-panel">
-                <td colspan="5">
-                    <div class=ct-listing-panel-head">
-                        <div class="ct-listing-panel-actions">
-                            <button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
-                        </div>
-                        <ul class="nav nav-tabs nav-tabs-pf">
-                            <li class="active"><a href="#">Pod</a></li>
-                            <li><a href="#">Containers</a></li>
-                            <li><a href="#">Logs</a></li>
-                            <li><a href="#">Shell</a></li>
-                        </ul>
-                    </div>
-                    <div class="ct-listing-panel-body">
-                        <div class="row">
-                            <div class="col-sm-6">
-                                <dl>
-                                    <dt>Project</dt>
-                                    <dd>aoeuaoeu</dd>
-                                    <dt>Created</dt>
-                                    <dd title="2015-09-26 15:33">14 days ago</dd>
-                                    <dt>Restart policy</dt>
-                                    <dd>Always</dd>
-                                    <dt>Service Account</dt>
-                                    <dd>default</dd>
-                                    <dt>DNS Policy</dt>
-                                    <dd>ClusterFirst</dd>
-                                    <dt>Phase</dt>
-                                    <dd>running</dd>
-                                    <dt>Node</dt>
-                                    <dd>openshiftdev.local</dd>
-                                    <dt>Pod Address</dt>
-                                    <dd>1.2.3.4</dd>
-                                </dl>
-                            </div>
-                            <div class="col-sm-6">
-                                <dl class="full-width">
-                                    <dt>Labels</dt>
-                                    <dd>name=frontend</dd>
-                                    <dd>template=ruby-hello-world</dd>
-                                </dl>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-        <tbody>
-            <tr class="listing-ct-item">
-                <td class="listing-ct-toggle">
-                    <i class="fa fa-fw"></i>
-                </td>
-                <th>redis-master</th>
-                <td>aoeuaoeu</td>
-                <td>127.30.173.79:6379</td>
-                <td>Ready</td>
-            </tr>
-            <tr class="ct-listing-panel">
-                <td colspan="5">
-                    <div class="ct-listing-panel-head">
-                        <div class="ct-listing-panel-actions">
-                            <button title="Adjust" class="pf-c-button pf-m-secondary pficon pficon-edit"></button>
-                        </div>
-                        <ul class="nav nav-tabs nav-tabs-pf">
-                            <li class="active"><a href="#">Pod</a></li>
-                            <li><a href="#">Containers</a></li>
-                            <li><a href="#">Logs</a></li>
-                            <li><a href="#">Shell</a></li>
-                        </ul>
-                    </div>
-                    <div class="listing-ct-body">
-                        <div class="row">
-                            <div class="col-sm-6">
-                                <dl>
-                                    <dt>Project</dt>
-                                    <dd>aoeuaoeu</dd>
-                                    <dt>Created</dt>
-                                    <dd title="2015-09-26 15:33">10 days ago</dd>
-                                    <dt>Restart policy</dt>
-                                    <dd>Always</dd>
-                                    <dt>Service Account</dt>
-                                    <dd>default</dd>
-                                    <dt>DNS Policy</dt>
-                                    <dd>ClusterFirst</dd>
-                                    <dt>Phase</dt>
-                                    <dd>running</dd>
-                                    <dt>Node</dt>
-                                    <dd>openshiftdev.local</dd>
-                                    <dt>Pod Address</dt>
-                                    <dd>1.2.3.5</dd>
-                                </dl>
-                            </div>
-                            <div class="col-sm-6">
-                                <dl class="full-width">
-                                    <dt>Labels</dt>
-                                    <dd>name=redis-master</dd>
-                                    <dd>template=ruby-hello-world</dd>
-                                </dl>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-
-    <table class="listing-ct">
-        <thead>
-            <tr>
-                <td colspan="2">
-                    <h3>Listing with Timeline</h3>
-                </td>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>
-                    <div class="timeline-ct timeline-ct-end">
-                        <i class="fa fa-caret-up timeline-ct-point timeline-ct-md"></i>
-                        <div class="ct-listing-panel listing-ct-maybe">
-                            <div class="listing-ct-head">
-                                <div class="listing-ct-actions">
-                                    <button class="pf-c-button pf-m-secondary">Check for updates</button>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-        <tbody>
-            <tr>
-                <td>
-                    <div class="timeline-ct">
-                        <i class="fa fa-circle timeline-ct-point"></i>
-                        <div class="ct-listing-panel">
-                            <div class="ct-listing-panel-head">
-                                <div class="ct-listing-panel-actions">
-                                    <button class="pf-c-button pf-m-primary">Update and reboot</button>
-                                </div>
-                                <h3>fedora-atomic: 24.2</h3>
-                                <div class="listing-ct-status">
-                                    Available
-                                </div>
-                                <ul class="nav nav-tabs nav-tabs-pf">
-                                    <li><a href="#">Tree</a></li>
-                                    <li class="active"><a href="#">Packages</a></li>
-                                </ul>
-                            </div>
-                            <div class="listing-ct-error alert" ng-if="error">
-                                <span class="pficon pficon-warning-triangle-o"></span>
-                                There was an error
-                            </div>
-                            <div class="listing-ct-body">
-                                <div class="row">
-                                    <div class="col-sm-6">
-                                        <dl>
-                                            <dt>Operating system</dt>
-                                            <dd>fedora-atomic</dd>
-                                            <dt>Revision Number</dt>
-                                            <dd>24.2</dd>
-                                            <dt>Released</dt>
-                                            <dd title="2015-09-26 15:33">3 days ago</dd>
-                                        </dl>
-                                    </div>
-                                    <div class="col-sm-6">
-                                        <dl>
-                                            <dt>Additions</dt>
-                                            <dd>10 packages</dd>
-                                            <dt>Removals</dt>
-                                            <dd>3 packages</dd>
-                                            <dt>Changes</dt>
-                                            <dd>18 packages</dd>
-                                        </dl>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-        <tbody class="active">
-            <tr>
-                <td>
-                    <div class="timeline-ct">
-                        <i class="fa fa-check-circle-o timeline-ct-point timeline-ct-lg active"></i>
-                        <div class="ct-listing-panel">
-                            <div class="ct-listing-panel-head">
-                                <div class="ct-listing-panel-actions">
-                                </div>
-                                <div class="listing-ct-status">
-                                    Installed
-                                </div>
-                                <h3>fedora-atomic: 24.1</h3>
-                                <ul class="nav nav-tabs nav-tabs-pf">
-                                    <li class="active"><a href="#">Tree</a></li>
-                                    <li><a href="#">Packages</a></li>
-                                </ul>
-                            </div>
-                            <div class="listing-ct-body">
-                                <div class="row">
-                                    <div class="col-sm-6">
-                                        <dl>
-                                            <dt>Operating system</dt>
-                                            <dd>fedora-atomic</dd>
-                                            <dt>Revision Number</dt>
-                                            <dd>24.1</dd>
-                                            <dt>Released</dt>
-                                            <dd title="2015-08-29 15:33">1 month ago</dd>
-                                        </dl>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-        <tbody>
-            <tr>
-                <td>
-                    <div class="timeline-ct">
-                        <div class="timeline-ct-point timeline-ct-md">
-                            <div class="spinner"></div>
-                        </div>
-                        <div class="ct-listing-panel">
-                            <div class="ct-listing-panel-head">
-                                <div class="ct-listing-panel-actions">
-                                </div>
-                                <div class="listing-ct-status">
-                                    Downloading manifests 85%
-                                </div>
-                                <h3>fedora-atomic: 24.0</h3>
-                                <ul class="nav nav-tabs nav-tabs-pf">
-                                    <li class="active"><a href="#">Tree</a></li>
-                                    <li><a href="#">Packages</a></li>
-                                </ul>
-                            </div>
-                            <div class="listing-ct-body">
-                                <div class="row">
-                                    <div class="col-sm-6">
-                                        <dl>
-                                            <dt>Operating system</dt>
-                                            <dd>fedora-atomic</dd>
-                                            <dt>Revision Number</dt>
-                                            <dd>24.1</dd>
-                                            <dt>Released</dt>
-                                            <dd title="2015-08-29 15:33">1 month ago</dd>
-                                        </dl>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </td>
-            </tr>
-        </tbody>
-    </table>
-
-</div>
-
 </body>
 </html>
diff --git a/pkg/playground/metrics.html b/pkg/playground/metrics.html
index a53071d1e..0223e216f 100644
--- a/pkg/playground/metrics.html
+++ b/pkg/playground/metrics.html
@@ -10,10 +10,14 @@
     <script src="metrics.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-    <div class="container-fluid">
-        <h1>Monitoring</h1>
-        <button id="reload">Reload</button>
-        <div id="results"></div>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h1>Monitoring</h1>
+                <button id="reload">Reload</button>
+                <div id="results"></div>
+            </section>
+        </main>
     </div>
 </body>
 </html>
diff --git a/pkg/playground/pkgs.html b/pkg/playground/pkgs.html
index 3e9356bfa..dcdd2d965 100644
--- a/pkg/playground/pkgs.html
+++ b/pkg/playground/pkgs.html
@@ -9,8 +9,12 @@
     <script src="pkgs.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-    <div class="container-fluid">
-      <button id="reload">Reload</button>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <button id="reload">Reload</button>
+            </section>
+        </main>
     </div>
 </body>
 </html>
diff --git a/pkg/playground/plot.html b/pkg/playground/plot.html
index 8e8f80a94..37d845a2a 100644
--- a/pkg/playground/plot.html
+++ b/pkg/playground/plot.html
@@ -10,43 +10,47 @@
     <script src="plot.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-  <div class="container-fluid">
-    <h1>Plots</h1>
+  <div class="pf-c-page">
+    <main class="pf-c-page__main" tabindex="-1">
+      <header class="pf-c-page__header">
+        <h1>Plots</h1>
+      </header>
 
-    <div id="toolbar" class="zoom-controls">
-      <div class="dropdown" style="display:inline-block">
-        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-          <span style="width:6em;text-align:left;padding-left:5px;display:inline-block"></span>
-          <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
+      <div id="toolbar" class="zoom-controls">
+        <div class="dropdown" style="display:inline-block">
+          <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+            <span style="width:6em;text-align:left;padding-left:5px;display:inline-block"></span>
+            <i class="fa fa-caret-down pf-c-context-selector__toggle-icon" aria-hidden="true"></i>
+          </button>
+          <ul class="dropdown-menu" role="menu">
+            <li role="presentation"><a tabindex="0" role="menuitem" data-action="goto-now">Go to now</a></li>
+            <li role="presentation" class="divider"></li>
+            <li role="presentation"><a tabindex="0" role="menuitem" data-range="300">5 minutes</a></li>
+            <li role="presentation"><a tabindex="0" role="menuitem" data-range="3600">1 hour</a></li>
+            <li role="presentation"><a tabindex="0" role="menuitem" data-range="21600">6 hours</a></li>
+            <li role="presentation"><a tabindex="0" role="menuitem" data-range="86400">1 day</a></li>
+            <li role="presentation"><a tabindex="0" role="menuitem" data-range="604800">1 week</a></li>
+          </ul>
+        </div>
+        <button class="pf-c-button pf-m-secondary" data-action="zoom-out">
+          <span class="glyphicon glyphicon-zoom-out"></span>
         </button>
-        <ul class="dropdown-menu" role="menu">
-          <li role="presentation"><a tabindex="0" role="menuitem" data-action="goto-now">Go to now</a></li>
-          <li role="presentation" class="divider"></li>
-          <li role="presentation"><a tabindex="0" role="menuitem" data-range="300">5 minutes</a></li>
-          <li role="presentation"><a tabindex="0" role="menuitem" data-range="3600">1 hour</a></li>
-          <li role="presentation"><a tabindex="0" role="menuitem" data-range="21600">6 hours</a></li>
-          <li role="presentation"><a tabindex="0" role="menuitem" data-range="86400">1 day</a></li>
-          <li role="presentation"><a tabindex="0" role="menuitem" data-range="604800">1 week</a></li>
-        </ul>
+        <div class="btn-group">
+            <button class="pf-c-button pf-m-secondary" data-action="scroll-left">
+                <span class="fa fa-angle-left" />
+            </button>
+            <button class="pf-c-button pf-m-secondary" data-action="scroll-right">
+                <span class="fa fa-angle-right" />
+            </button>
+        </div>
       </div>
-      <button class="pf-c-button pf-m-secondary" data-action="zoom-out">
-        <span class="glyphicon glyphicon-zoom-out"></span>
-      </button>
-      <div class="btn-group">
-          <button class="pf-c-button pf-m-secondary" data-action="scroll-left">
-              <span class="fa fa-angle-left" />
-          </button>
-          <button class="pf-c-button pf-m-secondary" data-action="scroll-right">
-              <span class="fa fa-angle-right" />
-          </button>
-      </div>
-    </div>
 
-    <span class="plot-unit" id="plot_direct_unit"></span>
-    <div id="plot_direct" class="zoomable-plot"></div>
+      <span class="plot-unit" id="plot_direct_unit"></span>
+      <div id="plot_direct" class="zoomable-plot"></div>
 
-    <span class="plot-unit" id="plot_pmcd_unit"></span>
-    <div id="plot_pmcd" class="zoomable-plot"></div>
+      <span class="plot-unit" id="plot_pmcd_unit"></span>
+      <div id="plot_pmcd" class="zoomable-plot"></div>
+    </main>
   </div>
 </body>
 </html>
diff --git a/pkg/playground/react-patterns.html b/pkg/playground/react-patterns.html
index 8e6d99b4a..b39cf3a52 100644
--- a/pkg/playground/react-patterns.html
+++ b/pkg/playground/react-patterns.html
@@ -10,43 +10,38 @@
 </head>
 
 <body class="pf-m-redhat-font">
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h3>Select file</h3>
+                <div id="demo-file-ac"></div>
+            </section>
 
-<hr>
+            <section class="pf-c-page__main-section pf-m-light">
+                <h3>Dialogs</h3>
+                <button id="demo-show-dialog" class="pf-c-button pf-m-secondary">Show Dialog</button>
+                <button id="demo-show-error-dialog" class="pf-c-button pf-m-secondary">Show Error-Dialog</button>
+                <div id="demo-dialog-result"></div>
+            </section>
 
-<div class="container-fluid">
-    <h3>Select file</h3>
-    <div id="demo-file-ac"></div>
-</div>
 
-<hr>
+            <section class="pf-c-page__main-section pf-m-light">
+                <h3>Listing Pattern</h3>
+                <div id="demo-listing"></div>
+                <div id="demo-listing-selectable"></div>
+                <div id="demo-listing-empty"></div>
+            </section>
 
-<div class="container-fluid">
-    <h3>Dialogs</h3>
-    <button id="demo-show-dialog" class="pf-c-button pf-m-secondary">Show Dialog</button>
-    <button id="demo-show-error-dialog" class="pf-c-button pf-m-secondary">Show Error-Dialog</button>
-    <div id="demo-dialog-result"></div>
-</div>
-
-<hr>
-
-<div class="container-fluid">
-    <h3>Listing Pattern</h3>
-    <div id="demo-listing"></div>
-    <div id="demo-listing-selectable"></div>
-    <div id="demo-listing-empty"></div>
-</div>
-
-<div class="container-fluid">
-    <h3>OnOff Switch</h3>
-    <div id="demo-onoff"></div>
-</div>
-
-<div class="container-fluid">
-    <h3>Cards</h3>
-    <div id="demo-cards"></div>
-</div>
-
-<hr>
+            <section class="pf-c-page__main-section pf-m-light">
+                <h3>OnOff Switch</h3>
+                <div id="demo-onoff"></div>
+            </section>
 
+            <section class="pf-c-page__main-section pf-m-light">
+                <h3>Cards</h3>
+                <div id="demo-cards"></div>
+            </section>
+        </main>
+    </div>
 </body>
 </html>
diff --git a/pkg/playground/speed.html b/pkg/playground/speed.html
index 965dad846..86a8cd7a6 100644
--- a/pkg/playground/speed.html
+++ b/pkg/playground/speed.html
@@ -9,102 +9,106 @@
     <script src="speed.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-    <div class="container-fluid">
-        <h1>Speed Tests</h1>
-        <table>
-            <tbody>
-                <tr>
-                    <td><label class="control-label">Speed: </label></td>
-                    <td>&nbsp;&nbsp;<label id="speed"></label></td>
-                </tr>
-                <tr>
-                    <td><label class="control-label">Process ID: </label></td>
-                    <td>&nbsp;&nbsp;<label id="pid"></label></td>
-                </tr>
-                <tr>
-                    <td><label class="control-label">Bridge Memory: </label></td>
-                    <td>&nbsp;&nbsp;<label id="memory"></label></td>
-                </tr>
-            </tbody>
-        </table>
-        <p><button class="pf-c-button pf-m-secondary pf-m-primary" id="stop">Stop</button></p>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section class="pf-c-page__main-section pf-m-light">
+                <h1>Speed Tests</h1>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td><label class="control-label">Speed: </label></td>
+                            <td>&nbsp;&nbsp;<label id="speed"></label></td>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label">Process ID: </label></td>
+                            <td>&nbsp;&nbsp;<label id="pid"></label></td>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label">Bridge Memory: </label></td>
+                            <td>&nbsp;&nbsp;<label id="memory"></label></td>
+                        </tr>
+                    </tbody>
+                </table>
+                <p><button class="pf-c-button pf-m-secondary pf-m-primary" id="stop">Stop</button></p>
 
-        <h2>Echo Tests</h2>
-        <table>
-            <tbody>
-                <tr>
-                    <td><label class="control-label" for="message">Message</label></td>
-                    <td><input class="form-control" id="message" value="100000"></td>
-                </tr>
-                <tr>
-                    <td><label class="control-label" for="batch">Batch</label></td>
-                    <td><input class="form-control" id="batch" value="1"></td>
-                </tr>
-                <tr>
-                    <td><label class="control-label" for="interval">Interval</label></td>
-                    <td><input class="form-control" id="interval" value="100"></td>
-                </tr>
-                <tr>
-                    <td><label class="control-label" for="binary">Binary</label></td>
-                    <td><input type="checkbox" id="binary"></td>
-                </tr>
-                <tr>
-                    <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-normal">Normal Channel</button></td>
-                    <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-sideband">Sideband Channel</button></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="container-fluid">
-        <h1>Read Test</h1>
-        <table>
-            <tbody>
-                <tr>
-                    <td><label class="control-label" for="message">Path</label></td>
-                    <td><input class="form-control" id="read-path" value="/dev/sda"></td>
-                </tr>
-                <tr>
-                    <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-normal">Normal Channel</button></td>
-                    <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-sideband">Sideband Channel</button></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="container-fluid">
-        <h1>Download Test</h1>
-        <table>
-            <tbody>
-                <tr>
-                    <td><label class="control-label" for="message">Path</label></td>
-                    <td><input class="form-control" id="download-path" value="/dev/sda"></td>
-                </tr>
-                <tr>
-                    <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="download-external">External Download</button></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    <div class="container-fluid">
-        <h1>Spawn Test</h1>
-        <table>
-            <tbody>
-                <tr>
-                    <td><label class="control-label" for="spawn">Command</label></td>
-                    <td><input class="form-control" id="spawn-command" value="seq 1000000"></td>
-                </tr>
-                <tr>
-                    <td><label class="control-label" for="spawn-result">Result</label></td>
-                    <td><label class="form-control" id="spawn-result"></label>
-                </tr>
-                <tr>
-                    <td><label class="control-label" for="spawn-output">Output block</label></td>
-                    <td><pre id="spawn-output"></pre>
-                </tr>
-                <tr>
-                    <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="spawn">Spawn Command</button></td>
-                </tr>
-            </tbody>
-        </table>
+                <h2>Echo Tests</h2>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td><label class="control-label" for="message">Message</label></td>
+                            <td><input class="form-control" id="message" value="100000"></td>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label" for="batch">Batch</label></td>
+                            <td><input class="form-control" id="batch" value="1"></td>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label" for="interval">Interval</label></td>
+                            <td><input class="form-control" id="interval" value="100"></td>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label" for="binary">Binary</label></td>
+                            <td><input type="checkbox" id="binary"></td>
+                        </tr>
+                        <tr>
+                            <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-normal">Normal Channel</button></td>
+                            <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="echo-sideband">Sideband Channel</button></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+            <section class="pf-c-page__main-section pf-m-light">
+                <h1>Read Test</h1>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td><label class="control-label" for="message">Path</label></td>
+                            <td><input class="form-control" id="read-path" value="/dev/sda"></td>
+                        </tr>
+                        <tr>
+                            <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-normal">Normal Channel</button></td>
+                            <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="read-sideband">Sideband Channel</button></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+            <section class="pf-c-page__main-section pf-m-light">
+                <h1>Download Test</h1>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td><label class="control-label" for="message">Path</label></td>
+                            <td><input class="form-control" id="download-path" value="/dev/sda"></td>
+                        </tr>
+                        <tr>
+                            <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="download-external">External Download</button></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+            <section class="pf-c-page__main-section pf-m-light">
+                <h1>spawn test</h1>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td><label class="control-label" for="spawn">command</label></td>
+                            <td><input class="form-control" id="spawn-command" value="seq 1000000"></td>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label" for="spawn-result">result</label></td>
+                            <td><label class="form-control" id="spawn-result"></label>
+                        </tr>
+                        <tr>
+                            <td><label class="control-label" for="spawn-output">output block</label></td>
+                            <td><pre id="spawn-output"></pre>
+                        </tr>
+                        <tr>
+                            <td><button class="pf-c-button pf-m-secondary pf-m-primary" id="spawn">spawn command</button></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </section>
+        </main>
     </div>
 </body>
 </html>
diff --git a/pkg/playground/test.html b/pkg/playground/test.html
index 182737c34..adf0b9b75 100644
--- a/pkg/playground/test.html
+++ b/pkg/playground/test.html
@@ -10,36 +10,40 @@
     <script src="test.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-    <div id="internal" class="container-fluid">
-        <img src="hammer.gif" class="pull-right" id="hammer">
-        <div id="nav"></div>
-        <button class="pf-c-button pf-m-secondary" id="go-down">Go down</button>
-        <br/>
-        <br/>
-        <div class="cockpit-internal-reauthorize">
-            <button class="pf-c-button pf-m-secondary">Privileged Action</button>
-            <span></span>
-        </div>
-        <div class="super-channel">
-            <button class="pf-c-button pf-m-secondary">Superuser</button>
-            <span></span>
-        </div>
-        <div class="lock-channel">
-            <button class="pf-c-button pf-m-secondary">Lock /tmp/playground-test-lock</button>
-            <span></span>
-        </div>
-        <button class="pf-c-button pf-m-secondary" id="modify-file">Increment /tmp/counter atomically</button>
-        <div id="file-content"></div>
-        <div id="file-error"></div>
-        <br/>
-        <div>
-          <button class="pf-c-button pf-m-secondary" id="load-file">Load /tmp/counter</button>
-          <button class="pf-c-button pf-m-secondary" id="save-file">Overwrite /tmp/counter</button>
-          <button class="pf-c-button pf-m-secondary" id="delete-file">Delete /tmp/counter</button>
-        </div>
-        <textarea id="edit-file"></textarea>
-        <br/>
-        Visibility: <label id="hidden"></label>
+    <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section id="internal" class="pf-c-page__main-section pf-m-light">
+                <img src="hammer.gif" class="pull-right" id="hammer">
+                <div id="nav"></div>
+                <button class="pf-c-button pf-m-secondary" id="go-down">Go down</button>
+                <br/>
+                <br/>
+                <div class="cockpit-internal-reauthorize">
+                    <button class="pf-c-button pf-m-secondary">Privileged Action</button>
+                    <span></span>
+                </div>
+                <div class="super-channel">
+                    <button class="pf-c-button pf-m-secondary">Superuser</button>
+                    <span></span>
+                </div>
+                <div class="lock-channel">
+                    <button class="pf-c-button pf-m-secondary">Lock /tmp/playground-test-lock</button>
+                    <span></span>
+                </div>
+                <button class="pf-c-button pf-m-secondary" id="modify-file">Increment /tmp/counter atomically</button>
+                <div id="file-content"></div>
+                <div id="file-error"></div>
+                <br/>
+                <div>
+                  <button class="pf-c-button pf-m-secondary" id="load-file">Load /tmp/counter</button>
+                  <button class="pf-c-button pf-m-secondary" id="save-file">Overwrite /tmp/counter</button>
+                  <button class="pf-c-button pf-m-secondary" id="delete-file">Delete /tmp/counter</button>
+                </div>
+                <textarea id="edit-file"></textarea>
+                <br/>
+                Visibility: <label id="hidden"></label>
+            </section>
+        </main>
     </div>
 </body>
 </html>
diff --git a/pkg/playground/translate.html b/pkg/playground/translate.html
index 0db95d5db..7adb47839 100644
--- a/pkg/playground/translate.html
+++ b/pkg/playground/translate.html
@@ -8,164 +8,168 @@
     <script src="../base1/cockpit.js"></script>
 </head>
 <body class="pf-m-redhat-font" hidden>
-    <div id="internal" class="container-fluid">
-        <h2>HTML translations</h2>
+   <div class="pf-c-page">
+        <main class="pf-c-page__main" tabindex="-1">
+            <section id="internal" class="pf-c-page__main-section pf-m-light">
+                <h2>HTML translations</h2>
 
-        <p>For translating HTML use these forms:<p>
+                <p>For translating HTML use these forms:<p>
 
-        <p>
-            <code>&lt;span translate&gt;Ready&lt;/span&gt;</code>
-            = <span translate id="translate-html">Ready</span>
-        </p>
+                <p>
+                    <code>&lt;span translate&gt;Ready&lt;/span&gt;</code>
+                    = <span translate id="translate-html">Ready</span>
+                </p>
 
-        <p>
-            <code>&lt;span translate translate-context="verb"&gt;Ready&lt;/span&gt;</code>
-            = <span translate translate-context="verb" id="translate-html-context">Ready</span>
-        </p>
+                <p>
+                    <code>&lt;span translate translate-context="verb"&gt;Ready&lt;/span&gt;</code>
+                    = <span translate translate-context="verb" id="translate-html-context">Ready</span>
+                </p>
 
-        <p>
-            <code>&lt;span translate="yes"&gt;Not ready&lt;/span&gt;</code>
-            = <span translate="yes" id="translate-html-yes">Not ready</span>
-        </p>
+                <p>
+                    <code>&lt;span translate="yes"&gt;Not ready&lt;/span&gt;</code>
+                    = <span translate="yes" id="translate-html-yes">Not ready</span>
+                </p>
 
-        <p>
-            <code>&lt;span translate="title" title="Unavailable"&gt;Cancel&lt;/span&gt;</code>
-            = <span translate="title" title="Unavailable" id="translate-html-title">Cancel</span>
-        </p>
+                <p>
+                    <code>&lt;span translate="title" title="Unavailable"&gt;Cancel&lt;/span&gt;</code>
+                    = <span translate="title" title="Unavailable" id="translate-html-title">Cancel</span>
+                </p>
 
-        <p>
-            <code>&lt;span translate="yes title" title="Unavailable"&gt;Cancel&lt;/span&gt;</code>
-            = <span translate="yes title" title="Unavailable" id="translate-html-yes-title">Cancel</span>
-        </p>
+                <p>
+                    <code>&lt;span translate="yes title" title="Unavailable"&gt;Cancel&lt;/span&gt;</code>
+                    = <span translate="yes title" title="Unavailable" id="translate-html-yes-title">Cancel</span>
+                </p>
 
-        <p>Note that we do <b>not support</b>:<p>
-        <ul>
-            <li>Interpolation of variables.</li>
-            <li>Pluralization</li>
-            <li>The <code>&lt;translate&gt;</code> element</li>
-        </ul>
+                <p>Note that we do <b>not support</b>:<p>
+                <ul>
+                    <li>Interpolation of variables.</li>
+                    <li>Pluralization</li>
+                    <li>The <code>&lt;translate&gt;</code> element</li>
+                </ul>
 
-        <hr>
+                <hr>
 
-        <h2>Old Glade style</h2>
+                <h2>Old Glade style</h2>
 
-        <p>The old Glade style is not recommended:<p>
+                <p>The old Glade style is not recommended:<p>
 
-        <p>
-            <code>&lt;span translate="yes"&gt;Empty&lt;/span&gt;</code>
-            = <span translate="yes" id="translatable-glade">Empty</span>
-        </p>
+                <p>
+                    <code>&lt;span translate="yes"&gt;Empty&lt;/span&gt;</code>
+                    = <span translate="yes" id="translatable-glade">Empty</span>
+                </p>
 
-        <p>
-            <code>&lt;span translate="yes" context="verb"&gt;Empty&lt;/span&gt;</code>
-            = <span translate="yes" context="verb" id="translatable-glade-context">Empty</span>
-        </p>
+                <p>
+                    <code>&lt;span translate="yes" context="verb"&gt;Empty&lt;/span&gt;</code>
+                    = <span translate="yes" context="verb" id="translatable-glade-context">Empty</span>
+                </p>
 
-        <p>Note that we do <b>not support</b>:<p>
-        <ul>
-            <li>Interpolation of variables.</li>
-            <li>Translatable attributes.</li>
-            <li>Pluralization</li>
-            <li>The <code>&lt;translate&gt;</code> element</li>
-        </ul>
+                <p>Note that we do <b>not support</b>:<p>
+                <ul>
+                    <li>Interpolation of variables.</li>
+                    <li>Translatable attributes.</li>
+                    <li>Pluralization</li>
+                    <li>The <code>&lt;translate&gt;</code> element</li>
+                </ul>
 
-        <hr>
+                <hr>
 
-        <h2>Mustache translations</h2>
+                <h2>Mustache translations</h2>
 
-        <p>For translating Mustache use these forms:<p>
+                <p>For translating Mustache use these forms:<p>
 
-        <div id="mustache-output">
-        </div>
+                <div id="mustache-output">
+                </div>
 
-        <script id="mustache-input" type="x-template/mustache">
-            <p>
-                <code>&lt;span translate="yes"&gt;User&lt;/span&gt;</code>
-                = <span translate="yes" id="translatable-mustache">User</span>
-            </p>
+                <script id="mustache-input" type="x-template/mustache">
+                    <p>
+                        <code>&lt;span translate="yes"&gt;User&lt;/span&gt;</code>
+                        = <span translate="yes" id="translatable-mustache">User</span>
+                    </p>
 
-            <p>
-                <code>&lt;span translate&gt;Memory&lt;/span&gt;</code>
-                = <span translate id="translate-mustache">Memory</span>
-            </p>
+                    <p>
+                        <code>&lt;span translate&gt;Memory&lt;/span&gt;</code>
+                        = <span translate id="translate-mustache">Memory</span>
+                    </p>
 
-            <p>
-                <code>&lt;span translate="yes"&gt;Accounts&lt;/span&gt;</code>
-                = <span translate="yes" id="translate-mustache-yes">Accounts</span>
-            </p>
+                    <p>
+                        <code>&lt;span translate="yes"&gt;Accounts&lt;/span&gt;</code>
+                        = <span translate="yes" id="translate-mustache-yes">Accounts</span>
+                    </p>
 
-            <p>
-                <code>&lt;span translate="title" title="Error"&gt;User&lt;/span&gt;</code>
-                = <span translate="title" title="Error" id="translate-mustache-title">User</span>
-            </p>
+                    <p>
+                        <code>&lt;span translate="title" title="Error"&gt;User&lt;/span&gt;</code>
+                        = <span translate="title" title="Error" id="translate-mustache-title">User</span>
+                    </p>
 
-            <p>
-                <code>&lt;span translate="yes title" title="Error"&gt;User&lt;/span&gt;</code>
-                = <span translate="yes title" title="Error" id="translate-mustache-yes-title">User</span>
-            </p>
-        </script>
+                    <p>
+                        <code>&lt;span translate="yes title" title="Error"&gt;User&lt;/span&gt;</code>
+                        = <span translate="yes title" title="Error" id="translate-mustache-yes-title">User</span>
+                    </p>
+                </script>
 
-        <p>Note that we do <b>not support</b>:<p>
-        <ul>
-            <li>Interpolation of variables.</li>
-            <li>Pluralization</li>
-            <li>The <code>&lt;translate&gt;</code> element</li>
-        </ul>
-        <hr>
+                <p>Note that we do <b>not support</b>:<p>
+                <ul>
+                    <li>Interpolation of variables.</li>
+                    <li>Pluralization</li>
+                    <li>The <code>&lt;translate&gt;</code> element</li>
+                </ul>
+                <hr>
 
-        <h2>Code Translations</h2>
+                <h2>Code Translations</h2>
 
-        <p>For translating in javascript code, use these forms:</p>
+                <p>For translating in javascript code, use these forms:</p>
 
-        <p>
-            <code>_("Empty")</code>
-            = <span id="underscore-empty"></span>
-        </p>
+                <p>
+                    <code>_("Empty")</code>
+                    = <span id="underscore-empty"></span>
+                </p>
 
-        <p>
-            <code>_("verb", "Empty")</code>
-            = <span id="underscore-context-empty"></span>
-        </p>
+                <p>
+                    <code>_("verb", "Empty")</code>
+                    = <span id="underscore-context-empty"></span>
+                </p>
 
-        <p>
-            <code>C_("verb", "Empty")</code>
-            = <span id="cunderscore-context-empty"></span>
-        </p>
+                <p>
+                    <code>C_("verb", "Empty")</code>
+                    = <span id="cunderscore-context-empty"></span>
+                </p>
 
-        <p>
-            <code>cockpit.gettext("Control")</code>
-            = <span id="gettext-control"></span>
-        </p>
+                <p>
+                    <code>cockpit.gettext("Control")</code>
+                    = <span id="gettext-control"></span>
+                </p>
 
-        <p>
-            <code>cockpit.gettext("key", "Control")</code>
-            = <span id="gettext-context-control"></span>
-        </p>
+                <p>
+                    <code>cockpit.gettext("key", "Control")</code>
+                    = <span id="gettext-context-control"></span>
+                </p>
 
-        <p>
-            <code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 1)</code>
-            = <span id="ngettext-disks-1"></span>
-        </p>
+                <p>
+                    <code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 1)</code>
+                    = <span id="ngettext-disks-1"></span>
+                </p>
 
-        <p>
-            <code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 2)</code>
-            = <span id="ngettext-disks-2"></span>
-        </p>
+                <p>
+                    <code>cockpit.ngettext("$0 disk is missing", "$0 disks are missing", 2)</code>
+                    = <span id="ngettext-disks-2"></span>
+                </p>
 
-        <p>
-            <code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 1)</code>
-            = <span id="ngettext-context-disks-1"></span>
-        </p>
+                <p>
+                    <code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 1)</code>
+                    = <span id="ngettext-context-disks-1"></span>
+                </p>
 
-        <p>
-            <code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 2)</code>
-            = <span id="ngettext-context-disks-2"></span>
-        </p>
+                <p>
+                    <code>cockpit.ngettext("disk-non-rotational", "$0 disk is missing", "$0 disks are missing", 2)</code>
+                    = <span id="ngettext-context-disks-2"></span>
+                </p>
 
-        <p>Note that we do <b>not support</b>:<p>
-        <ul>
-            <li>Extraction of single quoted strings.</li>
-        </ul>
+                <p>Note that we do <b>not support</b>:<p>
+                <ul>
+                    <li>Extraction of single quoted strings.</li>
+                </ul>
+            </section>
+        </main>
     </div>
     <script src="translate.js"></script>
     <!-- Bring in initial translations -->
diff --git a/pkg/selinux/setroubleshoot-view.jsx b/pkg/selinux/setroubleshoot-view.jsx
index cf771e51a..7a6ff488a 100644
--- a/pkg/selinux/setroubleshoot-view.jsx
+++ b/pkg/selinux/setroubleshoot-view.jsx
@@ -20,7 +20,10 @@
 import cockpit from "cockpit";
 
 import React from "react";
-import { Alert, AlertActionCloseButton, Button } from "@patternfly/react-core";
+import {
+    Alert, AlertActionCloseButton, Button,
+    Page, PageSection, PageSectionVariants
+} from "@patternfly/react-core";
 import { ExclamationCircleIcon, TrashIcon } from "@patternfly/react-icons";
 
 import * as cockpitListing from "cockpit-components-listing.jsx";
@@ -469,17 +472,19 @@ export class SETroubleshootPage extends React.Component {
         }
 
         return (
-            <div className="container-fluid">
-                <SELinuxStatus
-                    selinuxStatus={this.props.selinuxStatus}
-                    selinuxStatusError={this.props.selinuxStatusError}
-                    changeSelinuxMode={this.props.changeSelinuxMode}
-                    dismissError={this.props.dismissStatusError}
-                />
-                {errorMessage}
-                {modifications}
-                {troubleshooting}
-            </div>
+            <Page>
+                <PageSection variant={PageSectionVariants.light}>
+                    <SELinuxStatus
+                        selinuxStatus={this.props.selinuxStatus}
+                        selinuxStatusError={this.props.selinuxStatusError}
+                        changeSelinuxMode={this.props.changeSelinuxMode}
+                        dismissError={this.props.dismissStatusError}
+                    />
+                    {errorMessage}
+                    {modifications}
+                    {troubleshooting}
+                </PageSection>
+            </Page>
         );
     }
 }
diff --git a/pkg/storaged/multipath.jsx b/pkg/storaged/multipath.jsx
index 74d4056aa..cef1755ca 100644
--- a/pkg/storaged/multipath.jsx
+++ b/pkg/storaged/multipath.jsx
@@ -19,7 +19,10 @@
 
 import cockpit from "cockpit";
 import React from "react";
-import { Alert, Button } from "@patternfly/react-core";
+import {
+    Alert, Button,
+    Page, PageSection
+} from "@patternfly/react-core";
 
 import { get_multipathd_service } from "./utils.js";
 import { dialog_open } from "./dialog.jsx";
@@ -63,16 +66,18 @@ export class MultipathAlert extends React.Component {
 
         if (multipath_broken && !multipathd_running) {
             return (
-                <div className="container-fluid page-ct">
-                    <Alert isInline variant='danger' title={
-                        <>
-                            <Button onClick={activate} variant="secondary" className="pull-right">{_("Start multipath")}</Button>
-                            <span className="alert-message">
-                                {_("There are devices with multiple paths on the system, but the multipath service is not running.")}
-                            </span>
-                        </>
-                    } />
-                </div>
+                <Page>
+                    <PageSection>
+                        <Alert isInline variant='danger' title={
+                            <>
+                                <Button onClick={activate} variant="secondary" className="pull-right">{_("Start multipath")}</Button>
+                                <span className="alert-message">
+                                    {_("There are devices with multiple paths on the system, but the multipath service is not running.")}
+                                </span>
+                            </>
+                        } />
+                    </PageSection>
+                </Page>
             );
         } else
             return null;
diff --git a/pkg/systemd/logs.html b/pkg/systemd/logs.html
index e15438868..1207b2dab 100644
--- a/pkg/systemd/logs.html
+++ b/pkg/systemd/logs.html
@@ -29,99 +29,105 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
 </head>
 
 <body class="pf-m-redhat-font">
-  <div id="journal">
-    <div class="content-header-extra">
-      <div class="filters">
-        <div class="filter">
-            <button id="log-filters" class="btn btn-default dropdown-toggle ct-select" type="button" data-toggle="dropdown">
-              <span translate>Time</span>
-              <div class="caret"></div>
-            </button>
-            <ul class="dropdown-menu" id="logs-predefined-filters">
-              <li><a tabindex="0" data-key="boot" data-value="0" translate>Current boot</a></li>
-              <li><a tabindex="0" data-key="boot" data-value="-1" translate>Previous boot</a></li>
-              <li><a tabindex="0" data-key="since" data-value="-24hours" translate>Last 24 hours</a></li>
-              <li><a tabindex="0" data-key="since" data-value="-7days" translate>Last 7 days</a></li>
-            </ul>
-        </div>
+  <div class="pf-c-page" id="journal">
+    <main class="pf-c-page__main" tabindex="-1">
+      <section class="pf-c-page__main-section content-header-extra">
+        <div class="filters">
+          <div class="filter">
+              <button id="log-filters" class="btn btn-default dropdown-toggle ct-select" type="button" data-toggle="dropdown">
+                <span translate>Time</span>
+                <div class="caret"></div>
+              </button>
+              <ul class="dropdown-menu" id="logs-predefined-filters">
+                <li><a tabindex="0" data-key="boot" data-value="0" translate>Current boot</a></li>
+                <li><a tabindex="0" data-key="boot" data-value="-1" translate>Previous boot</a></li>
+                <li><a tabindex="0" data-key="since" data-value="-24hours" translate>Last 24 hours</a></li>
+                <li><a tabindex="0" data-key="since" data-value="-7days" translate>Last 7 days</a></li>
+              </ul>
+          </div>
 
-        <div class="filter">
-            <label for="journal-prio-menu" translate>Priority</label>
-            <select id="journal-prio-menu" class="ct-select">
-              <option value="emerg" translate>Only emergency</option>
-              <option value="alert" translate>Alert and above</option>
-              <option value="crit" translate>Critical and above</option>
-              <option value="err" translate>Error and above</option>
-              <option value="warning" translate>Warning and above</option>
-              <option value="notice" translate>Notice and above</option>
-              <option value="info" translate>Info and above</option>
-              <option value="debug" translate>Debug and above</option>
-            </select>
-        </div>
+          <div class="filter">
+              <label for="journal-prio-menu" translate>Priority</label>
+              <select id="journal-prio-menu" class="ct-select">
+                <option value="emerg" translate>Only emergency</option>
+                <option value="alert" translate>Alert and above</option>
+                <option value="crit" translate>Critical and above</option>
+                <option value="err" translate>Error and above</option>
+                <option value="warning" translate>Warning and above</option>
+                <option value="notice" translate>Notice and above</option>
+                <option value="info" translate>Info and above</option>
+                <option value="debug" translate>Debug and above</option>
+              </select>
+          </div>
 
-        <div class="filter">
-            <label for="journal-service-menu" translate>Identifier</label>
-            <select id="journal-service-menu" class="ct-select">
-                <!-- This is filled by from logs.js !-->
-            </select>
-        </div>
+          <div class="filter">
+              <label for="journal-service-menu" translate>Identifier</label>
+              <select id="journal-service-menu" class="ct-select">
+                  <!-- This is filled by from logs.js !-->
+              </select>
+          </div>
 
-        <div class="filter text-search">
-            <label for="journal-grep" translate>Text</label>
-            <span class="filter-group">
-                <input id="journal-grep" class="form-control" type="text" translate="placeholder" placeholder="Type to filter">
-                <div id="logs-help" class="dropdown">
-                  <a role="link" tabindex="0" id="logs-help-toggle" class="dropdown-toggle dropdown-form-control" data-toggle="dropdown">
-                    <span class="pficon pficon-help"></span>
-                  </a>
-                  <div id="logs-help-menu" class="dropdown-menu">
-                    <span translate>Search the logs with a combination of terms:</span>
-                    <ul>
-                        <li><span translate>qualifiers</span>, <span translate>e.g.</span> 'priority:', 'identifier:', 'service:'</li>
-                        <li><span translate>log fields</span>, <span translate>e.g.</span> '_EXE=/usr/bin/python'</li>
-                        <li translate>any free-form string as regular expression</li>
-                    </ul>
-                    <span class="help-links">
-                        <a href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/managing_systems_using_the_rhel_8_web_console/reviewing-logs_system-management-using-the-rhel-8-web-console#filtering-logs-in-the-web-console_reviewing-logs" target="blank" rel="noopener noreferrer"><span translate>Learn more</span><i class="fa fa-external-link fa-xs"></i></a>
-                        <a href="https://www.freedesktop.org/software/systemd/man/journalctl.html" target="blank" rel="noopener noreferrer"><span translate>journalctl manpage</span><i class="fa fa-external-link fa-xs"></i></a>
-                    </span>
-                    <span class="journal-cmd">
-                        <pre id="journal-query"></pre>
-                        <button class="copy-cmd" id="journal-cmd-copy"><i class="fa fa-clipboard fa-xs"></i></button>
-                    </span>
+          <div class="filter text-search">
+              <label for="journal-grep" translate>Text</label>
+              <span class="filter-group">
+                  <input id="journal-grep" class="form-control" type="text" translate="placeholder" placeholder="Type to filter">
+                  <div id="logs-help" class="dropdown">
+                    <a role="link" tabindex="0" id="logs-help-toggle" class="dropdown-toggle dropdown-form-control" data-toggle="dropdown">
+                      <span class="pficon pficon-help"></span>
+                    </a>
+                    <div id="logs-help-menu" class="dropdown-menu">
+                      <span translate>Search the logs with a combination of terms:</span>
+                      <ul>
+                          <li><span translate>qualifiers</span>, <span translate>e.g.</span> 'priority:', 'identifier:', 'service:'</li>
+                          <li><span translate>log fields</span>, <span translate>e.g.</span> '_EXE=/usr/bin/python'</li>
+                          <li translate>any free-form string as regular expression</li>
+                      </ul>
+                      <span class="help-links">
+                          <a href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/8/html/managing_systems_using_the_rhel_8_web_console/reviewing-logs_system-management-using-the-rhel-8-web-console#filtering-logs-in-the-web-console_reviewing-logs" target="blank" rel="noopener noreferrer"><span translate>Learn more</span><i class="fa fa-external-link fa-xs"></i></a>
+                          <a href="https://www.freedesktop.org/software/systemd/man/journalctl.html" target="blank" rel="noopener noreferrer"><span translate>journalctl manpage</span><i class="fa fa-external-link fa-xs"></i></a>
+                      </span>
+                      <span class="journal-cmd">
+                          <pre id="journal-query"></pre>
+                          <button class="copy-cmd" id="journal-cmd-copy"><i class="fa fa-clipboard fa-xs"></i></button>
+                      </span>
+                    </div>
                   </div>
-                </div>
-            </span>
+              </span>
+          </div>
         </div>
-      </div>
 
-      <div class="filter-separator"></div>
+        <div class="filter-separator"></div>
 
-      <div class="filter-actions">
+        <div class="filter-actions">
 
-        <span class="filters-toggle" hidden>
-          <button class="link-button" translate>Show filters</button>
-        </span>
+          <span class="filters-toggle" hidden>
+            <button class="link-button" translate>Show filters</button>
+          </span>
 
-        <button id="journal-follow" class="pf-c-button pf-m-secondary" type="button" translate>Pause</button>
-      </div>
-    </div>
-
-    <div id="journal-box" class="container-fluid"></div>
+          <button id="journal-follow" class="pf-c-button pf-m-secondary" type="button" translate>Pause</button>
+        </div>
+      </section>
+      <section id="journal-box" class="pf-c-page__main-section pf-m-light"></section>
+    </main>
   </div>
 
-  <div id="journal-entry" class="container-fluid" hidden>
-    <ol class="breadcrumb">
-      <li><a role="link" tabindex="0" id="journal-navigate-home" translate="yes">Logs</a></li>
-      <li id="journal-entry-crumb" class="active" translate="yes">Entry</li>
-    </ol>
-    <h2 id="journal-entry-heading"></h2>
-    <table class="info-table-ct panel panel-default" id="journal-entry-fields">
-    </table>
+  <div id="journal-entry" class="pf-c-page" hidden>
+    <main role="main" class="pf-c-page__main" tabindex="-1">
+      <section id="journal-box" class="pf-c-page__main-breadcrumb">
+        <ol class="breadcrumb">
+          <li><a role="link" tabindex="0" id="journal-navigate-home" translate="yes">Logs</a></li>
+          <li id="journal-entry-crumb" class="active" translate="yes">Entry</li>
+        </ol>
+      </section>
+      <section class="pf-c-page__main-section pf-m-light">
+        <h2 id="journal-entry-heading"></h2>
+        <table class="info-table-ct panel panel-default" id="journal-entry-fields">
+        </table>
+      </section>
+    </main>
   </div>
 
   <script type="text/javascript" src="logs.js"></script>
 </body>
 
 </html>
-
diff --git a/pkg/systemd/system-global.scss b/pkg/systemd/system-global.scss
index 2f445e9dd..89bd92468 100644
--- a/pkg/systemd/system-global.scss
+++ b/pkg/systemd/system-global.scss
@@ -32,7 +32,6 @@
 /* Extra content header */
 
 .content-header-extra {
-    background: #f5f5f5;
     border-bottom: 1px solid #ddd;
     padding: 10px 20px;
     width: 100%;
diff --git a/pkg/users/accounts-list.js b/pkg/users/accounts-list.js
index 899e3340c..0e98973d5 100644
--- a/pkg/users/accounts-list.js
+++ b/pkg/users/accounts-list.js
@@ -21,7 +21,7 @@ import cockpit from 'cockpit';
 import React from 'react';
 import { superuser } from "superuser";
 
-import { Button, Badge } from '@patternfly/react-core';
+import { Button, Badge, Page, PageSection, PageSectionVariants } from '@patternfly/react-core';
 import { account_create_dialog } from "./account-create-dialog.js";
 
 const _ = cockpit.gettext;
@@ -68,14 +68,16 @@ export function AccountsList({ accounts, current_user }) {
     });
 
     return (
-        <div id="accounts" className="container-fluid">
-            { superuser.allowed &&
-            <Button id="accounts-create" onClick={() => account_create_dialog(accounts)}>
-                {_("Create new account")}
-            </Button>
-            }
-            <ul id="accounts-list">
-                { filtered_accounts.map(a => <AccountItem key={a.name} account={a} current={current_user == a.name} />) }
-            </ul>
-        </div>);
+        <Page id="accounts">
+            <PageSection variant={PageSectionVariants.light}>
+                { superuser.allowed &&
+                <Button id="accounts-create" onClick={() => account_create_dialog(accounts)}>
+                    {_("Create new account")}
+                </Button>
+                }
+                <ul id="accounts-list">
+                    { filtered_accounts.map(a => <AccountItem key={a.name} account={a} current={current_user == a.name} />) }
+                </ul>
+            </PageSection>
+        </Page>);
 }
diff --git a/test/verify/files/embed-cockpit/index.html b/test/verify/files/embed-cockpit/index.html
index f7c85aa60..6523379ac 100644
--- a/test/verify/files/embed-cockpit/index.html
+++ b/test/verify/files/embed-cockpit/index.html
@@ -32,90 +32,134 @@
 <body id="content" class="cards-pf">
 
     <!-- BOILERPLATE: Makes this look like another app -->
-    <div class="container-fluid container-cards-pf">
-        <div class="row row-cards-pf">
-            <div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
-                <div class="row row-cards-pf">
-                    <input id="embed-address" class="form-control" value="http://127.0.0.1"/>
-                </div>
-                <div class="card-pf card-pf-accented card-pf-aggregate-status">
-                    <h2 class="card-pf-title">
-                        <a id="embed-full" href="/cockpit/@localhost/system/index.html">
-                            <span class="fa fa-server"></span>Full Server
-                        </a>
-                    </h2>
-                    <div class="card-pf-body">
-                        <p class="card-pf-aggregate-status-notifications">
-                            <span class="card-pf-aggregate-status-notification">
-                                <span class="pficon pficon-add-circle-o"></span></span>
-                        </p>
+    <main class="pf-c-page__main" tabindex="-1">
+        <section class="pf-c-page__main-section pf-m-light container-cards-pf">
+            <div class="row row-cards-pf">
+                <div id="embed-links" class="col-xs-3 col-sm-3 col-md-2">
+                    <div class="row row-cards-pf">
+                        <input id="embed-address" class="form-control" value="http://127.0.0.1"/>
                     </div>
-                </div>
-                <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
-                    <h2 class="card-pf-title">
-                        <a id="embed-terminal" href="/cockpit/@localhost/system/terminal.html">
-                            <span class="fa fa-terminal"></span>Server Terminal</a>
-                    </h2>
-                    <div class="card-pf-body">
-                        <p class="card-pf-aggregate-status-notifications">
-                            <span class="card-pf-aggregate-status-notification"><span
-                                    class="pficon pficon-error-circle-o"></span>4</span>
-                            <span class="card-pf-aggregate-status-notification"><span
-                                    class="pficon pficon-warning-triangle-o"></span>1</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="card-pf card-pf-accented card-pf-aggregate-status">
-                    <h2 class="card-pf-title">
-                        <a id="embed-network" href="/cockpit/@localhost/network/index.html">
-                            <span class="fa fa-plug"></span>Server Networking</a>
-                    </h2>
-                    <div class="card-pf-body">
-                        <p class="card-pf-aggregate-status-notifications">
-                        <span class="card-pf-aggregate-status-notification"><span
-                                    class="pficon pficon-error-circle-o"></span>1</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="card-pf card-pf-accented card-pf-aggregate-status">
-                    <h2 class="card-pf-title">
-                        <a id="embed-storage" href="/cockpit/@localhost/storage/index.html">
-                            <span class="fa fa-hdd-o"></span>Server Storage</a>
-                    </h2>
-                    <div class="card-pf-body">
-                        <p class="card-pf-aggregate-status-notifications">
-                        <span class="card-pf-aggregate-status-notification"><span
-                                    class="pficon pficon-error-circle-o"></span>1</span>
-                        </p>
-                    </div>
-                </div>
-                <div class="card-pf card-pf-accented card-pf-aggregate-status">
-                    <h2 class="card-pf-title">
-                        <a id="embed-auth" href="/cockpit+app/@localhost/shell/index.html">
-                            <span class="fa fa-lock"></span>Separate Auth
-                        </a>
-                    </h2>
-                    <div class="card-pf-body">
-                        <p class="card-pf-aggregate-status-notifications">
-                        <span class="card-pf-aggregate-status-notification"><span
-                                    class="pficon pficon-error-circle-o"></span>1</span>
-                        </p>
-                    </div>
-                </div>
-            </div>
-            <div class="col-xs-9 col-sm-9 col-md-10">
-                <div class="card-pf">
-                    <div class="card-pf-heading">
-                        <h2 id="embed-title" class="card-pf-title">
-                            Embedded Cockpit Here
+                    <div class="card-pf card-pf-accented card-pf-aggregate-status">
+                        <h2 class="card-pf-title">
+                            <a id="embed-full" href="/cockpit/@localhost/system/index.html">
+                                <span class="fa fa-server"></span>Full Server
+                            </a>
                         </h2>
+                        <div class="card-pf-body">
+                            <p class="card-pf-aggregate-status-notifications">
+                                <span class="card-pf-aggregate-status-notification">
+                                    <span class="pficon pficon-add-circle-o"></span></span>
+                            </p>
+                        </div>
                     </div>
-                    <div id="embed-here" class="card-pf-body">
+                    <div class="card-pf card-pf-accented card-pf-aggregate-status card-pf-with-action">
+                        <h2 class="card-pf-title">
+                            <a id="embed-terminal" href="/cockpit/@localhost/system/terminal.html">
+                                <span class="fa fa-terminal"></span>Server Terminal</a>
+                        </h2>
+                        <div class="card-pf-body">
+                            <p class="card-pf-aggregate-status-notifications">
+                                <span class="card-pf-aggregate-status-notification"><span
+                                        class="pficon pficon-error-circle-o"></span>4</span>
+                                <span class="card-pf-aggregate-status-notification"><span
+                                        class="pficon pficon-warning-triangle-o"></span>1</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card-pf card-pf-accented card-pf-aggregate-status">
+                        <h2 class="card-pf-title">
+                            <a id="embed-network" href="/cockpit/@localhost/network/index.html">
+                                <span class="fa fa-plug"></span>Server Networking</a>
+                        </h2>
+                        <div class="card-pf-body">
+                            <p class="card-pf-aggregate-status-notifications">
+                            <span class="card-pf-aggregate-status-notification"><span
+                                        class="pficon pficon-error-circle-o"></span>1</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card-pf card-pf-accented card-pf-aggregate-status">
+                        <h2 class="card-pf-title">
+                            <a id="embed-storage" href="/cockpit/@localhost/storage/index.html">
+                                <span class="fa fa-hdd-o"></span>Server Storage</a>
+                        </h2>
+                        <div class="card-pf-body">
+                            <p class="card-pf-aggregate-status-notifications">
+                            <span class="card-pf-aggregate-status-notification"><span
+                                        class="pficon pficon-error-circle-o"></span>1</span>
+                            </p>
+                        </div>
+                    </div>
+                    <div class="card-pf card-pf-accented card-pf-aggregate-status">
+                        <h2 class="card-pf-title">
+                            <a id="embed-auth" href="/cockpit+app/@localhost/shell/index.html">
+                                <span class="fa fa-lock"></span>Separate Auth
+                            </a>
+                        </h2>
+                        <div class="card-pf-body">
+                            <p class="card-pf-aggregate-status-notifications">
+                            <span class="card-pf-aggregate-status-notification"><span
+                                        class="pficon pficon-error-circle-o"></span>1</span>
+                            </p>
+                        </div>
                     </div>
                 </div>
+                <div class="col-xs-9 col-sm-9 col-md-10">
+                    <div class="card-pf">
+                        <div class="card-pf-heading">
+                            <h2 id="embed-title" class="card-pf-title">
+                                Embedded Cockpit Here
+                            </h2>
+                        </div>
+                        <div id="embed-here" class="card-pf-body">
+                        </div>
+                    </div>
+                </div>
+<<<<<<< HEAD:test/verify/files/embed-cockpit/index.html
             </div>
         </div><!-- /row -->
     </div><!-- /container -->
+=======
+            </div><!-- /row -->
+        </section>
+    </main>
+
+    <script>
+        var frames = { };
+
+        function click(ev) {
+            var href = ev.target.getAttribute("href");
+            ev.preventDefault();
+
+            var address = document.getElementById("embed-address").value;
+            if (address.indexOf(":") === -1)
+                address += ":9090";
+            var url = address + href;
+
+            var frame = frames[url];
+            if (!frame) {
+                frame = frames[url] = document.createElement("iframe");
+                frame.setAttribute("src", url)
+                frame.setAttribute("name", ev.target.getAttribute("id"));
+                document.getElementById("embed-here").appendChild(frame);
+                frame.addEventListener("load", function(ev) {
+                    ev.target.setAttribute("loaded", "1");
+                });
+            }
+
+            var i, iframes = document.querySelectorAll("iframe");
+            for (i = 0; i < iframes.length; i++)
+                iframes[i].setAttribute("hidden", "hidden");
+            frame.removeAttribute("hidden");
+            document.getElementById("embed-title").innerText = ev.target.innerText;
+            return false;
+        }
+
+        var x, links = document.querySelectorAll("#embed-links a[href]");
+        for (x = 0; x < links.length; x++)
+            links[x].addEventListener("click", click);
+    </script>
+>>>>>>> b64ab575d... Replace all usages of container-fluid class:test/verify/files/embed-cockpit.html
     <div id="embed-loaded">
     </div>
 </body>
