diff --git a/docs/styleguide.config.js b/docs/styleguide.config.js
index 58c17e91e8..54c400b4d2 100644
--- a/docs/styleguide.config.js
+++ b/docs/styleguide.config.js
@@ -7,7 +7,10 @@ module.exports = {
   sections: [
     {
       name: 'Bar',
-      components: () => ['../react/BarButton/index.jsx']
+      components: () => [
+        '../react/BarButton/index.jsx',
+        '../react/BarTitle/index.jsx'
+      ]
     },
     {
       name: 'Basics',
diff --git a/react/BarContextProvider/indes.spec.jsx b/react/BarContextProvider/index.spec.jsx
similarity index 100%
rename from react/BarContextProvider/indes.spec.jsx
rename to react/BarContextProvider/index.spec.jsx
diff --git a/react/BarTitle/Readme.md b/react/BarTitle/Readme.md
new file mode 100644
index 0000000000..92f23e3ec4
--- /dev/null
+++ b/react/BarTitle/Readme.md
@@ -0,0 +1,23 @@
+Used to display a title in the Cozy Bar.
+
+### Usage
+
+```jsx static
+import { useBreakpoints } from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+const MyPage = () => {
+  const { isMobile } = useBreakpoints()
+  return (
+    <BarCenter>
+      {isMobile ? <BarTitle>My transactions</BarTitle> : null }
+    </BarCenter>
+  )
+}
+```
+
+
+### Display
+
+```
+<BarTitle>My transactions</BarTitle>
+```
diff --git a/react/BarTitle/index.jsx b/react/BarTitle/index.jsx
new file mode 100644
index 0000000000..0702326f5b
--- /dev/null
+++ b/react/BarTitle/index.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import styles from './styles.styl'
+
+const BarTitle = ({ children }) => {
+  return <h1 className={styles.BarTitle}>{children}</h1>
+}
+
+export default BarTitle
diff --git a/react/BarTitle/styles.styl b/react/BarTitle/styles.styl
new file mode 100644
index 0000000000..e82587c2b2
--- /dev/null
+++ b/react/BarTitle/styles.styl
@@ -0,0 +1,8 @@
+@require 'settings/typography.styl'
+
+.BarTitle
+  margin 0
+  height 3rem
+  display flex
+  align-items center
+  font-size $bar-font-size
diff --git a/stylus/settings/typography.styl b/stylus/settings/typography.styl
index e27c96772a..4d9150f8e3 100644
--- a/stylus/settings/typography.styl
+++ b/stylus/settings/typography.styl
@@ -7,6 +7,7 @@
 
 $h1-font-size=rem(24)
 $h2-font-size=rem(20)
+$bar-font-size=rem(18)
 $h3-font-size=rem(18)
 $h4-font-size=rem(16)
 $text-font-size=rem(16)