diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js
index e4fd8de5..a56d05f3 100644
--- a/ui/src/components/base-elements/index.js
+++ b/ui/src/components/base-elements/index.js
@@ -30,9 +30,28 @@ const elements = [
   {
     name: 'H2',
     properties: {
-      'line-height': '60px',
-      'font-size': '40px'
+      'font-size': remcalc(24),
     }
+  },
+  {
+    name: 'H3',
+    properties: {
+      'font-size': remcalc(16),
+    }
+  },
+  {
+    name: 'P',
+    properties: {
+      'line-height': remcalc(24),
+      'font-size': remcalc(16),
+    }
+  },
+  {
+    name: 'Small',
+    properties: {
+      'line-height': remcalc(18),
+      'font-size': remcalc(14),
+    },
   }
 ];
 
diff --git a/ui/src/components/base-elements/story.js b/ui/src/components/base-elements/story.js
index 0c910dc0..e483a915 100644
--- a/ui/src/components/base-elements/story.js
+++ b/ui/src/components/base-elements/story.js
@@ -9,7 +9,10 @@ const BaseElements = require('./');
 
 const {
   H1,
-  H2
+  H2,
+  H3,
+  P,
+  Small,
 } = BaseElements;
 
 storiesOf('Base Elements', module)
@@ -23,4 +26,19 @@ storiesOf('Base Elements', module)
       <H2>This is a H2</H2>
     </Base>
   ))
+  .add('H3', () => (
+    <Base>
+      <H3>This is a H3</H3>
+    </Base>
+  ))
+  .add('P', () => (
+    <Base>
+      <P>This is a P</P>
+    </Base>
+  ))
+  .add('Small', () => (
+    <Base>
+      <Small>This is a Small</Small>
+    </Base>
+  ))
 ;
\ No newline at end of file