diff --git a/example/package.json b/example/package.json
index 6c59b6d..ed3ecb7 100644
--- a/example/package.json
+++ b/example/package.json
@@ -11,7 +11,8 @@
   "dependencies": {
     "@nuxtjs/provider": "https://github.com/tornadocash/provider.git",
     "core-js": "^3.6.5",
-    "nuxt": "^2.14.6"
+    "nuxt": "^2.14.6",
+    "vuex": "^3.5.1"
   },
   "devDependencies": {}
 }
diff --git a/example/pages/index.vue b/example/pages/index.vue
index 0283bfe..d734436 100644
--- a/example/pages/index.vue
+++ b/example/pages/index.vue
@@ -3,14 +3,30 @@
     <div>
       <Logo />
       <h1 class="title">
-        Example
+        address: {{ getAddress }}
+        <br>
+        network: {{ getNetwork }}
       </h1>
+      <button @click="handleConnectProvider">Connect</button>
     </div>
   </div>
 </template>
 
+
 <script>
-export default {}
+import { mapActions, mapGetters } from 'vuex'
+
+export default {
+  computed: {
+    ...mapGetters('provider', ['getAddress', 'getNetwork']),
+  },
+  methods: {
+    ...mapActions('provider', ['initProvider']),
+    handleConnectProvider() {
+      this.initProvider({ name: 'metamask', network: 'mainnet' })
+    }
+  }
+}
 </script>
 
 <style>
@@ -36,7 +52,7 @@ export default {}
     sans-serif;
   display: block;
   font-weight: 300;
-  font-size: 100px;
+  font-size: 32px;
   color: #35495e;
   letter-spacing: 1px;
 }