diff --git a/src/base-url/index.js b/src/base-url/index.js
index 7fe6bf1c5b2924fb1e482211ad05cdfc07ece96e..95e83d26aa62a28ff0552c5c4382240e4c2e8fb8 100644
--- a/src/base-url/index.js
+++ b/src/base-url/index.js
@@ -179,6 +179,13 @@ export const API_URL_CHAT = {
   seenMsg: id => `/chat/seen_chat/${id}`
 }
 
+export const API_URL_MEETINGTABLE = {
+  setMeet: id => `/meeting-table/reserve/${id}`,
+  canselMeet: id => `/meeting-table/cancel/${id}`,
+  getSetAppointment: '/meeting-table',
+  getCsv: '/meeting-table/csv'
+}
+
 export const API_URL_TELECOM = {
   participantList: '/meeting-table/companies/available',
   addCompanies: '/meeting-table/companies/add',
diff --git a/src/components/stage-layout/EventDrawer.vue b/src/components/stage-layout/EventDrawer.vue
index b131a558e9abbd66d3625e2b64a6845379d6a317..38f13e11405fb0526c59bd652f8b9520968f7ce4 100644
--- a/src/components/stage-layout/EventDrawer.vue
+++ b/src/components/stage-layout/EventDrawer.vue
@@ -181,7 +181,7 @@ const routeId = route.params.id
 const userStore = useUserStore()
 
 const tab = ref('eventprofile')
-const colSize = computed(() => $q.screen.sizes.md > $q.screen.width)
+const colSize = computed(() => $q.screen.sizes.sm > $q.screen.width)
 
 const drawer = ref(false)
 const miniState = ref(true)
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 275ee2e3f2f9672f3e9c3268fbc73e4759c63ffd..59a33cff3908a2d391d87de5fb8d75c8638bc91c 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -109,10 +109,14 @@ $flex-gutter: (
 );
 
 
-$breakpoint-xs: 600px   !default;
-$breakpoint-sm: 905px   !default;
+$breakpoint-xs: 280px   !default;
+$breakpoint-ms: 360px   !default;
+$breakpoint-sm: 769px   !default;
 $breakpoint-md: 1240px  !default;
 $breakpoint-lg: 1440px  !default;
+$breakpoint-xl: 1920px  !default;
+
+$sizes: ('none': 0, 'xs': ($breakpoint-xs), 'ms': ($breakpoint-ms), 'sm': ($breakpoint-sm), 'md': ($breakpoint-md), 'lg': ($breakpoint-lg), 'xl': ($breakpoint-xl)) !default;
 
 
 // Colors
diff --git a/src/i18n/en-US/index.js b/src/i18n/en-US/index.js
index 259150b08c8db1013bc6de1d83b75edd65694190..4330560268373da6b2c3bcb0fedbaeaf945d2530 100644
--- a/src/i18n/en-US/index.js
+++ b/src/i18n/en-US/index.js
@@ -732,6 +732,7 @@ export default {
     inputChatPlaceholder: 'Write Something ...'
   },
   social: {
+    search: 'Search',
     companies: 'Companies',
     appointment: 'Appointment',
     company: 'Company',
diff --git a/src/layouts/MobileSocialLayout.vue b/src/layouts/MobileSocialLayout.vue
index 920d73b66a474d71e5124d47d0d13a9898da258d..6e07b08d9b3ea27b1c8bfd797b5fb7a4cd5a64e4 100644
--- a/src/layouts/MobileSocialLayout.vue
+++ b/src/layouts/MobileSocialLayout.vue
@@ -96,11 +96,13 @@ import stickySupport from 'components/stickySupport.vue'
 import {
   roundMenu,
   roundHome,
+  roundEvent,
   roundRssFeed,
   roundListAlt,
   // roundVideocam,
+  roundBusiness,
   roundStorefront,
-  roundEvent
+  roundEventAvailable
   // roundWorkspaces
 } from '@quasar/extras/material-icons-round'
 
@@ -122,10 +124,12 @@ const profileData = ref({})
 const refDrawer = ref(null)
 
 dayjs.tz.setDefault(userStore.getTimezone)
-const colSize = computed(() => $q.screen.sizes.md > $q.screen.width)
+const colSize = computed(() => $q.screen.sizes.sm > $q.screen.width)
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
 
 const checkLogin = computed(() => !!userStore.token)
+const owner = computed(() => userStore.user.id === stageStore.event?.user_info?.id)
+
 const checkBuy = computed(() => {
   if (checkLogin.value) {
     if (stageStore.event.user_info?.id === userStore.user.id) return false
@@ -184,7 +188,7 @@ const menus = computed(() => [
     label: 'Feed',
     icon: roundRssFeed,
     badge: false,
-    show: true,
+    show: false,
     route: { name: 'SocialFeed' }
   },
   {
@@ -198,8 +202,22 @@ const menus = computed(() => [
     label: t('event.createEvent'),
     icon: roundEvent,
     badge: false,
-    show: userStore.user.user_type === 'COMPANY',
+    show: false,
     route: { name: 'CreateEvent' }
+  },
+  {
+    label: t('social.companies'),
+    icon: roundBusiness,
+    badge: false,
+    show: owner.value,
+    route: { name: 'AddCompanies' }
+  },
+  {
+    label: t('social.appointment'),
+    icon: roundEventAvailable,
+    badge: false,
+    show: true,
+    route: { name: 'setAppointment' }
   }
 ])
 
diff --git a/src/layouts/SocialLayout.vue b/src/layouts/SocialLayout.vue
index 5342e4af5ec30e4cd94f18a0adf9649f017408a1..a6ab9f7c0fe0a290c06921ca0dc63b666e8a3555 100644
--- a/src/layouts/SocialLayout.vue
+++ b/src/layouts/SocialLayout.vue
@@ -17,8 +17,9 @@
     :dir="ltrDir ? 'ltr' : 'rtl'"
   >
     <q-scroll-area class="fit">
-      <div class="q-py-lg text-center cursor-pointer">
-        <q-img
+      <div class="q-py-lg text-center cursor-pointer text-bold">
+        TELECOME 2023
+        <!-- <q-img
           src="~assets/images/login_vector.svg"
           width="70px"
           height="70px"
@@ -30,7 +31,7 @@
           >
             {{ t('profile.exploreEvent') }}
           </q-tooltip>
-        </q-img>
+        </q-img> -->
       </div>
       <q-list class="q-gutter-md">
         <div
@@ -78,12 +79,12 @@ import { useStageStore } from 'stores/stage-store'
 
 import {
   roundHome,
-  roundListAlt,
   // roundVideocam,
-  roundRssFeed,
-  roundStorefront,
   roundEvent,
+  roundListAlt,
+  roundRssFeed,
   roundBusiness,
+  roundStorefront,
   roundEventAvailable
   // roundWorkspaces
 } from '@quasar/extras/material-icons-round'
@@ -171,7 +172,7 @@ const menus = computed(() => [
     label: t('event.createEvent'),
     icon: roundEvent,
     badge: false,
-    show: userStore.user.user_type === 'COMPANY',
+    show: false,
     route: { name: 'CreateEvent' }
   },
   {
diff --git a/src/pages/social/AddCompanies.vue b/src/pages/social/AddCompanies.vue
index a76f0913e72dfede37656fdd300d6e6119fafc3e..8cecd617e08db3fbb2249c2fa0fc832f78d60f05 100644
--- a/src/pages/social/AddCompanies.vue
+++ b/src/pages/social/AddCompanies.vue
@@ -11,7 +11,7 @@
       :dir="ltrDir ? 'ltr' : 'rtl'"
     >
       <div
-        class="col-md-10 col-xs-12"
+        class="col-sm-10 col-xs-12"
         :dir="ltrDir ? 'ltr' : 'rtl'"
       >
         <div>
@@ -59,7 +59,7 @@
         </q-select>
       </div>
       <div
-        class="col-md-2 col-xs-12 flex justify-center items-end"
+        class="col-sm-2 col-xs-12 flex justify-center items-end"
         :dir="ltrDir ? 'ltr' : 'rtl'"
       >
         <q-btn
diff --git a/src/pages/social/SetAppointment.vue b/src/pages/social/SetAppointment.vue
index 40783fdc1a54118ce8cee053f363f8455e33916b..f92e79a9ac2e2c572daedab95fa7cb548b71abb4 100644
--- a/src/pages/social/SetAppointment.vue
+++ b/src/pages/social/SetAppointment.vue
@@ -1,88 +1,355 @@
-import { LocalStorage } from 'quasar';
 <template>
-  <div class="appointment-container q-pt-4xl q-px-md">
-    <p
-      class="text-primary-1 text-subtitle2 q-mb-xl"
-      :dir="ltrDir ? 'ltr' : 'rtl'"
-    >
-      {{ $t('social.appointment') }}
-    </p>
-    <div
-      class="row q-col-gutter-md"
-      :dir="ltrDir ? 'ltr' : 'rtl'"
-    >
-      <div
-        class="col-md-5 col-xs-12"
-        :dir="ltrDir ? 'ltr' : 'rtl'"
-      >
-        <div>
-          {{ $t('social.day') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
+  <q-page class="bg-neutral-variant-11 q-pt-4xl">
+    <div class="appointment-container q-py-md q-px-md bg-white border-radius-8">
+      <div class="row q-mb-xl items-center justify-between">
+        <div
+          class="text-primary-1 text-subtitle1"
+          :dir="ltrDir ? 'ltr' : 'rtl'"
+        >
+          {{ $t('social.appointment') }}
         </div>
-        <q-select
-          v-model="selectDay"
-          outlined
-          dense
-          :options="dayOptions"
-          :label="$t('social.selectDay')"
-        />
-      </div>
-      <div
-        class="col-md-5 col-xs-12"
-        :dir="ltrDir ? 'ltr' : 'rtl'"
-      >
-        <div>
-          {{ $t('social.time') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
+        <div :class="[screenSize(400).value && 'col-12 q-mt-md']">
+          <q-btn
+            label="Export"
+            color="primary"
+            no-caps
+            outline
+            :icon="roundGetApp"
+            :class="[screenSize(400).value && 'full-width']"
+            :loading="loading.export"
+            padding="8px 24px"
+            :disable="!selectDay"
+            @click="getReport"
+          />
         </div>
-        <q-select
-          v-model="selectTime"
-          outlined
-          dense
-          :options="timeOptions"
-          :label="$t('social.selectClock')"
-        />
       </div>
-      <div
-        class="col-md-2 col-xs-12 flex justify-center items-end"
+      <q-form
+        class="row q-col-gutter-md"
         :dir="ltrDir ? 'ltr' : 'rtl'"
+        @submit="fetchMeetingDate"
       >
-        <q-btn
-          :label="$t('social.search')"
-          dense
-          text-color="white"
-          flat
-          no-caps
-          :class="['bg-primary', screenSize && 'full-width']"
-          padding="8px 24px"
-        />
-      </div>
-    </div>
+        <div class="col-sm-5 col-xs-12">
+          <label>
+            {{ $t('social.day') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
+          </label>
+          <q-select
+            v-model="selectDay"
+            :label="$t('social.selectDay')"
+            :dir="ltrDir ? 'ltr' : 'rtl'"
+            dense
+            :rules="[requiredRule]"
+            :options="dayOptions"
+            outlined
+            lazy-rules
+            emit-value
+            map-options
+            no-error-icon
+            hide-bottom-space
+          >
+            <template #option="props">
+              <q-item v-bind="props.itemProps">
+                <q-item-section>
+                  {{ props.opt.label }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+        <div class="col-sm-5 col-xs-12">
+          <label>
+            {{ $t('social.time') }} <span class="text-neutral-variant-3 text-caption">({{ $t('required') }})</span>
+          </label>
+          <q-select
+            v-model="selectTime"
+            :label="$t('social.selectClock')"
+            dense
+            :rules="[requiredRule]"
+            :options="timeOptions"
+            outlined
+            lazy-rules
+            emit-value
+            map-options
+            no-error-icon
+            hide-bottom-space
+          >
+            <template #option="props">
+              <q-item v-bind="props.itemProps">
+                <q-item-section>
+                  {{ props.opt.label }}
+                </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
 
-    <div class="q-mt-md">
-      <div
-        v-for="item in allData"
-        :key="item.id"
+        <div class="col-sm-2 col-xs-12 self-end">
+          <q-btn
+            :label="$t('social.search')"
+            dense
+            color="primary"
+            class="full-width"
+            no-caps
+            :loading="loading.get"
+            type="submit"
+            padding="8px 24px"
+            unelevated
+          />
+        </div>
+      </q-form>
+
+      <q-card
+        v-if="!!allData.length"
+        flat
+        class="border-radius-8 q-mt-lg"
+        bordered
       >
-        {{ item.name }}
-      </div>
+        <q-card-section class="row q-col-gutter-md">
+          <div
+            v-for="item in allData"
+            :key="item.id"
+            :class="[responsive]"
+          >
+            <div class="q-pa-lg border-radius-8 bg-primary-10 text-center column justify-between max-width">
+              <div class="text-subtitle2 text-primary-1">
+                {{ item.name }}
+              </div>
+              <q-btn
+                v-if="item?.reserved_by?.user_id === userId"
+                label="Cancel"
+                color="primary"
+                no-caps
+                padding="8px"
+                outline
+                :loading="loading.cancel === item.id"
+                @click="cancelMeet(item.id)"
+              />
+              <div
+                v-else-if="item?.reserved_by"
+                class="text-secondary text-body3"
+              >
+                Reserved By: {{ item.reserved_by.name }}
+              </div>
+              <q-btn
+                v-else
+                label="Reservation"
+                color="primary"
+                padding="8px"
+                no-caps
+                unelevated
+                :loading="loading.set === item.id"
+                @click="setMeet(item.id)"
+              />
+            </div>
+          </div>
+        </q-card-section>
+      </q-card>
     </div>
-  </div>
+  </q-page>
 </template>
 <script setup>
 import { ref, computed } from 'vue'
-import { useScreenHandler } from 'src/composable'
 import { LocalStorage } from 'quasar'
 
+import { api } from 'boot/axios'
+import { useUserStore } from 'stores/user-store'
+import { requiredRule } from 'src/utils'
+import { useScreenHandler } from 'src/composable'
+import { API_URL_MEETINGTABLE } from 'src/base-url'
+import { roundGetApp } from '@quasar/extras/material-icons-round'
+
 // import { useI18n } from 'vue-i18n'
 
 const { screenSize } = useScreenHandler()
 
+const userStore = useUserStore()
+const userId = computed(() => userStore.user.id)
+const responsive = computed(() => {
+  let result = 'col-3'
+  if (!screenSize(768).value) {
+    result = 'col-3'
+    console.log('0')
+  }
+  if (screenSize(768).value) {
+    result = 'col-4'
+    console.log('1')
+  }
+  if (screenSize(600).value) {
+    result = 'col-6'
+    console.log('2')
+  }
+  if (screenSize(400).value) {
+    result = 'col-12'
+    console.log('3')
+  }
+  return result
+})
+
+const allData = ref([])
+const loading = ref({
+  get: false,
+  set: false,
+  cancel: false,
+  export: false
+})
+
 const selectDay = ref(null)
 const selectTime = ref(null)
-const dayOptions = ref([])
-const timeOptions = ref([])
-const allData = ref([])
+
+const dayOptions = [
+  {
+    label: 'Saturday, 23 December',
+    value: '23 DECEMBER'
+  },
+  {
+    label: 'Sunday, 24 December',
+    value: '24 DECEMBER'
+  },
+  {
+    label: 'Monday, 25 December',
+    value: '25 DECEMBER'
+  },
+  {
+    label: 'Tuesday, 26 December',
+    value: '26 DECEMBER'
+  }
+]
+
+const timeOptions = [
+  {
+    label: '09:00 - 9:30',
+    value: '09:00-09:30'
+  },
+  {
+    label: '09:30 - 10:00',
+    value: '09:30-10:00'
+  },
+  {
+    label: '10:00 - 10:30',
+    value: '10:00-10:30'
+  },
+  {
+    label: '10:30 - 11:00',
+    value: '10:30-11:00'
+  },
+  {
+    label: '11:000 - 11:30',
+    value: '11:00-11:30'
+  },
+  {
+    label: '11:30 - 12:00',
+    value: '11:30-12:00'
+  },
+  {
+    label: '13:30 - 14:00',
+    value: '13:30-14:00'
+  },
+  {
+    label: '14:00 - 14:30',
+    value: '14:00-14:30'
+  },
+  {
+    label: '14:30 - 15:00',
+    value: '14:30-15:00'
+  },
+  {
+    label: '15:00 - 15:30',
+    value: '15:00-15:30'
+  },
+  {
+    label: '15:30 - 16:00',
+    value: '15:30-16:00'
+  }
+]
 
 // const { t } = useI18n()
 
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
+
+const setMeet = async (id) => {
+  try {
+    loading.value.set = id
+    await api.post(API_URL_MEETINGTABLE.setMeet(id))
+    fetchMeetingDate()
+  }
+  finally {
+    loading.value.set = false
+  }
+}
+const cancelMeet = async (id) => {
+  try {
+    loading.value.cancel = id
+    await api.post(API_URL_MEETINGTABLE.canselMeet(id))
+    fetchMeetingDate()
+  }
+  finally {
+    loading.value.cancel = false
+  }
+}
+
+const fetchMeetingDate = async () => {
+  try {
+    loading.value.get = true
+    const { data } = await api.get(API_URL_MEETINGTABLE.getSetAppointment, {
+      params: {
+        date: selectDay.value,
+        time: selectTime.value
+      }
+    })
+    // eslint-disable-next-line camelcase
+    // reserved.value = data.some(({ reserved_by }) => reserved_by?.user_id === userId.value)
+    allData.value = data
+  }
+  finally {
+    loading.value.get = false
+  }
+}
+
+const downloadBlob = (blob, fileName) => {
+  const url = URL.createObjectURL(blob)
+
+  const link = document.createElement('a')
+  link.href = url
+  link.download = fileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
+
+  URL.revokeObjectURL(url)
+}
+
+const getReport = async () => {
+  try {
+    loading.value.export = true
+
+    const { data } = await api.get(API_URL_MEETINGTABLE.getCsv, {
+      params: {
+        date: selectDay.value
+      },
+      responseType: 'blob'
+    })
+
+    const fileName = `${selectDay.value}.xlsx`
+
+    downloadBlob(data, fileName)
+  }
+  catch (err) {}
+  finally {
+    loading.value.export = false
+  }
+}
 </script>
+
+<style scoped  lang="sass">
+.max-width
+  // max-width: 182px
+  // width: 100%
+  height: 130px
+.q-item
+  background: linear-gradient(0deg, rgba(0, 84, 214, 0.05), rgba(0, 84, 214, 0.05)) #FEFBFF
+  margin: 5px
+  border-radius: 5px
+
+.q-manual-focusable--focused
+  box-shadow: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3)
+
+</style>