diff --git a/src/assets/ghost-blog.css b/src/assets/ghost-blog.css
index 3d0e653..a8b5c51 100644
--- a/src/assets/ghost-blog.css
+++ b/src/assets/ghost-blog.css
@@ -39,6 +39,18 @@ hr {
   background: #060606;
   color: white;
 } */
+.panel {
+  background-color: #F0F0F0;
+}
+
+.panel-heading {
+  background-color: #5B5B5B;
+  color: white;
+}
+
+.panel-block {
+  color: black;
+}
 
 .box.is-fullwidth h1.title.is-4{
   color: #060606;
diff --git a/src/components/ClientNav.vue b/src/components/ClientNav.vue
new file mode 100644
index 0000000..88c3e59
--- /dev/null
+++ b/src/components/ClientNav.vue
@@ -0,0 +1,74 @@
+<script>
+export default {
+  name: 'ClientNav',
+  props: ['path'],
+  mounted () {
+    console.log(this.path)
+    this.navCSS[this.path] += ' is-active'
+    console.log(this.navCSS)
+  },
+  data () {
+    return {
+    navCSS:  {
+        main: 'panel-block',
+        pay: 'panel-block',
+        credit: 'panel-block',
+        info: 'panel-block',
+      }
+    }
+  }
+}
+
+</script>
+
+<template>
+  <nav class="panel">
+    <p class="panel-heading">
+      使用者選項
+    </p>
+    <RouterLink to="/client" :class="this.navCSS['main']">
+      <span class="panel-icon">
+        <i class="fas fa-book" aria-hidden="true"></i>
+      </span>
+      <template v-if="this.path == 'main'">
+        <strong>主選單</strong>
+      </template>
+      <template v-else>
+        <p>主選單</p>
+      </template>
+    </RouterLink>
+    <RouterLink to="/client/info" :class="this.navCSS['info']">
+      <span class="panel-icon">
+        <i class="fas fa-book" aria-hidden="true"></i>
+      </span>
+      <template v-if="this.path == 'info'">
+        <strong>個人資料</strong>
+      </template>
+      <template v-else>
+        <p>個人資料</p>
+      </template>
+    </RouterLink>
+    <RouterLink to="/client/pay" :class="this.navCSS['pay']">
+      <span class="panel-icon">
+        <i class="fas fa-book" aria-hidden="true"></i>
+      </span>
+      <template v-if="this.path == 'pay'">
+        <strong>掃描支付</strong>
+      </template>
+      <template v-else>
+        <p>掃描支付</p>
+      </template>
+    </RouterLink>
+    <RouterLink to="/client/credit" :class="this.navCSS['credit']">
+      <span class="panel-icon">
+        <i class="fas fa-book" aria-hidden="true"></i>
+      </span>
+      <template v-if="this.path == 'credit'">
+        <strong>信用紀錄</strong>
+      </template>
+      <template v-else>
+        <p>信用紀錄</p>
+      </template>
+    </RouterLink>
+  </nav>
+</template>
diff --git a/src/router/index.js b/src/router/index.js
index 50ec220..3dce51e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -3,6 +3,10 @@ import HomeView from '../views/HomeView.vue'
 import SignupView from '../views/SignupView.vue'
 import LinkSBTView from '../views/LinkSBTView.vue'
 import CreditView from '../views/CreditView.vue'
+import ClientMainView from '../views/ClientMainView.vue'
+import ClientInfoView from '../views/ClientInfoView.vue'
+import ClientCreditView from '../views/ClientCreditView.vue'
+import ClientPayView from '../views/ClientPayView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -26,7 +30,27 @@ const router = createRouter({
       path: '/signup/credit',
       name: 'startcredit',
       component: CreditView
-    }
+    },
+    {
+      path: '/client',
+      name: 'clientmain',
+      component: ClientMainView
+    },
+    {
+      path: '/client/info',
+      name: 'clientinfo',
+      component: ClientInfoView
+    },
+    {
+      path: '/client/credit',
+      name: 'clientcredit',
+      component: ClientCreditView
+    },
+    {
+      path: '/client/pay',
+      name: 'clientpay',
+      component: ClientPayView
+    },
   ]
 })
 
diff --git a/src/views/ClientMainView.vue b/src/views/ClientMainView.vue
new file mode 100644
index 0000000..2b32ca1
--- /dev/null
+++ b/src/views/ClientMainView.vue
@@ -0,0 +1,111 @@
+<script>
+import Web3 from 'web3';
+import SBT from '@/assets/SBT.json'
+import PageTitle from '../components/PageTitle.vue'
+import detectEthereumProvider from '@metamask/detect-provider'
+import WarningModal from '../components/WarningModal.vue'
+import SuccessModal from '../components/SuccessModal.vue'
+import { useClientStore } from '../stores/Client.js'
+import ClientNav from '../components/ClientNav.vue'
+
+// To use Html5QrcodeScanner (more info below)
+import { Html5QrcodeScanner } from "html5-qrcode";
+
+// To use Html5Qrcode (more info below)
+import { Html5Qrcode } from "html5-qrcode";
+
+
+
+export default {
+  components: { PageTitle, WarningModal, SuccessModal, ClientNav },
+  data() {
+    return {
+      SBTAddress: import.meta.env.VITE_SBT_ADDR,
+      number: 0,
+      warningModalStatus: false,
+      successModalStatus: false,
+      msg: '',
+      clientAddr: '',
+      web3: null,
+      token: null,
+      isWaiting: false,
+      log: [],
+      scanner: null
+    }
+  },
+  async mounted() {
+    this.web3 = new Web3(window.ethereum)
+    this.clientAddr = (await this.web3.eth.getAccounts())[0]
+    this.web3.eth.defaultAccount = this.clientAddr
+  },
+  methods: {
+    onScanSuccess(decodedText, decodedResult) {
+      // handle the scanned code as you like, for example:
+      console.log(`Code matched = ${decodedText}`, decodedResult);
+      this.scanner.clear()
+    },
+    scan() {
+      this.scanner = new Html5QrcodeScanner(
+        "reader",
+        { fps: 10, qrbox: { width: 250, height: 250 } },
+        /* verbose= */ false);
+      this.scanner.render(this.onScanSuccess);
+    }
+  }
+}
+</script>
+
+<template>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-2">
+          <!-- <ClientNav path="main"></ClientNav> -->
+        </div>
+        <div class="column">
+          <div class="container">
+            <div class="block">
+              <PageTitle title="Set Credit Limit" subtitle="根據 SBT 信用紀錄設定額度"></PageTitle>
+            </div>
+            <div class="block">
+
+              <div class="tile is-ancestor">
+                <div class="tile is-vertical is-8">
+                  <div class="tile">
+                    <div class="tile is-parent is-vertical">
+
+
+                      <RouterLink to="/client/info" class="tile is-child notification is-info">
+                        <article>
+                          <p class="title"><i class="fas fa-user"></i> 個人資料</p>
+                          <!-- <p class="subtitle">Top tile</p> -->
+                        </article>
+                      </RouterLink>
+                      <RouterLink to="/client/pay" class="tile is-child notification is-info">
+                        <article>
+                          <p class="title"><i class="fas fa-credit-card"></i> 掃描支付</p>
+                          <!-- <p class="subtitle">Top tile</p> -->
+                        </article>
+                      </RouterLink>
+                      <RouterLink to="/client/credit" class="tile is-child notification is-info">
+                        <article>
+                          <p class="title"><i class="fas fa-history"></i> 信用紀錄</p>
+                          <!-- <p class="subtitle">Top tile</p> -->
+                        </article>
+                      </RouterLink>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <WarningModal :active="warningModalStatus" :errorMsg="msg" @closeModal="warningModalStatus = false"></WarningModal>
+  <SuccessModal :active="successModalStatus" :successMsg="msg" @closeModal="successModalStatus = false"
+    link="/signup/linksbt" btnName="繼續"></SuccessModal>
+</template>