diff --git a/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamMerchantTeamsController.php b/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamMerchantTeamsController.php
index 65300cc..6d2e607 100644
--- a/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamMerchantTeamsController.php
+++ b/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamMerchantTeamsController.php
@@ -82,19 +82,27 @@ public function store(): JsonResponse
 
             try {
 
-                $model = new TeamMerchantTeam();
-
-                foreach ($validationArray as $key => $validationRule) {
-                    $value = $this->request->get($key);
-                    if ((isset($value))) {
-                        $model->$key = $value;
+                $model = TeamMerchantTeam::where('team_id', $this->request->get('team_id'))
+                    ->where('merchant_team_id', $this->request->get('merchant_team_id'))
+                    ->first();
+
+                if (!$model) {
+                    $model = new TeamMerchantTeam();
+
+                    foreach ($validationArray as $key => $validationRule) {
+                        $value = $this->request->get($key);
+                        if ((isset($value))) {
+                            $model->$key = $value;
+                        }
                     }
-                }
 
-                $model->save();
+                    $model->save();
+
+                }
 
                 $this->message = ApiResponse::RESPONSE_SAVED->value;
-                $this->data    = $model;
+
+                $this->data = $model;
 
             }
             catch (Exception $e) {
diff --git a/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamServiceTeamsController.php b/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamServiceTeamsController.php
index 8f1538e..b71af2c 100644
--- a/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamServiceTeamsController.php
+++ b/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamServiceTeamsController.php
@@ -82,19 +82,27 @@ public function store(): JsonResponse
 
             try {
 
-                $model = new TeamServiceTeam();
-
-                foreach ($validationArray as $key => $validationRule) {
-                    $value = $this->request->get($key);
-                    if ((isset($value))) {
-                        $model->$key = $value;
+                $model = TeamServiceTeam::where('team_id', $this->request->get('team_id'))
+                    ->where('service_team_id', $this->request->get('service_team_id'))
+                    ->first();
+
+                if (!$model) {
+                    $model = new TeamServiceTeam();
+
+                    foreach ($validationArray as $key => $validationRule) {
+                        $value = $this->request->get($key);
+                        if ((isset($value))) {
+                            $model->$key = $value;
+                        }
                     }
-                }
 
-                $model->save();
+                    $model->save();
+
+                }
 
                 $this->message = ApiResponse::RESPONSE_SAVED->value;
-                $this->data    = $model;
+
+                $this->data = $model;
 
             }
             catch (Exception $e) {
diff --git a/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamsController.php b/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamsController.php
index cc20595..caed790 100644
--- a/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamsController.php
+++ b/app/Http/Controllers/Api/V1/Admin/ApiAdminTeamsController.php
@@ -20,11 +20,15 @@ class ApiAdminTeamsController extends Controller
     /**
      * Set the related data the GET request is allowed to ask for
      */
-    public array $availableRelations = [];
+    public array $availableRelations = [
+        'teamsThisTeamIsMerchantFor',
+        'teamsThisTeamIsServiceFor',
+    ];
 
     public static array $searchableFields = [
         'id',
         'name',
+
     ];
 
     /**
diff --git a/app/Models/Team.php b/app/Models/Team.php
index 3a4d4e4..8078816 100644
--- a/app/Models/Team.php
+++ b/app/Models/Team.php
@@ -22,4 +22,24 @@ public function auditItems(): MorphMany
     {
         return $this->morphMany(AuditItem::class, 'auditable');
     }
+
+    public function teamMerchantTeams(): HasMany
+    {
+        return $this->hasMany(TeamMerchantTeam::class, 'team_id', 'id');
+    }
+
+    public function teamsThisTeamIsMerchantFor(): HasMany
+    {
+        return $this->hasMany(TeamMerchantTeam::class, 'merchant_team_id', 'id');
+    }
+
+    public function teamServiceTeams(): HasMany
+    {
+        return $this->hasMany(TeamServiceTeam::class, 'team_id', 'id');
+    }
+
+    public function teamsThisTeamIsServiceFor(): HasMany
+    {
+        return $this->hasMany(TeamServiceTeam::class, 'service_team_id', 'id');
+    }
 }
diff --git a/resources/js/Components/Admin/AdminTeamSelectComponent.vue b/resources/js/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamSelectComponent.vue
similarity index 67%
rename from resources/js/Components/Admin/AdminTeamSelectComponent.vue
rename to resources/js/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamSelectComponent.vue
index 53ead9f..1c6db2d 100644
--- a/resources/js/Components/Admin/AdminTeamSelectComponent.vue
+++ b/resources/js/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamSelectComponent.vue
@@ -1,15 +1,12 @@
 <script setup>
-import {onMounted, ref} from "vue";
+import {ref} from "vue";
 import TextInput from "@/Components/TextInput.vue";
 import InputLabel from "@/Components/InputLabel.vue";
 import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
 import AdminTeamCreateComponent from "@/Components/Admin/AdminTeamCreateComponent.vue";
 
 const $props = defineProps({
-    excludeTeams: {
-        required: false,
-        default: {}
-    },
+
     teamId: {
         required: false,
         default: null
@@ -17,7 +14,6 @@ const $props = defineProps({
 })
 
 const creatingANewTeam = ref(false)
-const excludeTeamIdsArray = ref([])
 const searchStr = ref('')
 const teams = ref({})
 
@@ -26,35 +22,17 @@ const emit = defineEmits([
     ]
 );
 
-onMounted(() => {
-    createExcludeTeamIdsArray()
-})
-
-function createExcludeTeamIdsArray() {
-    if ($props.excludeTeams.data && $props.excludeTeams.data.length > 0) {
-        $props.excludeTeams.data.forEach((team) => {
-            if (team.service_team_id) {
-                excludeTeamIdsArray.value.push(team.service_team_id)
-            }
-            if (team.merchant_team_id) {
-                excludeTeamIdsArray.value.push(team.merchant_team_id)
-            }
-        })
-    }
-
-    if ($props.teamId) {
-        excludeTeamIdsArray.value.push($props.teamId)
-    }
-}
-
 function searchTeam() {
-    axios.get('/admin/teams?where[]=name,like,*' + searchStr.value + '*&limit=100').then(response => {
-        teams.value = response.data.data
+    axios.get('/admin/teams?where[]=name,like,*' + searchStr.value + '*&limit=100&relations=teamsThisTeamIsMerchantFor').then(response => {
+        teams.value = response.data.data;
+
     }).catch(error => {
         console.log(error)
-    })
+    });
 }
 
+
+
 function startCreatingNewTeam() {
     creatingANewTeam.value = true
     teams.value = {}
@@ -70,6 +48,12 @@ function teamSelected(team) {
     teams.value = {}
 }
 
+function myTeamIsATeamMerchant(anotherTeam){
+    return anotherTeam.teams_this_team_is_merchant_for.find(subTeam => {
+        return subTeam.team_id === $props.teamId;
+    });
+}
+
 </script>
 
 <template>
@@ -91,10 +75,9 @@ function teamSelected(team) {
 
         <div v-if="searchStr.length > 0 && teams.total > 0" class="mt-4">
             <div v-for="team in teams.data" class="border-b py-1">
-                <button @click="teamSelected(team)" class="cursor-pointer flex justify-start items-end"
-                        :class="{'text-gray-500 cursor-not-allowed': excludeTeamIdsArray.includes(team.id)}"
-                :disabled="excludeTeamIdsArray.includes(team.id)">
+                <button @click="teamSelected(team)" class="flex justify-start items-end">
                     <AdminTeamDetailsComponent :team="team"/>
+                    <span v-if="myTeamIsATeamMerchant(team)" class="text-red-500 text-xs italic pl-2">***Already added</span>
                 </button>
             </div>
             <div class="text-red-500 text-sm mt-4 cursor-pointer hover:underline" @click="startCreatingNewTeam()">
@@ -108,4 +91,5 @@ function teamSelected(team) {
             </div>
         </div>
     </div>
+
 </template>
diff --git a/resources/js/Components/Admin/AdminTeamMerchantTeamsComponent.vue b/resources/js/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamsComponent.vue
similarity index 61%
rename from resources/js/Components/Admin/AdminTeamMerchantTeamsComponent.vue
rename to resources/js/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamsComponent.vue
index cd39dfb..8c220a5 100644
--- a/resources/js/Components/Admin/AdminTeamMerchantTeamsComponent.vue
+++ b/resources/js/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamsComponent.vue
@@ -1,9 +1,12 @@
 <script setup>
 import {onMounted, ref} from "vue";
+import {Link} from '@inertiajs/vue3';
 import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import Swal from "sweetalert2";
-import AdminTeamSelectComponent from "@/Components/Admin/AdminTeamSelectComponent.vue";
+import PaginatorComponent from "@/Components/Admin/PaginatorComponent.vue";
+import AdminTeamMerchantTeamSelectComponent
+    from "@/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamSelectComponent.vue";
 
 const $props = defineProps({
     teamId: {
@@ -31,16 +34,22 @@ function addNewMerchant() {
     addingNewMerchant.value = true
 }
 
-function getMerchants() {
-    axios.get('/admin/team-merchant-teams?cached=false&where[]=team_id,' + $props.teamId + '&relations=merchantTeam').then(response => {
+function cancelAddingNewMerchant() {
+    addingNewMerchant.value = false
+    creatingNewTeamMerchant.value = false
+    teamAddingAsMerchant.value = {}
+}
+
+function getMerchants(page = 1) {
+    axios.get('/admin/team-merchant-teams?cached=false&where[]=team_id,' + $props.teamId + '&page=' + page + '&relations=merchantTeam').then(response => {
         merchants.value = response.data.data
     }).catch(error => {
         console.log(error)
     })
 }
 
-function getMerchantTeams() {
-    axios.get('/admin/team-merchant-teams?cached=false&where[]=merchant_team_id,' + $props.teamId + '&relations=team').then(response => {
+function getMerchantTeams(page = 1) {
+    axios.get('/admin/team-merchant-teams?cached=false&where[]=merchant_team_id,' + $props.teamId + '&page=' + page + '&relations=team').then(response => {
         merchantTeams.value = response.data.data
     }).catch(error => {
         console.log(error)
@@ -79,14 +88,21 @@ function teamSelected(team) {
 
 <template>
     <div class="flex justify-end">
-        <PrimaryButton @click="addNewMerchant()" class="ms-4">
-            Add Merchant Team
-        </PrimaryButton>
+        <div v-if="!addingNewMerchant && !creatingNewTeamMerchant">
+            <PrimaryButton @click="addNewMerchant()" class="ms-4">
+                Add Merchant Team
+            </PrimaryButton>
+        </div>
+        <div v-else>
+            <PrimaryButton @click="cancelAddingNewMerchant()" class="ms-4">
+                Cancel
+            </PrimaryButton>
+        </div>
     </div>
 
     <div v-if="addingNewMerchant">
         <div class="py-2">Select merchant team...</div>
-        <AdminTeamSelectComponent :excludeTeams="merchants" :teamId="teamId" @teamSelected="teamSelected"/>
+        <AdminTeamMerchantTeamSelectComponent :teamId="teamId"  @teamSelected="teamSelected"></AdminTeamMerchantTeamSelectComponent>
     </div>
 
     <div v-else-if="creatingNewTeamMerchant">
@@ -94,7 +110,6 @@ function teamSelected(team) {
         <PrimaryButton @click="submitTeamMerchant()" class="">
             Add
         </PrimaryButton>
-
     </div>
 
     <div v-else>
@@ -109,7 +124,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="merchant in merchants.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="merchant.merchant_team"/>
+                <Link :href="route('admin.team', merchant.merchant_team_id)">
+                    <AdminTeamDetailsComponent :team="merchant.merchant_team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getMerchants"
+                        :pagination-data="merchants"></PaginatorComponent>
+                </div>
             </div>
         </div>
 
@@ -124,7 +148,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="merchantTeam in merchantTeams.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="merchantTeam.team"/>
+                <Link :href="route('admin.team', merchantTeam.team_id)">
+                    <AdminTeamDetailsComponent :team="merchantTeam.team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getMerchantTeams"
+                        :pagination-data="merchantTeams"></PaginatorComponent>
+                </div>
             </div>
         </div>
 
diff --git a/resources/js/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamSelectComponent.vue b/resources/js/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamSelectComponent.vue
new file mode 100644
index 0000000..da9bcf4
--- /dev/null
+++ b/resources/js/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamSelectComponent.vue
@@ -0,0 +1,95 @@
+<script setup>
+import {ref} from "vue";
+import TextInput from "@/Components/TextInput.vue";
+import InputLabel from "@/Components/InputLabel.vue";
+import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
+import AdminTeamCreateComponent from "@/Components/Admin/AdminTeamCreateComponent.vue";
+
+const $props = defineProps({
+
+    teamId: {
+        required: false,
+        default: null
+    }
+})
+
+const creatingANewTeam = ref(false)
+const searchStr = ref('')
+const teams = ref({})
+
+const emit = defineEmits([
+        'teamSelected'
+    ]
+);
+
+function searchTeam() {
+    axios.get('/admin/teams?where[]=name,like,*' + searchStr.value + '*&limit=100&relations=teamsThisTeamIsServiceFor').then(response => {
+        teams.value = response.data.data;
+
+    }).catch(error => {
+        console.log(error)
+    });
+}
+
+
+
+function startCreatingNewTeam() {
+    creatingANewTeam.value = true
+    teams.value = {}
+}
+
+function teamCreated(team) {
+    teamSelected(team)
+}
+
+function teamSelected(team) {
+    emit('teamSelected', team)
+    searchStr.value = ''
+    teams.value = {}
+}
+
+function myTeamIsATeamService(anotherTeam){
+    return anotherTeam.teams_this_team_is_service_for.find(subTeam => {
+        return subTeam.team_id === $props.teamId;
+    });
+}
+
+</script>
+
+<template>
+    <div v-if="creatingANewTeam">
+        <AdminTeamCreateComponent :searchStr="searchStr" @teamCreated="teamCreated" />
+    </div>
+
+    <div v-else>
+        <div>
+            <InputLabel for="name" value="Team name(Type to search and press Enter)"/>
+            <TextInput @keyup.enter.prevent="searchTeam()"
+                       id="name"
+                       type="text"
+                       class="mt-1 block w-full"
+                       v-model="searchStr"
+                       required
+            />
+        </div>
+
+        <div v-if="searchStr.length > 0 && teams.total > 0" class="mt-4">
+            <div v-for="team in teams.data" class="border-b py-1">
+                <button @click="teamSelected(team)" class="flex justify-start items-end">
+                    <AdminTeamDetailsComponent :team="team"/>
+                    <span v-if="myTeamIsATeamService(team)" class="text-red-500 text-xs italic pl-2">***Already added</span>
+                </button>
+            </div>
+            <div class="text-red-500 text-sm mt-4 cursor-pointer hover:underline" @click="startCreatingNewTeam()">
+                Create a new team?
+            </div>
+        </div>
+
+        <div v-if="searchStr.length > 0 && teams.total === 0">
+            <div class="text-red-500 text-sm mt-4 cursor-pointer hover:underline" @click="startCreatingNewTeam()">
+                We could not find teams. Do you want to create a new team?
+            </div>
+        </div>
+    </div>
+
+</template>
diff --git a/resources/js/Components/Admin/AdminTeamServiceTeamsComponent.vue b/resources/js/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamsComponent.vue
similarity index 62%
rename from resources/js/Components/Admin/AdminTeamServiceTeamsComponent.vue
rename to resources/js/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamsComponent.vue
index 5efdaec..0600973 100644
--- a/resources/js/Components/Admin/AdminTeamServiceTeamsComponent.vue
+++ b/resources/js/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamsComponent.vue
@@ -1,9 +1,12 @@
 <script setup>
 import {onMounted, ref} from "vue";
+import {Link} from '@inertiajs/vue3';
 import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
 import PrimaryButton from "@/Components/PrimaryButton.vue";
 import Swal from "sweetalert2";
-import AdminTeamSelectComponent from "@/Components/Admin/AdminTeamSelectComponent.vue";
+import PaginatorComponent from "@/Components/Admin/PaginatorComponent.vue";
+import AdminTeamServiceTeamSelectComponent
+    from "@/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamSelectComponent.vue";
 
 const $props = defineProps({
     teamId: {
@@ -31,16 +34,22 @@ function addNewService() {
     addingNewService.value = true
 }
 
-function getServices() {
-    axios.get('/admin/team-service-teams?cached=false&where[]=team_id,' + $props.teamId + '&relations=serviceTeam').then(response => {
+function cancelAddingNewService() {
+    addingNewService.value = false
+    creatingNewTeamService.value = false
+    teamAddingAsService.value = {}
+}
+
+function getServices(page = 1) {
+    axios.get('/admin/team-service-teams?cached=false&where[]=team_id,' + $props.teamId + '&page=' + page + '&relations=serviceTeam').then(response => {
         services.value = response.data.data
     }).catch(error => {
         console.log(error)
     })
 }
 
-function getServiceTeams() {
-    axios.get('/admin/team-service-teams?cached=false&where[]=service_team_id,' + $props.teamId + '&relations=team').then(response => {
+function getServiceTeams(page = 1) {
+    axios.get('/admin/team-service-teams?cached=false&where[]=service_team_id,' + $props.teamId + '&page=' + page + '&relations=team').then(response => {
         serviceTeams.value = response.data.data
     }).catch(error => {
         console.log(error)
@@ -79,14 +88,21 @@ function teamSelected(team) {
 
 <template>
     <div class="flex justify-end">
-        <PrimaryButton @click="addNewService()" class="ms-4">
-            Add Service Team
-        </PrimaryButton>
+        <div v-if="!addingNewService && !creatingNewTeamService">
+            <PrimaryButton @click="addNewService()" class="ms-4">
+                Add Service Team
+            </PrimaryButton>
+        </div>
+        <div v-else>
+            <PrimaryButton @click="cancelAddingNewService()" class="ms-4">
+                Cancel
+            </PrimaryButton>
+        </div>
     </div>
 
     <div v-if="addingNewService">
         <div class="py-2">Select service team...</div>
-        <AdminTeamSelectComponent :excludeTeams="services" :teamId="teamId" @teamSelected="teamSelected"/>
+        <AdminTeamServiceTeamSelectComponent :teamId="teamId"  @teamSelected="teamSelected"></AdminTeamServiceTeamSelectComponent>
     </div>
 
     <div v-else-if="creatingNewTeamService">
@@ -108,7 +124,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="service in services.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="service.service_team"/>
+                <Link :href="route('admin.team', service.service_team_id)">
+                    <AdminTeamDetailsComponent :team="service.service_team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getServices"
+                        :pagination-data="services"></PaginatorComponent>
+                </div>
             </div>
         </div>
 
@@ -123,7 +148,16 @@ function teamSelected(team) {
             </div>
 
             <div v-for="serviceTeam in serviceTeams.data" class="border-b py-1">
-                <AdminTeamDetailsComponent :team="serviceTeam.team"/>
+                <Link :href="route('admin.team', serviceTeam.team_id)">
+                    <AdminTeamDetailsComponent :team="serviceTeam.team"/>
+                </Link>
+            </div>
+            <div class="flex justify-end items-center mt-4">
+                <div class="w-full lg:w-1/3">
+                    <PaginatorComponent
+                        @setDataPage="getServiceTeams"
+                        :pagination-data="serviceTeams"></PaginatorComponent>
+                </div>
             </div>
         </div>
 
diff --git a/resources/js/Pages/Admin/Teams/Team.vue b/resources/js/Pages/Admin/Teams/Team.vue
index 4103141..35101af 100644
--- a/resources/js/Pages/Admin/Teams/Team.vue
+++ b/resources/js/Pages/Admin/Teams/Team.vue
@@ -5,9 +5,9 @@ import AdminTopNavigation from "@/Components/Admin/AdminTopNavigation.vue";
 import {onMounted, ref} from "vue";
 import PaginatorComponent from "@/Components/Admin/PaginatorComponent.vue";
 import Swal from "sweetalert2";
-import AdminTeamMerchantTeamsComponent from "@/Components/Admin/AdminTeamMerchantTeamsComponent.vue";
+import AdminTeamMerchantTeamsComponent from "@/Components/Admin/TeamMerchantTeams/AdminTeamMerchantTeamsComponent.vue";
 import AdminTeamDetailsComponent from "@/Components/Admin/AdminTeamDetailsComponent.vue";
-import AdminTeamServiceTeamsComponent from "@/Components/Admin/AdminTeamServiceTeamsComponent.vue";
+import AdminTeamServiceTeamsComponent from "@/Components/Admin/TeamServiceTeams/AdminTeamServiceTeamsComponent.vue";
 import AdminUserSelectComponent from "@/Components/Admin/AdminUserSelectComponent.vue";
 
 const $props = defineProps({