diff --git a/.travis.yml b/.travis.yml
index 02de009..c985804 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -3,4 +3,3 @@ node_js:
   - "7"
 after_success:
   - npm run coveralls
-  - test $TRAVIS_BRANCH = "master" && npm i -g now && now -t=$NOW_TOKEN && now -t=$NOW_TOKEN alias
diff --git a/components/info/countries.js b/components/info/countries.js
index 81c3251..666ec63 100644
--- a/components/info/countries.js
+++ b/components/info/countries.js
@@ -6,8 +6,14 @@ export default ({ handleChange, country }) => (
     <p className='question'>
       Nationality
     </p>
-    <select name='country' className='countries' onChange={handleChange}>
-      {countries.getData().map(c => <option key={c.code} value={c.code}>{c.name}</option>)}
+    <select name='country' className='countries' value={country} onChange={handleChange}>
+      {
+        countries.getData().map(c =>
+          <option key={c.code} value={c.code}>
+            {c.name}
+          </option>
+        )
+      }
     </select>
     <style>
       {`
@@ -15,6 +21,7 @@ export default ({ handleChange, country }) => (
           font-size: 24px;
           background-color: #fff;
           color: #828282;
+          width: 200px;
         }
       `}
     </style>
diff --git a/components/info/gender.js b/components/info/gender.js
index 145b0fd..0a8e069 100644
--- a/components/info/gender.js
+++ b/components/info/gender.js
@@ -6,8 +6,8 @@ export default ({ handleChange, gender }) => (
       Gender
     </p>
     <span className='choiseBox' name='gender' value={gender} onClick={handleChange}>
-      <i name='gender' className='material-icons checked-male' value='Male'>{gender === 'Male' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> Male
-      <i name='gender' className='material-icons checked-female' value='Female'>{gender === 'Female' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> Female
+      <i name='gender' className='material-icons checked-male' value='Male'>{gender === 'Male' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> <label name='gender' value='Male'>Male</label>
+      <i name='gender' className='material-icons checked-female' value='Female'>{gender === 'Female' ? 'radio_button_checked' : 'radio_button_unchecked'}</i> <label name='gender' value='Female'>Female</label>
     </span>
     <style>
       {`
diff --git a/components/info/index.js b/components/info/index.js
index 4d47258..49938af 100644
--- a/components/info/index.js
+++ b/components/info/index.js
@@ -1,12 +1,14 @@
 import React from 'react'
+import Tests from './tests'
 import TestInfo from './test-info'
 import Age from './age'
 import Gender from './gender'
 import Countries from './countries'
 
-export default ({ gender, age, country, handleChange, buttonSubmitDisabled, buttonSubmit, hideMain, loading }) => (
+export default ({ gender, age, country, handleChange, buttonSubmitDisabled, buttonSubmit, hideMain, loading, switchTest, selectedTest }) => (
   <div style={{ display: hideMain && !loading ? 'block' : 'none' }}>
     <TestInfo />
+    <Tests switchTest={switchTest} selectedTest={selectedTest} />
     <Age handleChange={handleChange} age={age} />
     <Gender handleChange={handleChange} gender={gender} />
     <Countries handleChange={handleChange} country={country} />
diff --git a/components/info/tests.js b/components/info/tests.js
new file mode 100644
index 0000000..9fca97e
--- /dev/null
+++ b/components/info/tests.js
@@ -0,0 +1,78 @@
+import React from 'react'
+
+const tests = [
+  {
+    id: '120',
+    text: "(Recommended) 120 questions (Johnson's IPIP NEO-PI-R)",
+    active: true
+  },
+  {
+    id: '100',
+    text: "Costa and McCrae's NEO-PI-R (100 questions)",
+    active: true
+  },
+  {
+    id: '50',
+    text: "Costa and McCrae's NEO-PI-R (50 questions)",
+    active: true
+  },
+  {
+    id: '20',
+    text: 'Mini-IPIP 5-factors (20 questions)',
+    active: true
+  },
+  {
+    id: 'hexaco',
+    text: "Lee and Ashton's HEXACO-PI (240 questions) (EXPERIMENTAL)",
+    active: false
+  }
+]
+
+export default ({ switchTest, selectedTest }) => (
+  <span>
+    <p className='question'>
+      Choose test:
+    </p>
+    {
+      tests.map(t =>
+        <span
+          key={t.id}
+          id={t.id}
+          onClick={switchTest}
+          className={
+            selectedTest === t.id ? 'testSelected' : t.active ? 'tests' : 'tests testInactive'
+          }
+        >
+          {t.text}
+          <br />
+        </span>
+      )
+    }
+    <style>
+      {`
+        .tests {
+          padding: 5px;
+          cursor: pointer;
+          margin-left: 4px;
+          line-height: 30px;
+        }
+        .testInactive {
+          color: #b1b1b1;
+          font-style: italic;
+          cursor: not-allowed;
+        }          
+        .testSelected {
+          font-weight: bold;
+          padding: 2px;
+          cursor: pointer;
+          margin-left: 4px;
+          line-height: 30px;
+          border-radius: 10px;
+          padding: 5px;
+          background-color: #e6e6e6;
+        }
+
+      `}
+    </style>
+  </span>
+)
diff --git a/components/loading.js b/components/loading.js
index cb46027..ae44de3 100644
--- a/components/loading.js
+++ b/components/loading.js
@@ -4,21 +4,20 @@ export default ({ loading }) => (
   <div>
     {
       loading
-        ?
-          <span className='loading'>
-            <p>
-              <img src='static/loading.svg' style={{width: 100}} />
-            </p>
-            <p>
-              <big>LOADING ...</big></p>
-            <style>
-              {`
+        ? <span className='loading'>
+          <p>
+            <img src='static/loading.svg' style={{width: 100}} />
+          </p>
+          <p>
+            <big>LOADING ...</big></p>
+          <style>
+            {`
               .loading {
                 text-align: center;
               }
             `}
-            </style>
-          </span>
+          </style>
+        </span>
         : null
     }
   </div>
diff --git a/components/progressbar.js b/components/progressbar.js
index cb36c10..53de33a 100644
--- a/components/progressbar.js
+++ b/components/progressbar.js
@@ -20,7 +20,8 @@ export default ({ progress }) => (
         .bar {
           height: 20px;
           background-color: #94d696;
-       }
+          transition: width 2s;
+        }
       `}
     </style>
   </div>
diff --git a/components/results/index.js b/components/results/index.js
index 884bbb3..fd6b2e9 100644
--- a/components/results/index.js
+++ b/components/results/index.js
@@ -76,7 +76,7 @@ export default class Results extends React.Component {
                   </span>
                 </p>
                 <p><span dangerouslySetInnerHTML={{__html: d.text}} /> </p>
-                <p>Your level of <i>{d.title.toLowerCase()}</i> is <b>{d.scoreText}</b></p>
+                <p>Your level of <i>{d.title.toLowerCase()}</i> is <b>{d.scoreText} ({d.score}/{d.count * 5})</b></p>
                 <div style={{ display: d.facets.length > 1 ? 'block' : 'none' }} >
                   <BarChart
                     data={[{values: Object.assign(d.facets.map(s => ({x: `${s.title} (${s.score})`, y: s.score})))}]}
@@ -90,7 +90,7 @@ export default class Results extends React.Component {
                     <span key={f.title}>
                       <p className='title2'>{f.title}</p>
                       <p><span dangerouslySetInnerHTML={{__html: f.text}} /></p>
-                      <p>Your level of <i>{f.title.toLowerCase()}</i> is <b>{f.scoreText}</b></p>
+                      <p>Your level of <i>{f.title.toLowerCase()}</i> is <b>{f.scoreText} ({f.score}/{f.count * 6})</b></p>
                     </span>
                   )
                 }
@@ -103,7 +103,26 @@ export default class Results extends React.Component {
                 font-size: 23px;
                 margin-bottom: 10px;
               }
-              @media (max-width:1300px) {
+              .rd3-barchart-bar:nth-child(1) {
+                fill: #ff8888;
+              }
+              .rd3-barchart-bar:nth-child(2) {
+                fill: #88d6ff;
+              }
+              .rd3-barchart-bar:nth-child(3) {
+                fill: #fff188;
+              }
+              .rd3-barchart-bar:nth-child(4) {
+                fill: #98ff88;
+              }
+              .rd3-barchart-bar:nth-child(5) {
+                fill: #ee88ff;
+                box-shadow: 7px 10px 5px 0px rgba(0,0,0,0.75);
+              }
+              .rd3-barchart-bar:nth-child(6) {
+                fill: #a988ff;
+              }
+              @media (min-width:681px) and (max-width:1300px) {
                 .rd3-barchart-xaxis text {
                   text-anchor: start;
                   transform: rotate(50deg);
@@ -116,6 +135,18 @@ export default class Results extends React.Component {
                   transform: scaleY(4);
                 }
               }
+              @media (max-width: 680px) {
+                .rd3-barchart-xaxis text {
+                  writing-mode: tb;
+                  text-anchor: start;
+                }
+                .rd3-barchart-xaxis line {
+                  transform: scaleY(0);
+                }
+                .rd3-chart {
+                  padding-bottom: 200px;
+                }
+              }
             `}
           </style>
         </div>
diff --git a/components/thetest.js b/components/thetest.js
index 8bb16f4..7f00d23 100644
--- a/components/thetest.js
+++ b/components/thetest.js
@@ -22,14 +22,15 @@ export default class TheTest extends React.Component {
       languages: [],
       radios: [],
       lang: config.defaultLanguage,
-      choosenTest: props.test || config.defaultTest,
+      choosenTest: config.defaultTest,
       submitDisabled: true,
       now: Date.now(),
       age: '',
       gender: 'Male',
-      country: '',
+      country: 'GB',
       buttonSubmitDisabled: true,
-      hideMain: true
+      hideMain: true,
+      percent: 0
     }
     this.handleRadioChange = this.handleRadioChange.bind(this)
     this.handleSubmit = this.handleSubmit.bind(this)
@@ -37,11 +38,14 @@ export default class TheTest extends React.Component {
     this.prevPage = this.prevPage.bind(this)
     this.handleChange = this.handleChange.bind(this)
     this.buttonSubmit = this.buttonSubmit.bind(this)
+    this.switchTest = this.switchTest.bind(this)
   }
 
   async componentDidMount () {
+    const ipCountry = await getData(`${config.ipCountryUrl}${this.props.ip}`)
+    const country = ipCountry.countryCode || 'NO'
     const data = await getData(`${config.dataUrl}?lang=${this.state.lang}&testType=${this.state.choosenTest}&limit=${config.defaultLimit}`)
-    this.setState({ ...data, loading: false })
+    this.setState({ ...data, loading: false, country: country })
   }
 
   async handleChange (e) {
@@ -55,18 +59,26 @@ export default class TheTest extends React.Component {
 
   buttonSubmit (e) {
     e.preventDefault()
+    window.scrollTo(0, 0)
     this.setState({ hideMain: false })
   }
 
   handleRadioChange (e) {
     let radioStore = this.state.radios
     const selectedName = parseInt(e.currentTarget.getAttribute('name'))
+    const percent = Math.round(selectedName / parseInt(this.state.totalQuestions) * 100)
     const selectedValue = parseInt(e.currentTarget.getAttribute('value'))
     const {domain, facet} = this.state.questions.find(c => c.id === selectedName)
     radioStore[selectedName] = {score: selectedValue, domain: domain, facet: facet}
     this.setState({radios: radioStore})
     const allChecked = isAllChecked(radioStore, this.state.from, this.state.to)
-    this.setState({submitDisabled: !allChecked})
+    this.setState({submitDisabled: !allChecked, percent: percent})
+  }
+
+  async switchTest (e) {
+    const selectedTest = e.target.getAttribute('id')
+    const data = await getData(`${config.dataUrl}?page=1&lang=en&testType=${selectedTest}&limit=${config.defaultLimit}`)
+    this.setState({ ...data, lang: 'en', choosenTest: selectedTest })
   }
 
   async switchLanguage (e) {
@@ -86,7 +98,8 @@ export default class TheTest extends React.Component {
     e.preventDefault()
     if (this.state.next) {
       const data = await getData(`${this.state.next}&lang=${this.state.lang}&testType=${this.state.choosenTest}&limit=${config.defaultLimit}`)
-      this.setState({ ...data, submitDisabled: true })
+      const allChecked = isAllChecked(this.state.radios, data.from, data.to)
+      this.setState({ ...data, submitDisabled: !allChecked })
       window.scrollTo(0, 0) // Scrolls to top of page
     } else {
       this.setState({ submitDisabled: true, loading: true, hideMain: true })
@@ -116,14 +129,14 @@ export default class TheTest extends React.Component {
     return (
       <div>
         <Loading loading={this.state.loading} />
-        <PersonInfo age={this.state.age} gender={this.state.gender} buttonSubmitDisabled={this.state.buttonSubmitDisabled} handleChange={this.handleChange} buttonSubmit={this.buttonSubmit} hideMain={this.state.hideMain} loading={this.state.loading} />
+        <PersonInfo age={this.state.age} gender={this.state.gender} buttonSubmitDisabled={this.state.buttonSubmitDisabled} handleChange={this.handleChange} buttonSubmit={this.buttonSubmit} hideMain={this.state.hideMain} loading={this.state.loading} country={this.state.country} switchTest={this.switchTest} selectedTest={this.state.choosenTest} />
         <div id='main' style={{display: this.state.hideMain ? 'none' : 'block'}} >
           <form onSubmit={this.handleSubmit}>
             <div>
               <TimerExample start={this.state.now} />
               <Languagebar switchLanguage={this.switchLanguage} selectedLanguage={this.state.lang} languages={this.state.languages} />
             </div>
-            <Progressbar progress={this.state.percentDone} />
+            <Progressbar progress={this.state.percent} />
             {
                 this.state.questions.map(q =>
                   <Questions key={'Q' + q.id} {...q} radioSelected={this.state.radios} handleRadioChange={this.handleRadioChange} />
diff --git a/config/index.js b/config/index.js
index ec60d5a..e909649 100644
--- a/config/index.js
+++ b/config/index.js
@@ -5,5 +5,6 @@ module.exports = {
   generatorUrl: process.env.GENERATOR_URL || 'https://generator.bigfive.maccyber.io',
   defaultLanguage: process.env.DEFAULT_LANG || 'en',
   defaultLimit: parseInt(process.env.DEFAULT_LIMIT) || 5,
-  defaultTest: process.env.DEFAULT_TEST || 120
+  defaultTest: process.env.DEFAULT_TEST || '120',
+  ipCountryUrl: process.env.IP_COUNTRY_URL || 'https://api.ip2country.info/ip?'
 }
diff --git a/layouts/index.js b/layouts/index.js
index d8afd9d..6c5ba5e 100644
--- a/layouts/index.js
+++ b/layouts/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import Head from 'next/head'
 
-export default ({pageTitle, children}) => (
+export default ({pageTitle, isIE11, children}) => (
   <div>
     <Head>
       <meta charSet='utf-8' />
@@ -9,6 +9,10 @@ export default ({pageTitle, children}) => (
       <link href='https://fonts.googleapis.com/css?family=Oswald|Rubik:300' rel='stylesheet' />
       <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet' />
       <title>{pageTitle}</title>
+      <script src='static/ga.js' />
+      {isIE11 ? (
+        <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/4.0.5/es6-promise.auto.js' />
+      ) : null}
       <link rel='apple-touch-icon' sizes='152x152' href='static/apple-touch-icon.png' />
       <link rel='icon' type='image/png' href='static/favicon-32x32.png' sizes='32x32' />
       <link rel='icon' type='image/png' href='static/favicon-16x16.png' sizes='16x16' />
@@ -27,10 +31,14 @@ export default ({pageTitle, children}) => (
             .choiseBox {
               display: block;
             }
+            .footer {
+              width: 90% !important;
+            }
           }
           .footer {
             position: absolute;
             padding-top: 20px;
+            padding-bottom: 10px;
             color: #828282;
             width: 85%;
             text-align: center;
@@ -123,7 +131,7 @@ export default ({pageTitle, children}) => (
         </div>
       </div>
       <div className='footer'>
-        <a href='https://github.com/maccyber/bigfive-web'>Bigfive-web</a><br/>
+        <a href='https://github.com/maccyber/bigfive-web'>Bigfive-web</a> - We need <a href='https://github.com/maccyber/bigfive-web'>help</a> with translations<br />
         Made with ❤ by <a href='https://github.com/zrrrzzt/'>zrrrzzt</a> and <a href='https://github.com/maccyber'>maccyber</a>
       </div>
     </div>
diff --git a/pages/index.js b/pages/index.js
index 8ee54e3..1117361 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -5,10 +5,20 @@ import TheTest from '../components/thetest'
 import Page from '../layouts'
 
 export default class Index extends React.Component {
+  static async getInitialProps ({ req }) {
+    const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
+    const isIE11 = !!userAgent.match(/Trident\/7\./)
+
+    return {
+      userAgent: userAgent,
+      isIE11: isIE11,
+      ip: req.headers['x-forwarded-for'] || req.socket.remoteAddress
+    }
+  }
   render () {
     return (
-      <Page pageTitle='BigFive Personality Test'>
-        <TheTest />
+      <Page pageTitle='BigFive Personality Test' isIE11={this.props.isIE11}>
+        <TheTest userAgent={this.props.userAgent} ip={this.props.ip} />
       </Page>
     )
   }
diff --git a/static/ga.js b/static/ga.js
new file mode 100644
index 0000000..0d6e370
--- /dev/null
+++ b/static/ga.js
@@ -0,0 +1,9 @@
+  (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', 'https://www.google-analytics.com/analytics.js', 'ga')
+
+  ga('create', 'UA-92177881-1', 'auto')
+  ga('send', 'pageview')