diff --git a/src/resources/vue/Wallet.vue b/src/resources/vue/Wallet.vue
--- a/src/resources/vue/Wallet.vue
+++ b/src/resources/vue/Wallet.vue
@@ -2,12 +2,53 @@
     <div class="container" dusk="wallet-component">
         <div id="wallet" class="card">
             <div class="card-body">
-                <div class="card-title">Account balance</div>
+                <div class="card-title">Account balance <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span> </div>
                 <div class="card-text">
-                    <p>Current account balance is
-                        <span :class="balance < 0 ? 'text-danger' : 'text-success'"><strong>{{ $root.price(balance) }}</strong></span>
-                    </p>
-                    <button type="button" class="btn btn-primary" @click="payment()">Add 10 bucks to my wallet</button>
+                    <p>Your current account balance will last until <strong>{{lastUntilDate}}</strong>.<p>
+
+                    <button type="button" class="btn btn-primary" @click="payment()">Add 10 bucks to my account</button>
+
+                    <p>You can add and cancel services at any time. Your account will be charged accordingly.</p>
+
+                    <table class="table table-hover">
+                        <thead class="thead-light">
+                            <tr>
+                                <th scope="col">User Accounts</th>
+                                <th scope="col">
+                                    <router-link class="btn btn-sm btn-outline-primary float-right" :to="{ name: 'users' }"> edit </router-link>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="user in users" :id="'user' + user.id" :key="user.id">
+                                <td>
+                                    {{user.name}}
+                                </td>
+                                <td>
+                                    <div class="float-right"> {{$root.price(user.cost)}} </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+
+                    <table class="table table-hover">
+                        <thead class="thead-light">
+                            <tr>
+                                <th scope="col"> Domains </th>
+                                <th scope="col">
+                                  <router-link class="btn btn-sm btn-outline-primary float-right" :to="{ name: 'domains' }"> edit </router-link>
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr v-for="domain in domains" :key="domain.id">
+                                <td>{{ domain.namespace }}</td>
+                                <td>
+                                    <div class="float-right"> {{ $root.price(domain.cost) }} </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
         </div>
@@ -19,8 +60,48 @@
         data() {
             return {
                 balance: 0,
+                lastUntilDate: "Mar 15, 2021",
+                users: [],
+                domains: [],
+                skus: []
             }
         },
+        created() {
+            axios.get('api/v4/skus')
+                .then(response => {
+                    this.skus = response.data
+                })
+                .catch(this.$root.errorHandler);
+
+            axios.get('/api/v4/users')
+                .then(response => {
+                    for(const u of response.data) {
+                        axios.get('api/v4/users/' + u.id)
+                            .then(response =>  {
+                                let user = response.data;
+                                user.cost = this.skus
+                                    .filter(sku => sku.type == 'user' && sku.id in user.skus)
+                                    .map(sku => { return sku.cost * (user.skus[sku.id].count - sku.units_free) } )
+                                    .reduce((a, b) => a + b, 0);
+                                this.users.push(user);
+                            })
+                            .catch(this.$root.errorHandler);
+                    }
+                })
+                .catch(this.$root.errorHandler);
+
+            axios.get('/api/v4/domains')
+                .then(response => {
+                    for (const domain of response.data) {
+                        domain.cost = this.skus
+                            .filter(sku => sku.title == 'domain-hosting')
+                            .map(sku => {return sku.cost})
+                            .reduce((a, b) => a + b, 0);
+                        this.domains.push(domain);
+                    }
+                })
+                .catch(this.$root.errorHandler);
+        },
         mounted() {
             this.balance = 0
             // TODO: currencies, multi-wallets, accounts