diff --git a/CHANGELOG.md b/CHANGELOG.md
index dce7cae..ed8a0b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## [1.1.0] - 01.04.2018
+
+Facelift
+
+### Added
+- Samsung Internet, Yandex and Electron browsers support
+
+### Changed
+- Browser images served from [@browser-logos](https://github.com/alrra/browser-logos) now [#9](https://github.com/godban/browsers-support-badges/issues/9)
+
 ## [1.0.0] - 26.03.2018
 
 Re-Init
diff --git a/README.md b/README.md
index 8488f44..8924b28 100755
--- a/README.md
+++ b/README.md
@@ -9,9 +9,11 @@ Try [Browsers Support Generator](http://godban.github.io/browsers-support-badges
 
 ## Example
 
-| [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/edge.png" alt="IE / Edge" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/firefox.png" alt="Firefox" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/chrome.png" alt="Chrome" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/safari.png" alt="Safari" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/opera.png" alt="Opera" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |[<img src="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/vivaldi.png" alt="Vivaldi" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>Vivaldi |
-| --------- | --------- | --------- | --------- | --------- | --------- |
-| IE9, IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+## Browsers support
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/samsung-internet/samsung-internet_48x48.png" alt="Samsung" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Samsung | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
+| --------- | --------- | --------- | --------- | --------- | --------- | --------- |
+| IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
 ## Contributing
 
diff --git a/package-lock.json b/package-lock.json
index 5f77307..73e33b3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "browsers-support-badges",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -784,6 +784,11 @@
         "to-fast-properties": "2.0.0"
       }
     },
+    "@browser-logos/chrome": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@browser-logos/chrome/-/chrome-1.0.4.tgz",
+      "integrity": "sha512-OeQwNTSoRlSASXjSn5Gf14RbCYmw5I2U6q1k2edSHYuY8yYjIupgF/qMJJ+QydBb1RcVoUCkgy3SGY8pumSh8w=="
+    },
     "@types/node": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.0.tgz",
diff --git a/package.json b/package.json
index f787f9a..de5c525 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "browsers-support-badges",
-    "version": "1.0.0",
+    "version": "1.1.0",
     "description": "GitHub browsers support badges generator",
     "author": {
         "name": "Bogdan Plieshka",
@@ -12,7 +12,12 @@
         "type": "git",
         "url": "https://github.com/godban/browsers-support-badges.git"
     },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build"
+    },
     "dependencies": {
+        "@browser-logos/chrome": "1.0.4",
         "clipboard": "2.0.0",
         "marked": "0.3.19",
         "no-sheet-reset": "2.0.0",
@@ -22,10 +27,6 @@
         "react-scripts": "next",
         "svgr.macro": "1.0.4"
     },
-    "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build"
-    },
     "browserslist": {
         "development": [
             "last 2 chrome versions",
diff --git a/public/index.html b/public/index.html
index 17bdb13..c22f75b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,32 +3,36 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <meta name="description" content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md">
+    <meta
+      name="description"
+      content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md"
+    >
     <meta property="og:locale" content="en_US">
     <meta property="og:type" content="article">
-    <meta property="og:title" content="Browsers support badges for README.md">
-    <meta property="og:description" content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md">
+    <meta property="og:title" content="Browsers support for README.md">
+    <meta
+      property="og:description"
+      content="Simply choose browsers that u support, see how it will looks like on GitHub and grab ready made code for your README.md"
+    >
     <meta property="og:url" content="http://godban.github.io/browsers-support-badges/">
     <meta property="og:site_name" content="Browsers support badges">
-    <meta property="og:image" content="https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/browsers-support-badges.png">
+    <meta
+      property="og:image"
+      content="http://godban.github.io/browsers-support-badges/screen.png"
+    >
     <title>Browsers support badges</title>
     <link rel="canonical" href="http://godban.github.io/browsers-support-badges/">
     <link rel="icon" type="image/png" href="./favicon/favicon-32x32.png" sizes="32x32">
     <link rel="icon" type="image/x-icon" href="./favicon/favicon.ico">
     <link rel="manifest" href="./manifest.json">
-    <script>
-        setTimeout(function(){window.fbAsyncInit=function(){FB.init({appId:"1547693265447721",xfbml:!0,version:"v2.1"})},function(e,n,t){let o,c=e.getElementsByTagName(n)[0];e.getElementById(t)||(o=e.createElement(n),o.id=t,o.src="//connect.facebook.net/en_US/sdk.js",c.parentNode.insertBefore(o,c))}(document,"script","facebook-jssdk")},1e3);
-    </script>
   </head>
   <body>
-  <div id="root"></div>
+    <div id="root"></div>
+    <div id="fb-root"></div>
     <script>
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-        ga('create', 'UA-28620403-7', 'auto');
-        ga('send', 'pageview');
+        (function (i, s, o, g, r, a, m) {i['GoogleAnalyticsObject'] = r;i[r] = i[r] || function () {(i[r].q = i[r].q || []).push(arguments)}, i[r].l = 1 * new Date();a = s.createElement(o), m = s.getElementsByTagName(o)[0];a.async = 1;a.src = g;m.parentNode.insertBefore(a, m)})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');ga('create', 'UA-28620403-7', 'auto');ga('send', 'pageview');
     </script>
+    <script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></script>
+    <script async defer src="https://buttons.github.io/buttons.js"></script>
   </body>
 </html>
diff --git a/public/screen.png b/public/screen.png
new file mode 100644
index 0000000..ab942b1
Binary files /dev/null and b/public/screen.png differ
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
index c28b660..ab0ea76 100644
--- a/src/components/footer.jsx
+++ b/src/components/footer.jsx
@@ -2,62 +2,53 @@
 
 import React from 'react';
 
-setTimeout((function(d, s, id) {
-    let js, fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) return;
-    js = d.createElement(s); js.id = id;
-    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4&appId=263072313724602";
-    fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk')),1e3);
+import Icon from './icons';
 
-setTimeout(function(){!function (d, s, id) {
-    var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https';
-    if (!d.getElementById(id)) {
-        js = d.createElement(s);
-        js.id = id;
-        js.src = p + '://platform.twitter.com/widgets.js';
-        fjs.parentNode.insertBefore(js, fjs);
-    }
-}(document, 'script', 'twitter-wjs');},1e3);
+(function(d,s,id){let js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src='https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.12&appId=1547693265447721&autoLogAppEvents=1';fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));
 
 const Footer = () => {
     return (
         <footer className="footer">
+            <div className="author">
+                made by
+                <a
+                    className="authorLink"
+                    href="https://github.com/godban"
+                    target="_blank"
+                    rel="author"
+                >
+                    <Icon.MarkGithub className="authorIcon" />
+                    {'godban'}
+                </a>
+            </div>
             <div className="social-box">
+                <div className="social-box__item social-box__item--gh">
+                    <a
+                        className="github-button"
+                        href="https://github.com/godban/browsers-support-badges"
+                        data-icon="octicon-star"
+                        data-show-count="true"
+                        aria-label="Star godban/browsers-support-badges on GitHub"
+                    >Star</a>
+                </div>
+                <div className="social-box__twitter social-box__item">
+                    <a
+                        href="https://twitter.com/share"
+                        className="twitter-share-button"
+                        data-show-count="false"
+                    >Tweet</a>
+                </div>
                 <div className="social-box__facebook social-box__item">
-                    <div id="fb-root" />
-                    <script>
-                    </script>
                     <div
                         className="fb-like"
+                        data-href="http://godban.github.io/browsers-support-badges"
                         data-layout="button_count"
                         data-action="like"
+                        data-size="small"
                         data-show-faces="false"
                         data-share="false"
                     />
                 </div>
-                <div className="social-box__twitter social-box__item">
-                    <a
-                        href="https://twitter.com/share"
-                        className="twitter-share-button"
-                        data-via="bogdan_plieshka"
-                        data-related="bogdan_plieshka"
-                    />
-                </div>
-                <div className="social-box__item social-box__item--gh">
-                    <iframe
-                        src="https://ghbtns.com/github-btn.html?user=godban&repo=browsers-support-badges&type=watch&count=true"
-                        frameBorder="0"
-                        scrolling="0"
-                        height="20px"
-                    />
-                </div>
-            </div>
-            <div className="footer__author">
-                <a
-                    className="octicon octicon-mark-github footer__link" href="https://github.com/godban"
-                    target="_blank"
-                />
             </div>
         </footer>
     );
diff --git a/src/components/icons.jsx b/src/components/icons.jsx
index 8465f79..bb0897c 100644
--- a/src/components/icons.jsx
+++ b/src/components/icons.jsx
@@ -1,6 +1,7 @@
 import toReactComponent from 'svgr.macro';
 
 const {
+    Book,
     Check,
     ChevronUp,
     ChevronDown,
@@ -13,6 +14,7 @@ const {
 );
 
 export default {
+    Book,
     Check,
     ChevronUp,
     ChevronDown,
diff --git a/src/components/panel.jsx b/src/components/panel.jsx
index 27e3369..a41432c 100644
--- a/src/components/panel.jsx
+++ b/src/components/panel.jsx
@@ -4,10 +4,7 @@ import ReactDOM from 'react-dom';
 import Preview from './preview';
 import Icon from './icons';
 
-/**
- * @todo: replace pathToImages
- */
-const pathToImages = 'https://raw.githubusercontent.com/godban/browsers-support-badges/master/src/images/';
+const buildLogoSrc = (name, size = '48x48') => `https://raw.githubusercontent.com/alrra/browser-logos/master/src/${name}/${name}_${size}.png`;
 
 class Panel extends React.Component {
     constructor() {
@@ -25,55 +22,67 @@ class Panel extends React.Component {
                         IE11: true,
                         Edge: true
                     },
-                    img: pathToImages + 'edge.png',
+                    img: buildLogoSrc('edge'),
                     support: true
                 },
                 {
                     name: 'Firefox',
                     version: 2,
-                    img: pathToImages + 'firefox.png',
+                    img: buildLogoSrc('firefox'),
                     support: true
                 },
                 {
                     name: 'Chrome',
                     version: 2,
-                    img: pathToImages + 'chrome.png',
+                    img: buildLogoSrc('chrome'),
                     support: true
                 },
                 {
                     name: 'Safari',
                     version: 2,
-                    img: pathToImages + 'safari.png',
+                    img: buildLogoSrc('safari'),
                     support: true
                 },
                 {
-                    name: 'Opera',
+                    name: 'iOS Safari',
                     version: 2,
-                    img: pathToImages + 'opera.png',
+                    img: buildLogoSrc('safari-ios'),
                     support: true
                 },
                 {
-                    name: 'Vivaldi',
+                    name: 'Samsung',
                     version: 2,
-                    img: pathToImages + 'vivaldi.png',
+                    img: buildLogoSrc('samsung-internet'),
                     support: true
                 },
                 {
-                    name: 'iOS Safari',
+                    name: 'Opera',
                     version: 2,
-                    img: pathToImages + 'safari-ios.png',
-                    support: false
+                    img: buildLogoSrc('opera'),
+                    support: true
                 },
                 {
                     name: 'Opera Mini',
                     version: 2,
-                    img: pathToImages + 'opera-mini.png',
+                    img: buildLogoSrc('opera-mini'),
+                    support: false
+                },
+                {
+                    name: 'Vivaldi',
+                    version: 2,
+                    img: buildLogoSrc('vivaldi'),
+                    support: false
+                },
+                {
+                    name: 'Yandex',
+                    version: 2,
+                    img: buildLogoSrc('yandex'),
                     support: false
                 },
                 {
-                    name: 'Chrome for Android',
-                    img: pathToImages + 'chrome-android.png',
+                    name: 'Electron',
                     version: 2,
+                    img: buildLogoSrc('electron'),
                     support: false
                 }
             ],
@@ -196,7 +205,7 @@ class Panel extends React.Component {
         return (
             <div className='browsers__wrap'>
                 <h1 className='main__title'>
-                    Browsers support badges for README.md
+                    Browsers support for README.md
                     <span className='main__sub-title'>
                         <Icon.MarkGithub className="icon icon--markGithub" />
                         <span className="octicon octicon-mark-github" /> GitHub Flavored Markdown
diff --git a/src/components/preview.jsx b/src/components/preview.jsx
index e9a47fa..2e0fcfc 100644
--- a/src/components/preview.jsx
+++ b/src/components/preview.jsx
@@ -1,10 +1,20 @@
-import React from 'react';
+import React, {Fragment} from 'react';
 import ReactDOM from 'react-dom';
 
 import marked from 'marked';
 import Clipboard from 'clipboard';
 
+import Icon from './icons';
+
 class Preview extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            isCopied: null,
+        };
+    }
+
     createMDCode() {
         const {browsers} = this.props;
 
@@ -18,13 +28,13 @@ class Preview extends React.Component {
         }
 
         return (
-            '## Browsers support <sub><sup><sub><sub>made by <a href="https://godban.github.io">godban</a></sub></sub></sup></sub>' +
+            '## Browsers support' +
             '\n\n' +
             browsers.map((item) => {
                 if (item.support) {
                     return (
                         '| ' +
-                        '[<img src="' + item.img + '" alt="' + item.name + '" width="16px" height="16px" />](http://godban.github.io/browsers-support-badges/)</br>' +
+                        '[<img src="' + item.img + '" alt="' + item.name + '" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>' +
                         item.name + ' ');
                 }
 
@@ -74,16 +84,14 @@ class Preview extends React.Component {
 
         new Clipboard(copyAction, {
             target: () => {
-                copyAction.classList.add('btn-copy--done');
-                copyAction.textContent = 'Copied';
+                this.setState({isCopied: true});
 
-                setTimeout(function () {
+                setTimeout(() => {
                     copyCode.blur();
                 }, 0);
 
-                setTimeout(function () {
-                    copyAction.classList.remove('btn-copy--done');
-                    copyAction.textContent = 'Copy';
+                setTimeout(() => {
+                    this.setState({isCopied: false});
                 }, 2000);
 
                 return copyCode;
@@ -101,24 +109,35 @@ class Preview extends React.Component {
 
     render() {
         return (
-            <div className='markdown__wrap'>
-                <article className='markdown-body__wrap'>
-                    <h2 className='markdown-body__title'>
-                        <span className='octicon octicon-book' /> README.md
-                    </h2>
+            <div className='markdown'>
+                <div className='markdown-body__wrap'>
+                    <h3 className='markdown-body__title'>
+                        <Icon.Book className="icon icon--book" /> README.md
+                    </h3>
                     <div className='markdown-body'>
                         <div ref='mdPreview' />
-                        Wanna? Just push a button and paste code below into your README.md
+                        <div className="tip">Click to collect code and paste it into yours README.md</div>
                     </div>
                     <span className='pointer pointer--inverse'>&#10548;</span>
-                </article>
+                </div>
                 <div className='markdown-code__wrap'>
                     <button
                         className='btn btn-copy btn--text'
                         ref='mdCopyBtn'
                         title='Click to copy to clipboard.'
                     >
-                        Copy
+                        {
+                            this.state.isCopied ?
+                                <Fragment>
+                                    <Icon.Check className="icon--copy" />
+                                    Copied
+                                </Fragment>
+                                :
+                                <Fragment>
+                                    <Icon.Clippy className="icon--copy" />
+                                    Copy
+                                </Fragment>
+                        }
                     </button>
                     <textarea
                         id='mdCode'
diff --git a/src/images/browsers-support-badges.png b/src/images/browsers-support-badges.png
deleted file mode 100644
index 64a6d89..0000000
Binary files a/src/images/browsers-support-badges.png and /dev/null differ
diff --git a/src/images/chrome-android.png b/src/images/chrome-android.png
deleted file mode 100644
index 83e9716..0000000
Binary files a/src/images/chrome-android.png and /dev/null differ
diff --git a/src/images/chrome.png b/src/images/chrome.png
deleted file mode 100644
index 25d1c4d..0000000
Binary files a/src/images/chrome.png and /dev/null differ
diff --git a/src/images/edge.png b/src/images/edge.png
deleted file mode 100644
index a844b42..0000000
Binary files a/src/images/edge.png and /dev/null differ
diff --git a/src/images/firefox.png b/src/images/firefox.png
deleted file mode 100644
index 9f22731..0000000
Binary files a/src/images/firefox.png and /dev/null differ
diff --git a/src/images/opera-mini.png b/src/images/opera-mini.png
deleted file mode 100644
index 0c3e390..0000000
Binary files a/src/images/opera-mini.png and /dev/null differ
diff --git a/src/images/opera.png b/src/images/opera.png
deleted file mode 100644
index bcb9a5a..0000000
Binary files a/src/images/opera.png and /dev/null differ
diff --git a/src/images/safari-ios.png b/src/images/safari-ios.png
deleted file mode 100644
index 94e0705..0000000
Binary files a/src/images/safari-ios.png and /dev/null differ
diff --git a/src/images/safari.png b/src/images/safari.png
deleted file mode 100644
index a6432de..0000000
Binary files a/src/images/safari.png and /dev/null differ
diff --git a/src/images/vivaldi.png b/src/images/vivaldi.png
deleted file mode 100644
index b34a867..0000000
Binary files a/src/images/vivaldi.png and /dev/null differ
diff --git a/src/index.css b/src/index.css
index 3d9c377..b2141fe 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,20 +1,21 @@
+:root {
+  --max-width: 980px;
+}
+
 html {
   font-size: 62.5%;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
-  color: #636363;
+  color: #24292e;
   background-color: #fff;
   font-size: 1.4rem;
-  font-family: "Open Sans", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-weight: 400;
   line-height: 1.5;
-}
-
-h1,
-h2,
-h3 {
-  font-weight: 300;
+  margin-right: 20px;
+  margin-left: 20px;
 }
 
 p {
@@ -29,7 +30,7 @@ a:hover {
   color: #08bbff;
 }
 
-sub,sup {
+sub, sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
@@ -49,31 +50,28 @@ sub {
   pointer-events: none;
 }
 
-.icon {
-  fill: #636363;
+.icon--book {
+  font-size: 1.6rem;
+  vertical-align: text-bottom;
+  fill: currentColor;
 }
 
 .main,
 .footer {
-  max-width: 940px;
+  max-width: var(--max-width);
   margin: 0 auto;
-  padding-right: 2rem;
-  padding-left: 2rem;
 }
 
 .main {
   background-color: #fff;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
 
 .main__title {
   font-size: 3.6rem;
   line-height: 1;
-  margin-bottom: 1.5rem;
+  margin-bottom: 4.5rem;
   margin-top: 0;
-  padding-top: 1em;
-  padding-bottom: 0.5em;
+  padding-top: 3rem;
 }
 
 .main__sub-title {
@@ -88,22 +86,35 @@ sub {
   font-size: 1.4rem;
 }
 
+.icon--markGithub {
+  margin-bottom: -.1em;
+}
+
 .footer {
+  display: flex;
+  justify-content: center;
   font-size: 1.1rem;
-  padding-bottom: 2rem;
-  text-align: right;
+  margin-bottom: 3rem;
 }
 
-.footer__author {
-  padding-top: .3rem;
+.author {
+  margin-left: 1em;
+  flex-grow: 1;
+  color: #24292e;
 }
 
-.footer__link {
-  color: #636363;
+.authorLink {
+  color: #24292e;
+  text-decoration: underline;
 }
 
-.footer__link:hover {
-  color: #00aced;
+.authorIcon {
+  margin-bottom: -.1em;
+  margin-right: .3em;
+  margin-left: .3em;
+}
+
+.authorLink:hover {
   transition: color .1s linear;
 }
 
@@ -130,6 +141,10 @@ sub {
   margin-right: .5em;
 }
 
+.btn {
+  cursor: pointer;
+}
+
 .btn--text {
   background-color: transparent;
   border: none;
@@ -192,8 +207,14 @@ sub {
   color: #c9c9c9;
 }
 
+.icon--copy {
+  fill: #fff;
+  margin-right: .3em;
+  margin-bottom: -.1em;
+}
+
 .browsers__wrap {
-  margin: 0 auto 2rem;
+  margin: 0 auto 3rem;
 }
 
 .browser {
@@ -306,34 +327,35 @@ sub {
   font-size: 1em;
 }
 
+.markdown {
+  font-weight: 400;
+}
+
+.markdown-body__wrap {
+  position: relative;
+}
+
 .markdown-body {
   background-color: #fff;
   border: 1px solid #ddd;
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
-  font-size: 1.4rem;
-  font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif;
-  margin-bottom: 3rem;
-  padding: 4.5rem;
-  word-wrap: break-word;
-}
-
-.markdown-body__wrap {
-  position: relative;
+  font-size: 1.6rem;
+  margin-bottom: 4.5rem;
+  padding: 4.5rem 4.5rem 3rem;
 }
 
 .markdown-body__title {
-  background-color: #f5f5f5;
+  display: block;
+  padding: 0.9rem 1rem 1rem;
   margin: 0;
-  border-radius: 3px 3px 0 0;
-  border: 1px solid #d8d8d8;
+  font-size: 1.4rem;
+  line-height: 1.7rem;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,35,0.15);
   border-bottom: 0;
-  padding: .9rem 1rem 1rem;
-  font-size: 1em;
-  font-family: Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif;
-  font-weight: 700;
-  line-height: 1.2;
-  display: block;
+  border-radius: 3px 3px 0 0;
+  font-weight: 600;
 }
 
 .markdown-body h2 {
@@ -349,6 +371,7 @@ sub {
   width: 100%;
   resize: vertical;
   max-height: 40rem;
+  color: #636363;
 }
 
 .markdown-code:focus {
@@ -356,13 +379,20 @@ sub {
 }
 
 .markdown-code__wrap {
-  background-color: #f5f5f5;
+  background-color: #f6f8fa;
   border: 1px solid #ddd;
   border-radius: 3px;
   padding: 1em;
   position: relative;
 }
 
+.tip {
+  text-align: right;
+  margin-top: 3rem;
+  font-size: 1.2rem;
+  color: #6a6a6a;
+}
+
 .pointer {
   color: #aaa;
   font-size: 7rem;
@@ -373,6 +403,7 @@ sub {
   right: 1em;
   transform: rotate(30deg);
   z-index: 1;
+  font-family: Arial, sans-serif;
 }
 
 .pointer--inverse {
@@ -381,9 +412,7 @@ sub {
   bottom: -1.1em;
 }
 
-.social-box {
-  float: left;
-}
+.social-box {}
 
 .social-box__item {
   display: table-cell;