diff --git a/client/src/plugins/vuetify.js b/client/src/plugins/vuetify.js
index c0bafde0..110d41fc 100644
--- a/client/src/plugins/vuetify.js
+++ b/client/src/plugins/vuetify.js
@@ -5,10 +5,11 @@
  */
 
 // Styles
-import '@mdi/font/css/materialdesignicons.css'
-import 'vuetify/styles'
+import "@mdi/font/css/materialdesignicons.css";
+import "vuetify/styles";
 
-import { createVuetify } from 'vuetify'
+import { createVuetify } from "vuetify";
+import { VDataTable } from "vuetify/labs/VDataTable";
 
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
@@ -16,19 +17,28 @@ export default createVuetify({
     themes: {
       light: {
         colors: {
-          primary: '#217dbb',
-          secondary: '#5CBBF6',
-          background: '#D8F2FA',
-          accent: '#FFFFFF'
-        }
+          primary: "#217dbb",
+          secondary: "#5CBBF6",
+          background: "#D8F2FA",
+          accent: "#FFFFFF",
+        },
       },
       dark: {
         colors: {
-          primary: '#217dbb',
-          secondary: '#5CBBF6',
-          background: '#333'
-        }
-      }
-    }
-  }
-})
+          primary: "#217dbb",
+          secondary: "#5CBBF6",
+          background: "#333",
+        },
+      },
+    },
+  },
+  components: {
+    VDataTable,
+  },
+  defaults: {
+    VDataTable: {
+      fixedHeader: true,
+      noDataText: "Results not found",
+    },
+  },
+});
diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 809a7559..57e192aa 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -5,96 +5,79 @@
     </h5>
     <v-row>
       <v-col cols="12" md="8">
-        <section class="rounded shadow">
-          <v-sheet>
-            <v-table class="rounded-sm" style="margin-top: 0.5rem;">
-              <thead class="bg-grey-lighten-5">
-                <tr>
-                  <th
-                    class="text-grey-darken-1"
-                    v-for="head in vouchersHeaders"
-                    :key="head"
-                  >
-                    {{ head }}
-                  </th>
-                  <th class="text-grey-darken-1">
-                    Approve/Reject
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="(item, index) in usersPerPage" :key="index">
-                  <td>{{ item.id }}</td>
-                  <td v-if="item.name" class="d-flex align-center">
-                    <v-avatar color="primary" size="30" class="mr-2">
-                      <span class="text-uppercase">{{
-                        addAvatar(item.name)
-                      }}</span>
-                    </v-avatar>
-                    <div>
-                      <p>{{ item.name }}</p>
-                      <p>
-                        {{ item.email }}
-                      </p>
-                    </div>
-                  </td>
+        <div class="actions d-flex justify-end my-2">
+          <BaseButton
+            :disabled="approveAllCount <= 0"
+            color="primary"
+            text="Approve All"
+            class="approve text-capitalize"
+            @click="approveAllVouchers"
+          />
+        </div>
+        <v-data-table
+          :headers="vouchersHeaders"
+          :items="vouchers"
+          class="elevation-1 rounded shadow"
+        >
+          <template v-slot:item="{ item }">
+            <tr>
+              <td>{{ item.raw.id }}</td>
+              <td v-if="item.raw.name" class="d-flex align-center">
+                <v-avatar color="primary" size="30" class="mr-2">
+                  <span class="text-uppercase">{{
+                    addAvatar(item.raw.name)
+                  }}</span>
+                </v-avatar>
+                <div>
+                  <p>{{ item.raw.name }}</p>
+                  <p>
+                    {{ item.raw.email }}
+                  </p>
+                </div>
+              </td>
 
-                  <td class="d-flex align-center" v-else>
-                    <v-avatar color="warning" size="30" class="mr-2">
-                      <span class="text-uppercase">A</span>
-                    </v-avatar>
-                    <div>
-                      <p>Voucher generated by Admin</p>
-                    </div>
-                  </td>
-                  <td v-if="item.reason">{{ item.reason }}</td>
-                  <td v-else>-</td>
-                  <td>{{ item.vms }}</td>
-                  <td>{{ item.public_ips }}</td>
-                  <td v-if="!item.approved && !item.rejected">
-                    <BaseButton
-                      color="primary"
-                      text="Approve"
-                      size="small"
-                      class="mr-2 text-capitalize"
-                      variant="flat"
-                      @click="approveVoucher(item.id, true)"
-                    />
+              <td class="d-flex align-center" v-else>
+                <v-avatar color="warning" size="30" class="mr-2">
+                  <span class="text-uppercase">A</span>
+                </v-avatar>
+                <div>
+                  <p>Voucher generated by Admin</p>
+                </div>
+              </td>
+              <td v-if="item.columns.reason">{{ item.columns.reason }}</td>
+              <td v-else>-</td>
+              <td>{{ item.columns.vms }}</td>
+              <td>{{ item.columns.public_ips }}</td>
+              <td
+                v-if="!item.props.title.approved && !item.props.title.rejected"
+              >
+                <BaseButton
+                  color="primary"
+                  text="Approve"
+                  size="small"
+                  class="mr-2 text-capitalize"
+                  variant="flat"
+                  @click="approveVoucher(item.columns.id, true)"
+                />
 
-                    <BaseButton
-                      color="red-lighten-1"
-                      text="Reject"
-                      size="small"
-                      class="text-capitalize"
-                      variant="flat"
-                      @click="approveVoucher(item.id, false)"
-                    />
-                  </td>
-                  <td v-else-if="item.rejected">
-                    <span class="text-error">Rejected</span>
-                  </td>
-                  <td v-else>
-                    <span class="text-success">Approved</span>
-                  </td>
-                </tr>
-              </tbody>
-            </v-table>
-            <div class="actions d-flex justify-center align-center">
-              <v-pagination
-                v-model="currentPage"
-                :length="Math.ceil(totalPages / itemsPerPage)"
-                :total-visible="Math.ceil(totalPages / itemsPerPage)"
-              ></v-pagination>
-              <BaseButton
-                v-if="approveAllCount > 0"
-                color="primary"
-                text="Approve All"
-                class="approve text-capitalize mr-5"
-                @click="approveAllVouchers"
-              />
-            </div>
-          </v-sheet>
-        </section>
+                <BaseButton
+                  color="red-lighten-1"
+                  text="Reject"
+                  size="small"
+                  class="text-capitalize"
+                  variant="flat"
+                  @click="approveVoucher(item.columns.id, false)"
+                />
+              </td>
+              <td v-else-if="item.raw.rejected">
+                <span class="text-error">Rejected</span>
+              </td>
+              <td v-else>
+                <span class="text-success">Approved</span>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
       </v-col>
       <v-col cols="12" md="4">
         <v-row>
@@ -124,43 +107,44 @@
           </v-col>
         </v-row>
         <section class="my-5 shadow">
-          <v-sheet rounded class="bg-grey-lighten-5">
-            <h5 class="text-grey-darken-1 text-h5 bg-primary text-center pa-4">
-              Users
-            </h5>
-            <div v-if="users.length > 0">
-              <v-table class="rounded-lg">
-                <thead class="bg-grey-lighten-5">
-                  <tr>
-                    <th
-                      class="text-grey-darken-1"
-                      v-for="head in usersHeaders"
-                      :key="head"
-                    >
-                      {{ head }}
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(item, index) in users" :key="index">
-                    <td>{{ ++index }}</td>
-                    <td>{{ item.name }}</td>
-                    <td>
-                      {{ item.email }}
-                    </td>
-                    <td>
-                      <span class="text-red">{{ item.used_vms }}</span
-                      >/<span>{{ item.vms }}</span>
-                    </td>
-                    <td>
-                      <span class="text-red">{{ item.used_public_ips }}</span
-                      >/<span>{{ item.public_ips }}</span>
-                    </td>
-                  </tr>
-                </tbody>
-              </v-table>
-            </div>
-          </v-sheet>
+          <h5 class="bg-grey-lighten-5 text-h5 bg-primary text-center pa-4">
+            Users
+          </h5>
+          <v-data-table
+            v-model:items-per-page="itemsPerPage"
+            :headers="usersHeaders"
+            :items="users"
+            class="elevation-1"
+          >
+            <template v-slot:item="{ item, index }">
+              <tr>
+                <td>
+                  {{ ++index }}
+                </td>
+                <td v-if="item.columns.name" class="d-flex align-center">
+                  <v-avatar color="primary" size="30" class="mr-2">
+                    <span class="text-uppercase">{{
+                      addAvatar(item.columns.name)
+                    }}</span>
+                  </v-avatar>
+                  <div>
+                    <p>{{ item.columns.name }}</p>
+                    <p>
+                      {{ item.raw.email }}
+                    </p>
+                  </div>
+                </td>
+                <td>
+                  <span class="text-red">{{ item.raw.used_vms }}</span>
+                  /<span>{{ item.columns.vms }}</span>
+                </td>
+                <td>
+                  <span class="text-red">{{ item.raw.used_public_ips }}</span
+                  >/<span>{{ item.columns.public_ips }}</span>
+                </td>
+              </tr>
+            </template>
+          </v-data-table>
         </section>
       </v-col>
     </v-row>
@@ -169,7 +153,7 @@
 </template>
 
 <script>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted } from "vue";
 import BaseButton from "@/components/Form/BaseButton.vue";
 import userService from "@/services/userService.js";
 import Toast from "@/components/Toast.vue";
@@ -182,14 +166,20 @@ export default {
   setup() {
     const confirm = ref(null);
     const vouchersHeaders = ref([
-      "No",
-      "User",
-      "Reason for Voucher",
-      "VMs",
-      "Public IPs",
+      { title: "No", key: "id" },
+      { title: "User", key: "user", sortable: false },
+      { title: "Reason for Voucher", key: "reason", sortable: false },
+      { title: "VMs", key: "vms" },
+      { title: "Public IPs", key: "public_ips" },
+      { title: "Actions", key: "actions", sortable: false },
     ]);
 
-    const usersHeaders = ref(["No", "Name", "Email", "VMs", "IPs"]);
+    const usersHeaders = ref([
+      { title: "No", key: "id", sortable: false },
+      { title: "Name", key: "name", sortable: false },
+      { title: "VMs", key: "vms", sortable: false },
+      { title: "IPs", key: "public_ips", sortable: false },
+    ]);
 
     const vouchers = ref([]);
     const users = ref([]);
@@ -198,25 +188,18 @@ export default {
     const usedResources = ref(null);
     const usedIPs = ref(null);
     const approveAllCount = ref(null);
-    const currentPage = ref(null);
-    const totalPages = ref(null);
-    const itemsPerPage = ref(null);
     const userInfo = ref(null);
-
-    currentPage.value = 1;
-    itemsPerPage.value = 10;
-
+    const itemsPerPage = ref(5);
     const getVouchers = () => {
       userService
         .getVouchers()
         .then((response) => {
           const { data } = response.data;
           vouchers.value = data;
-          totalPages.value = data.length;
           approveAllCount.value = 0;
 
           for (let voucher of data) {
-            if (!voucher?.approved) {
+            if (!voucher?.approved && !voucher?.rejected) {
               approveAllCount.value++;
             }
 
@@ -224,7 +207,6 @@ export default {
               userInfo.value = users?.value?.find(
                 (user) => user.user_id === voucher.user_id
               );
-
               if (voucher.user_id === userInfo?.value?.user_id) {
                 Object.assign(voucher, {
                   email: userInfo?.value?.email,
@@ -283,13 +265,6 @@ export default {
         });
     };
 
-    const usersPerPage = computed(() => {
-      return vouchers.value.slice(
-        (currentPage.value - 1) * itemsPerPage.value,
-        currentPage.value * itemsPerPage.value
-      );
-    });
-
     const addAvatar = (name) => {
       return name.charAt(0);
     };
@@ -313,15 +288,12 @@ export default {
       loading,
       confirm,
       toast,
-      usersPerPage,
+      itemsPerPage,
       getVouchers,
       approveVoucher,
       approveAllVouchers,
       getUsers,
       addAvatar,
-      currentPage,
-      totalPages,
-      itemsPerPage,
       usedIPs,
     };
   },
@@ -352,14 +324,6 @@ export default {
 td {
   line-height: 1em;
 }
-.actions {
-  position: relative;
-}
-
-.approve {
-  position: absolute;
-  right: 5px;
-}
 
 .shadow {
   box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.1);
diff --git a/client/src/views/K8s.vue b/client/src/views/K8s.vue
index 1a82fc99..cba9a1cc 100644
--- a/client/src/views/K8s.vue
+++ b/client/src/views/K8s.vue
@@ -113,138 +113,83 @@
     </v-row>
     <v-row v-if="results.length > 0">
       <v-col>
-        <v-sheet>
-          <v-table>
-            <thead class="bg-primary text-white">
-              <tr>
-                <th
-                  class="text-left text-white"
-                  v-for="head in headers"
-                  :key="head"
-                >
-                  {{ head }}
-
-                  <v-tooltip
-                    v-if="head === 'Yggdrasil IP'"
-                    text="visit https://yggdrasil-network.github.io/installation.html to get connected to yggdrasil network"
-                    location="top"
-                  >
-                    <template v-slot:activator="{ props }">
-                      <a
-                        href="https://yggdrasil-network.github.io/installation.html"
-                        target="_blank"
-                      >
-                        <font-awesome-icon
-                          v-bind="props"
-                          :icon="['fas', 'circle-exclamation']"
-                          color="white"
-                        />
-                      </a>
-                    </template>
-                  </v-tooltip>
-                </th>
-                <th class="text-left text-white">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in dataPerPage" :key="item.name">
-                <td>{{ item.master.clusterID }}</td>
-                <td>{{ item.master.name }}</td>
-                <td>{{ item.master.sru }}GB</td>
-                <td>{{ item.master.mru }}GB</td>
-                <td>{{ item.master.cru }}</td>
-                <td class="cursor-pointer" @click="copyIP(item.master.ygg_ip)">
-                  {{ item.master.ygg_ip }}
-                </td>
-                <td
-                  v-if="item.master.public_ip"
-                  class="cursor-pointer"
-                  @click="copyIP(item.master.public_ip)"
+        <v-data-table :headers="headers" :items="results" class="elevation-1">
+          <template v-slot:item="{ item }">
+            <tr>
+              <td>{{ item.raw.master.clusterID }}</td>
+              <td>{{ item.raw.master.name }}</td>
+              <td>{{ item.raw.master.sru }}GB</td>
+              <td>{{ item.raw.master.mru }}GB</td>
+              <td>{{ item.raw.master.cru }}</td>
+              <td
+                class="cursor-pointer"
+                @click="copyIP(item.raw.master.ygg_ip)"
+              >
+                {{ item.raw.master.ygg_ip }}
+              </td>
+              <td
+                v-if="item.raw.master.public_ip"
+                class="cursor-pointer"
+                @click="copyIP(item.raw.master.public_ip)"
+              >
+                {{ item.raw.master.public_ip }}
+              </td>
+              <td v-else>-</td>
+              <td>
+                <font-awesome-icon
+                  class="text-red-accent-2 mr-5 cursor-pointer"
+                  @click="
+                    deleteK8s(item.raw.master.clusterID, item.raw.master.name)
+                  "
+                  icon="fa-solid fa-trash"
+                />
+                <v-dialog
+                  transition="dialog-top-transition"
+                  v-for="(worker, index) in item.raw.workers"
+                  :key="index"
                 >
-                  {{ item.master.public_ip }}
-                </td>
-                <td v-else>-</td>
-                <td>
-                  <font-awesome-icon
-                    class="text-red-accent-2 mr-5 cursor-pointer"
-                    @click="deleteK8s(item.master.clusterID, item.master.name)"
-                    icon="fa-solid fa-trash"
-                  />
-                  <v-dialog
-                    transition="dialog-top-transition workers"
-                    v-model="dialog"
-                    v-if="item.workers.length > 0"
+                  <template v-slot:activator="{ props }">
+                    <font-awesome-icon
+                      v-if="item.raw.workers.length > 0"
+                      class="text-primary cursor-pointer"
+                      v-bind="props"
+                      icon="fa-solid fa-eye"
+                    />
+                  </template>
+                  <v-card
+                    width="50%"
+                    class="mx-auto pa-5 pb-10"
+                    v-click-outside="onClickOutside"
                   >
-                    <template v-slot:activator="{ props }">
-                      <font-awesome-icon
-                        v-if="item.workers.length > 0"
-                        class="text-primary cursor-pointer"
-                        v-bind="props"
-                        icon="fa-solid fa-eye"
-                      />
-                    </template>
-                    <v-card width="50%" class="mx-auto pa-5">
-                      <v-icon class="ml-auto" @click="dialog = false"
-                        >mdi-close</v-icon
+                    <v-card-text>
+                      <h5
+                        class="text-h5 text-md-h4 font-weight-bold text-center my-5 secondary"
                       >
-                      <v-card-text>
-                        <h5
-                          class="text-h5 text-md-h4 font-weight-bold text-center my-5 secondary"
-                        >
-                          Workers
-                        </h5>
-                      </v-card-text>
-                      <v-table>
-                        <thead class="bg-primary">
-                          <tr>
-                            <th
-                              class="text-left text-white"
-                              v-for="head in workerHeaders"
-                              :key="head"
-                            >
-                              {{ head }}
-                            </th>
-                          </tr>
-                        </thead>
-                        <tbody v-for="item in item.workers" :key="item.id">
-                          <tr>
-                            <td>{{ item.clusterID }}</td>
-                            <td>{{ item.name }}</td>
-                            <td>{{ item.sru }}GB</td>
-                            <td>{{ item.mru }}GB</td>
-                            <td>{{ item.cru }}</td>
-                            <td>{{ item.resources }}</td>
-                          </tr>
-                        </tbody>
-                      </v-table>
-                      <v-pagination
-                        v-model="currentPage"
-                        :length="totalPages"
-                        :total-visible="
-                          Math.ceil(item.workers.length / itemsPerPage)
-                        "
-                      ></v-pagination>
-                    </v-card>
-                  </v-dialog>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-          <div class="actions d-flex justify-center align-center">
-            <v-pagination
-              v-model="currentPage"
-              :length="totalPages"
-              :total-visible="totalPages"
-            ></v-pagination>
-          </div>
-        </v-sheet>
-      </v-col>
-    </v-row>
-    <v-row v-else>
-      <v-col>
-        <p class="my-5 text-center">Kubernetes clusters are not found</p>
+                        Workers
+                      </h5>
+                    </v-card-text>
+                    <v-data-table
+                      :headers="workerHeaders"
+                      :items="item.raw.workers"
+                      class="elevation-1"
+                    >
+                      <template v-slot:item="{ item }">
+                        <tr>
+                          <td>{{ item.raw.clusterID }}</td>
+                          <td>{{ item.raw.name }}</td>
+                          <td>{{ item.raw.sru }}GB</td>
+                          <td>{{ item.raw.mru }}GB</td>
+                          <td>{{ item.raw.cru }}</td>
+                          <td>{{ item.raw.resources }}</td>
+                        </tr>
+                      </template>
+                    </v-data-table>
+                  </v-card>
+                </v-dialog>
+              </td>
+            </tr>
+          </template>
+        </v-data-table>
       </v-col>
     </v-row>
     <Confirm ref="confirm" />
@@ -253,7 +198,7 @@
 </template>
 
 <script>
-import { ref, onMounted, inject, computed } from "vue";
+import { ref, onMounted, inject } from "vue";
 import BaseSelect from "@/components/Form/BaseSelect.vue";
 import BaseButton from "@/components/Form/BaseButton.vue";
 import userService from "@/services/userService";
@@ -268,14 +213,11 @@ export default {
     Toast,
   },
   setup() {
+    const removeTagDialogs = ref({});
     const emitter = inject("emitter");
-
     const verify = ref(false);
     const checked = ref(false);
     const alert = ref(false);
-    const currentPage = ref(null);
-    const totalPages = ref(null);
-    const itemsPerPage = ref(null);
     const workerVerify = ref(false);
     const k8Name = ref(null);
     const nameValidation = ref([
@@ -291,21 +233,75 @@ export default {
       },
     ]);
     const headers = ref([
-      "ID",
-      "Name",
-      "Disk (GB)",
-      "RAM (GB)",
-      "CPU",
-      "Yggdrasil IP",
-      "Public IP",
+      {
+        title: "ID",
+        key: "clusterID",
+        sortable: false,
+      },
+      {
+        title: "Name",
+        key: "name",
+        sortable: false,
+      },
+      {
+        title: "Disk (GB)",
+        key: "sru",
+        sortable: false,
+      },
+      {
+        title: "RAM (GB)",
+        key: "mru",
+        sortable: false,
+      },
+      {
+        title: "CPU",
+        key: "cru",
+        sortable: false,
+      },
+      {
+        title: "Yggdrasil IP",
+        key: "ygg_ip",
+        sortable: false,
+      },
+      {
+        title: "Public IP",
+        key: "public_ip",
+        sortable: false,
+      },
+      { title: "Actions", key: "actions", sortable: false },
     ]);
+
     const workerHeaders = ref([
-      "ID",
-      "Name",
-      "Disk (GB)",
-      "RAM (GB)",
-      "CPU",
-      "Resources",
+      {
+        title: "ID",
+        key: "clusterID",
+        sortable: false,
+      },
+      {
+        title: "Name",
+        key: "name",
+        sortable: false,
+      },
+      {
+        title: "Disk (GB)",
+        key: "sru",
+        sortable: false,
+      },
+      {
+        title: "RAM (GB)",
+        key: "mru",
+        sortable: false,
+      },
+      {
+        title: "CPU",
+        key: "cru",
+        sortable: false,
+      },
+      {
+        title: "Resources",
+        key: "resources",
+        sortable: false,
+      },
     ]);
     const selectedResource = ref(null);
     const resources = ref([
@@ -330,9 +326,7 @@ export default {
     const wForm = ref(null);
     const deLoading = ref(false);
     const dialog = ref(false);
-
-    currentPage.value = 1;
-    itemsPerPage.value = 5;
+    const active = ref(false);
 
     const getK8s = () => {
       userService
@@ -340,9 +334,6 @@ export default {
         .then((response) => {
           const { data } = response.data;
           results.value = data;
-          totalPages.value = Math.ceil(
-            results.value.length / itemsPerPage.value
-          );
         })
         .catch((response) => {
           const { err } = response.response.data;
@@ -449,18 +440,13 @@ export default {
       emitter.emit("userUpdateQuota", true);
     };
 
-    const dataPerPage = computed(() => {
-      return results.value.slice(
-        (currentPage.value - 1) * itemsPerPage.value,
-        currentPage.value * itemsPerPage.value
-      );
-    });
-
     const copyIP = (ip) => {
       navigator.clipboard.writeText(ip);
       toast.value.toast("IP Copied", "#388E3C");
     };
-
+    const onClickOutside = () => {
+      active.value = false;
+    };
     onMounted(() => {
       let token = localStorage.getItem("token");
       if (token) getK8s();
@@ -488,12 +474,9 @@ export default {
       wForm,
       toast,
       nameValidation,
-      currentPage,
-      totalPages,
-      itemsPerPage,
-      dataPerPage,
       workerHeaders,
       dialog,
+      removeTagDialogs,
       copyIP,
       resetInputs,
       deployK8s,
@@ -501,6 +484,7 @@ export default {
       deleteAllK8s,
       deleteK8s,
       emitQuota,
+      onClickOutside,
     };
   },
 };
diff --git a/client/src/views/VM.vue b/client/src/views/VM.vue
index 9a023fc6..9bf8619d 100644
--- a/client/src/views/VM.vue
+++ b/client/src/views/VM.vue
@@ -54,73 +54,43 @@
     </v-row>
     <v-row v-if="results.length > 0">
       <v-col>
-        <v-sheet>
-          <v-table>
-            <thead class="bg-primary">
-              <tr>
-                <th
-                  class="text-left text-white"
-                  v-for="head in headers"
-                  :key="head"
-                >
-                  {{ head }}
-                  <v-tooltip
-                    v-if="head === 'Yggdrasil IP'"
-                    text="visit https://yggdrasil-network.github.io/installation.html to get connected to yggdrasil network"
-                    location="top"
+        <v-row v-if="results.length > 0">
+          <v-col>
+            <v-data-table
+              :headers="headers"
+              :items="results"
+              class="elevation-1"
+            >
+              <template v-slot:item="{ item }">
+                <tr>
+                  <td>{{ item.raw.id }}</td>
+                  <td>{{ item.raw.name }}</td>
+                  <td>{{ item.raw.sru }}GB</td>
+                  <td>{{ item.raw.mru }}GB</td>
+                  <td>{{ item.raw.cru }}</td>
+                  <td class="cursor-pointer" @click="copyIP(item.raw.ygg_ip)">
+                    {{ item.raw.ygg_ip }}
+                  </td>
+                  <td
+                    v-if="item.raw.public_ip"
+                    class="cursor-pointer"
+                    @click="copyIP(item.raw.public_ip)"
                   >
-                    <template v-slot:activator="{ props }">
-                      <a
-                        href="https://yggdrasil-network.github.io/installation.html"
-                        target="_blank"
-                      >
-                        <font-awesome-icon
-                          v-bind="props"
-                          :icon="['fas', 'circle-exclamation']"
-                          color="white"
-                        />
-                      </a>
-                    </template>
-                  </v-tooltip>
-                </th>
-                <th class="text-left text-white">
-                  Actions
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in dataPerPage" :key="item.name">
-                <td>{{ item.id }}</td>
-                <td>{{ item.name }}</td>
-                <td>{{ item.sru }}GB</td>
-                <td>{{ item.mru }}MB</td>
-                <td>{{ item.cru }}</td>
-                <td class="cursor-pointer" @click="copyIP(item.ygg_ip)">
-                  {{ item.ygg_ip }}
-                </td>
-                <td v-if="item.public_ip" @click="copyIP(item.public_ip)">
-                  {{ item.public_ip }}
-                </td>
-                <td v-else>-</td>
-
-                <td>
-                  <font-awesome-icon
-                    class="text-red-accent-2 cursor-pointer"
-                    @click="deleteVm(item.id, item.name)"
-                    icon="fa-solid fa-trash"
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-          <div class="actions d-flex justify-center align-center">
-            <v-pagination
-              v-model="currentPage"
-              :length="currentPage"
-              :total-visible="totalPages"
-            ></v-pagination>
-          </div>
-        </v-sheet>
+                    {{ item.raw.public_ip }}
+                  </td>
+                  <td v-else>-</td>
+                  <td>
+                    <font-awesome-icon
+                      class="text-red-accent-2 cursor-pointer"
+                      @click="deleteVm(item.raw.id, item.raw.name)"
+                      icon="fa-solid fa-trash"
+                    />
+                  </td>
+                </tr>
+              </template>
+            </v-data-table>
+          </v-col>
+        </v-row>
       </v-col>
     </v-row>
     <v-row v-else>
@@ -136,7 +106,7 @@
 </template>
 
 <script>
-import { ref, onMounted, inject, computed } from "vue";
+import { ref, onMounted, inject } from "vue";
 import userService from "@/services/userService";
 import BaseSelect from "@/components/Form/BaseSelect.vue";
 import BaseButton from "@/components/Form/BaseButton.vue";
@@ -155,8 +125,6 @@ export default {
     const verify = ref(false);
     const checked = ref(false);
     const alert = ref(false);
-    const currentPage = ref(null);
-    const totalPages = ref(null);
     const itemsPerPage = ref(null);
     const name = ref(null);
     const rules = ref([
@@ -173,13 +141,42 @@ export default {
       { title: "Large VM (4 CPU, 8GB, 15GB)", value: "large" },
     ]);
     const headers = ref([
-      "ID",
-      "Name",
-      "Disk (GB)",
-      "RAM (MB)",
-      "CPU",
-      "Yggdrasil IP",
-      "Public IP",
+      {
+        title: "ID",
+        key: "id",
+        sortable: false,
+      },
+      {
+        title: "Name",
+        key: "name",
+        sortable: false,
+      },
+      {
+        title: "Disk (GB)",
+        key: "sru",
+        sortable: false,
+      },
+      {
+        title: "RAM (GB)",
+        key: "mru",
+        sortable: false,
+      },
+      {
+        title: "CPU",
+        key: "cru",
+        sortable: false,
+      },
+      {
+        title: "Yggdrasil IP",
+        key: "ygg_ip",
+        sortable: false,
+      },
+      {
+        title: "Public IP",
+        key: "public_ip",
+        sortable: false,
+      },
+      { title: "Actions", key: "actions", sortable: false },
     ]);
 
     const toast = ref(null);
@@ -194,8 +191,6 @@ export default {
         return "Name needs to be more than 2 characters and less than 20.";
       },
     ]);
-    currentPage.value = 1;
-    itemsPerPage.value = 5;
 
     const getVMS = () => {
       userService
@@ -203,9 +198,6 @@ export default {
         .then((response) => {
           const { data } = response.data;
           results.value = data;
-          totalPages.value = Math.ceil(
-            results.value.length / itemsPerPage.value
-          );
         })
         .catch((response) => {
           const { err } = response.response.data;
@@ -297,13 +289,6 @@ export default {
     const emitQuota = () => {
       emitter.emit("userUpdateQuota", true);
     };
-    const dataPerPage = computed(() => {
-      return results.value.slice(
-        (currentPage.value - 1) * itemsPerPage.value,
-        currentPage.value * itemsPerPage.value
-      );
-    });
-
     const copyIP = (ip) => {
       navigator.clipboard.writeText(ip);
       toast.value.toast("IP Copied", "#388E3C");
@@ -330,10 +315,7 @@ export default {
       form,
       checked,
       nameValidation,
-      currentPage,
-      totalPages,
       itemsPerPage,
-      dataPerPage,
       reset,
       getVMS,
       deployVm,
@@ -350,4 +332,8 @@ export default {
 .cursor-pointer {
   cursor: pointer;
 }
+thead th {
+  background-color: #217dbb !important;
+  color: white !important;
+}
 </style>