diff --git a/src/components/main/BoardMain.vue b/src/components/main/BoardMain.vue
new file mode 100644
index 0000000..576c14a
--- /dev/null
+++ b/src/components/main/BoardMain.vue
@@ -0,0 +1,60 @@
+<template>
+<div class="col-md-6 col-lg-4 order-1 mb-6">
+    <div class="card h-100">
+        <div class="card-header nav-align-top">
+            <ul class="nav nav-pills" role="tablist">
+                <li class="nav-item">
+                    <button
+                        type="button"
+                        class="nav-link active"
+                        role="tab"
+                        data-bs-toggle="tab"
+                        data-bs-target="#navs-tabs-line-card-income"
+                        aria-controls="navs-tabs-line-card-income"
+                        aria-selected="true"
+                    >
+                        Income
+                    </button>
+                </li>
+                <li class="nav-item">
+                    <button type="button" class="nav-link" role="tab">Expenses</button>
+                </li>
+                <li class="nav-item">
+                    <button type="button" class="nav-link" role="tab">Profit</button>
+                </li>
+            </ul>
+        </div>
+        <div class="card-body">
+            <div class="tab-content p-0">
+                <div class="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel">
+                    <div class="d-flex mb-6">
+                        <div class="avatar flex-shrink-0 me-3">
+                            <img src="/img/icons/unicons/wallet-primary.png" alt="User" />
+                        </div>
+                        <div>
+                            <p class="mb-0">Total Balance</p>
+                            <div class="d-flex align-items-center">
+                                <h6 class="mb-0 me-1">$459.10</h6>
+                                <small class="text-success fw-medium">
+                                    <i class="bx bx-chevron-up bx-lg"></i>
+                                    42.9%
+                                </small>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="incomeChart"></div>
+                    <div class="d-flex align-items-center justify-content-center mt-6 gap-3">
+                        <div class="flex-shrink-0">
+                            <div id="expensesOfWeek"></div>
+                        </div>
+                        <div>
+                            <h6 class="mb-0">Income this week</h6>
+                            <small>$39k less than last week</small>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 287a196..d93d71b 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -2,12 +2,16 @@
     <div class="container-xxl flex-grow-1 container-p-y pb-0">
         <MainEventCalendar />
         <MemberManagement v-if="isAdmin" />
+        <div class="">
+            <BoardMain />
+        </div>
     </div>
 </template>
 
 <script setup>
     import MainEventCalendar from '@/components/main/MainEventCalendar.vue';
     import MemberManagement from '@/components/main/MemberManagement.vue';
+    import BoardMain from '@c/main/BoardMain.vue';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { inject, onMounted, ref } from 'vue';
     import $api from '@api';