diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 0cabd25..388a569 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -35,6 +35,7 @@ declare global {
   const effectScope: typeof import('vue').effectScope
   const emailPattern: typeof import('./src/utils/pattern').emailPattern
   const extendRef: typeof import('@vueuse/core').extendRef
+  const formatBalance: typeof import('./src/utils/helper').formatBalance
   const getCurrentInstance: typeof import('vue').getCurrentInstance
   const getCurrentScope: typeof import('vue').getCurrentScope
   const getCurrentWatcher: typeof import('vue').getCurrentWatcher
@@ -343,6 +344,7 @@ declare module 'vue' {
     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
     readonly emailPattern: UnwrapRef<typeof import('./src/utils/pattern')['emailPattern']>
     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly formatBalance: UnwrapRef<typeof import('./src/utils/helper')['formatBalance']>
     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
     readonly getCurrentWatcher: UnwrapRef<typeof import('vue')['getCurrentWatcher']>
diff --git a/components.d.ts b/components.d.ts
index 01901df..d53d1af 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -17,6 +17,11 @@ declare module 'vue' {
     IonAvatar: typeof import('@ionic/vue')['IonAvatar']
     IonButton: typeof import('@ionic/vue')['IonButton']
     IonButtons: typeof import('@ionic/vue')['IonButtons']
+    IonCard: typeof import('@ionic/vue')['IonCard']
+    IonCardContent: typeof import('@ionic/vue')['IonCardContent']
+    IonCardHeader: typeof import('@ionic/vue')['IonCardHeader']
+    IonCardSubtitle: typeof import('@ionic/vue')['IonCardSubtitle']
+    IonCardTitle: typeof import('@ionic/vue')['IonCardTitle']
     IonContent: typeof import('@ionic/vue')['IonContent']
     IonHeader: typeof import('@ionic/vue')['IonHeader']
     IonIcon: typeof import('@ionic/vue')['IonIcon']
@@ -46,6 +51,11 @@ declare global {
   const IonAvatar: typeof import('@ionic/vue')['IonAvatar']
   const IonButton: typeof import('@ionic/vue')['IonButton']
   const IonButtons: typeof import('@ionic/vue')['IonButtons']
+  const IonCard: typeof import('@ionic/vue')['IonCard']
+  const IonCardContent: typeof import('@ionic/vue')['IonCardContent']
+  const IonCardHeader: typeof import('@ionic/vue')['IonCardHeader']
+  const IonCardSubtitle: typeof import('@ionic/vue')['IonCardSubtitle']
+  const IonCardTitle: typeof import('@ionic/vue')['IonCardTitle']
   const IonContent: typeof import('@ionic/vue')['IonContent']
   const IonHeader: typeof import('@ionic/vue')['IonHeader']
   const IonIcon: typeof import('@ionic/vue')['IonIcon']
diff --git a/src/components/layout/default.vue b/src/components/layout/default.vue
index 4a61733..50b81c6 100644
--- a/src/components/layout/default.vue
+++ b/src/components/layout/default.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ellipse, square, triangle } from "ionicons/icons";
+import { cellular, chatboxEllipses, compass, personCircle } from "ionicons/icons";
 </script>
 
 <template>
@@ -8,17 +8,22 @@ import { ellipse, square, triangle } from "ionicons/icons";
       <IonRouterOutlet />
       <IonTabBar slot="bottom" class="tabbar">
         <IonTabButton tab="riwa" href="/layout/riwa">
-          <IonIcon aria-hidden="true" :icon="triangle" />
+          <IonIcon aria-hidden="true" :icon="compass" />
           <IonLabel>Riwa</IonLabel>
         </IonTabButton>
 
         <IonTabButton tab="market" href="/layout/market">
-          <IonIcon aria-hidden="true" :icon="ellipse" />
+          <IonIcon aria-hidden="true" :icon="cellular" />
           <IonLabel>Market</IonLabel>
         </IonTabButton>
 
+        <IonTabButton tab="chat" href="/layout/chat">
+          <IonIcon aria-hidden="true" :icon="chatboxEllipses" />
+          <IonLabel>Chat</IonLabel>
+        </IonTabButton>
+
         <IonTabButton tab="user" href="/layout/user">
-          <IonIcon aria-hidden="true" :icon="square" />
+          <IonIcon aria-hidden="true" :icon="personCircle" />
           <IonLabel>User</IonLabel>
         </IonTabButton>
       </IonTabBar>
diff --git a/src/router/index.ts b/src/router/index.ts
index 7b2c611..33a9bcd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -18,6 +18,10 @@ const routes: Array<RouteRecordRaw> = [
         path: "market",
         component: () => import("@/views/market/index.vue"),
       },
+      {
+        path: "chat",
+        component: () => import("@/views/chat/index.vue"),
+      },
       {
         path: "user",
         component: () => import("@/views/user/index.vue"),
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
new file mode 100644
index 0000000..57eb1da
--- /dev/null
+++ b/src/utils/helper.ts
@@ -0,0 +1,6 @@
+export function formatBalance(amount: MaybeRefOrGetter<number>, locale: Intl.LocalesArgument = "en-US"): ComputedRef<string> {
+  return computed(() => {
+    const balance = toValue(amount);
+    return `$${balance.toLocaleString(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+  });
+}
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
new file mode 100644
index 0000000..472cabe
--- /dev/null
+++ b/src/views/chat/index.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <IonPage>
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Chat</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent :fullscreen="true">
+      <IonHeader collapse="condense">
+        <IonToolbar>
+          <IonTitle size="large">
+            Chat
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+    </IonContent>
+  </IonPage>
+</template>
diff --git a/src/views/user/components/wallet-card.vue b/src/views/user/components/wallet-card.vue
new file mode 100644
index 0000000..9e285af
--- /dev/null
+++ b/src/views/user/components/wallet-card.vue
@@ -0,0 +1,27 @@
+<script lang='ts' setup>
+const balance = ref(9999999.00);
+
+const formattedBalance = formatBalance(balance);
+</script>
+
+<template>
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>{{ formattedBalance }}</ion-card-title>
+      <ion-card-subtitle>Wallet</ion-card-subtitle>
+    </ion-card-header>
+
+    <!-- <ion-card-content>
+      Here's a small text description for the card content. Nothing more, nothing less.
+    </ion-card-content> -->
+
+    <ion-button fill="clear">
+      Recharge
+    </ion-button>
+    <ion-button fill="clear">
+      Withdrawal
+    </ion-button>
+  </ion-card>
+</template>
+
+<style scoped></style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 861249f..544597a 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { notificationsOutline, scanOutline, settingsOutline } from "ionicons/icons";
 import UserInfo from "./components/user-info.vue";
+import WalletCard from "./components/wallet-card.vue";
 </script>
 
 <template>
@@ -20,12 +21,13 @@ import UserInfo from "./components/user-info.vue";
     </ion-toolbar>
     <IonContent :fullscreen="true" class="ion-padding">
       <UserInfo />
+      <WalletCard />
     </IonContent>
   </IonPage>
 </template>
 
 <style scoped>
 .toolbar {
-  --background: white;
+  --background: var(--ion-background-color);
 }
 </style>