diff --git a/docs/API/badge.md b/docs/API/badge.md
index 473cb925ce..693cc92be3 100644
--- a/docs/API/badge.md
+++ b/docs/API/badge.md
@@ -1,4 +1,4 @@
-![Badges](http://i.imgur.com/qvJgGF2.png)
+![Badges](https://i.imgur.com/LNzKrd8.png)
 
 Example badge usage
 ```js
diff --git a/docs/index.md b/docs/index.md
index 26c7d89150..10b93f90e0 100755
--- a/docs/index.md
+++ b/docs/index.md
@@ -55,6 +55,7 @@ import { Button } from 'react-native-elements';
 ## Components Included
 
 - [x] [Buttons](https://react-native-training.github.io/react-native-elements/API/buttons/)
+- [x] [Badge]https://react-native-training.github.io/react-native-elements/API/badge/)
 - [x] [Social Icons / Social Icon Buttons](https://react-native-training.github.io/react-native-elements/API/social_icons/)
 - [x] [Icons](https://react-native-training.github.io/react-native-elements/API/icons/)
 - [x] [Side Menu](https://react-native-training.github.io/react-native-elements/API/side_menu/)
@@ -75,7 +76,7 @@ import { Button } from 'react-native-elements';
 
 ## Documentation
 
-[View the full docs here](https://react-native-training.github.io/react-native-elements/)
+[View the full docs here](https://react-native-training.github.io/react-native-elements/API/)
 
 ## Demo App
 
@@ -86,7 +87,6 @@ Check out the pre built and configured [React Native Hackathon Starter Project](
 #### FIRST CONTRIBUTORS
 - [ ] [Add Profile Component](https://github.com/react-native-training/react-native-elements/issues/129)
 - [ ] [Add Header Component](https://github.com/react-native-training/react-native-elements/issues/47)
-- [ ] [Add Badge Component](https://github.com/react-native-training/react-native-elements/issues/206)
 - [ ] Refactor Social Icon to use Button
 
 #### NOT STARTED
diff --git a/src/badge/__tests__/__snapshots__/badge.js.snap b/src/badge/__tests__/__snapshots__/badge.js.snap
index f3cddcf3fd..6ef4ff4d80 100644
--- a/src/badge/__tests__/__snapshots__/badge.js.snap
+++ b/src/badge/__tests__/__snapshots__/badge.js.snap
@@ -1,200 +1,252 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Badge Component should allow adding custom element 1`] = `
+<Text
+  accessible={true}
+  allowFontScaling={true}
+  ellipsizeMode="tail"
+>
+  Hello
+</Text>
+`;
+
 exports[`Badge Component should apply container style in the badge 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#444",
-        "borderRadius": 20,
-        "padding": 12,
-        "paddingBottom": 3,
-        "paddingTop": 3,
-        "position": "absolute",
-        "right": 30,
-        "top": 2,
-      },
-      Object {
-        "backgroundColor": "orange",
-      },
-    ]
+    Object {
+      "flexDirection": "row",
+    }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <View
     style={
       Array [
         Object {
-          "color": "white",
-          "fontSize": 14,
+          "alignItems": "center",
+          "backgroundColor": "#43484d",
+          "borderRadius": 20,
+          "justifyContent": "center",
+          "padding": 12,
+          "paddingBottom": 3,
+          "paddingTop": 3,
+        },
+        Object {
+          "backgroundColor": "orange",
         },
-        undefined,
       ]
     }
-  />
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "fontSize": 14,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
 exports[`Badge Component should apply text style in the badge 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#444",
-        "borderRadius": 20,
-        "padding": 12,
-        "paddingBottom": 3,
-        "paddingTop": 3,
-        "position": "absolute",
-        "right": 30,
-        "top": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "flexDirection": "row",
+    }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <View
     style={
       Array [
         Object {
-          "color": "white",
-          "fontSize": 14,
-        },
-        Object {
-          "color": "orange",
+          "alignItems": "center",
+          "backgroundColor": "#43484d",
+          "borderRadius": 20,
+          "justifyContent": "center",
+          "padding": 12,
+          "paddingBottom": 3,
+          "paddingTop": 3,
         },
+        undefined,
       ]
     }
-  />
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "fontSize": 14,
+          },
+          Object {
+            "color": "orange",
+          },
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
 exports[`Badge Component should pass value props should still work 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#444",
-        "borderRadius": 20,
-        "padding": 12,
-        "paddingBottom": 3,
-        "paddingTop": 3,
-        "position": "absolute",
-        "right": 30,
-        "top": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "flexDirection": "row",
+    }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <View
     style={
       Array [
         Object {
-          "color": "white",
-          "fontSize": 14,
+          "alignItems": "center",
+          "backgroundColor": "#43484d",
+          "borderRadius": 20,
+          "justifyContent": "center",
+          "padding": 12,
+          "paddingBottom": 3,
+          "paddingTop": 3,
         },
         undefined,
       ]
     }
   >
-    foo
-  </Text>
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "fontSize": 14,
+          },
+          undefined,
+        ]
+      }
+    >
+      foo
+    </Text>
+  </View>
 </View>
 `;
 
 exports[`Badge Component should render if element included 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#444",
-        "borderRadius": 20,
-        "padding": 12,
-        "paddingBottom": 3,
-        "paddingTop": 3,
-        "position": "absolute",
-        "right": 30,
-        "top": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "flexDirection": "row",
+    }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-    title="foo"
-  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#43484d",
+          "borderRadius": 20,
+          "justifyContent": "center",
+          "padding": 12,
+          "paddingBottom": 3,
+          "paddingTop": 3,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      title="foo"
+    />
+  </View>
 </View>
 `;
 
 exports[`Badge Component should render without issue 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#444",
-        "borderRadius": 20,
-        "padding": 12,
-        "paddingBottom": 3,
-        "paddingTop": 3,
-        "position": "absolute",
-        "right": 30,
-        "top": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "flexDirection": "row",
+    }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
+  <View
     style={
       Array [
         Object {
-          "color": "white",
-          "fontSize": 14,
+          "alignItems": "center",
+          "backgroundColor": "#43484d",
+          "borderRadius": 20,
+          "justifyContent": "center",
+          "padding": 12,
+          "paddingBottom": 3,
+          "paddingTop": 3,
         },
         undefined,
       ]
     }
-  />
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+      style={
+        Array [
+          Object {
+            "color": "white",
+            "fontSize": 14,
+          },
+          undefined,
+        ]
+      }
+    />
+  </View>
 </View>
 `;
 
 exports[`Badge Component should show error if value and child are included 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "backgroundColor": "#444",
-        "borderRadius": 20,
-        "padding": 12,
-        "paddingBottom": 3,
-        "paddingTop": 3,
-        "position": "absolute",
-        "right": 30,
-        "top": 2,
-      },
-      undefined,
-    ]
+    Object {
+      "flexDirection": "row",
+    }
   }
 >
-  <Text
-    accessible={true}
-    allowFontScaling={true}
-    ellipsizeMode="tail"
-  />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#43484d",
+          "borderRadius": 20,
+          "justifyContent": "center",
+          "padding": 12,
+          "paddingBottom": 3,
+          "paddingTop": 3,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      accessible={true}
+      allowFontScaling={true}
+      ellipsizeMode="tail"
+    />
+  </View>
 </View>
 `;
diff --git a/src/badge/__tests__/badge.js b/src/badge/__tests__/badge.js
index cbbaf3150a..22926cd387 100644
--- a/src/badge/__tests__/badge.js
+++ b/src/badge/__tests__/badge.js
@@ -24,7 +24,7 @@ describe('Badge Component', () => {
 
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
-    expect(component.props().children.props.title).toBe('foo');
+    expect(component.props().children.props.children.props.title).toBe('foo');
   });
 
   it('should pass value props should still work', () => {
@@ -49,4 +49,11 @@ describe('Badge Component', () => {
     expect(component.length).toBe(1);
     expect(toJson(component)).toMatchSnapshot();
   });
+
+  it('should allow adding custom element', () => {
+    const component = shallow(<Badge element={<Text>Hello</Text>} />);
+
+    expect(component.find('Text').props().children).toBe('Hello');
+    expect(toJson(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/badge/badge.js b/src/badge/badge.js
index b576f79a77..90567c128c 100644
--- a/src/badge/badge.js
+++ b/src/badge/badge.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react';
 import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
+import colors from '../config/colors';
 
 const Badge = props => {
   const {
@@ -9,16 +10,19 @@ const Badge = props => {
     component,
     value,
     children,
+    element,
     ...attributes
   } = props;
 
+  if (element) return element;
+
   let Component = View;
-  let element = (
+  let childElement = (
     <Text style={[styles.text, textStyle && textStyle]}>{value}</Text>
   );
 
   if (children) {
-    element = children;
+    childElement = children;
   }
 
   if (children && value) {
@@ -34,13 +38,15 @@ const Badge = props => {
   }
 
   return (
-    <Component
-      style={[styles.badge, containerStyle && containerStyle]}
-      onPress={onPress}
-      {...attributes}
-    >
-      {element}
-    </Component>
+    <View style={styles.container}>
+      <Component
+        style={[styles.badge, containerStyle && containerStyle]}
+        onPress={onPress}
+        {...attributes}
+      >
+        {childElement}
+      </Component>
+    </View>
   );
 };
 
@@ -50,19 +56,22 @@ Badge.propTypes = {
   children: PropTypes.element,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   onPress: PropTypes.func,
-  component: PropTypes.element,
+  component: PropTypes.func,
+  element: PropTypes.element,
 };
 
 const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
   badge: {
-    top: 2,
     padding: 12,
     paddingTop: 3,
     paddingBottom: 3,
-    backgroundColor: '#444',
+    backgroundColor: colors.grey1,
     borderRadius: 20,
-    position: 'absolute',
-    right: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   text: {
     fontSize: 14,