diff --git a/public/img/main-category-img/main-300201.png b/public/img/main-category-img/main-300201.png
new file mode 100644
index 0000000..9e99e0f
Binary files /dev/null and b/public/img/main-category-img/main-300201.png differ
diff --git a/public/img/main-category-img/main-300202.png b/public/img/main-category-img/main-300202.png
new file mode 100644
index 0000000..aaf6a0e
Binary files /dev/null and b/public/img/main-category-img/main-300202.png differ
diff --git a/public/img/main-category-img/main-300203.png b/public/img/main-category-img/main-300203.png
new file mode 100644
index 0000000..4d53c85
Binary files /dev/null and b/public/img/main-category-img/main-300203.png differ
diff --git a/public/img/main-category-img/main-300204.png b/public/img/main-category-img/main-300204.png
new file mode 100644
index 0000000..89a2bb3
Binary files /dev/null and b/public/img/main-category-img/main-300204.png differ
diff --git a/public/img/main-category-img/main-300205.png b/public/img/main-category-img/main-300205.png
new file mode 100644
index 0000000..26c60d9
Binary files /dev/null and b/public/img/main-category-img/main-300205.png differ
diff --git a/public/img/main-category-img/main-300206.png b/public/img/main-category-img/main-300206.png
new file mode 100644
index 0000000..0b1a5c7
Binary files /dev/null and b/public/img/main-category-img/main-300206.png differ
diff --git a/src/common/common.js b/src/common/common.js
index 24dcf2d..89a0f7a 100644
--- a/src/common/common.js
+++ b/src/common/common.js
@@ -47,11 +47,11 @@ const common = {
      *
      * @param {string} dateStr
      * @return
-     * 1. Date type 인 경우 예시 '25-02-24 12:02'
+     * 1. Date type 인 경우 예시 '2025-02-24 12:02'
      * 2. Date type 이 아닌 경우 입력값 리턴
      *
      */
-    dateFormatter(dateStr) {
+    dateFormatter(dateStr, type = null) {
         const date = new Date(dateStr);
         const dateCheck = date.getTime();
 
@@ -59,13 +59,26 @@ const common = {
             return dateStr;
         } else {
             const { year, month, day, hours, minutes } = this.formatDateTime(date);
-            return `${year}-${month}-${day} ${hours}:${minutes}`;
+            let callback = '';
+
+            if (type == 'YMD') {
+                callback = `${year}-${month}-${day}`;
+            } else if (type == 'MD') {
+                callback = `${month}-${day}`;
+            } else {
+                callback = `${year}-${month}-${day} ${hours}:${minutes}`;
+            }
+
+            return callback;
         }
     },
 
-    formatDateTime(date) {
-        const zeroFormat = num => (num < 10 ? `0${num}` : num);
+    formatDateTime(dateObj) {
+        const date = new Date(dateObj);
+        const dateCheck = date.getTime();
+        if (isNaN(dateCheck)) return dateObj;
 
+        const zeroFormat = num => (num < 10 ? `0${num}` : num);
         return {
             year: date.getFullYear(),
             month: zeroFormat(date.getMonth() + 1),
@@ -76,6 +89,34 @@ const common = {
         };
     },
 
+    // 오늘 날짜시간 조회
+    getToday() {
+        const date = new Date();
+        return {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+        };
+    },
+
+    // 해당 월, 일에 맞는 목록 필터링
+    filterTargetByDate(target, key, month, day) {
+        if (!Array.isArray(target) || target.length === 0) return [];
+
+        return [...target].filter(item => {
+            if (!item[key]) return false;
+
+            const date = new Date(item[key]);
+            const MatchingMonth = date.getMonth() + 1 === parseInt(month, 10);
+            const MatchingDay = date.getDate() === parseInt(day, 10);
+
+            return MatchingMonth && MatchingDay;
+        });
+    },
+
     /**
      * 빈값 확인
      *
@@ -83,9 +124,17 @@ const common = {
      * @returns
      */
     isNotEmpty(obj) {
-        if (obj === null || obj === undefined) return false;
-        if (typeof obj === 'string' && obj.trim() === '') return false;
-        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) return false;
+        if (obj === null || obj === undefined) {
+            return false;
+        }
+
+        if (typeof obj === 'string' && obj.trim() === '') {
+            return false;
+        }
+
+        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) {
+            return false;
+        }
 
         return true;
     },
@@ -139,6 +188,17 @@ const common = {
     showImage(event) {
         return (event.target.style.visibility = 'visible');
     },
+
+    addHyphenToPhoneNumber(phoneNum) {
+        const phoneNumber = phoneNum;
+        const length = phoneNumber.length;
+
+        if (length >= 9) {
+            return phoneNumber.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+        } else {
+            return phoneNum;
+        }
+    },
 };
 
 export default {
diff --git a/src/components/main/EventModal.vue b/src/components/main/EventModal.vue
new file mode 100644
index 0000000..82be55a
--- /dev/null
+++ b/src/components/main/EventModal.vue
@@ -0,0 +1,201 @@
+<template>
+    <div class="event-modal position-fixed bg-white shadow rounded" :style="modalStyle">
+        <!-- 이벤트 선택 화면 -->
+        <div v-if="!selectedEventType" class="d-flex flex-wrap gap-2 p-2">
+            <div v-for="event in eventTypes" :key="event.code" class="event-icon-wrapper position-relative">
+                <img
+                    :src="`${baseUrl}img/main-category-img/main-${event.code}.png`"
+                    class="event-icon-select"
+                    style="width: 25px; height: 25px; cursor: pointer"
+                    @click="handleEventClick(event)"
+                />
+                <!-- X 표시 수정 -->
+                <span v-if="isEventExists(event.type)" class="cancel-mark"> × </span>
+            </div>
+        </div>
+
+        <!-- 입력 폼 화면 -->
+        <div v-else class="p-2" style="min-width: 200px">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <small class="text-muted">{{ getEventTitle(selectedEventType) }}</small>
+                <button class="btn-close btn-close-sm" style="font-size: 8px" @click="resetForm"></button>
+            </div>
+            <div class="mb-2">
+                <input
+                    type="text"
+                    class="form-control form-control-sm py-1"
+                    style="height: 25px; font-size: 12px"
+                    placeholder="장소"
+                    v-model="eventPlace"
+                />
+            </div>
+            <div class="mb-2">
+                <input type="time" class="form-control form-control-sm py-1" style="height: 25px; font-size: 12px" v-model="eventTime" />
+            </div>
+            <div class="text-end">
+                <button class="btn btn-primary btn-sm py-1" style="font-size: 12px; height: 25px; line-height: 1" @click="handleSubmit">
+                    등록
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ref, computed } from 'vue';
+
+    const props = defineProps({
+        position: {
+            type: Object,
+            required: true,
+            default: () => ({ x: 0, y: 0 }),
+        },
+        selectedDate: {
+            type: String,
+            required: true,
+        },
+        baseUrl: {
+            type: String,
+            required: true,
+        },
+        dateEvents: {
+            type: Array,
+        },
+    });
+
+    const emit = defineEmits(['select', 'delete', 'insert']);
+
+    // 폼 관련 상태
+    const selectedEventType = ref(null);
+    const eventPlace = ref('');
+    const eventTime = ref('');
+
+    const eventTypes = [
+        { type: 'birthdayParty', code: '300203', title: '생일파티' },
+        { type: 'dinner', code: '300204', title: '회식' },
+        { type: 'teaTime', code: '300205', title: '티타임' },
+        { type: 'workshop', code: '300206', title: '워크샵' },
+    ];
+
+    const getEventTitle = type => {
+        return eventTypes.find(event => event.type === type)?.title || '';
+    };
+
+    const isEventExists = type => {
+        return props.dateEvents?.some(event => event.type === type);
+    };
+
+    const handleEventClick = event => {
+        if (isEventExists(event.type)) {
+            if (confirm('이벤트를 취소하시겠습니까?')) {
+                emit('delete', {
+                    date: props.selectedDate,
+                    code: event.code,
+                    title: event.title,
+                });
+            }
+        } else {
+            selectedEventType.value = event.code;
+        }
+    };
+
+    const handleSubmit = () => {
+        if (!eventPlace.value || !eventTime.value) {
+            alert('장소와 시간을 모두 입력해주세요');
+            return;
+        }
+
+        emit('insert', {
+            date: props.selectedDate,
+            code: selectedEventType.value,
+            title: getEventTitle(selectedEventType.value),
+            place: eventPlace.value,
+            time: eventTime.value,
+        });
+    };
+
+    const resetForm = () => {
+        selectedEventType.value = null;
+        eventPlace.value = '';
+        eventTime.value = '';
+    };
+
+    // 모달 스타일 계산을 computed로 변경
+    const modalStyle = computed(() => {
+        const modalWidth = 200; // 모달의 예상 너비
+        const modalHeight = 150; // 모달의 예상 높이
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        let x = props.position?.x || 0;
+        let y = props.position?.y || 0;
+
+        // 모달이 뷰포트를 벗어나지 않도록 조정
+        if (x + modalWidth > viewportWidth) {
+            x = viewportWidth - modalWidth - 10;
+        }
+        if (x < 0) {
+            x = 10;
+        }
+        if (y + modalHeight > viewportHeight) {
+            y = viewportHeight - modalHeight - 10;
+        }
+        if (y < 0) {
+            y = 10;
+        }
+
+        return {
+            left: `${x}px`,
+            top: `${y}px`,
+            zIndex: 1050,
+            maxWidth: '90vw', // 뷰포트 너비의 90%를 넘지 않도록
+            maxHeight: '90vh', // 뷰포트 높이의 90%를 넘지 않도록
+        };
+    });
+</script>
+
+<style scoped>
+    .event-icon-wrapper {
+        position: relative;
+        display: inline-block;
+    }
+
+    .event-icon-select {
+        transition: transform 0.2s;
+    }
+
+    .event-icon-select:hover {
+        transform: scale(1.1);
+    }
+
+    .cancel-mark {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        width: 16px;
+        height: 16px;
+        background-color: #dc3545;
+        color: white;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .event-modal {
+        min-width: 120px;
+        max-width: 300px;
+        overflow: auto;
+    }
+
+    /* 작은 화면에서의 스타일 */
+    @media (max-width: 576px) {
+        .event-modal {
+            min-width: 100px;
+            font-size: 0.9em;
+        }
+    }
+</style>
diff --git a/src/components/main/MainEventCalendar.vue b/src/components/main/MainEventCalendar.vue
new file mode 100644
index 0000000..bc06eb1
--- /dev/null
+++ b/src/components/main/MainEventCalendar.vue
@@ -0,0 +1,585 @@
+<template>
+    <div class="card app-calendar-wrapper">
+        <div class="row g-0">
+            <div class="col-3 border-end text-center" id="app-calendar-sidebar">
+                <div class="card-body">
+                    <img
+                        v-if="user"
+                        :src="`${baseUrl}upload/img/profile/${user.profile}`"
+                        alt="Profile Image"
+                        class="w-px-50 h-px-50 rounded-circle"
+                        @error="$event.target.src = '/img/icons/icon.png'"
+                    />
+                    <p class="mt-2 fw-bold">
+                        {{ user.name }}
+                    </p>
+
+                    <CommuterBtn :userId="user.id" :checkedInProject="checkedInProject || {}" ref="workTimeComponentRef" />
+
+                    <MainEventList
+                        :categoryList="categoryList"
+                        :baseUrl="baseUrl"
+                        :birthdayList="birthdayList"
+                        :vacationList="vacationList"
+                        :birthdayPartyList="birthdayPartyList"
+                        :dinnerList="dinnerList"
+                        :teaTimeList="teaTimeList"
+                        :workShopList="workShopList"
+                    />
+                </div>
+            </div>
+
+            <div class="col app-calendar-content">
+                <div class="card shadow-none border-0">
+                    <div class="card-body">
+                        <full-calendar
+                            ref="fullCalendarRef"
+                            :events="calendarEvents"
+                            :options="calendarOptions"
+                            defaultView="dayGridMonth"
+                            class="flatpickr-calendar-only"
+                        >
+                        </full-calendar>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <EventModal
+        v-if="showModal"
+        :position="modalPosition"
+        :selected-date="selectedDate"
+        :base-url="baseUrl"
+        :date-events="currentDateEvents"
+        @select="handleEventSelect"
+        @delete="handleEventDelete"
+        @insert="handleEventInsert"
+        @close="handleCloseModal"
+    />
+</template>
+
+<script setup>
+    import FullCalendar from '@fullcalendar/vue3';
+    import dayGridPlugin from '@fullcalendar/daygrid';
+    import interactionPlugin from '@fullcalendar/interaction';
+    import { inject, onMounted, reactive, ref, watch } from 'vue';
+    import $api from '@api';
+    import 'flatpickr/dist/flatpickr.min.css';
+    import '@/assets/css/app-calendar.css';
+    import { fetchHolidays } from '@c/calendar/holiday';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { useProjectStore } from '@/stores/useProjectStore';
+    import CommuterBtn from '@c/commuters/CommuterBtn.vue';
+    import MainEventList from '@c/main/MainEventList.vue';
+    import EventModal from '@c/main/EventModal.vue';
+    import { useToastStore } from '@s/toastStore';
+
+    const baseUrl = import.meta.env.VITE_DOMAIN;
+    const user = ref({});
+    const userStore = useUserInfoStore();
+    const projectStore = useProjectStore();
+
+    const dayjs = inject('dayjs');
+    const fullCalendarRef = ref(null);
+    const workTimeComponentRef = ref(null);
+    const calendarEvents = ref([]);
+
+    const selectedProject = ref(null);
+    const checkedInProject = ref(null);
+
+    // 이벤트 모달 관련
+    const showModal = ref(false);
+    const modalPosition = ref({ x: 0, y: 0 });
+    const selectedDate = ref('');
+
+    // 공통 함수
+    const $common = inject('common');
+    const toastStore = useToastStore();
+
+    // 롱프레스 관련 변수 추가
+    const pressTimer = ref(null);
+    const longPressDelay = 500; // 0.5초
+
+    // // 출퇴근 컴포넌트 이벤트 핸들러
+    // const handleWorkTimeUpdate = () => {
+    //     todaysCommuter();
+    //     //loadCommuters();
+    // };
+
+    // const handleLeaveTimeUpdate = () => {
+    //     todaysCommuter();
+    // };
+
+    // // 오늘 출근 모든 사용자 조회
+    // const todaysCommuter = async () => {
+    //     const res = await $api.get(`commuters/todays`);
+    //     if (res.status === 200) {
+    //         commuters.value = res.data.data;
+    //     }
+    // };
+
+    /************* category ***************/
+
+    // 이벤트 카테고리 데이터 로딩
+    const categoryList = ref([]);
+    const fetchCategoryList = async () => {
+        const { data } = await $api.get('main/category');
+        if (data) categoryList.value = [...data.data.filter(categoryInfo => categoryInfo.CMNCODODR != 0)];
+    };
+
+    /************* init ***************/
+    const monthBirthdayList = ref([]);
+    const monthVacationList = ref([]);
+    const monthBirthdayPartyList = ref([]);
+    const monthDinnerList = ref([]);
+    const monthTeaTimeList = ref([]);
+    const monthWorkShopList = ref([]);
+
+    const birthdayList = ref([]);
+    const vacationList = ref([]);
+    const birthdayPartyList = ref([]);
+    const dinnerList = ref([]);
+    const teaTimeList = ref([]);
+    const workShopList = ref([]);
+
+    const currentDateEvents = ref([]);
+
+    // 생일자, 휴가자, 이벤트 일정 조회
+    const fetchEventList = async param => {
+        const { data } = await $api.get(`main/eventList?${param}`);
+        const res = data?.data;
+
+        // 기존의 공휴일 이벤트는 유지
+        const holidayEvents = calendarEvents.value.filter(event => event.classNames?.includes('holiday-event'));
+        calendarEvents.value = [...holidayEvents];
+
+        // 생일자
+        if (res?.memberBirthdayList?.length) {
+            monthBirthdayList.value = [...res.memberBirthdayList];
+            res.memberBirthdayList.forEach(member => {
+                addEvent($common.dateFormatter(member.MEMBERBTH, 'YMD'), 'birthday', `${member.MEMBERNAM}`);
+            });
+        }
+
+        // 휴가자
+        if (res?.memberVacationList?.length) {
+            monthVacationList.value = [...res.memberVacationList];
+            res.memberVacationList.forEach(member => {
+                addEvent($common.dateFormatter(member.LOCVACUDT, 'YMD'), 'vacation', `${member.MEMBERNAM}`);
+            });
+        }
+
+        // 초기화
+        monthBirthdayPartyList.value = [];
+        monthDinnerList.value = [];
+        monthTeaTimeList.value = [];
+        monthTeaTimeList.value = [];
+
+        if (res?.eventList?.length) {
+            res.eventList.forEach(item => {
+                switch (item.CMNCODVAL) {
+                    case 300203:
+                        monthBirthdayPartyList.value = [...monthBirthdayPartyList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'birthdayParty', '생일파티');
+                        break;
+
+                    case 300204:
+                        monthDinnerList.value = [...monthDinnerList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'dinner', '회식');
+                        break;
+
+                    case 300205:
+                        monthTeaTimeList.value = [...monthTeaTimeList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'teaTime', '티타임');
+                        break;
+
+                    case 300206:
+                        monthWorkShopList.value = [...monthWorkShopList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'workshop', '워크샵');
+                        break;
+                }
+            });
+        }
+    };
+
+    // 달력에 이벤트 데이터 추가
+    const addEvent = (date, type, title) => {
+        // 생일의 경우 달력의 현재 년도로 변경하여 처리
+        if (type === 'birthday') {
+            const calendarApi = fullCalendarRef.value?.getApi();
+
+            if (calendarApi) {
+                const calendarDate = calendarApi.currentData.currentDate;
+                const { year } = $common.formatDateTime(new Date(calendarDate));
+                const birthDate = $common.dateFormatter(date, 'MD');
+                date = `${year}-${birthDate}`;
+            }
+        }
+
+        // 같은 날짜와 타입의 이벤트가 이미 있는지 확인
+        const existingEvent = calendarEvents.value.find(
+            event => $common.dateFormatter(event.start, 'MD') === $common.dateFormatter(date, 'MD') && event.type == type,
+        );
+
+        // 없는 경우에만 추가
+        if (!existingEvent) {
+            calendarEvents.value.push({
+                start: date,
+                type: type,
+                title: title,
+                classNames: [`${type}-event`],
+            });
+        }
+    };
+
+    // 해당일 기준 이벤트 리스트 필터링
+    const useFilterEventList = (month, day) => {
+        // 생일자
+        if (monthBirthdayList.value) {
+            birthdayList.value = $common.filterTargetByDate(monthBirthdayList.value, 'MEMBERBTH', month, day);
+        }
+
+        // 휴가자
+        if (monthVacationList.value) {
+            vacationList.value = $common.filterTargetByDate(monthVacationList.value, 'LOCVACUDT', month, day);
+        }
+
+        // 생일파티
+        if (monthBirthdayPartyList.value) {
+            birthdayPartyList.value = $common.filterTargetByDate(monthBirthdayPartyList.value, 'LOCEVTTME', month, day);
+        }
+
+        // 회식
+        if (monthDinnerList.value) {
+            dinnerList.value = $common.filterTargetByDate(monthDinnerList.value, 'LOCEVTTME', month, day);
+        }
+
+        // 티타임
+        if (monthTeaTimeList.value) {
+            teaTimeList.value = $common.filterTargetByDate(monthTeaTimeList.value, 'LOCEVTTME', month, day);
+        }
+
+        // 워크샵
+        if (monthWorkShopList.value) {
+            workShopList.value = $common.filterTargetByDate(monthWorkShopList.value, 'LOCEVTTME', month, day);
+        }
+    };
+
+    // 캘린더 데이터 가져오기
+    const fetchData = async () => {
+        // FullCalendar API 인스턴스 가져오기
+        const calendarApi = fullCalendarRef.value?.getApi();
+        if (!calendarApi) return;
+
+        const date = calendarApi.currentData.currentDate;
+        const { year, month } = $common.formatDateTime(new Date(date));
+
+        try {
+            // 현재 표시 중인 월의 공휴일 정보 가져오기
+            const holidayEvents = await fetchHolidays(year, month);
+            calendarEvents.value = [...holidayEvents]; // 공휴일 정보로 초기화
+
+            // 이벤트 데이터 가져오기
+            const param = new URLSearchParams();
+            param.append('year', year);
+            param.append('month', month);
+            param.append('day', '1'); // 해당 월의 첫날
+
+            await fetchEventList(param);
+        } catch (error) {
+            console.error('공휴일 정보 로딩 실패:', error);
+        }
+    };
+
+    // 캘린더 이동 함수 (이전, 다음, 오늘)
+    const moveCalendar = async (value = 0) => {
+        const calendarApi = fullCalendarRef.value?.getApi();
+
+        if (value === 1) {
+            calendarApi.prev(); // 이전 달로 이동
+        } else if (value === 2) {
+            calendarApi.next(); // 다음 달로 이동
+        } else if (value === 3) {
+            calendarApi.today(); // 오늘 날짜로 이동
+        }
+
+        await fetchData();
+    };
+
+    // 날짜 선택 가능 여부를 확인하는 공통 함수
+    const isSelectableDate = date => {
+        const checkDate = dayjs(date);
+        const isWeekend = checkDate.day() === 0 || checkDate.day() === 6;
+        // 공휴일 체크
+        const isHoliday = calendarEvents.value.some(
+            event =>
+                event.classNames?.includes('holiday-event') && dayjs(event.start).format('YYYY-MM-DD') === checkDate.format('YYYY-MM-DD'),
+        );
+
+        return !isWeekend && !isHoliday;
+    };
+
+    // 날짜 셀 클래스 추가 함수
+    const getCellClassNames = arg => {
+        const cellDate = dayjs(arg.date);
+        const classes = [];
+
+        // 선택 불가능한 날짜(과거, 주말, 공휴일)에 동일한 클래스 추가
+        if (!isSelectableDate(cellDate)) {
+            classes.push('fc-day-sat-sun');
+        }
+
+        return classes;
+    };
+
+    // 날짜 클릭 이벤트 핸들러
+    const handleDateClick = info => {
+        const { month, day } = $common.formatDateTime(new Date(info.dateStr));
+        useFilterEventList(month, day);
+    };
+
+    // 이벤트 모달 핸들러
+    const handleMouseDown = (date, jsEvent) => {
+        if (showModal.value) showModal.value = false;
+
+        // 해당 날짜의 이벤트 필터링
+        const dateEvents = calendarEvents.value.filter(
+            event => $common.dateFormatter(event.start, 'YMD') === $common.dateFormatter(date, 'YMD'),
+        );
+
+        pressTimer.value = setTimeout(() => {
+            modalPosition.value = {
+                x: jsEvent.clientX,
+                y: jsEvent.clientY,
+            };
+
+            selectedDate.value = date;
+            currentDateEvents.value = dateEvents;
+            showModal.value = true;
+            pressTimer.value = null;
+        }, longPressDelay);
+    };
+
+    // 이벤트 모달 외부 클릭 시 닫힘
+    const handleMouseUp = () => {
+        if (pressTimer.value) {
+            clearTimeout(pressTimer.value);
+            pressTimer.value = null;
+        }
+    };
+
+    // 이벤트 삭제 api
+    const toggleEvent = async (date, code, title) => {
+        const { data } = await $api.post('main/toggleEvent', {
+            date: date,
+            code: code,
+            title: title,
+        });
+
+        if (data?.code === 200) toastStore.onToast(data.message);
+
+        const { year, month, day } = $common.formatDateTime(new Date(date));
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        await fetchEventList(param);
+        useFilterEventList(month, year);
+    };
+
+    // 이벤트 추가 api
+    const insertEvent = async (date, code, title, place, time) => {
+        const dateTime = $common.dateFormatter(`${date} ${time}`);
+        const { data } = await $api.post('main/inserEvent', {
+            date: dateTime,
+            code: code,
+            title: title,
+            place: place,
+        });
+
+        if (data?.code === 200) toastStore.onToast(data.message);
+
+        const { year, month, day } = $common.formatDateTime(new Date(date));
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        await fetchEventList(param);
+        useFilterEventList(month, year);
+    };
+
+    // 이벤트 선택 핸들러
+    const handleEventSelect = data => {
+        toggleEvent(data.date, data.code, data.title);
+        showModal.value = false;
+    };
+
+    const handleEventInsert = data => {
+        insertEvent(data.date, data.code, data.title, data.place, data.time);
+        showModal.value = false;
+    };
+
+    const handleEventDelete = data => {
+        toggleEvent(data.date, data.code, data.title);
+        showModal.value = false;
+    };
+
+    // 이벤트 모달 닫기
+    const handleCloseModal = () => {
+        showModal.value = false;
+    };
+
+    // 달력 이벤트 아이콘 표시 함수
+    const handleEventContent = item => {
+        if (!item.event) return null;
+
+        // 공휴일인 경우 텍스트로 표시
+        if (item.event.classNames?.includes('holiday-event')) {
+            return {
+                html: `<div class="holiday-text" style="color: white;">${item.event.title}</div>`,
+            };
+        }
+
+        // 현재 이벤트의 타입만 확인
+        const eventType = item.event.extendedProps.type;
+        if (!eventType) return null;
+
+        let iconCode = '';
+        switch (eventType) {
+            case 'birthday':
+                iconCode = '300201';
+                break;
+            case 'vacation':
+                iconCode = '300202';
+                break;
+            case 'birthdayParty':
+                iconCode = '300203';
+                break;
+            case 'dinner':
+                iconCode = '300204';
+                break;
+            case 'teaTime':
+                iconCode = '300205';
+                break;
+            case 'workshop':
+                iconCode = '300206';
+                break;
+            default:
+                return null;
+        }
+
+        return {
+            html: `<img src="${baseUrl}img/main-category-img/main-${iconCode}.png" class="calendar-event-icon" style="width: 20px; height: 20px; margin: 2px;" />`,
+        };
+    };
+
+    // 캘린더 옵션 설정
+    const calendarOptions = reactive({
+        plugins: [dayGridPlugin, interactionPlugin],
+        initialView: 'dayGridMonth',
+        headerToolbar: {
+            left: 'today',
+            center: 'title',
+            right: 'prev,next',
+        },
+        locale: 'kr',
+        events: calendarEvents,
+        eventOrder: 'sortIdx',
+        contentHeight: 'auto',
+        eventContent: handleEventContent,
+        selectable: true,
+        selectAllow: selectInfo => isSelectableDate(selectInfo.start),
+        dateClick: handleDateClick,
+        dayCellDidMount: arg => {
+            const dateCell = arg.el;
+
+            // 마우스 홀드시 이벤트 모달
+            dateCell.addEventListener('mousedown', e => {
+                const date = $common.dateFormatter(arg.date, 'YMD');
+                handleMouseDown(date, e);
+            });
+            dateCell.addEventListener('mouseup', handleMouseUp);
+            dateCell.addEventListener('mouseleave', handleMouseUp);
+        },
+        dayCellClassNames: getCellClassNames,
+        unselectAuto: true,
+        droppable: false,
+        eventDisplay: 'block',
+        customButtons: {
+            prev: {
+                text: 'PREV',
+                click: () => moveCalendar(1),
+            },
+            today: {
+                text: 'TODAY',
+                click: () => moveCalendar(3),
+            },
+            next: {
+                text: 'NEXT',
+                click: () => moveCalendar(2),
+            },
+        },
+    });
+
+    // 달력 뷰 변경 감지 (월 변경 시 데이터 다시 가져오기)
+    watch(
+        () => fullCalendarRef.value?.getApi().currentData.viewTitle,
+        async () => {
+            await fetchData();
+        },
+    );
+
+    onMounted(async () => {
+        await userStore.userInfo();
+        user.value = userStore.user;
+
+        // 저장된 선택 프로젝트 가져오기
+        const storedProject = projectStore.getSelectedProject();
+        if (storedProject) {
+            selectedProject.value = storedProject.PROJCTSEQ;
+            checkedInProject.value = storedProject;
+        }
+
+        // 오늘 기준 데이터 호출
+        const { year, month, day } = $common.getToday();
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        // 이벤트 카테고리 호출
+        await fetchCategoryList();
+        await fetchEventList(param);
+        useFilterEventList(month, day);
+
+        // 이벤트모달 외부 클릭 감지
+        // document.addEventListener('click', e => {
+        //     if (showModal.value && !e.target.closest('.event-modal') && !e.target.closest('.fc-daygrid-day')) {
+        //         showModal.value = false;
+        //     }
+        // });
+    });
+</script>
+<style>
+    .fc-h-event {
+        background-color: transparent;
+    }
+
+    .event-modal {
+        padding: 8px;
+        border: 1px solid #ddd;
+    }
+
+    .event-icon-select:hover {
+        transform: scale(1.1);
+        transition: transform 0.2s;
+    }
+
+    /* 이벤트 모달 노출 시 텍스트 선택 방지 */
+    .fc-daygrid-day {
+        user-select: none;
+    }
+</style>
diff --git a/src/components/main/MainEventList.vue b/src/components/main/MainEventList.vue
new file mode 100644
index 0000000..05fcbfe
--- /dev/null
+++ b/src/components/main/MainEventList.vue
@@ -0,0 +1,122 @@
+<template>
+    <div class="">
+        <template v-for="category in categoryList" :key="category.CMNCODVAL">
+            <div
+                v-if="
+                    (category.CMNCODVAL === 300201 && birthdayList?.length) ||
+                    (category.CMNCODVAL === 300202 && vacationList?.length) ||
+                    (category.CMNCODVAL === 300203 && birthdayPartyList?.length) ||
+                    (category.CMNCODVAL === 300204 && dinnerList?.length) ||
+                    (category.CMNCODVAL === 300205 && teaTimeList?.length) ||
+                    (category.CMNCODVAL === 300206 && workShopList?.length)
+                "
+                class="border border-2 mt-3 card p-2"
+            >
+                <div class="row g-2 position-relative">
+                    <div class="col-3 mx-0 px-0">
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}img/main-category-img/main-${category.CMNCODVAL}.png`"
+                                :alt="`${category.CMNCODNAM}`"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+                    </div>
+                    <div class="col-9 mx-0 px-0">
+                        <template v-if="category.CMNCODVAL === 300201">
+                            <MainMemberProfile :members="birthdayList" :baseUrl="baseUrl" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300202">
+                            <MainMemberProfile :members="vacationList" :baseUrl="baseUrl" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300203">
+                            <div>
+                                {{ birthdayPartyList[0].LOCEVTPLC }}
+                            </div>
+                            <div>
+                                {{ $common.dateFormatter(birthdayPartyList[0].LOCEVTTME) }}
+                            </div>
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300204">
+                            <div>
+                                {{ dinnerList[0].LOCEVTPLC }}
+                            </div>
+                            <div>
+                                {{ $common.dateFormatter(dinnerList[0].LOCEVTTME) }}
+                            </div>
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300205">
+                            <div>
+                                {{ teaTimeList[0].LOCEVTPLC }}
+                            </div>
+                            <div>
+                                {{ $common.dateFormatter(teaTimeList[0].LOCEVTTME) }}
+                            </div>
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300206">
+                            <div>
+                                {{ workShopList[0].LOCEVTPLC }}
+                            </div>
+                            <div>
+                                {{ $common.dateFormatter(workShopList[0].LOCEVTTME) }}
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+    import { defineEmits } from 'vue';
+    import MainMemberProfile from '@c/main/MainMemberProfile.vue';
+
+    const props = defineProps({
+        project: {
+            type: Object,
+            required: false,
+        },
+        categoryList: {
+            type: Array,
+        },
+        commuters: {
+            type: Array,
+            required: false,
+        },
+        baseUrl: {
+            type: String,
+            required: false,
+        },
+        user: {
+            type: Object,
+            required: false,
+        },
+        selectedProject: {
+            type: Number,
+            default: null,
+        },
+        checkedInProject: {
+            type: Object,
+            default: null,
+        },
+        birthdayList: {
+            type: Array,
+        },
+        vacationList: {
+            type: Array,
+        },
+        birthdayPartyList: {
+            type: Array,
+        },
+        dinnerList: {
+            type: Array,
+        },
+        teaTimeList: {
+            type: Array,
+        },
+        workShopList: {
+            type: Array,
+        },
+    });
+</script>
diff --git a/src/components/main/MainMemberProfile.vue b/src/components/main/MainMemberProfile.vue
new file mode 100644
index 0000000..357b4b3
--- /dev/null
+++ b/src/components/main/MainMemberProfile.vue
@@ -0,0 +1,32 @@
+<template>
+    <div class="ms-2">
+        <ul class="row gx-1 mb-0 list-inline d-flex align-items-center">
+            <li class="col-4 me-0" v-for="(member, index) in members" :key="index">
+                <div class="ratio ratio-1x1 mb-0 profile-list">
+                    <img
+                        :src="`${baseUrl}upload/img/profile/${member.MEMBERPRF}`"
+                        :style="`border-color: ${member.usercolor} !important;`"
+                        alt="User Profile"
+                        class="rounded-circle border border-2"
+                        @error="$event.target.src = '/img/icons/icon.png'"
+                    />
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            members: {
+                type: Array,
+                required: true,
+            },
+            baseUrl: {
+                type: String,
+                required: true,
+            },
+        },
+    };
+</script>
diff --git a/src/components/main/MemberManagement.vue b/src/components/main/MemberManagement.vue
new file mode 100644
index 0000000..f2be48a
--- /dev/null
+++ b/src/components/main/MemberManagement.vue
@@ -0,0 +1,63 @@
+<template>
+    <div v-if="memberList" class="card mt-2 mb-3 shadow-sm border">
+        <div class="row g-0">
+            <div class="card-body">
+                <div class="d-flex justify-content-between">
+                    <h5 class="card-title fw-bold">사원 등록 관리</h5>
+                </div>
+                <div class="g-2 card">
+                    <div v-for="member in memberList" :key="member.MEMBERSEQ" class="row card-body">
+                        <div class="col-2">
+                            <img
+                                :src="`upload/img/profile/`"
+                                alt="Profile Image"
+                                class="img-fluid"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+                        <div class="col-7">
+                            <!-- 날짜 -->
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <div class="">{{ member.MEMBERNAM }}</div>
+                            </div>
+                            <!-- 참여자 -->
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <i class="bx bxs-envelope"></i>
+                                <div class="ms-2">{{ member.MEMBERIDS }}@local-host.co.kr</div>
+                            </div>
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <i class="bx bxs-phone"></i>
+                                <div class="ms-2">{{ $common.addHyphenToPhoneNumber(member.MEMBERTEL) }}</div>
+                            </div>
+                            <div class="d-flex flex-sm-row align-items-center pb-2">
+                                <i class="bx bx-calendar"></i>
+                                <div class="ms-2">{{ $common.dateFormatter(member.MEMBERRDT) }}</div>
+                            </div>
+                        </div>
+                        <div class="col-3">
+                            <div class="align-items-center">
+                                <label class="switch"><input type="checkbox" checked="" /><span class="slider round"></span></label>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { inject, onMounted, ref } from 'vue';
+    import $api from '@api';
+
+    const memberList = ref([]);
+
+    const fetchRegisterMemberList = async () => {
+        const { data } = await $api.get('main/registerMemberList');
+        if (data?.data) memberList.value = data.data;
+    };
+
+    onMounted(async () => {
+        await fetchRegisterMemberList();
+    });
+</script>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 0760a82..8a42f0f 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -1,1192 +1,26 @@
 <template>
-    <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="row">
-            <div class="col-xxl-8 mb-6 order-0">
-                <Sample-input />
-
-                <div class="card">
-                    <div class="d-flex align-items-start row">
-                        <div class="col-sm-7">
-                            <div class="card-body">
-                                <h5 class="card-title text-primary mb-3">Congratulations John! 🎉</h5>
-                                <p class="mb-6">You have done 72% more sales today.<br />Check your new badge in your profile.</p>
-
-                                <a href="javascript:;" class="btn btn-sm btn-label-primary">View Badges</a>
-                            </div>
-                        </div>
-                        <div class="col-sm-5 text-center text-sm-left">
-                            <div class="card-body pb-0 px-0 px-md-6">
-                                <img
-                                    src="/img/illustrations/man-with-laptop.png"
-                                    height="175"
-                                    class="scaleX-n1-rtl"
-                                    alt="View Badge User"
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="col-xxl-4 col-lg-12 col-md-4 order-1">
-                <div class="row">
-                    <div class="col-lg-6 col-md-12 col-6 mb-6">
-                        <div class="card h-100">
-                            <div class="card-body pb-4">
-                                <span class="d-block fw-medium mb-1">Order</span>
-                                <h4 class="card-title mb-0">276k</h4>
-                            </div>
-                            <div id="orderChart" class="pb-3"></div>
-                        </div>
-                    </div>
-                    <div class="col-lg-6 col-md-12 col-6 mb-6">
-                        <div class="card h-100">
-                            <div class="card-body">
-                                <div class="card-title d-flex align-items-start justify-content-between mb-4">
-                                    <div class="avatar flex-shrink-0">
-                                        <img src="/img/icons/unicons/wallet-info.png" alt="wallet info" class="rounded" />
-                                    </div>
-                                    <div class="dropdown">
-                                        <button
-                                            class="btn p-0"
-                                            type="button"
-                                            id="cardOpt6"
-                                            data-bs-toggle="dropdown"
-                                            aria-haspopup="true"
-                                            aria-expanded="false"
-                                        >
-                                            <i class="bx bx-dots-vertical-rounded text-muted"></i>
-                                        </button>
-                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt6">
-                                            <a class="dropdown-item" href="javascript:void(0);">View More</a>
-                                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <p class="mb-1">Sales</p>
-                                <h4 class="card-title mb-3">$4,679</h4>
-                                <small class="text-success fw-medium"><i class="bx bx-up-arrow-alt"></i> +28.42%</small>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!-- Total Revenue -->
-            <div class="col-12 col-xxl-8 order-2 order-md-3 order-xxl-2 mb-6">
-                <div class="card">
-                    <div class="row row-bordered g-0">
-                        <div class="col-lg-8">
-                            <div class="card-header d-flex align-items-center justify-content-between">
-                                <div class="card-title mb-0">
-                                    <h5 class="m-0 me-2">Total Revenue</h5>
-                                </div>
-                                <div class="dropdown">
-                                    <button
-                                        class="btn p-0"
-                                        type="button"
-                                        id="totalRevenue"
-                                        data-bs-toggle="dropdown"
-                                        aria-haspopup="true"
-                                        aria-expanded="false"
-                                    >
-                                        <i class="bx bx-dots-vertical-rounded bx-lg text-muted"></i>
-                                    </button>
-                                    <div class="dropdown-menu dropdown-menu-end" aria-labelledby="totalRevenue">
-                                        <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                                        <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                                        <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div id="totalRevenueChart" class="px-3"></div>
-                        </div>
-                        <div class="col-lg-4 d-flex align-items-center">
-                            <div class="card-body px-xl-9">
-                                <div class="text-center mb-6">
-                                    <div class="btn-group">
-                                        <button type="button" class="btn btn-label-primary">
-                                            2023
-                                            <!-- <script>
-                  document.write(new Date().getFullYear() - 1)
-
-                  </script> -->
-                                        </button>
-                                        <button
-                                            type="button"
-                                            class="btn btn-label-primary dropdown-toggle dropdown-toggle-split"
-                                            data-bs-toggle="dropdown"
-                                            aria-expanded="false"
-                                        >
-                                            <span class="visually-hidden">Toggle Dropdown</span>
-                                        </button>
-                                        <ul class="dropdown-menu">
-                                            <li><a class="dropdown-item" href="javascript:void(0);">2023</a></li>
-                                            <li><a class="dropdown-item" href="javascript:void(0);">2022</a></li>
-                                            <li><a class="dropdown-item" href="javascript:void(0);">2021</a></li>
-                                        </ul>
-                                    </div>
-                                </div>
-
-                                <div id="growthChart"></div>
-                                <div class="text-center fw-medium my-6">62% Company Growth</div>
-
-                                <div class="d-flex gap-3 justify-content-between">
-                                    <div class="d-flex">
-                                        <div class="avatar me-2">
-                                            <span class="avatar-initial rounded-2 bg-label-primary"
-                                                ><i class="bx bx-dollar bx-lg text-primary"></i
-                                            ></span>
-                                        </div>
-                                        <div class="d-flex flex-column">
-                                            <small>
-                                                2024
-                                                <!-- <script>
-                                  document.write(new Date().getFullYear() - 1)
-                                </script> -->
-                                            </small>
-                                            <h6 class="mb-0">$32.5k</h6>
-                                        </div>
-                                    </div>
-                                    <div class="d-flex">
-                                        <div class="avatar me-2">
-                                            <span class="avatar-initial rounded-2 bg-label-info"
-                                                ><i class="bx bx-wallet bx-lg text-info"></i
-                                            ></span>
-                                        </div>
-                                        <div class="d-flex flex-column">
-                                            <small>
-                                                2023
-                                                <!-- <script>
-                                  document.write(new Date().getFullYear() - 2)
-                                </script> -->
-                                            </small>
-                                            <h6 class="mb-0">$41.2k</h6>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--/ Total Revenue -->
-            <div class="col-12 col-md-8 col-lg-12 col-xxl-4 order-3 order-md-2">
-                <div class="row">
-                    <div class="col-6 mb-6">
-                        <div class="card h-100">
-                            <div class="card-body">
-                                <div class="card-title d-flex align-items-start justify-content-between mb-4">
-                                    <div class="avatar flex-shrink-0">
-                                        <img src="/img/icons/unicons/paypal.png" alt="paypal" class="rounded" />
-                                    </div>
-                                    <div class="dropdown">
-                                        <button
-                                            class="btn p-0"
-                                            type="button"
-                                            id="cardOpt4"
-                                            data-bs-toggle="dropdown"
-                                            aria-haspopup="true"
-                                            aria-expanded="false"
-                                        >
-                                            <i class="bx bx-dots-vertical-rounded text-muted"></i>
-                                        </button>
-                                        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="cardOpt4">
-                                            <a class="dropdown-item" href="javascript:void(0);">View More</a>
-                                            <a class="dropdown-item" href="javascript:void(0);">Delete</a>
-                                        </div>
-                                    </div>
-                                </div>
-                                <p class="mb-1">Payments</p>
-                                <h4 class="card-title mb-3">$2,456</h4>
-                                <small class="text-danger fw-medium"><i class="bx bx-down-arrow-alt"></i> -14.82%</small>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-6 mb-6">
-                        <div class="card h-100">
-                            <div class="card-body pb-0">
-                                <span class="d-block fw-medium mb-1">Revenue</span>
-                                <h4 class="card-title mb-0 mb-lg-4">425k</h4>
-                                <div id="revenueChart"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-12 mb-6">
-                        <div class="card">
-                            <div class="card-body">
-                                <div class="d-flex justify-content-between align-items-center flex-sm-row flex-column gap-10">
-                                    <div class="d-flex flex-sm-column flex-row align-items-start justify-content-between">
-                                        <div class="card-title mb-6">
-                                            <h5 class="text-nowrap mb-1">Profile Report</h5>
-                                            <span class="badge bg-label-warning">YEAR 2022</span>
-                                        </div>
-                                        <div class="mt-sm-auto">
-                                            <span class="text-success text-nowrap fw-medium"><i class="bx bx-up-arrow-alt"></i> 68.2%</span>
-                                            <h4 class="mb-0">$84,686k</h4>
-                                        </div>
-                                    </div>
-                                    <div id="profileReportChart"></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="row">
-            <!-- Order Statistics -->
-            <div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
-                <div class="card h-100">
-                    <div class="card-header d-flex justify-content-between">
-                        <div class="card-title mb-0">
-                            <h5 class="mb-1 me-2">Order Statistics</h5>
-                            <p class="card-subtitle">42.82k Total Sales</p>
-                        </div>
-                        <div class="dropdown">
-                            <button
-                                class="btn text-muted p-0"
-                                type="button"
-                                id="orederStatistics"
-                                data-bs-toggle="dropdown"
-                                aria-haspopup="true"
-                                aria-expanded="false"
-                            >
-                                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-                            </button>
-                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="orederStatistics">
-                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-body">
-                        <div class="d-flex justify-content-between align-items-center mb-6">
-                            <div class="d-flex flex-column align-items-center gap-1">
-                                <h3 class="mb-1">8,258</h3>
-                                <small>Total Orders</small>
-                            </div>
-                            <div id="orderStatisticsChart"></div>
-                        </div>
-                        <ul class="p-0 m-0">
-                            <li class="d-flex align-items-center mb-5">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <span class="avatar-initial rounded bg-label-primary"><i class="bx bx-mobile-alt"></i></span>
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <h6 class="mb-0">Electronic</h6>
-                                        <small>Mobile, Earbuds, TV</small>
-                                    </div>
-                                    <div class="user-progress">
-                                        <h6 class="mb-0">82.5k</h6>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center mb-5">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <span class="avatar-initial rounded bg-label-success"><i class="bx bx-closet"></i></span>
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <h6 class="mb-0">Fashion</h6>
-                                        <small>T-shirt, Jeans, Shoes</small>
-                                    </div>
-                                    <div class="user-progress">
-                                        <h6 class="mb-0">23.8k</h6>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center mb-5">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <span class="avatar-initial rounded bg-label-info"><i class="bx bx-home-alt"></i></span>
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <h6 class="mb-0">Decor</h6>
-                                        <small>Fine Art, Dining</small>
-                                    </div>
-                                    <div class="user-progress">
-                                        <h6 class="mb-0">849k</h6>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <span class="avatar-initial rounded bg-label-secondary"><i class="bx bx-football"></i></span>
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <h6 class="mb-0">Sports</h6>
-                                        <small>Football, Cricket Kit</small>
-                                    </div>
-                                    <div class="user-progress">
-                                        <h6 class="mb-0">99</h6>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <!--/ Order Statistics -->
-
-            <!-- Expense Overview -->
-            <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>
-            <!--/ Expense Overview -->
-
-            <!-- Transactions -->
-            <div class="col-md-6 col-lg-4 order-2 mb-6">
-                <div class="card h-100">
-                    <div class="card-header d-flex align-items-center justify-content-between">
-                        <h5 class="card-title m-0 me-2">Transactions</h5>
-                        <div class="dropdown">
-                            <button
-                                class="btn text-muted p-0"
-                                type="button"
-                                id="transactionID"
-                                data-bs-toggle="dropdown"
-                                aria-haspopup="true"
-                                aria-expanded="false"
-                            >
-                                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-                            </button>
-                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="transactionID">
-                                <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
-                                <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
-                                <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-body pt-4">
-                        <ul class="p-0 m-0">
-                            <li class="d-flex align-items-center mb-6">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <img src="/img/icons/unicons/paypal.png" alt="User" class="rounded" />
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <small class="d-block">Paypal</small>
-                                        <h6 class="fw-normal mb-0">Send money</h6>
-                                    </div>
-                                    <div class="user-progress d-flex align-items-center gap-2">
-                                        <h6 class="fw-normal mb-0">+82.6</h6>
-                                        <span class="text-muted">USD</span>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center mb-6">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <small class="d-block">Wallet</small>
-                                        <h6 class="fw-normal mb-0">Mac'D</h6>
-                                    </div>
-                                    <div class="user-progress d-flex align-items-center gap-2">
-                                        <h6 class="fw-normal mb-0">+270.69</h6>
-                                        <span class="text-muted">USD</span>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center mb-6">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <img src="/img/icons/unicons/chart.png" alt="User" class="rounded" />
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <small class="d-block">Transfer</small>
-                                        <h6 class="fw-normal mb-0">Refund</h6>
-                                    </div>
-                                    <div class="user-progress d-flex align-items-center gap-2">
-                                        <h6 class="fw-normal mb-0">+637.91</h6>
-                                        <span class="text-muted">USD</span>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center mb-6">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <img src="/img/icons/unicons/cc-primary.png" alt="User" class="rounded" />
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <small class="d-block">Credit Card</small>
-                                        <h6 class="fw-normal mb-0">Ordered Food</h6>
-                                    </div>
-                                    <div class="user-progress d-flex align-items-center gap-2">
-                                        <h6 class="fw-normal mb-0">-838.71</h6>
-                                        <span class="text-muted">USD</span>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center mb-6">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <img src="/img/icons/unicons/wallet.png" alt="User" class="rounded" />
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <small class="d-block">Wallet</small>
-                                        <h6 class="fw-normal mb-0">Starbucks</h6>
-                                    </div>
-                                    <div class="user-progress d-flex align-items-center gap-2">
-                                        <h6 class="fw-normal mb-0">+203.33</h6>
-                                        <span class="text-muted">USD</span>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="d-flex align-items-center">
-                                <div class="avatar flex-shrink-0 me-3">
-                                    <img src="/img/icons/unicons/cc-warning.png" alt="User" class="rounded" />
-                                </div>
-                                <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                                    <div class="me-2">
-                                        <small class="d-block">Mastercard</small>
-                                        <h6 class="fw-normal mb-0">Ordered Food</h6>
-                                    </div>
-                                    <div class="user-progress d-flex align-items-center gap-2">
-                                        <h6 class="fw-normal mb-0">-92.45</h6>
-                                        <span class="text-muted">USD</span>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <!--/ Transactions -->
-            <!-- Activity Timeline -->
-            <div class="col-md-12 col-lg-6 order-4 order-lg-3">
-                <div class="card h-100">
-                    <div class="card-header d-flex justify-content-between">
-                        <h5 class="card-title m-0 me-2">Activity Timeline</h5>
-                        <div class="dropdown">
-                            <button
-                                class="btn text-muted p-0"
-                                type="button"
-                                id="timelineWapper"
-                                data-bs-toggle="dropdown"
-                                aria-haspopup="true"
-                                aria-expanded="false"
-                            >
-                                <i class="bx bx-dots-vertical-rounded bx-lg"></i>
-                            </button>
-                            <div class="dropdown-menu dropdown-menu-end" aria-labelledby="timelineWapper">
-                                <a class="dropdown-item" href="javascript:void(0);">Select All</a>
-                                <a class="dropdown-item" href="javascript:void(0);">Refresh</a>
-                                <a class="dropdown-item" href="javascript:void(0);">Share</a>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-body pt-2">
-                        <ul class="timeline mb-0">
-                            <li class="timeline-item timeline-item-transparent">
-                                <span class="timeline-point timeline-point-primary"></span>
-                                <div class="timeline-event">
-                                    <div class="timeline-header mb-3">
-                                        <h6 class="mb-0">12 Invoices have been paid</h6>
-                                        <small class="text-muted">12 min ago</small>
-                                    </div>
-                                    <p class="mb-2">Invoices have been paid to the company</p>
-                                    <div class="d-flex align-items-center mb-1">
-                                        <div class="badge bg-lighter rounded-2">
-                                            <img src="/img/icons/misc/pdf.png" alt="img" width="15" class="me-2" />
-                                            <span class="h6 mb-0 text-body">invoices.pdf</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="timeline-item timeline-item-transparent">
-                                <span class="timeline-point timeline-point-success"></span>
-                                <div class="timeline-event">
-                                    <div class="timeline-header mb-3">
-                                        <h6 class="mb-0">Client Meeting</h6>
-                                        <small class="text-muted">45 min ago</small>
-                                    </div>
-                                    <p class="mb-2">Project meeting with john @10:15am</p>
-                                    <div class="d-flex justify-content-between flex-wrap gap-2">
-                                        <div class="d-flex flex-wrap align-items-center">
-                                            <div class="avatar avatar-sm me-2">
-                                                <img src="/img/avatars/1.png" alt="Avatar" class="rounded-circle" />
-                                            </div>
-                                            <div>
-                                                <p class="mb-0 small fw-medium">Lester McCarthy (Client)</p>
-                                                <small>CEO of ThemeSelection</small>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li class="timeline-item timeline-item-transparent">
-                                <span class="timeline-point timeline-point-info"></span>
-                                <div class="timeline-event">
-                                    <div class="timeline-header mb-3">
-                                        <h6 class="mb-0">Create a new project for client</h6>
-                                        <small class="text-muted">2 Day Ago</small>
-                                    </div>
-                                    <p class="mb-2">6 team members in a project</p>
-                                    <ul class="list-group list-group-flush">
-                                        <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap p-0">
-                                            <div class="d-flex flex-wrap align-items-center">
-                                                <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
-                                                    <li
-                                                        data-bs-toggle="tooltip"
-                                                        data-popup="tooltip-custom"
-                                                        data-bs-placement="top"
-                                                        title="Vinnie Mostowy"
-                                                        class="avatar pull-up"
-                                                    >
-                                                        <img class="rounded-circle" src="/img/avatars/5.png" alt="Avatar" />
-                                                    </li>
-                                                    <li
-                                                        data-bs-toggle="tooltip"
-                                                        data-popup="tooltip-custom"
-                                                        data-bs-placement="top"
-                                                        title="Allen Rieske"
-                                                        class="avatar pull-up"
-                                                    >
-                                                        <img class="rounded-circle" src="/img/avatars/12.png" alt="Avatar" />
-                                                    </li>
-                                                    <li
-                                                        data-bs-toggle="tooltip"
-                                                        data-popup="tooltip-custom"
-                                                        data-bs-placement="top"
-                                                        title="Julee Rossignol"
-                                                        class="avatar pull-up"
-                                                    >
-                                                        <img class="rounded-circle" src="/img/avatars/6.png" alt="Avatar" />
-                                                    </li>
-                                                    <li class="avatar">
-                                                        <span
-                                                            class="avatar-initial rounded-circle pull-up text-heading"
-                                                            data-bs-toggle="tooltip"
-                                                            data-bs-placement="bottom"
-                                                            title="3 more"
-                                                            >+3</span
-                                                        >
-                                                    </li>
-                                                </ul>
-                                            </div>
-                                        </li>
-                                    </ul>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-            <!--/ Activity Timeline -->
-            <!-- pill table -->
-            <div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
-                <div class="card text-center 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-pills-browser"
-                                    aria-controls="navs-pills-browser"
-                                    aria-selected="true"
-                                >
-                                    Browser
-                                </button>
-                            </li>
-                            <li class="nav-item">
-                                <button
-                                    type="button"
-                                    class="nav-link"
-                                    role="tab"
-                                    data-bs-toggle="tab"
-                                    data-bs-target="#navs-pills-os"
-                                    aria-controls="navs-pills-os"
-                                    aria-selected="false"
-                                >
-                                    Operating System
-                                </button>
-                            </li>
-                            <li class="nav-item">
-                                <button
-                                    type="button"
-                                    class="nav-link"
-                                    role="tab"
-                                    data-bs-toggle="tab"
-                                    data-bs-target="#navs-pills-country"
-                                    aria-controls="navs-pills-country"
-                                    aria-selected="false"
-                                >
-                                    Country
-                                </button>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="tab-content pt-0 pb-4">
-                        <div class="tab-pane fade show active" id="navs-pills-browser" role="tabpanel">
-                            <div class="table-responsive text-start text-nowrap">
-                                <table class="table table-borderless">
-                                    <thead>
-                                        <tr>
-                                            <th>No</th>
-                                            <th>Browser</th>
-                                            <th>Visits</th>
-                                            <th class="w-50">Data In Percentage</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                            <td>1</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/chrome.png" alt="Chrome" height="24" class="me-3" />
-                                                    <span class="text-heading">Chrome</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">8.92k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-success"
-                                                            role="progressbar"
-                                                            style="width: 64.75%"
-                                                            aria-valuenow="64.75"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">64.75%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>2</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/safari.png" alt="Safari" height="24" class="me-3" />
-                                                    <span class="text-heading">Safari</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">1.29k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-primary"
-                                                            role="progressbar"
-                                                            style="width: 18.43%"
-                                                            aria-valuenow="18.43"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">18.43%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>3</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/firefox.png" alt="Firefox" height="24" class="me-3" />
-                                                    <span class="text-heading">Firefox</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">328</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-info"
-                                                            role="progressbar"
-                                                            style="width: 8.37%"
-                                                            aria-valuenow="8.37"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">8.37%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>4</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/edge.png" alt="Edge" height="24" class="me-3" />
-                                                    <span class="text-heading">Edge</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">142</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-warning"
-                                                            role="progressbar"
-                                                            style="width: 6.12%"
-                                                            aria-valuenow="6.12"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">6.12%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>5</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/opera.png" alt="Opera" height="24" class="me-3" />
-                                                    <span class="text-heading">Opera</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">82</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-danger"
-                                                            role="progressbar"
-                                                            style="width: 2.12%"
-                                                            aria-valuenow="1.94"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">2.12%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>6</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/uc.png" alt="uc" height="24" class="me-3" />
-                                                    <span class="text-heading">UC Browser</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">328</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-danger"
-                                                            role="progressbar"
-                                                            style="width: 20.14%"
-                                                            aria-valuenow="1.94"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">20.14%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                        <div class="tab-pane fade" id="navs-pills-os" role="tabpanel">
-                            <div class="table-responsive text-start text-nowrap">
-                                <table class="table table-borderless">
-                                    <thead>
-                                        <tr>
-                                            <th>No</th>
-                                            <th>System</th>
-                                            <th>Visits</th>
-                                            <th class="w-50">Data In Percentage</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                            <td>1</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/windows.png" alt="Windows" height="24" class="me-3" />
-                                                    <span class="text-heading">Windows</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">875.24k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-success"
-                                                            role="progressbar"
-                                                            style="width: 61.5%"
-                                                            aria-valuenow="61.50"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">61.50%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>2</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/mac.png" alt="Mac" height="24" class="me-3" />
-                                                    <span class="text-heading">Mac</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">89.68k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-primary"
-                                                            role="progressbar"
-                                                            style="width: 16.67%"
-                                                            aria-valuenow="16.67"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">16.67%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>3</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/ubuntu.png" alt="Ubuntu" height="24" class="me-3" />
-                                                    <span class="text-heading">Ubuntu</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">37.68k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-info"
-                                                            role="progressbar"
-                                                            style="width: 12.82%"
-                                                            aria-valuenow="12.82"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">12.82%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>4</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/chrome.png" alt="Chrome" height="24" class="me-3" />
-                                                    <span class="text-heading">Chrome</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">8.34k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-warning"
-                                                            role="progressbar"
-                                                            style="width: 6.25%"
-                                                            aria-valuenow="6.25"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">6.25%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>5</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/cent.png" alt="Cent" height="24" class="me-3" />
-                                                    <span class="text-heading">Cent</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">2.25k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-danger"
-                                                            role="progressbar"
-                                                            style="width: 2.76%"
-                                                            aria-valuenow="2.76"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">2.76%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>6</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <img src="/img/icons/brands/linux.png" alt="linux" height="24" class="me-3" />
-                                                    <span class="text-heading">Linux</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">328k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-danger"
-                                                            role="progressbar"
-                                                            style="width: 20.14%"
-                                                            aria-valuenow="2.76"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">20.14%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                        <div class="tab-pane fade" id="navs-pills-country" role="tabpanel">
-                            <div class="table-responsive text-start text-nowrap">
-                                <table class="table table-borderless">
-                                    <thead>
-                                        <tr>
-                                            <th>No</th>
-                                            <th>Country</th>
-                                            <th>Visits</th>
-                                            <th class="w-50">Data In Percentage</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        <tr>
-                                            <td>1</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <i class="fis fi fi-us rounded-circle fs-4 me-3"></i>
-                                                    <span class="text-heading">USA</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">87.24k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-success"
-                                                            role="progressbar"
-                                                            style="width: 38.12%"
-                                                            aria-valuenow="38.12"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">38.12%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>2</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <i class="fis fi fi-br rounded-circle fs-4 me-3"></i>
-                                                    <span class="text-heading">Brazil</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">42.68k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-primary"
-                                                            role="progressbar"
-                                                            style="width: 28.23%"
-                                                            aria-valuenow="28.23"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">28.23%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>3</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <i class="fis fi fi-in rounded-circle fs-4 me-3"></i>
-                                                    <span class="text-heading">India</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">12.58k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-info"
-                                                            role="progressbar"
-                                                            style="width: 14.82%"
-                                                            aria-valuenow="14.82"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">14.82%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>4</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <i class="fis fi fi-au rounded-circle fs-4 me-3"></i>
-                                                    <span class="text-heading">Australia</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">4.13k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-warning"
-                                                            role="progressbar"
-                                                            style="width: 12.72%"
-                                                            aria-valuenow="12.72"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">12.72%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>5</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <i class="fis fi fi-fr rounded-circle fs-4 me-3"></i>
-                                                    <span class="text-heading">France</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">2.21k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-danger"
-                                                            role="progressbar"
-                                                            style="width: 7.11%"
-                                                            aria-valuenow="7.11"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">7.11%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>6</td>
-                                            <td>
-                                                <div class="d-flex align-items-center">
-                                                    <i class="fis fi fi-ca rounded-circle fs-4 me-3"></i>
-                                                    <span class="text-heading">Canada</span>
-                                                </div>
-                                            </td>
-                                            <td class="text-heading">22.35k</td>
-                                            <td>
-                                                <div class="d-flex justify-content-between align-items-center gap-4">
-                                                    <div class="progress w-100" style="height: 10px">
-                                                        <div
-                                                            class="progress-bar bg-danger"
-                                                            role="progressbar"
-                                                            style="width: 15.13%"
-                                                            aria-valuenow="7.11"
-                                                            aria-valuemin="0"
-                                                            aria-valuemax="100"
-                                                        ></div>
-                                                    </div>
-                                                    <small class="fw-medium">15.13%</small>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <!--/ pill table -->
-        </div>
+    <div class="container-xxl flex-grow-1 container-p-y pb-0">
+        <MainEventCalendar />
+        <MemberManagement />
     </div>
 </template>
 
 <script setup>
-import SampleInput from '@c/SampleInput.vue';
-</script>
+    import MainEventCalendar from '@/components/main/MainEventCalendar.vue';
+    import MemberManagement from '@/components/main/MemberManagement.vue';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { inject, onMounted, ref } from 'vue';
+    import $api from '@api';
 
-<style lang="scss" scoped></style>
+    const userStore = useUserInfoStore();
+    const user = ref();
+
+    const isAdmin = user => {
+        return user.value.role === 'ROLE_ADMIN' ? true : false;
+    };
+
+    onMounted(async () => {
+        await userStore.userInfo();
+        user.value = userStore.user;
+    });
+</script>