diff --git a/web/app-list/app-list-header.react.js b/web/app-list/app-list-header.react.js
index 6e299fe5c..9e9ac71a8 100644
--- a/web/app-list/app-list-header.react.js
+++ b/web/app-list/app-list-header.react.js
@@ -1,27 +1,21 @@
 // @flow
 
 import * as React from 'react';
 
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 
-import css from './app-list-header.css';
-import AddButton from '../components/add-button.react.js';
+import PanelHeader from '../components/panel-header.react.js';
 import AppsDirectory from '../modals/apps/apps-directory-modal.react.js';
 
 function AppListHeader(): React.Node {
   const { pushModal } = useModalContext();
 
   const onClickApps = React.useCallback(
     () => pushModal(<AppsDirectory />),
     [pushModal],
   );
 
-  return (
-    <div className={css.container}>
-      <div className={css.headerLabel}>Your apps</div>
-      <AddButton onClick={onClickApps} />
-    </div>
-  );
+  return <PanelHeader headerLabel="Your apps" onClickAddButton={onClickApps} />;
 }
 
 export default AppListHeader;
diff --git a/web/app-list/app-list-header.css b/web/components/panel-header.css
similarity index 84%
rename from web/app-list/app-list-header.css
rename to web/components/panel-header.css
index 997ccea39..842972f75 100644
--- a/web/app-list/app-list-header.css
+++ b/web/components/panel-header.css
@@ -1,11 +1,12 @@
 .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 16px;
+  padding: 0 16px;
+  height: 100%;
 }
 
 .headerLabel {
   color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
 }
diff --git a/web/components/panel-header.react.js b/web/components/panel-header.react.js
new file mode 100644
index 000000000..17d3173d2
--- /dev/null
+++ b/web/components/panel-header.react.js
@@ -0,0 +1,37 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './panel-header.css';
+import AddButton from '../components/add-button.react.js';
+
+type Props = {
+  +headerLabel: string,
+  +onClickAddButton?: () => mixed,
+};
+
+function PanelHeader(props: Props): React.Node {
+  const { headerLabel, onClickAddButton } = props;
+
+  const addButton = React.useMemo(() => {
+    if (!onClickAddButton) {
+      return null;
+    }
+
+    return <AddButton onClick={onClickAddButton} />;
+  }, [onClickAddButton]);
+
+  const panelHeader = React.useMemo(
+    () => (
+      <div className={css.container}>
+        <div className={css.headerLabel}>{headerLabel}</div>
+        {addButton}
+      </div>
+    ),
+    [addButton, headerLabel],
+  );
+
+  return panelHeader;
+}
+
+export default PanelHeader;