diff --git a/dist/index.js b/dist/index.js
index 1dcaff9..59fbbe5 100755
--- a/dist/index.js
+++ b/dist/index.js
@@ -12,7 +12,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n  border: ", ";\n  background: ", ";\n  color: white;\n  ", " &:after {\n    top: 0.5em;\n    left: 0.6em;\n    ", ";\n  }\n  &:before {\n    height: ", ";\n    border-bottom: ", ";\n    background: ", ";\n    ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: ", ";\n  background: ", ";\n  color: white;\n  ", " &:after {\n    top: 0.5rem;\n    left: 0.6rem;\n    ", ";\n  }\n  &:before {\n    height: ", ";\n    line-height: ", ";\n    border-bottom: ", ";\n    background: ", ";\n    color: #444;\n    ", ";\n  }\n"]);
 
   _templateObject3 = function _templateObject3() {
     return data;
@@ -22,7 +22,7 @@ function _templateObject3() {
 }
 
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  border: ", ";\n  background: ", ";\n  color: white;\n  ", " &:after {\n    top: 0.8em;\n    left: 0.8em;\n    ", ";\n  }\n  &:before {\n    height: ", ";\n    background: ", ";\n    border-bottom: ", ";\n    background: ", ";\n    ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: ", ";\n  background: ", ";\n  color: white;\n  ", " &:after {\n    top: 0.8rem;\n    left: 0.8rem;\n    ", ";\n  }\n  &:before {\n    height: ", ";\n    line-height: ", ";\n    background: ", ";\n    border-bottom: ", ";\n    background: ", ";\n    color: #ccc;\n    ", ";\n  }\n"]);
 
   _templateObject2 = function _templateObject2() {
     return data;
@@ -32,7 +32,7 @@ function _templateObject2() {
 }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  border: ", ";\n  background: ", ";\n  ", " &:after {\n    top: 0.8em;\n    left: 0.8em;\n    ", ";\n  }\n  &:before {\n    height: ", ";\n    border-bottom: ", ";\n    background: ", ";\n    ", ";\n  }\n"]);
+  var data = _taggedTemplateLiteral(["\n  border: ", ";\n  background: ", ";\n  ", " &:after {\n    top: 0.8rem;\n    left: 0.8rem;\n    ", ";\n  }\n  &:before {\n    height: ", ";\n    line-height: ", ";\n    border-bottom: ", ";\n    background: ", ";\n    color: #444;\n    ", ";\n  }\n"]);
 
   _templateObject = function _templateObject() {
     return data;
@@ -44,25 +44,27 @@ function _templateObject() {
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 var standard = function standard(props) {
-  return "\n  padding: ".concat(props.padding || '2.25em .5em .5em .5em', ";\n  resize: ").concat(props.resize && 'both' || 'none', ";\n  min-height: ").concat(props.minHeight || '11em', ";\n  min-width: ").concat(props.minWidth || '11em', ";\n  max-height: ").concat(props.maxHeight || null, ";\n  max-width: ").concat(props.maxWidth || '100%', ";\n  height: ").concat(props.height || null, ";\n  box-shadow: ").concat(props.boxShadow ? props.boxShadow : '0 20px 68px rgba(0, 0, 0, 0.55)', ";\n  border-radius: 0.5em;\n  position: relative;\n  overflow: auto;\n  z-index: 2;\n");
+  return "\n  padding: ".concat(props.padding || '2.25rem .5rem .5rem .5rem', ";\n  resize: ").concat(props.resize && 'both' || 'none', ";\n  min-height: ").concat(props.minHeight || '11rem', ";\n  min-width: ").concat(props.minWidth || '11rem', ";\n  max-height: ").concat(props.maxHeight || null, ";\n  max-width: ").concat(props.maxWidth || '100%', ";\n  height: ").concat(props.height || null, ";\n  box-shadow: ").concat(props.boxShadow ? props.boxShadow : '0 20px 68px rgba(0, 0, 0, 0.55)', ";\n  border-radius: 0.5rem;\n  position: relative;\n  overflow: auto;\n  z-index: 2;\n");
 };
 
 var after = function after(props) {
-  return "\n  content: '';\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  z-index: 2;\n  border-radius: 50%;\n  background: ".concat(props.grayscale ? '#8D8D92' : '#f85955', ";\n  box-shadow: ").concat(props.grayscale ? '0 0 0 0.2em #8D8D92,  1.1em 0 0 0.2em #8D8D92, 2.2em 0 0 0.2em #8D8D92' : '0 0 0 0.2em #f85955,  1.2em 0 0 0.2em #fbbe3f, 2.3em 0 0 0.2em #45cc4b', ";\n}\n");
+  return "\n  content: '';\n  position: absolute;\n  width: 6px;\n  height: 6px;\n  z-index: 2;\n  border-radius: 50%;\n  background: ".concat(props.grayscale ? '#8D8D92' : '#f85955', ";\n  box-shadow: ").concat(props.grayscale ? '0 0 0 0.2rem #8D8D92,  1.1rem 0 0 0.2rem #8D8D92, 2.2rem 0 0 0.2rem #8D8D92' : '0 0 0 0.2rem #f85955,  1.2rem 0 0 0.2rem #fbbe3f, 2.3rem 0 0 0.2rem #45cc4b', ";\n}\n");
 };
 
-var before = function before() {
-  return "\ncontent: '';\nposition: absolute;\ntop: 0;\nleft: 0;\nwidth: 100%;\nz-index: 1;\nborder-top-left-radius: 0.4em;\nborder-top-right-radius: 0.4em;\nbackground-clip: padding-box;\n";
+var before = function before(props) {
+  return "\n  content: '".concat(props.topbarTitle || '', "';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  z-index: 1;\n  border-top-left-radius: 0.4rem;\n  border-top-right-radius: 0.4rem;\n  background-clip: padding-box;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, \"Apple Color Emoji\";\n  text-align: center;\n");
 };
 
 var Browser = _styledComponents["default"].div(_templateObject(), function (props) {
-  return props.border || '0.05em solid #AEAEAE';
+  return props.border || '0.05rem solid #AEAEAE';
 }, function (props) {
   return props.background || '#fff';
 }, standard, after, function (props) {
-  return props.barHeight || '2em';
+  return props.barHeight || '2rem';
 }, function (props) {
-  return props.divider || '0.05em solid #ccc';
+  return props.barHeight || '2rem';
+}, function (props) {
+  return props.divider || '0.05rem solid #ccc';
 }, function (props) {
   return props.topbarColor || '#E6E6E6';
 }, before);
@@ -70,15 +72,17 @@ var Browser = _styledComponents["default"].div(_templateObject(), function (prop
 exports.Browser = Browser;
 
 var Terminal = _styledComponents["default"].section(_templateObject2(), function (props) {
-  return props.border || '0.05em solid #000';
+  return props.border || '0.05rem solid #000';
 }, function (props) {
   return props.background || '#000';
 }, standard, after, function (props) {
-  return props.barHeight || '2em';
+  return props.barHeight || '2rem';
+}, function (props) {
+  return props.barHeight || '2rem';
 }, function (props) {
   return props.background || '#000';
 }, function (props) {
-  return props.divider || '0.05em solid #000';
+  return props.divider || '0.05rem solid #000';
 }, function (props) {
   return props.topbarColor || '#000';
 }, before);
@@ -86,13 +90,15 @@ var Terminal = _styledComponents["default"].section(_templateObject2(), function
 exports.Terminal = Terminal;
 
 var MacTerminal = _styledComponents["default"].section(_templateObject3(), function (props) {
-  return props.border || '0.0em solid #1D1F21';
+  return props.border || '0.0rem solid #1D1F21';
 }, function (props) {
   return props.background || '#000';
 }, standard, after, function (props) {
-  return props.barHeight || '1.4em';
+  return props.barHeight || '1.4rem';
+}, function (props) {
+  return props.barHeight || '1.4rem';
 }, function (props) {
-  return props.divider || '0.05em solid #1D1F21';
+  return props.divider || '0.05rem solid #1D1F21';
 }, function (props) {
   return props.topbarColor || '#E6E6E6';
 }, before);
diff --git a/readme.md b/readme.md
index 91b8409..ea22a70 100644
--- a/readme.md
+++ b/readme.md
@@ -43,6 +43,8 @@ export default () => (
 
 | Prop        | Type      | Description                                               |
 | ----------- | --------- | --------------------------------------------------------- |
+| topbarTitle | `string`  | title of the topbar                                       |
+| topbarTitleColor | `string` | color of topbar title                                 |
 | barHeight   | `string`  | height of the topbar                                      |
 | divider     | `string`  | css border values of topbar border-bottom                 |
 | padding     | `string`  | css padding of content widow                              |
diff --git a/src/index.js b/src/index.js
index d5b1c42..6437572 100755
--- a/src/index.js
+++ b/src/index.js
@@ -2,19 +2,20 @@ import React from 'react'
 import styled from 'styled-components'
 
 const standard = props => `
-  padding: ${props.padding || '2.25em .5em .5em .5em'};
+  padding: ${props.padding || '2.25rem .5rem .5rem .5rem'};
   resize: ${(props.resize && 'both') || 'none'};
-  min-height: ${props.minHeight || '11em'};
-  min-width: ${props.minWidth || '11em'};
+  min-height: ${props.minHeight || '11rem'};
+  min-width: ${props.minWidth || '11rem'};
   max-height: ${props.maxHeight || null};
   max-width: ${props.maxWidth || '100%'};
   height: ${props.height || null};
   box-shadow: ${props.boxShadow ? props.boxShadow : '0 20px 68px rgba(0, 0, 0, 0.55)'};
-  border-radius: 0.5em;
+  border-radius: 0.5rem;
   position: relative;
   overflow: auto;
   z-index: 2;
 `
+
 const after = props => `
   content: '';
   position: absolute;
@@ -25,71 +26,79 @@ const after = props => `
   background: ${props.grayscale ? '#8D8D92' : '#f85955'};
   box-shadow: ${
     props.grayscale
-      ? '0 0 0 0.2em #8D8D92,  1.1em 0 0 0.2em #8D8D92, 2.2em 0 0 0.2em #8D8D92'
-      : '0 0 0 0.2em #f85955,  1.2em 0 0 0.2em #fbbe3f, 2.3em 0 0 0.2em #45cc4b'
+      ? '0 0 0 0.2rem #8D8D92,  1.1rem 0 0 0.2rem #8D8D92, 2.2rem 0 0 0.2rem #8D8D92'
+      : '0 0 0 0.2rem #f85955,  1.2rem 0 0 0.2rem #fbbe3f, 2.3rem 0 0 0.2rem #45cc4b'
   };
 }
 `
 
-const before = () => `
-content: '';
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-z-index: 1;
-border-top-left-radius: 0.4em;
-border-top-right-radius: 0.4em;
-background-clip: padding-box;
+const before = props => `
+  content: '${props.topbarTitle || ''}';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  border-top-left-radius: 0.4rem;
+  border-top-right-radius: 0.4rem;
+  background-clip: padding-box;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif, "Apple Color Emoji";
+  text-align: center;
 `
 
 export const Browser = styled.div`
-  border: ${props => props.border || '0.05em solid #AEAEAE'};
+  border: ${props => props.border || '0.05rem solid #AEAEAE'};
   background: ${props => props.background || '#fff'};
   ${standard} &:after {
-    top: 0.8em;
-    left: 0.8em;
+    top: 0.8rem;
+    left: 0.8rem;
     ${after};
   }
   &:before {
-    height: ${props => props.barHeight || '2em'};
-    border-bottom: ${props => props.divider || '0.05em solid #ccc'};
+    height: ${props => props.barHeight || '2rem'};
+    line-height: ${props => props.barHeight || '2rem'};
+    border-bottom: ${props => props.divider || '0.05rem solid #ccc'};
     background: ${props => props.topbarColor || '#E6E6E6'};
+    color: ${props => props.topbarTitleColor || '#444'};
     ${before};
   }
 `
 
 export const Terminal = styled.section`
-  border: ${props => props.border || '0.05em solid #000'};
+  border: ${props => props.border || '0.05rem solid #000'};
   background: ${props => props.background || '#000'};
   color: white;
   ${standard} &:after {
-    top: 0.8em;
-    left: 0.8em;
+    top: 0.8rem;
+    left: 0.8rem;
     ${after};
   }
   &:before {
-    height: ${props => props.barHeight || '2em'};
+    height: ${props => props.barHeight || '2rem'};
+    line-height: ${props => props.barHeight || '2rem'};
     background: ${props => props.background || '#000'};
-    border-bottom: ${props => props.divider || '0.05em solid #000'};
+    border-bottom: ${props => props.divider || '0.05rem solid #000'};
     background: ${props => props.topbarColor || '#000'};
+    color: ${props => props.topbarTitleColor || '#CCC'};
     ${before};
   }
 `
 
 export const MacTerminal = styled.section`
-  border: ${props => props.border || '0.0em solid #1D1F21'};
+  border: ${props => props.border || '0.0rem solid #1D1F21'};
   background: ${props => props.background || '#000'};
   color: white;
   ${standard} &:after {
-    top: 0.5em;
-    left: 0.6em;
+    top: 0.5rem;
+    left: 0.6rem;
     ${after};
   }
   &:before {
-    height: ${props => props.barHeight || '1.4em'};
-    border-bottom: ${props => props.divider || '0.05em solid #1D1F21'};
+    height: ${props => props.barHeight || '1.4rem'};
+    line-height: ${props => props.barHeight || '1.4rem'};
+    border-bottom: ${props => props.divider || '0.05rem solid #1D1F21'};
     background: ${props => props.topbarColor || '#E6E6E6'};
+    color: ${props => props.topbarTitleColor || '#444'};
     ${before};
   }
 `