diff --git a/src/components/ControlPanel/channel/opay/components/opay-setting.vue b/src/components/ControlPanel/channel/opay/components/opay-setting.vue
index 1bb9e7b..f60c7cd 100644
--- a/src/components/ControlPanel/channel/opay/components/opay-setting.vue
+++ b/src/components/ControlPanel/channel/opay/components/opay-setting.vue
@@ -4,6 +4,12 @@
     <sui-segment stacked>
       <Donatebar :title="title" :max="amountInt" :now="amountInt / 3" :timestamp="datetime" />
     </sui-segment>
+    <sui-segment piled>
+      <sui-header>Donate Bar URL</sui-header>
+      <sui-message>
+        {{url}}
+      </sui-message>
+    </sui-segment>
     <sui-form @submit.prevent="formSubmit">
       <sui-form-field>
         <label>Title</label>
@@ -83,6 +89,11 @@ export default {
     }
   },
   computed: {
+    url: function () {
+      let path = this.$router.resolve(`/donatebar/${this.$route.params.chid}/opay`).href
+      let origin = window.location.origin
+      return `${origin.replace(/\/$/, '')}${path}`
+    },
     amountInt: function () {
       return toInt(this.amount, 0)
     },
diff --git a/src/components/common/donate-bar.vue b/src/components/common/donate-bar.vue
index d408f6e..9e9b7d8 100644
--- a/src/components/common/donate-bar.vue
+++ b/src/components/common/donate-bar.vue
@@ -30,6 +30,7 @@
     height: 30px;
     position: relative;
     border-radius: 10px;
+    border: 3px solid black;
 
     .progress-body {
       border-radius: 10px;