diff --git a/package-lock.json b/package-lock.json
index f34e81a..0c59b20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,15 +1,15 @@
 {
     "name": "@digicatapult/dscp-hyproof-client",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@digicatapult/dscp-hyproof-client",
-            "version": "0.0.8",
+            "version": "0.0.9",
             "license": "Apache-2.0",
             "dependencies": {
-                "@digicatapult/ui-component-library": "^0.13.6",
+                "@digicatapult/ui-component-library": "^0.14.1",
                 "react": "^18.2.0",
                 "react-dom": "^18.2.0",
                 "react-router-dom": "^6.21.2",
@@ -1835,9 +1835,9 @@
             }
         },
         "node_modules/@digicatapult/ui-component-library": {
-            "version": "0.13.9",
-            "resolved": "https://registry.npmjs.org/@digicatapult/ui-component-library/-/ui-component-library-0.13.9.tgz",
-            "integrity": "sha512-91UtkXXL3D3kXMAcVRfEkobBquagDvATJWQqzO32mX647loMKqNmtAJgrRmCnLMLe9lz1D2W0YvP5CVs5wLcDQ==",
+            "version": "0.14.1",
+            "resolved": "https://registry.npmjs.org/@digicatapult/ui-component-library/-/ui-component-library-0.14.1.tgz",
+            "integrity": "sha512-SzSn7STaZGZGiwPvgN8mzZHGhTWr+GPFzk96QdL/1pSuR+PNTs4z+VpJH6ShwD9mScYJLdXygF75ldRWhp4neg==",
             "dependencies": {
                 "geojson": "^0.5.0",
                 "jsqr": "^1.4.0",
diff --git a/package.json b/package.json
index 541c24b..11a7254 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@digicatapult/dscp-hyproof-client",
-    "version": "0.0.8",
+    "version": "0.0.9",
     "description": "User interface for HyProof",
     "homepage": "https://github.com/digicatapult/dscp-hyproof-client",
     "main": "src/index.js",
@@ -70,7 +70,7 @@
         "webpack-dev-server": "^4.15.1"
     },
     "dependencies": {
-        "@digicatapult/ui-component-library": "^0.13.6",
+        "@digicatapult/ui-component-library": "^0.14.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.21.2",
diff --git a/src/App.js b/src/App.js
index bc4b7ad..67308f4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -19,7 +19,7 @@ export default function App() {
         ['timeline', 'main', 'sidebar'],
       ]}
       columns={['auto', '1fr', 'auto']}
-      rows={['82px', '82px', '1fr']}
+      rows={['78px', '98px', '1fr']}
     >
       <RouterProvider router={router} />
     </FullScreenGrid>
diff --git a/src/assets/images/liveIndicator.png b/src/assets/images/liveIndicator.png
new file mode 100644
index 0000000..834051c
Binary files /dev/null and b/src/assets/images/liveIndicator.png differ
diff --git a/src/pages/Certificates.js b/src/pages/Certificates.js
index c039c7f..a79c1af 100644
--- a/src/pages/Certificates.js
+++ b/src/pages/Certificates.js
@@ -5,10 +5,12 @@ import Header from './components/Header'
 import CertificateForm from './components/CertificateForm'
 
 export default function Certificates() {
+  const userName = 'Heidi Heidi'
+  const companyName = "Heidi's Hydroelectric Hydrogen"
   return (
     <>
       <Nav />
-      <Header />
+      <Header userFullName={userName} companyName={companyName} />
       <CertificateForm />
     </>
   )
diff --git a/src/pages/components/Header.js b/src/pages/components/Header.js
index 6cf24a9..15ef3ea 100644
--- a/src/pages/components/Header.js
+++ b/src/pages/components/Header.js
@@ -1,18 +1,63 @@
 import React from 'react'
 import styled from 'styled-components'
 
-import { Grid } from '@digicatapult/ui-component-library'
+import { Grid, UserIcon } from '@digicatapult/ui-component-library'
 
-export default function Header() {
-  return <StyledHeader area="header">HEADER</StyledHeader>
+import LiveIndicatorPNG from '../../assets/images/liveIndicator.png'
+
+export default function Header({ userFullName, companyName }) {
+  return (
+    <StyledHeader area="header">
+      <UserIcon
+        fullName={userFullName}
+        bgColor="#9EDCFA"
+        outlineColor="white"
+        color="#1A1A1A"
+        size="70px"
+      />
+      <CompanyName>{companyName}</CompanyName>
+      <LiveIndicator>
+        <source srcSet={LiveIndicatorPNG} type="image/png" />
+        <img
+          src={LiveIndicatorPNG}
+          alt="Icon indicating certification system is live"
+          height="32px"
+          width="32px"
+        />
+      </LiveIndicator>
+      <LiveCert>Live Certification</LiveCert>
+    </StyledHeader>
+  )
 }
 
 const StyledHeader = styled(Grid.Panel)`
   color: white;
   display: grid;
+  grid-template-columns: auto 1fr auto auto;
+  gap: 33px;
   align-items: center;
-  justify-items: center;
   background: #1a1a1a;
   width: 100%;
   height: 100%;
+  padding: 0px 28px;
+`
+
+const CompanyName = styled.span`
+  font-family: Roboto;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 45px;
+`
+
+const LiveIndicator = styled.picture``
+
+const LiveCert = styled.span`
+  font-family: Roboto;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 36.746px;
+  padding-left: 33px;
+  border-left: 2px solid white;
 `
diff --git a/src/pages/components/Nav.js b/src/pages/components/Nav.js
index 7c99939..c60f6eb 100644
--- a/src/pages/components/Nav.js
+++ b/src/pages/components/Nav.js
@@ -15,7 +15,7 @@ export default function Nav() {
           <source srcSet={LogoPNG} type="image/png" />
           <img src={LogoPNG} alt="HII Initiative Logo" height="80px" />
         </HomeIcon>
-        <Button>Home</Button>
+        <Button variant="square">Home</Button>
       </Home>
       <Grid.Panel area="nav">
         <AppBar