diff --git a/.eslintrc.yml b/.eslintrc.yml
index dcbc16d..cc2b0be 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -40,5 +40,6 @@ rules:
   no-unused-vars: off # TODO: warn later
   react/no-unescaped-entities: off
   react/no-unused-prop-types: warn
+  react/no-unknown-property: [2, { ignore: jsx }]
   react/react-in-jsx-scope: off
   react/prop-types: off # TODO: open later
diff --git a/components/badgen-title.tsx b/components/badgen-title.tsx
index 27dc825..c077b05 100644
--- a/components/badgen-title.tsx
+++ b/components/badgen-title.tsx
@@ -16,7 +16,7 @@ export default function BadgenTitle ({ host }) {
         </h1>
         <div>Fast badge generating service</div>
       </div>
-      <style>{`
+      <style jsx>{`
         .title-block {
           width: 100%;
           height: 260px;
@@ -73,7 +73,7 @@ const StyleSwitch = ({ host }) => {
   if (!host) return null
 
   return (
-    <span className='style-switch'>
+    <div className='style-switch'>
       {host.includes('https://flat.') ? [
         <Link key='2' href='https://flat.badgen.net'>FLAT</Link>,
         <Link key='1' href='https://badgen.net'>CLASSIC</Link>
@@ -91,25 +91,25 @@ const StyleSwitch = ({ host }) => {
           font: 16px/26px sans-serif;
           overflow: hidden;
         }
-        a {
+        .style-switch a {
           color: #999;
           display: block;
           line-height: 26px;
           padding: 1px 3px;
         }
-        a:first-child {
+        .style-switch a:first-child {
           margin-top: 0;
           transition: all 200ms cubic-bezier(0.215, 0.61, 0.355, 1);
         }
         .style-switch:hover a:first-child {
           margin-top: -26px;
         }
-        a:focus {
+        .style-switch a:focus {
           outline: none;
           color: #08C;
         }
       `}
       </style>
-    </span>
+    </div>
   )
 }
diff --git a/components/footer.tsx b/components/footer.tsx
index 1024691..482d532 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -43,7 +43,7 @@ export default function Footer () {
         </div>
       </div>
     </div>
-    <style>{`
+    <style jsx>{`
       footer {
         margin-top: 8rem;
         background-color: #222;
diff --git a/components/home-intro.tsx b/components/home-intro.tsx
index 8efce88..81b40d1 100644
--- a/components/home-intro.tsx
+++ b/components/home-intro.tsx
@@ -59,7 +59,7 @@ export default function HomeIntro ({ isFlat = false }) {
         turn an api endpoint into a svg live badge.
       </li>
     </ul>
-    <style>{`
+    <style jsx>{`
       pre {
         font-size: 15px;
         font-family: Menlo, Courier New, monospace;
@@ -73,12 +73,13 @@ export default function HomeIntro ({ isFlat = false }) {
       .home-intro h3 {
         font-family: Merriweather, serif;
         margin: 2rem 0;
+        font-weight: 400;
       }
 
       ul { padding-left: 2em; }
-      li { vertical-align: top; font-size: 14px; color: #777 }
+      li { vertical-align: top; font-size: 14px; line-height: 24px; color: #777; margin: 5px 0 }
       li code { padding: 0.3em 0.5em; display: pre; color: #333; background: #EEF2F8 }
-      li a { display: inline }
+      li a { display: inline; margin-left: 0.3em; text-decoration: underline }
       a code { color: #06D }
     `}
     </style>
diff --git a/package.json b/package.json
index 03c1100..60ad0c8 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "build:api": "tsc -p server.tsconfig.json",
     "build:web": "next build && next export -o dist",
     "build-0": "npm run tools && npm run build:web && npm run build:api",
-    "build": "next build",
+    "build": "npm run tools && next build",
     "dev": "next dev",
     "dev:api": "nodemon --config nodemon.json index.ts",
     "dev:web": "next",
diff --git a/pages/index.tsx b/pages/index.tsx
index 8fa2675..6f6523e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -23,9 +23,7 @@ const merriweather = Inter({ subsets: ['latin'] })
 // }
 
 import { useState, useEffect } from 'react'
-import BadgeExamples from '../components/badge-examples'
 import BadgenTitle from '../components/badgen-title'
-// import TopBar from '../components/top-bar'
 import Intro from '../components/home-intro'
 import Footer from '../components/footer'
 import examples from '../static/.meta/badges.json'
@@ -41,12 +39,18 @@ export default function Index () {
   })
 
   return <>
+    <Head>
+      <title>Badgen: fast badge generating service</title>
+      <meta name="description" content="fast badge generating service" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <link rel="icon" href="/favicon.ico" />
+    </Head>
     <BadgenTitle host={host} />
     <div className='body-wrapper'>
       <Intro />
     </div>
     <Footer />
-    <style>{`
+    <style jsx>{`
       .docs {
         margin: 0 auto;
         padding-bottom: 6em;
diff --git a/styles/globals.css b/styles/globals.css
index a188535..df1fc03 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -26,6 +26,7 @@ body {
 a {
   color: inherit;
   text-decoration: none;
+  display: inline;
 }
 
 .body-wrapper {