diff --git a/src/components/Header.js b/src/components/Header.js
new file mode 100644
index 0000000..d37d3a7
--- /dev/null
+++ b/src/components/Header.js
@@ -0,0 +1,40 @@
+const HEADER_LOGO = `
+  <svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+    {/* Leaf */}
+    <path
+      d="M16 4C20 4 24 7 26 12C24 18 20 22 16 24C12 22 8 18 6 12C8 7 12 4 16 4Z"
+      fill="rgb(34, 197, 94)"
+      className="drop-shadow-sm"
+    />
+    {/* Leaf vein */}
+    <path
+      d="M16 6L16 22"
+      stroke="rgb(21, 128, 61)"
+      strokeWidth="1"
+      className="opacity-60"
+    />
+    {/* Small bar chart at bottom */}
+    <g transform="translate(10, 25)">
+      <rect x="0" y="2" width="2" height="4" fill="rgb(34, 197, 94)" />
+      <rect x="3" y="0" width="2" height="6" fill="rgb(234, 179, 8)" />
+      <rect x="6" y="1" width="2" height="5" fill="rgb(239, 68, 68)" />
+      <rect x="9" y="3" width="2" height="3" fill="rgb(34, 197, 94)" />
+    </g>
+  </svg>
+`;
+
+export const createHeader = () => {
+  const header = document.createElement("header");
+  header.classList.add("cv-header");
+
+  header.innerHTML = HEADER_LOGO;
+  const logo = header.querySelector("svg");
+  logo.classList.add("cv-header__logo");
+
+  const title = document.createElement("h1");
+  title.classList.add("cv-header__title");
+  title.innerText = "Carbon Visualizer";
+  header.append(title);
+
+  return header;
+}
diff --git a/src/core/Panel.js b/src/core/Panel.js
index 2dde2a1..d821e23 100644
--- a/src/core/Panel.js
+++ b/src/core/Panel.js
@@ -42,6 +42,9 @@ class Panel {
 
     // Load panel-specific JavaScript
     await this.loadPanelJS();
+
+    // Load universal components
+    await this.loadHeader();
   }
 
   async loadPanelHTML() {
@@ -96,6 +99,20 @@ class Panel {
     }
   }
 
+  async loadHeader() {
+    try {
+      // Import component module and insert onto the page
+      const componentUrl = this.browserAPI.runtime.getURL('src/components/Header.js');
+      const componentModule = await import(componentUrl);
+
+      const header = componentModule.createHeader();
+      const fallbackHeader = this.container.querySelector('header.cv-header');
+      fallbackHeader.replaceWith(header);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
   async waitForElements() {
     // Wait a small amount for DOM to be ready
     await new Promise(resolve => setTimeout(resolve, 50));
@@ -120,8 +137,8 @@ class Panel {
 
   getFallbackHTML() {
     return `
-      <header class="cv-panel__header">
-        <h2 class="cv-panel__title">Carbon Visualizer - ${this.type}</h2>
+      <header class="cv-header">
+        <h1 class="cv-header__title">Carbon Visualizer - ${this.type}</h1>
       </header>
       <main class="cv-panel__content">
         <p>Panel content for ${this.type}</p>
diff --git a/src/panels/results/results.html b/src/panels/results/results.html
index 4359767..bb4d473 100644
--- a/src/panels/results/results.html
+++ b/src/panels/results/results.html
@@ -6,8 +6,8 @@
 </head>
 <body>
   <div id="cv-panel-content">
-    <header class="cv-panel__header">
-      <h1 class="cv-panel__title">Carbon Visualizer</h1>
+    <header class="cv-header">
+      <h1 class="cv-header__title">Carbon Visualizer</h1>
     </header>
 
     <main class="cv-panel__content">
diff --git a/src/panels/welcome/welcome.html b/src/panels/welcome/welcome.html
index 4712fb6..c42ec89 100644
--- a/src/panels/welcome/welcome.html
+++ b/src/panels/welcome/welcome.html
@@ -6,8 +6,8 @@
 </head>
 <body>
   <div id="cv-panel-content">
-    <header class="cv-panel__header">
-      <h1 class="cv-panel__title">Carbon Visualizer</h1>
+    <header class="cv-header">
+      <h1 class="cv-header__title">Carbon Visualizer</h1>
     </header>
     
     <main class="cv-panel__content">
diff --git a/src/styles/core.css b/src/styles/core.css
index 83f5c27..3644fec 100644
--- a/src/styles/core.css
+++ b/src/styles/core.css
@@ -43,16 +43,28 @@
 }
 
 /* Panel header */
-.cv-panel__header {
-  padding: 1rem 1.5rem 0.5rem;
-  border-bottom: 1px solid var(--cv-white);
+.cv-header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  /* TODO: The `border-bottom` color is equal to `--cv-color-gray-50` and should be replaced with the variable when implemented */
+  border-bottom: 1px solid oklch(from oklch(50.0% 0.000 0) 50% calc(0 + (sin(0.6 * pi) * c)) h);
+  background-color: var(--cv-white);
+}
+
+.cv-header__logo {
+  --header-logo-dimensions: 2rem;
+
+  width: var(--header-logo-dimensions);
+  height: var(--header-logo-dimensions);
 }
 
-.cv-panel__title {
+.cv-header__title {
   margin: 0;
   font-size: 1.125rem;
   font-weight: 600;
-  color: var(--cv-white);
+  color: var(--cv-black);
 }
 
 /* Panel content */
