diff --git a/src/app.scss b/src/app.scss
index 87b46f4..9bb3a1c 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,3 +1,8 @@
 p {
     font-weight: bold;
 }
+
+// Ensure UI fills the entire page (and does not run over)
+.ct-page-fill {
+  height: 100% !important;
+}
diff --git a/src/config.jsx b/src/config.jsx
index 513d342..2c97ea4 100644
--- a/src/config.jsx
+++ b/src/config.jsx
@@ -20,6 +20,7 @@
 
 import React from "react";
 import {
+    Breadcrumb, BreadcrumbItem,
     Button,
     Form,
     FormGroup,
@@ -37,9 +38,10 @@ import {
     EmptyStateIcon,
     Title,
     EmptyStateBody,
-    EmptyStateVariant
+    EmptyStateVariant,
+    Page, PageSection,
 } from "@patternfly/react-core";
-import { AngleLeftIcon, ExclamationCircleIcon } from "@patternfly/react-icons";
+import { ExclamationCircleIcon } from "@patternfly/react-icons";
 import { global_danger_color_200 } from "@patternfly/react-tokens";
 
 const json = require('comment-json');
@@ -557,12 +559,23 @@ export function Config () {
     };
 
     return (
-        <>
-            <Button variant="link" icon={<AngleLeftIcon />} onClick={goBack}>
-                {_("Session Recording")}
-            </Button>
-            <GeneralConfig />
-            <SssdConfig />
-        </>
+        <Page
+groupProps={{ sticky: 'top' }}
+              isBreadcrumbGrouped
+              breadcrumb={
+                  <Breadcrumb className='machines-listing-breadcrumb'>
+                      <BreadcrumbItem to='#' onClick={goBack}>
+                          {_("Session Recording")}
+                      </BreadcrumbItem>
+                      <BreadcrumbItem isActive>
+                          {_("Settings")}
+                      </BreadcrumbItem>
+                  </Breadcrumb>
+              }>
+            <PageSection>
+                <GeneralConfig />
+                <SssdConfig />
+            </PageSection>
+        </Page>
     );
 }
diff --git a/src/index.html b/src/index.html
index cdf58a1..e6f2acb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -33,7 +33,7 @@ along with Cockpit; If not, see <http://www.gnu.org/licenses/>.
 </head>
 
 <body class="pf-m-redhat-form">
-    <div id="app"></div>
+    <div class="ct-page-fill" id="app"></div>
 </body>
 
 </html>
diff --git a/src/recordings.jsx b/src/recordings.jsx
index 62c835f..96a408b 100644
--- a/src/recordings.jsx
+++ b/src/recordings.jsx
@@ -20,6 +20,7 @@
 
 import React from "react";
 import {
+    Breadcrumb, BreadcrumbItem,
     Bullseye,
     Button,
     Card,
@@ -34,6 +35,7 @@ import {
     EmptyStateIcon,
     EmptyStateVariant,
     ExpandableSection,
+    Page, PageSection, PageSectionVariants,
     Spinner,
     Title,
     TextInput,
@@ -50,7 +52,6 @@ import {
     TableBody
 } from "@patternfly/react-table";
 import {
-    AngleLeftIcon,
     CogIcon,
     ExclamationCircleIcon,
     ExclamationTriangleIcon,
@@ -394,30 +395,41 @@ class Recording extends React.Component {
             );
         } else {
             return (
-                <>
-                    <Button variant="link" icon={<AngleLeftIcon />} onClick={this.goBackToList}>
-                        {_("Session Recording")}
-                    </Button>
-                    <Player.Player
-                        ref="player"
-                        matchList={this.props.recording.matchList}
-                        logsTs={this.logsTs}
-                        search={this.props.search}
-                        onTsChange={this.handleTsChange}
-                        recording={r}
-                        logsEnabled={this.state.logsEnabled}
-                        onRewindStart={this.handleLogsReset} />
-                    <ExpandableSection
-                        id="btn-logs-view"
-                        toggleText={_("Logs View")}
-                        onToggle={this.handleLogsClick}
-                        isExpanded={this.state.logsEnabled === true}>
-                        <Logs
-                            recording={this.props.recording}
-                            curTs={this.state.curTs}
-                            jumpToTs={this.handleLogTsChange} />
-                    </ExpandableSection>
-                </>
+                <Page
+groupProps={{ sticky: 'top' }}
+                      isBreadcrumbGrouped
+                      breadcrumb={
+                          <Breadcrumb className='machines-listing-breadcrumb'>
+                              <BreadcrumbItem to='#' onClick={this.goBackToList}>
+                                  {_("Session Recording")}
+                              </BreadcrumbItem>
+                              <BreadcrumbItem isActive>
+                                  {_("Current recording")}
+                              </BreadcrumbItem>
+                          </Breadcrumb>
+                      }>
+                    <PageSection>
+                        <Player.Player
+                            ref="player"
+                            matchList={this.props.recording.matchList}
+                            logsTs={this.logsTs}
+                            search={this.props.search}
+                            onTsChange={this.handleTsChange}
+                            recording={r}
+                            logsEnabled={this.state.logsEnabled}
+                            onRewindStart={this.handleLogsReset} />
+                        <ExpandableSection
+                            id="btn-logs-view"
+                            toggleText={_("Logs View")}
+                            onToggle={this.handleLogsClick}
+                            isExpanded={this.state.logsEnabled === true}>
+                            <Logs
+                                recording={this.props.recording}
+                                curTs={this.state.curTs}
+                                jumpToTs={this.handleLogTsChange} />
+                        </ExpandableSection>
+                    </PageSection>
+                </Page>
             );
         }
     }
@@ -890,16 +902,18 @@ export default class View extends React.Component {
             );
 
             return (
-                <>
-                    <Toolbar>{toolbar}</Toolbar>
-                    <RecordingList
-                        date_since={this.state.date_since}
-                        date_until={this.state.date_until}
-                        username={this.state.username}
-                        hostname={this.state.hostname}
-                        list={this.state.recordingList}
-                        diff_hosts={this.state.diff_hosts} />
-                </>
+                <Page>
+                    <PageSection variant={PageSectionVariants.light}>
+                        <Toolbar>{toolbar}</Toolbar>
+                        <RecordingList
+                            date_since={this.state.date_since}
+                            date_until={this.state.date_until}
+                            username={this.state.username}
+                            hostname={this.state.hostname}
+                            list={this.state.recordingList}
+                            diff_hosts={this.state.diff_hosts} />
+                    </PageSection>
+                </Page>
             );
         } else {
             return (
