put a beta badge on it

src/components/atoms/Badge.module.css

@@ -0,0 +1,12 @@
+.badge {
+  display: inline-block;
+  font-size: var(--font-size-mini);
+  font-weight: var(--font-weight-bold);
+  line-height: 1;
+  text-transform: uppercase;
+  padding: 0.1rem 0.2rem;
+  border-radius: var(--border-radius);
+  color: var(--brand-white);
+  background: var(--brand-purple);
+  vertical-align: top;
+}

src/components/atoms/Badge.stories.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import Badge from './Badge'
+
+export default {
+  title: 'Atoms/Badge'
+}
+
+export const Default = () => <Badge label="New" />

src/components/atoms/Badge.tsx

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react'
+import styles from './Badge.module.css'
+
+export default function Badge({
+  label,
+  className
+}: {
+  label: string
+  className?: string
+}): ReactElement {
+  return <span className={`${styles.badge} ${className}`}>{label}</span>
+}

src/components/molecules/Menu.tsx

@@ -7,6 +7,7 @@ import { useSiteMetadata } from '../../hooks/useSiteMetadata'
 import { ReactComponent as Logo } from '@oceanprotocol/art/logo/logo.svg'
 import Container from '../atoms/Container'
 import UserPreferences from './UserPreferences'
+import Badge from '../atoms/Badge'
 
 const Wallet = loadable(() => import('./Wallet'))
 
@@ -38,7 +39,9 @@ export default function Menu(): ReactElement {
       <Container>
         <Link to="/" className={styles.logoUnit}>
           <Logo />
-          <h1 className={styles.title}>{siteTitle}</h1>
+          <h1 className={styles.title}>
+            {siteTitle} <Badge label="beta" />
+          </h1>
         </Link>
 
         <ul className={styles.navigation}>