diff --git a/web/community-header/community-header-button.css b/web/community-header/community-header-button.css
new file mode 100644
--- /dev/null
+++ b/web/community-header/community-header-button.css
@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+}
+
+.addButton {
+  background-color: var(--button-background-tertiary-default);
+  color: var(--button-label-tertiary-default);
+  border-radius: 8px;
+  padding: 6px 10px;
+}
+
+.addButton:hover {
+  cursor: pointer;
+  background-color: var(--button-background-tetirary-hover);
+  color: var(--button-label-tertiary-hover);
+}
diff --git a/web/community-header/community-header-button.react.js b/web/community-header/community-header-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/community-header/community-header-button.react.js
@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from 'react';
+
+import SWMansionIcon, {
+  type Icon,
+} from 'lib/components/SWMansionIcon.react.js';
+
+import css from './community-header-button.css';
+import { useLabelTooltip } from '../tooltips/tooltip-action-utils.js';
+import { tooltipPositions } from '../tooltips/tooltip-utils.js';
+
+type Props = {
+  +icon: Icon,
+  +label: string,
+  +onClick: () => mixed,
+};
+
+function CommunityHeaderButton(props: Props): React.Node {
+  const { icon, label, onClick } = props;
+
+  const { onMouseEnter, onMouseLeave } = useLabelTooltip({
+    tooltipLabel: label,
+    position: tooltipPositions.BOTTOM,
+    tooltipMargin: 16,
+  });
+
+  return (
+    <div
+      className={css.container}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <SWMansionIcon icon={icon} size={20} className={css.addButton} />
+    </div>
+  );
+}
+
+export default CommunityHeaderButton;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -272,15 +272,19 @@
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-75);
+  --button-background-tertiary-default: var(--shades-black-85);
   --button-background-success-default: var(--success-primary);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
+  --button-background-tetirary-hover: var(--shades-black-75);
   --button-background-primary-disabled: var(--shades-black-75);
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-60);
+  --button-label-tertiary-default: var(--shades-white-60);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
+  --button-label-tertiary-hover: var(--shades-white-80);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);
@@ -354,15 +358,20 @@
   /* Button */
   --button-background-primary-default: var(--violet-dark-100);
   --button-background-secondary-default: var(--shades-black-50);
+  /* @GINSU: TODO double check the tertiary values after redesign is finished */
+  --button-background-tertiary-default: var(--shades-black-60);
   --button-background-success-default: var(--success-primary);
   --button-background-primary-hover: var(--violet-dark-80);
   --button-background-secondary-hover: var(--shades-black-60);
+  --button-background-tetirary-hover: var(--shades-black-50);
   --button-background-primary-disabled: var(--shades-white-60);
   --button-border-outline-default: var(--shades-black-50);
   --button-label-primary-default: var(--shades-white-100);
   --button-label-secondary-default: var(--shades-white-90);
+  --button-label-tertiary-default: var(--shades-white-90);
   --button-label-primary-hover: var(--shades-white-90);
   --button-label-primary-disabled: var(--shades-black-50);
+  --button-label-tertiary-hover: var(--shades-white-80);
 
   /* Link */
   --link-background-primary-default: var(--violet-dark-100);