diff --git a/README.md b/README.md
index 6177ffd..02b4835 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,13 @@ JavaScript Design Patterns - a game to get familiar with the design patterns, te
 
 <img src="https://raw.githubusercontent.com/zoltantothcom/JavaScript-Design-Patterns/master/static/screenshot.png?sanitize=true&raw=true" alt="JavaScript Design Patterns - game results screenshot" />
 
+- [About](#about)
+- [How To Run Locally](#how-to-run-locally)
+- [Running the Tests](#running-the-tests)
+- [ToDo](#todo)
+- [Credits](#credits)
+- [License](#license)
+
 ## About
 
 This is a small game to get you familiar with all the 23 Gang of Four design patterns implemented in JavaScript.
@@ -44,7 +51,7 @@ This is a small game to get you familiar with all the 23 Gang of Four design pat
 - Template
 - Visitor
 
-## Run it locally
+## How To Run Locally
 
 1. Clone this repo
 
@@ -70,9 +77,9 @@ yarn
 yarn start
 ```
 
-5. Voila! The project is running on `http://localhost:8080`
+5. Voila! The project is running on [http://localhost:8080](http://localhost:8080)
 
-## Tests
+## Running the Tests
 
 - To run the tests
 
@@ -86,7 +93,7 @@ yarn test
 yarn test:coverage
 ```
 
-## TODO
+## ToDo
 
 - Write more unit tests
 - Add E2E tests (Cypress)
diff --git a/__tests__/Layout.test.js b/__tests__/Layout.test.js
index 69230a9..19c0893 100644
--- a/__tests__/Layout.test.js
+++ b/__tests__/Layout.test.js
@@ -64,8 +64,8 @@ describe('Layout', () => {
       expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
     });
 
-    it('renders 3 links', () => {
-      expect(tree.find('a')).toHaveLength(3);
+    it('renders 2 links', () => {
+      expect(tree.find('a')).toHaveLength(2);
     });
 
     it('renders 2 toggle buttons', () => {
@@ -102,8 +102,8 @@ describe('Layout', () => {
       expect(tree.find('Header').text()).toMatch('JavaScript Design Patterns');
     });
 
-    it('renders 3 links', () => {
-      expect(tree.find('a')).toHaveLength(3);
+    it('renders 2 links', () => {
+      expect(tree.find('a')).toHaveLength(2);
     });
 
     it('renders 2 toggle buttons', () => {
diff --git a/__tests__/components/__snapshots__/Header.test.js.snap b/__tests__/components/__snapshots__/Header.test.js.snap
index 956246a..dda338e 100644
--- a/__tests__/components/__snapshots__/Header.test.js.snap
+++ b/__tests__/components/__snapshots__/Header.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Header /> component renders with DARK theme 1`] = `
-.c5 {
+.c4 {
   background-color: #222222;
   border: 1px solid #484848;
   border-radius: 50%;
@@ -13,41 +13,41 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   width: 2.5rem;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #484848;
 }
 
-.c5:hover svg,
-.c5:hover g {
+.c4:hover svg,
+.c4:hover g {
   fill: #ffffff;
 }
 
-.c5.active {
+.c4.active {
   background-color: #e22a23;
   border-color: #e22a23;
 }
 
-.c5.active svg,
-.c5.active g {
+.c4.active svg,
+.c4.active g {
   fill: #ffffff;
 }
 
-.c5.light {
+.c4.light {
   background-color: #ffffff;
   border-color: #c4c4c4;
 }
 
-.c5.light svg,
-.c5.light g {
+.c4.light svg,
+.c4.light g {
   fill: #707070;
 }
 
-.c5.light:hover svg,
-.c5.light:hover g {
+.c4.light:hover svg,
+.c4.light:hover g {
   fill: #707070;
 }
 
-.c6 {
+.c5 {
   font-family: 'Karla',sans-serif;
   padding: 1.5rem;
   border-radius: 4px;
@@ -70,10 +70,10 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
   margin-top: 1rem;
 }
 
@@ -84,7 +84,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   display: inline-flex;
 }
 
-.c4 {
+.c3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -110,23 +110,13 @@ exports[`<Header /> component renders with DARK theme 1`] = `
   color: #f5f5f5;
 }
 
-.c3 {
-  border-bottom: 1px solid transparent;
-  color: #888888;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-size: 0.875rem;
-  margin: 0.5rem 2rem 0 0;
-  padding-bottom: 1px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c3:hover {
-  border-bottom: 1px solid #f5f5f5;
-  color: #f5f5f5;
+@media (min-width:769px) {
+  .c0 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
 }
 
 <div>
@@ -150,19 +140,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
       >
         About
       </a>
-      <a
-        className="c3"
-        href="//github.com/zoltantothcom/javascript-patterns"
-        target="_blank"
-      >
-        GitHub
-      </a>
     </div>
     <div
-      className="c4"
+      className="c3"
     >
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -189,7 +172,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
         </svg>
       </button>
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -211,7 +194,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
       </button>
     </div>
     <h1
-      className="c6"
+      className="c5"
     >
       JavaScript Design Patterns
     </h1>
@@ -220,7 +203,7 @@ exports[`<Header /> component renders with DARK theme 1`] = `
 `;
 
 exports[`<Header /> component renders with LIGHT theme 1`] = `
-.c5 {
+.c4 {
   background-color: #f4f4f4;
   border: 1px solid #e8e8e8;
   border-radius: 50%;
@@ -232,41 +215,41 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   width: 2.5rem;
 }
 
-.c5:hover {
+.c4:hover {
   background-color: #e8e8e8;
 }
 
-.c5:hover svg,
-.c5:hover g {
+.c4:hover svg,
+.c4:hover g {
   fill: #ffffff;
 }
 
-.c5.active {
+.c4.active {
   background-color: #e22a23;
   border-color: #e22a23;
 }
 
-.c5.active svg,
-.c5.active g {
+.c4.active svg,
+.c4.active g {
   fill: #ffffff;
 }
 
-.c5.light {
+.c4.light {
   background-color: #ffffff;
   border-color: #aaaaaa;
 }
 
-.c5.light svg,
-.c5.light g {
+.c4.light svg,
+.c4.light g {
   fill: #cccccc;
 }
 
-.c5.light:hover svg,
-.c5.light:hover g {
+.c4.light:hover svg,
+.c4.light:hover g {
   fill: #cccccc;
 }
 
-.c6 {
+.c5 {
   font-family: 'Karla',sans-serif;
   padding: 1.5rem;
   border-radius: 4px;
@@ -289,10 +272,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  -webkit-box-pack: start;
+  -webkit-justify-content: start;
+  -ms-flex-pack: start;
+  justify-content: start;
   margin-top: 1rem;
 }
 
@@ -303,7 +286,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   display: inline-flex;
 }
 
-.c4 {
+.c3 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -329,23 +312,13 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
   color: #707070;
 }
 
-.c3 {
-  border-bottom: 1px solid transparent;
-  color: #e22a23;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-size: 0.875rem;
-  margin: 0.5rem 2rem 0 0;
-  padding-bottom: 1px;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c3:hover {
-  border-bottom: 1px solid #707070;
-  color: #707070;
+@media (min-width:769px) {
+  .c0 {
+    -webkit-box-pack: justify;
+    -webkit-justify-content: space-between;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+  }
 }
 
 <div>
@@ -369,19 +342,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
       >
         About
       </a>
-      <a
-        className="c3"
-        href="//github.com/zoltantothcom/javascript-patterns"
-        target="_blank"
-      >
-        GitHub
-      </a>
     </div>
     <div
-      className="c4"
+      className="c3"
     >
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -408,7 +374,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
         </svg>
       </button>
       <button
-        className="c5"
+        className="c4"
         onClick={[Function]}
       >
         <svg
@@ -430,7 +396,7 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
       </button>
     </div>
     <h1
-      className="c6"
+      className="c5"
     >
       JavaScript Design Patterns
     </h1>
diff --git a/__tests__/styles/__snapshots__/global.test.js.snap b/__tests__/styles/__snapshots__/global.test.js.snap
index 53c9dcc..2d9de1e 100644
--- a/__tests__/styles/__snapshots__/global.test.js.snap
+++ b/__tests__/styles/__snapshots__/global.test.js.snap
@@ -8,8 +8,8 @@ exports[`Global style renders with a DARK theme 1`] = `
   >
     
     
-/* sc-component-id: sc-global-2479929527 */
-body{background:#222222;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{max-width:640px;margin:auto;}
+/* sc-component-id: sc-global-3505832014 */
+body{background:#222222;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;max-width:640px;margin:auto;padding:0 1rem;} @media (min-width:769px){#root{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0;}}
   </style>
 </head>
 `;
@@ -22,8 +22,8 @@ exports[`Global style renders with a LIGHT theme 1`] = `
   >
     
     
-/* sc-component-id: sc-global-2479929527 */
-body{background:#f4f4f4;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{max-width:640px;margin:auto;}
+/* sc-component-id: sc-global-3505832014 */
+body{background:#f4f4f4;font-family:'Karla',sans-serif;margin:0;padding:0;} #root{-webkit-box-pack:start;-webkit-justify-content:start;-ms-flex-pack:start;justify-content:start;max-width:640px;margin:auto;padding:0 1rem;} @media (min-width:769px){#root{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;padding:0;}}
   </style>
 </head>
 `;
diff --git a/index.html b/index.html
index a9a0cc3..7e8d6ce 100644
--- a/index.html
+++ b/index.html
@@ -2,24 +2,26 @@
 <html>
   <head>
     <title>JavaScript Design Patterns</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="//fonts.googleapis.com/css?family=Karla" rel="stylesheet">
   </head>
   <body>
+    <a href="https://github.com/zoltantothcom/JavaScript-Design-Patterns" target="_blank" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#fff; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#e22a23"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
     <div id="root" />
     <script>window.twttr = (function(d, s, id) {
       var js, fjs = d.getElementsByTagName(s)[0],
-        t = window.twttr || {};
+      t = window.twttr || {};
       if (d.getElementById(id)) return t;
       js = d.createElement(s);
       js.id = id;
       js.src = "https://platform.twitter.com/widgets.js";
       fjs.parentNode.insertBefore(js, fjs);
-    
+
       t._e = [];
       t.ready = function(f) {
         t._e.push(f);
       };
-    
+
       return t;
     }(document, "script", "twitter-wjs"));</script>
   </body>
diff --git a/src/components/Header.jsx b/src/components/Header.jsx
index 1430c6e..9868153 100644
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -8,8 +8,12 @@ const StyledHeader = styled.div`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  justify-content: space-between;
+  justify-content: start;
   margin-top: 1rem;
+
+  @media (min-width: 769px) {
+    justify-content: space-between;
+  }
 `;
 
 const StyledLinkContainer = styled.div`
@@ -38,18 +42,12 @@ const linkStyle = css`
 const StyledRouterLink = styled(Link)`
   ${linkStyle}
 `;
-const StyledLink = styled.a`
-  ${linkStyle}
-`;
 
 const Header = () => (
   <StyledHeader>
     <StyledLinkContainer>
       <StyledRouterLink to="/">Game</StyledRouterLink>
       <StyledRouterLink to="/about">About</StyledRouterLink>
-      <StyledLink href="//github.com/zoltantothcom/javascript-patterns" target="_blank">
-        GitHub
-      </StyledLink>
     </StyledLinkContainer>
 
     <StyledSettingsContainer>
diff --git a/src/pages/Game.jsx b/src/pages/Game.jsx
index 8d21e55..8ad5407 100644
--- a/src/pages/Game.jsx
+++ b/src/pages/Game.jsx
@@ -12,7 +12,7 @@ import Percentage from '../components/Percentage';
 import Button from '../components/Button';
 
 const Restart = styled.div`
-  margin: 3rem 4rem;
+  margin: 3rem 0;
   text-align: center;
 `;
 
diff --git a/src/styles/global.js b/src/styles/global.js
index f5a174a..ffec272 100644
--- a/src/styles/global.js
+++ b/src/styles/global.js
@@ -9,8 +9,15 @@ const GlobalStyle = createGlobalStyle`
   }
 
   #root {
+    justify-content: start;
     max-width: 640px;
     margin: auto;
+    padding: 0 1rem;
+
+    @media (min-width: 769px) {
+      justify-content: space-between;
+      padding: 0;
+    }
   }
 `;