diff --git a/package.json b/package.json
index 457641f..163e3b0 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,8 @@
     "bootstrap-vue": "^2.21.2",
     "core-js": "~3.6.5",
     "near-api-js": "~0.35.0",
-    "vue": "~2.6.11"
+    "vue": "~2.6.11",
+    "vue-loading-overlay": "^3.4.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.8",
diff --git a/src/App.vue b/src/App.vue
index 67a1e87..d8c2b55 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
-  <div id="root">
-    <div class="bg-light">
-      <b-navbar class="container">
-        <b-navbar-brand href="#">NEAR DICE DAPP</b-navbar-brand>
+  <div id="root" class="main">
+    <div class="bg-dark">
+      <b-navbar class="container py-3" type="dark">
+        <img :src="require('./assets/neardice-logo.png')" alt="Near Dice" height="32px" class="mr-1">
         <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
         <b-collapse id="nav-collapse" is-nav>
           <b-navbar-nav>
@@ -12,11 +12,17 @@
 
           <!-- Right aligned nav items -->
           <b-navbar-nav class="ml-auto">
+            <button class="btn btn-info" style="float: right" v-on:click="logout" v-show="isSignedIn">
+              Sign Out
+            </button>
+            <button class="btn btn-info" style="float: right" v-on:click="login" v-show="!isSignedIn">
+              Sign In
+            </button>
+
             <b-nav-item-dropdown text="Language" right>
               <b-dropdown-item href="#">EN</b-dropdown-item>
               <b-dropdown-item href="#">中文</b-dropdown-item>
             </b-nav-item-dropdown>
-
             <!-- <b-nav-item-dropdown right>
               <template #button-content>
                 <em>User</em>
@@ -29,8 +35,7 @@
       </b-navbar>
     </div>
     <div class="container pt-4">
-      <SignedOut v-show="!isSignedIn" />
-      <SignedIn v-show="isSignedIn" />
+      <SignedIn />
     </div>
 
     <footer
@@ -47,8 +52,8 @@
 <script>
 import "./global.css";
 import getConfig from "./config";
-import SignedOut from "./components/SignedOut.vue";
 import SignedIn from "./components/SignedIn.vue";
+import { login,logout } from "./utils";
 
 const nearConfig = getConfig(process.env.NODE_ENV || "development");
 console.log(
@@ -62,7 +67,6 @@ export default {
   },
   name: "App",
   components: {
-    SignedOut,
     SignedIn,
   },
 
@@ -71,6 +75,13 @@ export default {
       return window.walletConnection.isSignedIn();
     },
   },
+  methods: {
+    login() {
+      console.log("calling utils.login")
+      login()
+    },
+    logout: logout,  
+  }
 };
 </script>
 
diff --git a/src/assets/satoshi-dice-background.png b/src/assets/satoshi-dice-background.png
new file mode 100644
index 0000000..6d94fff
Binary files /dev/null and b/src/assets/satoshi-dice-background.png differ
diff --git a/src/components/SignedIn.vue b/src/components/SignedIn.vue
index 17de91c..59b4601 100644
--- a/src/components/SignedIn.vue
+++ b/src/components/SignedIn.vue
@@ -1,79 +1,100 @@
 <template>
   <div>
-    <button class="link" style="float: right" v-on:click="logout">
-      Sign out
-    </button>
+    <div class="vld-parent">
+      <loading :active.sync="isLoading" :can-cancel="true" :is-full-page="fullPage"></loading>
+    </div>
     <main>
-      <h1>
-        Welcome {{ accountId }}, You have {{ this.leftCount }} time to dice
+      <h1 class="shadow py-2" v-show="isSignedIn">
+        Welcome {{ accountId }}, You have {{ this.leftCount }} times to dice
       </h1>
-      <form v-on:submit.prevent="buyDice">
-        <fieldset ref="fieldset">
-          <label
-            for="buyDice"
-            style="display: block; color: var(--gray); margin-bottom: 0.5em"
-          >Buy Dice</label
-          >
-          <div style="display: flex">
-            Buy<input
-              v-model="rollCount"
-              autocomplete="off"
-              id="roll"
-              style="flex: 1"
-            />times
-            <button id="buy_dice" style="border-radius: 0 5px 5px 0">
-              Buy
-            </button>
-          </div>
-        </fieldset>
-      </form>
 
-      <form v-on:submit.prevent="rollDice">
-        <fieldset ref="fieldset">
-          <label
-            for="rollDice"
-            style="display: block; color: var(--gray); margin-bottom: 0.5em"
-          >Roll Dice</label
-          >
-          <div style="display: flex">
-            <input
-              v-model="rollNumber"
-              autocomplete="off"
-              id="roll"
-              style="flex: 1"
-            />
-            <button id="roll_dice" style="border-radius: 0 5px 5px 0">
-              Roll
-            </button>            
+      <div class="contianer">
+        <div class="row">
+          <div class="col-md-3">
+            <form v-on:submit.prevent="buyDice" class="shadow mt-5 py-4">
+              <fieldset ref="fieldset">
+                <div class="form-group py-3">
+                  <span class="text-white">Buy </span>
+                  <select name="rollCount" v-model="rollCount" id="roll" class="ml-2 mr-2">
+                    <option value="1" selected="selected">1</option>
+                    <option value="1">5</option>
+                    <option value="1">10</option>
+                    <option value="1">30</option>
+                    <option value="1">50</option>
+                    <option value="1">100</option>
+                    <option value="1">1000</option>
+                  </select> 
+                  <span class="text-white"> times</span>
+                  <button id="buy_dice" class="btn btn-danger btn-sm ml-2">
+                    Buy
+                  </button>
+                </div>
+              </fieldset>
+            </form>
+          </div>
+          <div class="col-md-6">
+            <div class="mt-5">
+              <h2 class="text-white text-center">Jackpot:</h2>
+              <p class="text-center"><span class="display-3" style="letter-spacing: 1rem">{{jackpot}}</span>Near</p>
+              <p class="text-center display-4 text-white">Recent Wins</p>
+              <table class="table table-hover" style="border: solid 1px #dee2e6;background: #fff">
+                <thead>
+                  <tr>
+                    <th scope="col">Height</th>
+                    <th scope="col">Username</th>
+                    <th scope="col">Prize</th>
+                    <!-- <th scope="col">TS</th> -->
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="item in winList" :key="item.height">
+                    <th scope="row">{{item.height}}</th>
+                    <td>{{item.user}}</td>
+                    <td><span style="color: green">{{formatAmount(item.amount)}}</span> Near</td>
+                    <!-- <td>{{item.ts}}</td> -->
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
-          <Dice :start="diceStart" :num="diceNum" v-show="diceShow" />
-        </fieldset>
-      </form>
+          <div class="col-md-3">
+            <form v-on:submit.prevent="rollDice" class="shadow mt-5 py-4">
+              <fieldset ref="fieldset">
+                <div>
+                  <span class="text-white">Select number to bet</span><br>
+                  <ul>
+                    <li class="number-item"><a :class="active1" @click="chooseNumber(1)">1</a></li>
+                    <li class="number-item"><a :class="active2" @click="chooseNumber(2)">2</a></li>
+                    <li class="number-item"><a :class="active3" @click="chooseNumber(3)">3</a></li>
+                    <li class="number-item"><a :class="active4" @click="chooseNumber(4)">4</a></li>
+                    <li class="number-item"><a :class="active5" @click="chooseNumber(5)">5</a></li>
+                    <li class="number-item"><a :class="active6" @click="chooseNumber(6)">6</a></li>
+                  </ul>
+                  <button id="roll_dice"  class="btn btn-warning btn-sm ml-2">
+                    Roll
+                  </button>            
+                </div>
+              </fieldset>
+            </form>
+          </div>
+        </div>
+      </div>
     </main>
-
-    <Notification
-      v-show="notificationVisible"
-      ref="notification"
-      :networkId="networkId"
-      :msg="'called method: set_greeting'"
-      :contractId="contractId"
-      :visible="false"
-    />
   </div>
 </template>
 
 <script>
 import { logout } from "../utils";
-
-import Notification from "./Notification.vue";
-import Dice from "./Dice.vue";
+// Import component
+import Loading from 'vue-loading-overlay';
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css';
 
 export default {
   name: "SignedIn",
 
   components: {
-    Notification,
-    Dice,
+    Loading
   },
   data: function () {
     return {
@@ -84,15 +105,22 @@ export default {
       leftCount: 0,
       rollCount: "",
       rollNumber: "",
-      notificationVisible: false,
-      diceShow: false,
-      diceStart: false,
-      diceNum:0,
+      jackpot: 100,
+      winList: {},
+      active1: "",
+      active2: "",
+      active3: "",
+      active4: "",
+      active5: "",
+      active6: "",
+      isLoading: false,
+      fullPage: true
     };
   },
 
   created() {
-    this.getLeftCount();
+    this.getLeftCount()
+    this.getWinHistory()
   },
 
   computed: {
@@ -113,6 +141,58 @@ export default {
   },
 
   methods: {
+    chooseNumber(num) {
+      console.log(num)
+      this.rollNumber = num
+      if (num==1) {
+        this.active1 = 'active'
+        this.active2 = ''
+        this.active3 = ''
+        this.active4 = ''
+        this.active5 = ''
+        this.active6 = ''
+      }
+      if (num==2) {
+        this.active1 = ''
+        this.active2 = 'active'
+        this.active3 = ''
+        this.active4 = ''
+        this.active5 = ''
+        this.active6 = ''
+      }
+      if (num==3) {
+        this.active1 = ''
+        this.active2 = ''
+        this.active3 = 'active'
+        this.active4 = ''
+        this.active5 = ''
+        this.active6 = ''
+      }
+      if (num==4) {
+        this.active1 = ''
+        this.active2 = ''
+        this.active3 = ''
+        this.active4 = 'active'
+        this.active5 = ''
+        this.active6 = ''
+      }
+      if (num==5) {
+        this.active1 = ''
+        this.active2 = ''
+        this.active3 = ''
+        this.active4 = ''
+        this.active5 = 'active'
+        this.active6 = ''
+      }
+      if (num==6) {
+        this.active1 = ''
+        this.active2 = ''
+        this.active3 = ''
+        this.active4 = ''
+        this.active5 = ''
+        this.active6 = 'active'
+      }
+    },
     getLeftCount() {
       //retrieve greeting
       window.contract
@@ -145,20 +225,10 @@ export default {
         // re-enable the form, whether the call succeeded or failed
         this.$refs.fieldset.disabled = false;
       }
-
-      this.notificationVisible = true; //show new notification
-
-      // remove Notification again after css animation completes
-      // this allows it to be shown again next time the form is submitted
-      setTimeout(() => {
-        this.notificationVisible = false;
-      }, 11000);
     },
 
     rollDice: async function () {
-      this.diceShow=true
-      // fired on form submit button used to update the greeting
-
+      this.isLoading = true;
       // disable the form while the value gets updated on-chain
       this.$refs.fieldset.disabled = true;
 
@@ -169,7 +239,7 @@ export default {
             target: parseInt(this.rollNumber),
           })
           .then((res) => {
-            this.showDice(res.dice_point)
+            this.isLoading = false;
             if (res.dice_point === res.user_guess) {
               const reward_amount = res.reward_amount.toString();
               const temp_amount = reward_amount.substr(
@@ -189,6 +259,7 @@ export default {
               alert("You lose, the number is " + res.dice_point);
             }
             this.leftCount = this.leftCount - 1;
+            this.jackpot = this.formatAmount(res.jackpod_left);
             console.log(res);
           });
       } catch (e) {
@@ -197,16 +268,35 @@ export default {
         // re-enable the form, whether the call succeeded or failed
         this.$refs.fieldset.disabled = false;
       }
+    },
 
-      this.notificationVisible = true; //show new notification
-
-      // remove Notification again after css animation completes
-      // this allows it to be shown again next time the form is submitted
-      setTimeout(() => {
-        this.notificationVisible = false;
-      }, 11000);
+    getWinHistory: async function () {
+      try {
+        // make an update call to the smart contract
+        await window.contract
+          .get_win_history({
+            from_index: 0,
+            limit: 20,
+          })
+          .then((res) => {
+            this.winList = res;
+            console.log(res);
+          });
+      } catch (e) {
+        console.log(e); //re-throw
+      }
     },
 
+    formatAmount: function (amount) {
+      const reward_amount = amount.toString();
+      const temp_amount = reward_amount.substr(
+        0,
+        reward_amount.length - 20
+      );
+      const int_part = temp_amount.substr(0, temp_amount.length - 4);
+      const float_part = temp_amount.substr(0, int_part.legnth);
+      return int_part + "." +float_part;
+    },
     logout: logout,
   },
 };
diff --git a/src/global.css b/src/global.css
index e69de29..c5931df 100644
--- a/src/global.css
+++ b/src/global.css
@@ -0,0 +1,33 @@
+.main {
+	background-image: url('assets/satoshi-dice-background.png') , linear-gradient(to right, rgb(131, 96, 195), rgb(46, 191, 145));
+	background-size: cover;
+}
+.shadow {
+	background: rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    color: rgb(255, 255, 255);
+    text-align: center;
+    margin: auto;
+    width: 100%;
+}
+.number-item {
+	float: left;
+	list-style: none;
+	padding: 10px;
+}
+.number-item a {
+	display: block;
+	width: 24px;
+	height: 24px;
+	line-height: 16px;
+	padding: 4px;
+	border-radius: 12px;
+	background: #fff;
+	color: #000;
+	font-size: 14px;
+	margin: 0 10px;
+}
+.number-item a.active {
+	background: #000;
+	color: #fff;
+}
\ No newline at end of file
diff --git a/src/utils.js b/src/utils.js
index 7717c0d..f0022b9 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -20,7 +20,7 @@ export async function initContract() {
   // Initializing our contract APIs by contract name and configuration
   window.contract = await new Contract(window.walletConnection.account(), nearConfig.contractName, {
     // View methods are read only. They don't modify the state, but usually return some value.
-    viewMethods: ['get_greeting','get_account_dice_count'],
+    viewMethods: ['get_greeting','get_account_dice_count','get_win_history'],
     // Change methods can modify the state. But you don't receive the returned value when called.
     changeMethods: ['set_greeting','roll_dice','buy_dice'],
   })