diff --git a/src/base-url/index.js b/src/base-url/index.js
index 5b48e6b4f6aed377a790640f9ea5a13f4f424664..7fe6bf1c5b2924fb1e482211ad05cdfc07ece96e 100644
--- a/src/base-url/index.js
+++ b/src/base-url/index.js
@@ -178,3 +178,9 @@ export const API_URL_CHAT = {
   newMsg: id => `/chat/msg/${id}`,
   seenMsg: id => `/chat/seen_chat/${id}`
 }
+
+export const API_URL_TELECOM = {
+  participantList: '/meeting-table/companies/available',
+  addCompanies: '/meeting-table/companies/add',
+  companiesList: '/meeting-table/companies'
+}
diff --git a/src/boot/language.js b/src/boot/language.js
index 453c7d82e55d72ddca189c49bc2145cbc6cce18c..9c0e73c2b50bd4eeee7439b8903adf9c10bcfa8c 100644
--- a/src/boot/language.js
+++ b/src/boot/language.js
@@ -1,19 +1,20 @@
 import { boot } from 'quasar/wrappers'
 // import { dayjs } from 'boot/dayjs'
-// import { LocalStorage } from 'quasar'
+import { LocalStorage } from 'quasar'
 // import { jalali } from 'dayjs-jalali'
 
 export default boot(({ app }) => {
-  // const lang = LocalStorage.getItem('lang')
-
+  const lang = LocalStorage.getItem('lang')
+  if (!lang) {
+    LocalStorage.set('lang', 'en-US')
+    LocalStorage.set('ltrDir', true)
+  }
   // if (lang === 'fa-IR' || !lang) {
   //   import('quasar/lang/fa-IR').then((lang) => {
   //     lang.default.rtl = false
   //     app.config.globalProperties.$q.lang.set(lang.default)
 
   //     import('dayjs/locale/fa').then(ln => {
-  //       LocalStorage.set('lang', 'fa-IR')
-  //       LocalStorage.set('ltrDir', false)
   //       dayjs.locale(ln.name)
   //       // dayjs.calendar('jalali')
 
diff --git a/src/boot/notify-default.js b/src/boot/notify-default.js
index 3a657a7e0ae51643edcf08f824724c265588cb6b..776f98474ae04aa9d7109c6ebb21918521c24aff 100644
--- a/src/boot/notify-default.js
+++ b/src/boot/notify-default.js
@@ -2,63 +2,68 @@ import { Notify } from 'quasar'
 
 import { roundCheckCircle, roundCancel, roundInfo, roundError } from '@quasar/extras/material-icons-round'
 
-const success = {
-  type: 'success',
-  icon: roundCheckCircle,
-  timeout: 3000,
-  classes: 'custom-notify-success no-shadow text-body1 border-radius-8',
-  message: 'Success',
-  iconSize: '48px',
-  progress: true,
-  textColor: 'neutral-1',
-  iconColor: 'success',
-  badgeColor: 'success',
-  progressClass: 'bg-success'
-
-}
-const error = {
-  type: 'error',
-  icon: roundCancel,
-  timeout: 3000,
-  classes: 'custom-notify-error no-shadow text-body1 border-radius-8',
-  message: 'Error',
-  iconSize: '48px',
-  progress: true,
-  textColor: 'neutral-1',
-  iconColor: 'error',
-  badgeColor: 'error',
-  progressClass: 'bg-error'
+const notificationTypes = {
+  success: {
+    icon: roundCheckCircle,
+    classes: 'custom-notify-success no-shadow text-body2 border-radius-8',
+    message: 'Success',
+    iconSize: '40px',
+    progress: true,
+    textColor: 'dark',
+    iconColor: 'success',
+    badgeColor: 'success'
+  },
+  error: {
+    icon: roundCancel,
+    classes: 'custom-notify-error no-shadow text-body2 border-radius-8',
+    message: 'Error',
+    iconSize: '40px',
+    progress: true,
+    textColor: 'error',
+    iconColor: 'error',
+    badgeColor: 'error'
+  },
+  alert: {
+    icon: roundInfo,
+    classes: 'custom-notify-alert no-shadow text-body2 border-radius-8',
+    message: 'Info',
+    iconSize: '40px',
+    progress: true,
+    textColor: 'neutral-1',
+    iconColor: 'primary',
+    badgeColor: 'primary'
+  },
+  notic: {
+    icon: roundError,
+    classes: 'custom-notify-warning no-shadow text-body2 border-radius-8',
+    message: 'Warning',
+    iconSize: '40px',
+    progress: true,
+    textColor: 'neutral-1',
+    iconColor: 'warning',
+    badgeColor: 'warning'
+  }
 }
+Notify.registerType('success', notificationTypes.success)
+Notify.registerType('error', notificationTypes.error)
+Notify.registerType('alert', notificationTypes.alert)
+Notify.registerType('notic', notificationTypes.notic)
 
-const alert = {
-  type: 'alert',
-  icon: roundInfo,
-  timeout: 3000,
-  classes: 'custom-notify-alert no-shadow text-body1 border-radius-8',
-  message: 'Info',
-  iconSize: '48px',
-  progress: true,
-  textColor: 'neutral-1',
-  iconColor: 'primary',
-  badgeColor: 'primary',
-  progressClass: 'bg-primary'
-}
+export default function useNotif () {
+  const $notify = (type, message, position = 'top', options) => {
+    const notificationOptions = notificationTypes[type]
 
-const notic = {
-  type: 'notic',
-  icon: roundError,
-  timeout: 3000,
-  classes: 'custom-notify-warning no-shadow text-body1 border-radius-8',
-  message: 'Warning',
-  iconSize: '48px',
-  progress: true,
-  textColor: 'neutral-1',
-  iconColor: 'warning',
-  badgeColor: 'warning',
-  progressClass: 'bg-warning'
-}
+    Notify.create({
+      ...notificationOptions,
+      ...options,
+      progress: false,
+      multiLine: true,
+      position,
+      message
+    })
+  }
 
-Notify.registerType('success', success)
-Notify.registerType('error', error)
-Notify.registerType('alert', alert)
-Notify.registerType('notic', notic)
+  return {
+    $notify
+  }
+}
diff --git a/src/composable/index.js b/src/composable/index.js
index 735f42336340f3bb8a0e144d4c7c9c1f920d527f..285cd1d7e63ec55877b91c6294ffea66b3e67e1e 100644
--- a/src/composable/index.js
+++ b/src/composable/index.js
@@ -1 +1,2 @@
 export * from './useScreenHandler'
+export * from './useTableHandler'
diff --git a/src/composable/useTableHandler.js b/src/composable/useTableHandler.js
new file mode 100644
index 0000000000000000000000000000000000000000..91a49dee313a02c9f35276a9c64a67c8d628e924
--- /dev/null
+++ b/src/composable/useTableHandler.js
@@ -0,0 +1,61 @@
+import { ref } from 'vue'
+import { api } from 'src/boot/axios'
+
+export function useTableHandler ({ url, params = {} }) {
+  const rows = ref([])
+  const filter = ref(null)
+  const tableRef = ref(null)
+  const loading = ref(false)
+  const pagination = ref({
+    page: 1,
+    sortBy: 'desc',
+    descending: false,
+    rowsNumber: 15,
+    rowsPerPage: 15
+  })
+
+  const onRequest = async (props) => {
+    loading.value = true
+    const { page, rowsPerPage, sortBy, descending } = props.pagination
+
+    const requestData = {
+      offset: page - 1,
+      limit: rowsPerPage,
+      ...params,
+      ...(typeof filter.value === 'object' ? filter.value : { q: filter.value }),
+      ...(typeof props.filter !== 'undefined' ? props.filter : {})
+    }
+
+    try {
+      const { data } = await api.get(url, { params: requestData })
+      rows.value = data.data
+      loading.value = false
+      pagination.value.rowsNumber = data.count
+    }
+    catch (err) {
+      console.log('err', err)
+    }
+    finally {
+      loading.value = false
+    }
+
+    pagination.value.page = page
+    pagination.value.rowsPerPage = rowsPerPage
+    pagination.value.sortBy = sortBy
+    pagination.value.descending = descending
+  }
+
+  function request () {
+    tableRef.value.requestServerInteraction()
+  }
+
+  return {
+    rows,
+    filter,
+    request,
+    loading,
+    tableRef,
+    onRequest,
+    pagination
+  }
+}
diff --git a/src/layouts/SocialLayout.vue b/src/layouts/SocialLayout.vue
index bdb5b021cd5caa0ba122befba05173db3abaeee2..5342e4af5ec30e4cd94f18a0adf9649f017408a1 100644
--- a/src/layouts/SocialLayout.vue
+++ b/src/layouts/SocialLayout.vue
@@ -102,6 +102,7 @@ const profileData = ref({})
 // const userType = computed(() => userStore.user.user_type)
 const checkLogin = computed(() => !!userStore.token)
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
+const owner = computed(() => userStore.user.id === stageStore.event?.user_info?.id)
 useI18n().locale.value = LocalStorage.getItem('lang')
 const { t } = useI18n()
 
@@ -156,7 +157,7 @@ const menus = computed(() => [
     label: 'Feed',
     icon: roundRssFeed,
     badge: false,
-    show: true,
+    show: false,
     route: { name: 'SocialFeed' }
   },
   {
@@ -177,7 +178,7 @@ const menus = computed(() => [
     label: t('social.companies'),
     icon: roundBusiness,
     badge: false,
-    show: userStore.user.id === stageStore.event.user_info.id,
+    show: owner.value,
     route: { name: 'AddCompanies' }
   },
   {
diff --git a/src/pages/social/AddCompanies.vue b/src/pages/social/AddCompanies.vue
index 869632d12f74a9af34c47c81627a3da7a55d712d..a76f0913e72dfede37656fdd300d6e6119fafc3e 100644
--- a/src/pages/social/AddCompanies.vue
+++ b/src/pages/social/AddCompanies.vue
@@ -1,4 +1,3 @@
-import { LocalStorage } from 'quasar';
 <template>
   <div class="appointment-container q-pt-4xl q-px-md">
     <p
@@ -22,13 +21,20 @@ import { LocalStorage } from 'quasar';
           v-model="selectCompany"
           outlined
           dense
-          :options="companyOptions"
+          :options="companyOptionFilter"
           use-input
+          option-label="name"
+          option-value="user_id"
           multiple
           emit-value
           map-options
           :label="$t('social.addCompany')"
+          @filter="filterFn"
+          @update:model-value="val => {
+            if(val === '') participantList()
+          }"
         >
+          <!-- @input-value="val => participantList(val)" -->
           <template #option="{ itemProps, opt, selected, toggleOption }">
             <q-item v-bind="itemProps">
               <q-item-section side>
@@ -61,15 +67,21 @@ import { LocalStorage } from 'quasar';
           dense
           text-color="white"
           flat
+          :loading="addLoading"
+          :disable="calcCompanies"
           no-caps
           :class="['bg-primary', screenSize && 'full-width']"
           padding="8px 24px"
+          @click="addCompanies"
         />
       </div>
     </div>
 
     <div class="q-mt-md">
       <q-table
+        ref="tableRef"
+        v-model:pagination="pagination"
+        :loading="loading"
         class="my-sticky-header-table border-radius-8"
         flat
         :dir="ltrDir ? 'ltr' : 'rtl'"
@@ -78,8 +90,9 @@ import { LocalStorage } from 'quasar';
         :rows="rows"
         :columns="columns"
         row-key="name"
+        @request="onRequest"
       >
-        <template #body-cell-no="props">
+        <template #body-cell-index="props">
           <q-td :props="props">
             {{ props.rowIndex + 1 }}
           </q-td>
@@ -89,22 +102,27 @@ import { LocalStorage } from 'quasar';
   </div>
 </template>
 <script setup>
-import { ref, computed } from 'vue'
-import { useScreenHandler } from 'src/composable'
+import { ref, computed, onMounted } from 'vue'
 import { LocalStorage } from 'quasar'
-
 import { useI18n } from 'vue-i18n'
 
+import useNotif from 'src/boot/notify-default'
+import { useScreenHandler, useTableHandler } from 'src/composable'
+
+import { api } from 'src/boot/axios'
+import { API_URL_TELECOM } from 'src/base-url'
+
+const { t } = useI18n()
+const { $notify } = useNotif()
 const { screenSize } = useScreenHandler()
 
 const selectCompany = ref([])
+const addLoading = ref(false)
 const companyOptions = ref([])
-
-const { t } = useI18n()
+const companyOptionFilter = ref([])
 
 const ltrDir = computed(() => LocalStorage.getItem('ltrDir'))
 
-const rows = ref([])
 const columns = [
   {
     name: 'index',
@@ -113,10 +131,73 @@ const columns = [
     align: 'left'
   },
   {
-    name: 'topic',
+    name: 'name',
     label: t('social.comapnyName'),
     align: 'left',
-    field: 'topic'
+    field: 'name'
   }
 ]
+
+const { rows, loading, pagination, onRequest, request, tableRef } = useTableHandler({
+  url: API_URL_TELECOM.companiesList
+})
+
+onMounted(request)
+
+const participantList = (search = '', filter = true) => {
+  if (filter) {
+    api.get(API_URL_TELECOM.participantList, {
+      params: {
+        q: search
+      }
+    })
+      .then(res => {
+        companyOptions.value = companyOptionFilter.value = res.data.data
+      }).catch(err => console.log(err))
+  }
+  else {
+    api.get(API_URL_TELECOM.participantList)
+      .then(res => {
+        companyOptions.value = companyOptionFilter.value = res.data.data
+      }).catch(err => console.log(err))
+  }
+}
+participantList()
+
+const filterFn = (val, update) => {
+  if (val === '') {
+    update(() => {
+      companyOptionFilter.value = companyOptions.value
+      participantList('', false)
+    })
+    return
+  }
+
+  update(() => {
+    const needle = val.toLowerCase()
+    participantList(needle)
+    // companyOptionFilter.value = companyOptionFilter.value.filter(v => v.name.toLowerCase().indexOf(needle) > -1)
+  })
+}
+
+const addCompanies = () => {
+  addLoading.value = true
+  const body = {
+    company_ids: selectCompany.value
+  }
+  api.post(API_URL_TELECOM.addCompanies, body)
+    .then(res => {
+      addLoading.value = false
+      selectCompany.value = []
+      participantList()
+      request()
+      $notify('success', 'Companies added successfully')
+    }).catch(err => console.log(err))
+}
+
+const calcCompanies = computed(() => {
+  const sum = rows.value.length + selectCompany.value.length
+  return sum > 50
+})
+
 </script>