diff --git a/src/components/CommunityBubble/CommunityBubble.css b/src/components/CommunityBubble/CommunityBubble.css
new file mode 100644
index 00000000..22a5cc26
--- /dev/null
+++ b/src/components/CommunityBubble/CommunityBubble.css
@@ -0,0 +1,29 @@
+.dui-community-bubble {
+  display: flex;
+  color: white;
+  border-radius: 12px;
+  padding: 10px 34px 10px 19px;
+  background: #161518;
+  align-items: center;
+  gap: 15px;
+}
+
+.dui-community-bubble__icon {
+  background-image: url('../../assets/discord.svg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  height: 20px;
+  width: 28px;
+  filter: brightness(0) invert(1);
+}
+
+.dui-community-bubble__text--bold {
+  font-weight: 600;
+}
+
+.dui-community-bubble__text {
+  display: flex;
+  flex-direction: column;
+  color: white;
+  font-size: 12px;
+}
diff --git a/src/components/CommunityBubble/CommunityBubble.props.ts b/src/components/CommunityBubble/CommunityBubble.props.ts
new file mode 100644
index 00000000..13d509bd
--- /dev/null
+++ b/src/components/CommunityBubble/CommunityBubble.props.ts
@@ -0,0 +1,7 @@
+export type CommunityBubbleProps = {
+  className?: string
+  i18n?: {
+    title: string
+    subtitle: string
+  }
+}
diff --git a/src/components/CommunityBubble/CommunityBubble.stories.tsx b/src/components/CommunityBubble/CommunityBubble.stories.tsx
new file mode 100644
index 00000000..27eacb62
--- /dev/null
+++ b/src/components/CommunityBubble/CommunityBubble.stories.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import { CommunityBubble } from './CommunityBubble'
+
+storiesOf('CommunityBubble', module).add('Base', () => <CommunityBubble />)
diff --git a/src/components/CommunityBubble/CommunityBubble.tsx b/src/components/CommunityBubble/CommunityBubble.tsx
new file mode 100644
index 00000000..20155690
--- /dev/null
+++ b/src/components/CommunityBubble/CommunityBubble.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { CommunityBubbleProps } from './CommunityBubble.props'
+import './CommunityBubble.css'
+import classNames from 'classnames'
+
+export const CommunityBubble = (props: CommunityBubbleProps) => {
+  return (
+    <a
+      className={classNames('dui-community-bubble', props.className)}
+      href="https://decentraland.org/discord"
+      target="about:blank"
+    >
+      <i className="dui-community-bubble__icon" />
+      <p className="dui-community-bubble__text">
+        <span>{props.i18n?.title ?? 'Need Guidance?'}</span>
+        <span className="dui-community-bubble__text--bold">
+          {props.i18n?.subtitle ?? 'ASK THE COMMUNITY'}
+        </span>
+      </p>
+    </a>
+  )
+}
diff --git a/src/components/CommunityBubble/index.ts b/src/components/CommunityBubble/index.ts
new file mode 100644
index 00000000..ef0db485
--- /dev/null
+++ b/src/components/CommunityBubble/index.ts
@@ -0,0 +1,2 @@
+export * from './CommunityBubble.props'
+export * from './CommunityBubble'
diff --git a/src/index.ts b/src/index.ts
index d4538ba4..51f73a67 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -96,6 +96,7 @@ export * from './components/IconBadge/IconBadge'
 export * from './components/SmartWearableFilter'
 export * from './components/SmartBadge'
 export * from './components/SmartIcon'
+export * from './components/CommunityBubble'
 
 // Semantic components
 /* eslint-disable no-restricted-imports */