diff --git a/.travis.yml b/.travis.yml
index cbd49a9..bb0dece 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -12,4 +12,5 @@ deploy:
  github_token: $GITHUB_TOKEN
  local_dir: dist
  on:
-   branch: master
\ No newline at end of file
+   branch: master
+   tags: true
\ No newline at end of file
diff --git a/package.json b/package.json
index f7bbf27..d149b82 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "covid-vue",
-  "version": "0.2.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
@@ -18,6 +18,7 @@
     "vuex": "^3.1.3"
   },
   "devDependencies": {
+    "@fortawesome/fontawesome-free": "^5.13.0",
     "@vue/cli-plugin-babel": "~4.3.0",
     "@vue/cli-plugin-eslint": "~4.3.0",
     "@vue/cli-plugin-router": "~4.3.0",
diff --git a/src/App.vue b/src/App.vue
index c35d9f8..57306a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,19 @@
 <template>
-  <div id="app">
-    <router-view />
-  </div>
+  <v-app>
+    <Header />
+    <v-content>
+      <router-view />
+    </v-content>
+  </v-app>
 </template>
-
+<script>
+import Header from '@/components/Header.vue'
+export default {
+  components: {
+    Header
+  }
+}
+</script>
 <style>
 html {
   -webkit-text-size-adjust: 100%;
@@ -16,11 +26,6 @@ body {
   font-size: 16px;
   line-height: 1.5;
 }
-#app {
-  box-sizing: border-box;
-  padding: 0 20px 20px;
-  margin: 0 auto;
-}
 hr {
   box-sizing: content-box;
   height: 0;
diff --git a/src/components/CountriesList.vue b/src/components/CountriesList.vue
index d2d3f21..930d74b 100644
--- a/src/components/CountriesList.vue
+++ b/src/components/CountriesList.vue
@@ -2,9 +2,10 @@
   <v-data-table
     :headers="headers"
     :items="countries"
-    hide-default-footer
-    disable-pagination
+    :hide-default-footer="paginated"
+    :disable-pagination="paginated"
     class="elevation-1"
+    @click:row="getSelected"
   ></v-data-table>
 </template>
 
@@ -31,6 +32,15 @@ export default {
     countries: {
       type: Array,
       required: true
+    },
+    paginated: {
+      type: Boolean,
+      default: true
+    }
+  },
+  methods: {
+    getSelected(data) {
+      this.$emit('setSelected', data)
     }
   }
 }
diff --git a/src/components/CountryInfo.vue b/src/components/CountryInfo.vue
new file mode 100644
index 0000000..3bb26bb
--- /dev/null
+++ b/src/components/CountryInfo.vue
@@ -0,0 +1,166 @@
+<template>
+  <v-container>
+    <div class="d-flex align-md-center">
+      <v-img :src="flag" max-width="30" max-height="20"></v-img>
+      <h3>{{ country.country }}</h3>
+    </div>
+    <v-spacer />
+    <v-container fluid>
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-text-field
+            label="Total Cases"
+            :value="cases"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Total Recoveries"
+            :value="recoveries"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Total Deaths"
+            :value="deaths"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="New Cases"
+            :value="newCases"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="New Deaths"
+            :value="newDeaths"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Critical"
+            :value="critical"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Active"
+            :value="active"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Cases per Million"
+            :value="casesPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Deaths per Million"
+            :value="deathsPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Tests"
+            :value="tests"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Tests per Million"
+            v-model="testPerMillion"
+            disabled
+            outlined
+          ></v-text-field>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-container>
+</template>
+
+<script>
+import { formatNumber } from '@/common/helper.js'
+export default {
+  props: {
+    country: {
+      type: Object,
+      required: true
+    }
+  },
+  computed: {
+    cases() {
+      return formatNumber(this.country.cases)
+    },
+    recoveries() {
+      return formatNumber(this.country.recovered)
+    },
+    deaths() {
+      return formatNumber(this.country.deaths)
+    },
+    newCases() {
+      return formatNumber(this.country.todayCases)
+    },
+    newDeaths() {
+      return formatNumber(this.country.todayDeaths)
+    },
+    critical() {
+      return formatNumber(this.country.critical)
+    },
+    active() {
+      return formatNumber(this.country.active)
+    },
+    tests() {
+      return formatNumber(this.country.tests)
+    },
+    casesPerMillion() {
+      return formatNumber(this.country.casesPerMillion)
+    },
+    deathsPerMillion() {
+      return formatNumber(this.country.deathsPerMillion)
+    },
+    testPerMillion() {
+      return formatNumber(this.country.testPerMillion)
+    },
+    flag() {
+      return this.country.countryInfo.flag ?? ''
+    }
+  },
+  mounted() {
+    console.log(this.country)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h3 {
+  margin-left: 10px;
+}
+</style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
new file mode 100644
index 0000000..3d5ccf3
--- /dev/null
+++ b/src/components/Header.vue
@@ -0,0 +1,12 @@
+<template>
+  <v-app-bar dark>
+    <v-toolbar-title>COVIDvue</v-toolbar-title>
+    <v-spacer />
+    <v-btn icon to="/">
+      <v-icon small>fas fa-home</v-icon>
+    </v-btn>
+    <v-btn icon to="/countries">
+      <v-icon small>fas fa-flag</v-icon>
+    </v-btn>
+  </v-app-bar>
+</template>
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 1bbe20f..263a57f 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -1,6 +1,11 @@
+import '@fortawesome/fontawesome-free/css/all.css'
 import Vue from 'vue'
 import Vuetify from 'vuetify/lib'
 
 Vue.use(Vuetify)
 
-export default new Vuetify({})
+export default new Vuetify({
+  icons: {
+    iconfont: 'fa'
+  }
+})
diff --git a/src/store/index.js b/src/store/index.js
index 6dff675..dbee5f6 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,37 +1,13 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
-import CovidService from '@/services/covid.services'
+import * as countries from './modules/countries'
+import * as stats from './modules/stats'
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
-  state: {
-    countries: [],
-    overviewStats: {}
-  },
-  mutations: {
-    SET_COUNTRIES(state, data) {
-      state.countries = data
-    },
-    SET_OVERVIEW_STATS(state, data) {
-      state.overviewStats = data
-    }
-  },
-  actions: {
-    async fetchCountries({ commit }, filter) {
-      const { data } = await CovidService.fetchCountries(filter)
-
-      if (data != null) {
-        commit('SET_COUNTRIES', data)
-      }
-    },
-    async fetchOverviewStats({ commit }) {
-      const { data } = await CovidService.fetchWorldWide()
-
-      if (data != null) {
-        commit('SET_OVERVIEW_STATS', data)
-      }
-    }
-  },
-  modules: {}
+  modules: {
+    countries,
+    stats
+  }
 })
diff --git a/src/store/modules/countries.js b/src/store/modules/countries.js
new file mode 100644
index 0000000..a443e78
--- /dev/null
+++ b/src/store/modules/countries.js
@@ -0,0 +1,37 @@
+import CovidService from '@/services/covid.services'
+
+export const namespaced = true
+
+export const state = {
+  countries: [],
+  selected: null
+}
+
+export const mutations = {
+  SET_COUNTRIES(state, data) {
+    state.countries = data
+  },
+  SET_SELECTED_COUNTRY(state, data) {
+    state.selected = data
+  }
+}
+
+export const actions = {
+  async fetchCountries({ commit }, filter) {
+    const { data } = await CovidService.fetchCountries(filter)
+
+    if (data != null) {
+      commit('SET_COUNTRIES', data)
+    }
+  },
+  async fetchByCountry({ commit }, code) {
+    const { data } = await CovidService.fetchByCountry(code)
+
+    if (data != null) {
+      commit('SET_SELECTED_COUNTRY', data)
+    }
+  },
+  setSelectedCountry({ commit }, country) {
+    commit('SET_SELECTED_COUNTRY', country)
+  }
+}
diff --git a/src/store/modules/stats.js b/src/store/modules/stats.js
new file mode 100644
index 0000000..0bddbd2
--- /dev/null
+++ b/src/store/modules/stats.js
@@ -0,0 +1,23 @@
+import CovidService from '@/services/covid.services'
+
+export const namespaced = true
+
+export const state = {
+  overview: {}
+}
+
+export const mutations = {
+  SET_OVERVIEW_STATS(state, data) {
+    state.overview = data
+  }
+}
+
+export const actions = {
+  async fetchOverviewStats({ commit }) {
+    const { data } = await CovidService.fetchWorldWide()
+
+    if (data != null) {
+      commit('SET_OVERVIEW_STATS', data)
+    }
+  }
+}
diff --git a/src/views/Countries.vue b/src/views/Countries.vue
index 6541515..268e4af 100644
--- a/src/views/Countries.vue
+++ b/src/views/Countries.vue
@@ -1,21 +1,50 @@
 <template>
-  <div>
+  <v-col cols="12" md="10" offset-md="1">
     <h1 class="text--primary">Countries</h1>
-    <CountriesList :countries="countries" isPaginationEnabled />
-  </div>
+    <CountriesList
+      :countries="countries"
+      :paginated="false"
+      @setSelected="handleSelectedCountry"
+    />
+
+    <v-navigation-drawer
+      :value="selectedCountry"
+      width="600"
+      absolute
+      temporary
+      right
+      app
+    >
+      <CountryInfo
+        v-if="!!selectedCountry"
+        :country="selectedCountry"
+      ></CountryInfo>
+    </v-navigation-drawer>
+  </v-col>
 </template>
 
 <script>
 import CountriesList from '@/components/CountriesList.vue'
-import { mapState } from 'vuex'
+import CountryInfo from '@/components/CountryInfo.vue'
+import { mapState, mapActions } from 'vuex'
 export default {
   components: {
-    CountriesList
+    CountriesList,
+    CountryInfo
   },
   created() {
-    this.$store.dispatch('fetchCountries', '')
+    this.fetchCountries()
   },
-  computed: mapState(['countries'])
+  computed: mapState({
+    countries: state => state.countries.countries,
+    selectedCountry: state => state.countries.selected
+  }),
+  methods: {
+    handleSelectedCountry(data) {
+      this.fetchByCountry(data.countryInfo.iso2)
+    },
+    ...mapActions('countries', ['fetchCountries', 'fetchByCountry'])
+  }
 }
 </script>
 
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index c64ff44..63f178b 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <v-col cols="12" md="10" offset-md="1">
     <h1>Overview</h1>
     <v-container>
       <v-row>
@@ -9,21 +9,23 @@
         <OverviewCard title="Deaths" :value="totalDeaths" />
       </v-row>
     </v-container>
-    <v-card>
-      <v-card-title>
-        Top 10 Countries (Infection)
-        <v-spacer></v-spacer>
-      </v-card-title>
-      <CountriesList :countries="countries" />
-    </v-card>
-  </div>
+    <v-col cols="12">
+      <v-card>
+        <v-card-title>
+          Top 10 Countries (Infection)
+          <v-spacer></v-spacer>
+        </v-card-title>
+        <CountriesList :countries="countries" />
+      </v-card>
+    </v-col>
+  </v-col>
 </template>
 
 <script>
 import OverviewCard from '@/components/OverviewCard.vue'
 import CountriesList from '@/components/CountriesList.vue'
 import { formatNumber } from '@/common/helper.js'
-import { mapState } from 'vuex'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   components: {
@@ -31,15 +33,19 @@ export default {
     CountriesList
   },
   created() {
-    this.$store.dispatch('fetchCountries', 'cases')
-    this.$store.dispatch('fetchOverviewStats')
+    this.fetchCountries('cases')
+    this.fetchOverviewStats()
   },
   computed: mapState({
-    countries: state => state.countries.slice(0, 10),
-    totalCases: state => formatNumber(state.overviewStats.cases),
-    newCases: state => formatNumber(state.overviewStats.todayCases),
-    totalRecoveries: state => formatNumber(state.overviewStats.recovered),
-    totalDeaths: state => formatNumber(state.overviewStats.deaths)
-  })
+    countries: state => state.countries.countries.slice(0, 10),
+    totalCases: state => formatNumber(state.stats.overview.cases),
+    newCases: state => formatNumber(state.stats.overview.todayCases),
+    totalRecoveries: state => formatNumber(state.stats.overview.recovered),
+    totalDeaths: state => formatNumber(state.stats.overview.deaths)
+  }),
+  methods: {
+    ...mapActions('countries', ['fetchCountries']),
+    ...mapActions('stats', ['fetchOverviewStats'])
+  }
 }
 </script>
diff --git a/yarn.lock b/yarn.lock
index 2e06d3b..016568c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -804,6 +804,11 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@fortawesome/fontawesome-free@^5.13.0":
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
+  integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.npm.taobao.org/@hapi/address/download/@hapi/address-2.1.4.tgz?cache=0&sync_timestamp=1584144369412&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40hapi%2Faddress%2Fdownload%2F%40hapi%2Faddress-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"