2 files changed, 38 insertions, 0 deletions
diff --git a/browser/components/pocket/content/panels/js/components/Header/Header.jsx b/browser/components/pocket/content/panels/js/components/Header/Header.jsx
new file mode 100644
index 0000000000..be60fe764c
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/components/Header/Header.jsx
@@ -0,0 +1,16 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import React from "react";
+
+function Header(props) {
+  return (
+    <h1 className="stp_header">
+      <div className="stp_header_logo" />
+      {props.children}
+    </h1>
+  );
+}
+
+export default Header;
diff --git a/browser/components/pocket/content/panels/js/components/Header/Header.scss b/browser/components/pocket/content/panels/js/components/Header/Header.scss
new file mode 100644
index 0000000000..f6e4eca9d5
--- /dev/null
+++ b/browser/components/pocket/content/panels/js/components/Header/Header.scss
@@ -0,0 +1,22 @@
+.stp_header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 16px 0 12px;
+  font-weight: 600;
+
+  .stp_header_logo {
+    background: url(../img/pocketlogo.svg) bottom center no-repeat;
+    background-size: contain;
+    height: 32px;
+    width: 121px;
+
+    @include theme_dark {
+      background-image: url(../img/pocketlogo-dark.svg);
+    }
+  }
+
+  .stp_button {
+    margin: 0;
+  }
+}