diff --git a/client/package.json b/client/package.json
index 2ec624ff..7c864cd4 100644
--- a/client/package.json
+++ b/client/package.json
@@ -15,6 +15,7 @@
     "axios": "^1.7.2",
     "core-js": "^3.33.2",
     "file-saver": "^2.0.5",
+    "javascript-time-ago": "^2.5.11",
     "jszip": "^3.10.1",
     "mosha-vue-toastify": "^1.0.23",
     "pinia": "^2.3.1",
diff --git a/client/src/components/TopupPayment.vue b/client/src/components/TopupPayment.vue
index 7dc643e5..187f770c 100644
--- a/client/src/components/TopupPayment.vue
+++ b/client/src/components/TopupPayment.vue
@@ -14,7 +14,7 @@
           </div>
 
           <v-sheet class="d-flex flex-column pa-5 align-center" color="primary">
-            <p class="font-weight-bold">${{ balance }}</p>
+            <p class="font-weight-bold">${{ getTotalBalance }}</p>
             <span class="text-disabled text-capitalize mt-1"
               >current balance</span
             >
@@ -111,7 +111,7 @@
   </v-row>
 </template>
 <script setup>
-import { ref, watch } from "vue";
+import { ref } from "vue";
 import BaseInput from "./Form/BaseInput.vue";
 import BaseButton from "./Form/BaseButton.vue";
 import userService from "@/services/userService";
@@ -130,8 +130,7 @@ const loading = ref(false);
 const verifyVoucher = ref(false);
 const toast = ref(null);
 const store = useUserStore();
-const { user } = storeToRefs(store);
-const balance = ref(user.value.balance + user.value.voucher_balance);
+const { user, getTotalBalance } = storeToRefs(store);
 const defaultCard = ref(user.value.stripe_default_payment_id);
 const voucher = ref();
 const amount = ref(null);
@@ -187,14 +186,4 @@ async function chargeBalance() {
       await store.getUserInfo();
     });
 }
-
-watch(
-  user,
-  (newVal) => {
-    if (newVal) {
-      balance.value = newVal.balance;
-    }
-  },
-  { immediate: true }
-);
 </script>
diff --git a/client/src/layouts/default/AppBar.vue b/client/src/layouts/default/AppBar.vue
index eb253ab6..f49b5346 100644
--- a/client/src/layouts/default/AppBar.vue
+++ b/client/src/layouts/default/AppBar.vue
@@ -43,7 +43,7 @@
           </v-btn>
         </v-toolbar-items>
         <v-btn class="text-capitalize" flat>
-          Balance: ${{ user?.balance }}
+          Balance: ${{ getTotalBalance }}
         </v-btn>
         <v-menu id="notifications" location="bottom">
           <template v-slot:activator="{ props }">
@@ -133,7 +133,7 @@ const drawer = ref(false);
 const isActive = ref(0);
 const toast = ref(null);
 const store = useUserStore();
-const { user, isLoading, notifications } = storeToRefs(store);
+const { user, isLoading, notifications, getTotalBalance } = storeToRefs(store);
 
 const navItems = ref([
   { title: "Home", path: "/" },
diff --git a/client/src/router/index.js b/client/src/router/index.js
index 2dc44db3..f1dba894 100644
--- a/client/src/router/index.js
+++ b/client/src/router/index.js
@@ -5,14 +5,16 @@ import Account from "@/views/Account.vue";
 import VM from "@/views/VM.vue";
 import Admin from "@/views/Admin.vue";
 import NewPassword from "@/views/Newpassword.vue";
-import ProfileTab from "@/views/tabs/Profile.vue";
-import PaymentsTab from "@/views/tabs/Payments.vue";
-import Invoices from "@/views/tabs/Invoices.vue";
-import ChangePassword from "@/views/tabs/ChangePassword.vue";
-import AuditLogs from "@/views/tabs/AuditLogs.vue";
-import DeleteAccount from "@/views/tabs/DeleteAccount.vue";
+import ProfileTab from "@/views/accManagemenTabs/Profile.vue";
+import PaymentsTab from "@/views/accManagemenTabs/Payments.vue";
+import Invoices from "@/views/accManagemenTabs/Invoices.vue";
+import ChangePassword from "@/views/accManagemenTabs/ChangePassword.vue";
+import AuditLogs from "@/views/accManagemenTabs/AuditLogs.vue";
+import DeleteAccount from "@/views/accManagemenTabs/DeleteAccount.vue";
 import Deploy from "@/views/Deploy.vue";
 import Home from "@/views/HomeWrapper.vue";
+import Requests from "@/views/adminTabs/Requests.vue";
+import History from "@/views/adminTabs/History.vue";
 
 const routes = [
   {
@@ -145,10 +147,28 @@ const routes = [
     path: "/admin",
     name: "Admin",
     component: Admin,
+    beforeEnter(to, from, next) {
+      const store = useUserStore();
+
+      if (!store.isAdmin) {
+        next("/");
+      }
+      next();
+    },
     meta: {
       layout: "Default",
       requiresAuth: true,
     },
+    children: [
+      {
+        path: "",
+        component: Requests,
+      },
+      {
+        path: "history",
+        component: History,
+      },
+    ],
   },
   {
     path: "/logout",
@@ -171,13 +191,13 @@ const router = createRouter({
 });
 
 router.beforeEach(async (to, from, next) => {
-  const isAuthenticated = localStorage.getItem("token") !== null;
   const store = useUserStore();
+  const { isAuthenticated, user } = store;
 
   if (to.meta.requiresAuth && !isAuthenticated) {
     next("/");
   } else {
-    if (!store.user && isAuthenticated) await store.getUserInfo();
+    if (!user && isAuthenticated) await store.getUserInfo();
     next();
   }
 });
diff --git a/client/src/services/userService.js b/client/src/services/userService.js
index 37121d18..f1f7be7a 100644
--- a/client/src/services/userService.js
+++ b/client/src/services/userService.js
@@ -255,7 +255,7 @@ export default {
 
   // Deployments
   async getDeploymentsCount() {
-    return await authClient().get("/deployment/count");
+    return await authClient().get("/deployments/count");
   },
 
   // Vouchers
@@ -271,8 +271,8 @@ export default {
     return await authClient().put("/voucher");
   },
 
-  async generateVoucher(length, vms, public_ips) {
-    return await authClient().post("/voucher", { length, vms, public_ips });
+  async generateVoucher(balance, length) {
+    return await authClient().post("/voucher", { balance, length });
   },
 
   async getAuditEvents() {
@@ -323,8 +323,6 @@ export default {
 
   // setting next launch value
   async setNextLaunch(value) {
-    return await authClient().put("/nextlaunch", {
-      launched: value,
-    });
+    return await authClient().put("/nextlaunch", { launched: value });
   },
 };
diff --git a/client/src/store/UserStore.js b/client/src/store/UserStore.js
index d0abd886..d9aa05a9 100644
--- a/client/src/store/UserStore.js
+++ b/client/src/store/UserStore.js
@@ -9,8 +9,7 @@ export const useUserStore = defineStore("userStore", {
     isLoaded: false,
     notifications: [],
     maintenance: false,
-    next_launch: false,
-    next_launch_admin: false,
+    next_launch_admin: true,
     isAuthenticated: localStorage.getItem("token"),
   }),
   actions: {
@@ -33,7 +32,7 @@ export const useUserStore = defineStore("userStore", {
       } catch (error) {
         if (error.response.status == 401) {
           localStorage.removeItem("token");
-          router.push("/login");
+          router.push("/");
           return error;
         }
         return error;
@@ -60,13 +59,21 @@ export const useUserStore = defineStore("userStore", {
       try {
         const response = await userService.nextLaunch();
         const { launched } = response.data.data;
-        this.next_launch = launched;
         this.next_launch_admin = launched;
       } catch (error) {
         return error;
       }
     },
 
+    async setNextLaunch(value) {
+      try {
+        const response = await userService.setNextLaunch(value);
+        return response;
+      } catch (error) {
+        return error;
+      }
+    },
+
     async checkMaintenance() {
       try {
         const response = await userService.maintenance();
@@ -79,5 +86,8 @@ export const useUserStore = defineStore("userStore", {
   },
   getters: {
     isUserLoaded: (state) => state.isLoaded,
+    isNextLaunchEnabled: (state) => state.next_launch_admin,
+    getTotalBalance: (state) => state.user? state.user.balance + state.user.voucher_balance : 0,
+    isAdmin: (state) => state.user.admin,
   },
 });
diff --git a/client/src/views/Admin.vue b/client/src/views/Admin.vue
index 5a1c1e22..4e1c0a3e 100644
--- a/client/src/views/Admin.vue
+++ b/client/src/views/Admin.vue
@@ -1,830 +1,270 @@
 <template>
-  <v-container style="max-width: 1700px" fill-height>
-    <v-row>
-      <v-col>
-        <h5
-          class="text-h5 text-md-h4 font-weight-bold text-center my-10 secondary"
-        >
-          Admin Panel
-        </h5>
-      </v-col>
-    </v-row>
-    <v-row>
-      <v-col cols="12" md="8">
-        <v-data-table
-          v-model:items-per-page="itemsPerPage"
-          :headers="vouchersHeaders"
-          :items="vouchers"
-          class="elevation-1 my-2 rounded shadow"
-        >
-          <template v-slot:item="{ item }">
-            <tr>
-              <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>
-
-              <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="!dateIsNull(item.updated_at)">
-                {{ stringDate(item.updated_at) }}
-              </td>
-              <td v-else>-</td>
-              <td v-if="item.reason">{{ item.reason }}</td>
-              <td v-else>-</td>
-              <td>{{ item.vms }}</td>
-              <td>{{ item.public_ips }}</td>
-              <td>{{ item.voucher }}</td>
-              <td v-if="item.rejected">
-                <span class="text-error">Rejected</span>
-              </td>
-              <td v-else>
-                <span class="text-success">Approved</span>
-              </td>
-            </tr>
-          </template>
-        </v-data-table>
-        <v-data-table
-          v-model:items-per-page="itemsPerPage"
-          :headers="pendingVouchersHeaders"
-          :items="pendingVouchers"
-          class="elevation-1 my-2 rounded shadow"
-        >
-          <template v-slot:item="{ item }">
-            <tr>
-              <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>
+  <v-container fluid>
+    <h5 class="text-h5 text-md-h4 font-weight-bold my-5">Admin Panel</h5>
+    <v-divider />
 
-              <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="!dateIsNull(item.created_at)">
-                {{ stringDate(item.created_at) }}
-              </td>
-              <td v-else>-</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">
-                <v-row>
-                  <v-col cols="6">
-                    <BaseButton
-                      color="primary"
-                      text="Approve"
-                      size="small"
-                      class="mr-1 px-8 text-capitalize"
-                      variant="flat"
-                      @click="approveVoucher(item.id, true)"
-                    />
-                  </v-col>
-                  <v-col cols="6">
-                    <BaseButton
-                      color="red-lighten-1"
-                      text="Reject"
-                      size="small"
-                      class="text-capitalize"
-                      variant="flat"
-                      @click="approveVoucher(item.id, false)"
-                    />
-                  </v-col>
-                </v-row>
-              </td>
-            </tr>
-          </template>
-        </v-data-table>
-        <div class="actions d-flex justify-end my-2">
-          <div class="text-center">
-            <v-dialog v-model="announcementDialog" width="auto">
-              <template v-slot:activator="{ props }">
-                <BaseButton
-                  color="primary"
-                  text="Send an announcement"
-                  class="text-capitalize mr-2"
-                  v-bind="props"
-                />
-              </template>
-
-              <v-card class="pa-5">
-                <v-form @submit.prevent="sendAnnouncement" ref="form">
-                  <v-card-text>
-                    <h5
-                      class="text-h5 text-md-h4 text-center mb-5 pa-5 secondary"
-                    >
-                      Send an announcement
-                    </h5>
-                    <v-text-field
-                      label="Subject"
-                      v-model="subject"
-                      :rules="requiredRules"
-                      oninput="validity.valid||(value='')"
-                      bg-color="accent"
-                      variant="outlined"
-                      density="compact"
-                      class="my-3"
-                    ></v-text-field>
-
-                    <v-textarea
-                      clearable
-                      label="Announcement"
-                      v-model="announcement"
-                      :rules="requiredRules"
-                      oninput="validity.valid||(value='')"
-                      bg-color="accent"
-                      variant="outlined"
-                      density="compact"
-                      class="my-3"
-                    ></v-textarea>
-                  </v-card-text>
-                  <v-card-actions class="justify-center">
-                    <BaseButton
-                      class="bg-primary mr-5"
-                      text="Cancel"
-                      @click="announcementDialog = false"
-                    />
-                    <BaseButton type="submit" class="bg-primary" text="Send" />
-                  </v-card-actions>
-                </v-form>
-              </v-card>
-            </v-dialog>
-          </div>
-          <div class="text-center">
-            <v-dialog v-model="dialog" width="auto">
-              <template v-slot:activator="{ props }">
-                <BaseButton
-                  color="warning"
-                  text="Generate a voucher"
-                  class="text-capitalize mr-2"
-                  v-bind="props"
-                />
-              </template>
-
-              <v-card class="pa-5">
-                <v-form @submit.prevent="generateVoucher" ref="form">
-                  <v-card-text>
-                    <h5
-                      class="text-h5 text-md-h4 text-center mb-5 pa-5 secondary"
-                    >
-                      Generate a voucher
-                    </h5>
-                    <v-row>
-                      <v-col>
-                        <v-text-field
-                          label="VMs"
-                          v-model="vms"
-                          :rules="requiredRules"
-                          min="1"
-                          type="number"
-                          oninput="validity.valid||(value='')"
-                          bg-color="accent"
-                          variant="outlined"
-                          density="compact"
-                        ></v-text-field>
-                      </v-col>
-                      <v-col>
-                        <v-text-field
-                          label="IPs"
-                          v-model="ips"
-                          :rules="requiredRules"
-                          min="0"
-                          oninput="validity.valid||(value='')"
-                          type="number"
-                          bg-color="accent"
-                          variant="outlined"
-                          density="compact"
-                        ></v-text-field>
-                      </v-col>
-                    </v-row>
-
-                    <v-text-field
-                      label="Length"
-                      v-model="length"
-                      :rules="requiredRules"
-                      min="3"
-                      max="20"
-                      oninput="validity.valid||(value='')"
-                      type="number"
-                      bg-color="accent"
-                      variant="outlined"
-                      density="compact"
-                      class="my-3"
-                    ></v-text-field>
-                  </v-card-text>
-                  <v-card-actions class="justify-center">
-                    <BaseButton
-                      class="bg-primary mr-5"
-                      text="Cancel"
-                      @click="dialog = false"
-                    />
-                    <BaseButton
-                      type="submit"
-                      class="bg-primary"
-                      text="Generate"
-                    />
-                  </v-card-actions>
-                </v-form>
-              </v-card>
-            </v-dialog>
-          </div>
-          <div class="text-center">
-            <template v-if="nextLaunchDialog">
+    <v-row>
+      <v-col cols="12">
+        <v-card flat class="my-5">
+          <v-list-item>
+            <template v-slot:prepend>
+              <v-sheet class="px-5 py-3" border rounded
+                >Balance: {{ balance }} TFT</v-sheet
+              >
+
+              <v-sheet class="px-5 py-3 d-flex align-center">
+                <v-icon class="mr-2" size="35">mdi-server</v-icon>
+                <span>Deployed VMs: {{ deployedResources }} </span>
+              </v-sheet>
+
+              <v-sheet class="px-5 py-3 d-flex align-center">
+                <v-icon class="mr-2" size="35">mdi-ip</v-icon>
+                <span>Reserved IPs: {{ reservedIPs }} </span>
+              </v-sheet>
+            </template>
+            <template v-slot:append>
               <BaseButton
-                color="green"
-                text="Disable Launch"
-                class="text-capitalize mr-2"
+                v-if="isNextLaunchEnabled"
                 @click="setNextLaunch"
+                text="Disable Launch"
+                color="error"
+                class="mr-2"
               />
-            </template>
-            <template v-else>
               <BaseButton
-                color="red"
-                text="Enable Launch"
-                class="text-capitalize mr-2"
+                v-else
                 @click="setNextLaunch"
+                text="Enable Launch"
+                color="success"
+                class="mr-2"
               />
+
+              <BaseButton text="Generate a Voucher" color="success" />
             </template>
-          </div>
-          <BaseButton
-            :disabled="approveAllCount <= 0"
-            color="success"
-            text="Approve All"
-            class="approve text-capitalize"
-            @click="approveAllVouchers"
-          />
-        </div>
+          </v-list-item>
+        </v-card>
       </v-col>
-      <v-col cols="12" md="4">
-        <v-col class="pa-0">
-          <div
-            class="balance text-primary pa-3 my-2 text-center rounded-lg bg-white shadow"
-          >
-            <p class="mx-lg-auto font-weight-medium">Balance</p>
-            <strong style="font-size: 2rem">{{ balance }} TFT</strong>
-          </div>
-        </v-col>
-        <v-row>
-          <v-col>
-            <div
-              class="resources text-white text-center rounded-lg bg-primary py-5 shadow"
-            >
-              <p class="mx-lg-auto font-weight-medium">
-                Used VMs: {{ usedResources }}
-              </p>
-              <p class="mx-lg-auto font-weight-medium">
-                Deployed VMs: {{ deployedResources }}
-              </p>
-            </div>
-          </v-col>
-          <v-col>
-            <div
-              class="resources text-white text-center rounded-lg bg-primary py-5 shadow"
-            >
-              <p class="mx-lg-auto font-weight-medium">
-                Used IPs: {{ usedIPs }}
-              </p>
-              <p class="mx-lg-auto font-weight-medium">
-                Reserved IPs: {{ reservedIPs }}
-              </p>
-            </div>
-          </v-col>
-        </v-row>
-        <section class="my-5">
-          <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.name" class="d-flex align-center">
-                  <v-avatar color="primary" size="30" class="mr-2">
-                    <v-icon
-                      v-if="item.admin"
-                      icon="mdi-account-key"
-                      size="17"
-                    ></v-icon>
-                    <span v-else class="text-uppercase">
-                      {{ addAvatar(item.name) }}
-                    </span>
-                  </v-avatar>
-                  <div>
-                    <p>{{ item.name }}</p>
-                    <p>
-                      {{ item.email }}
-                    </p>
-                  </div>
-                </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>
-                <td>
-                  <v-row>
-                    <v-tooltip block text="View user" left>
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          color="primary"
-                          dark
-                          class="ml-3 text-primary cursor-pointer"
-                          @click="openUserInfo(item)"
-                        >
-                          mdi-information
-                        </v-icon>
-                      </template>
-                    </v-tooltip>
-
-                    <v-tooltip v-if="!item.admin" block text="Set admin" left>
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          color="primary"
-                          dark
-                          class="ml-1 text-primary cursor-pointer"
-                          @click="setAdmin(item, true)"
-                        >
-                          mdi-account-key
-                        </v-icon>
-                      </template>
-                    </v-tooltip>
+    </v-row>
 
-                    <v-tooltip v-if="item.admin" block text="Remove admin" left>
-                      <template v-slot:activator="{ props }">
-                        <v-icon
-                          v-bind="props"
-                          color="primary"
-                          dark
-                          class="ml-1 text-primary cursor-pointer"
-                          @click="setAdmin(item, false)"
-                        >
-                          mdi-account-lock
-                        </v-icon>
-                      </template>
-                    </v-tooltip>
-                  </v-row>
-                </td>
-              </tr>
-            </template>
-          </v-data-table>
-        </section>
+    <v-row>
+      <v-col cols="12">
+        <v-card class="my-5">
+          <v-tabs v-model="activeTab" class="tabs">
+            <v-tab v-for="tab in tabs" :key="tab" :to="tab.route" exact>{{
+              tab.name
+            }}</v-tab>
+          </v-tabs>
+
+          <v-card-text>
+            <v-tabs-window v-model="activeTab">
+              <router-view
+                :vouchers="vouchers"
+                :pendingVouchers="pendingVouchers"
+                @update-vouchers="getVouchers"
+              />
+            </v-tabs-window>
+          </v-card-text>
+        </v-card>
       </v-col>
     </v-row>
-    <v-dialog transition="dialog-top-transition" v-model="showUserInfo">
-      <UserInfo :user="userInfo"></UserInfo>
-    </v-dialog>
     <Toast ref="toast" />
-    <Voucher
-      v-if="voucher"
-      :msg="message"
-      :voucher="voucher"
-      :reset="resetVoucher"
-    />
   </v-container>
 </template>
 
-<script>
+<script setup>
 import { ref, onMounted, watch } from "vue";
 import BaseButton from "@/components/Form/BaseButton.vue";
 import userService from "@/services/userService.js";
 import Toast from "@/components/Toast.vue";
-import Voucher from "@/components/Voucher.vue";
-import UserInfo from "@/components/UserInfo.vue";
-import { useRouter } from "vue-router";
-
-export default {
-  components: {
-    BaseButton,
-    Toast,
-    Voucher,
-    UserInfo,
-  },
-  setup() {
-    const router = useRouter();
-    const confirm = ref(null);
-    const vouchersHeaders = ref([
-      { title: "No", key: "id" },
-      { title: "User", key: "user", sortable: false },
-      { title: "Updated at", key: "updated_at" },
-      { title: "Reason for Voucher", key: "reason", sortable: false },
-      { title: "VMs", key: "vms" },
-      { title: "Public IPs", key: "public_ips" },
-      { title: "Voucher", key: "voucher" },
-      { title: "Actions", key: "actions", sortable: false },
-    ]);
-
-    const pendingVouchersHeaders = ref([
-      { title: "No", key: "id" },
-      { title: "User", key: "user", sortable: false },
-      { title: "Created at", key: "created_at" },
-      { 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([
-      { 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 },
-      { title: "Actions", key: "actions", sortable: false },
-    ]);
-
-    const form = ref(null);
-    const vouchers = ref([]);
-    const pendingVouchers = ref([]);
-    const users = ref([]);
-    const toast = ref(null);
-    const loading = ref(false);
-    const usedResources = ref(0);
-    const deployedResources = ref(0);
-    const balance = ref(0);
-    const usedIPs = ref(0);
-    const reservedIPs = ref(0);
-    const approveAllCount = ref(null);
-    const userInfo = ref(null);
-    const itemsPerPage = ref(5);
-    const dialog = ref(false);
-    const announcementDialog = ref(false);
-    const showUserInfo = ref(false);
-    const vms = ref(1);
-    const ips = ref(0);
-    const length = ref(3);
-    const message = ref(null);
-    const voucher = ref(null);
-    const subject = ref(null);
-    const announcement = ref(null);
-    const nextLaunchDialog = ref(false);
-
-    nextLaunchDialog.value = localStorage.getItem("nextlaunchadmin") == "true";
-
-    const requiredRules = ref([
-      (value) => {
-        if (value === "") return "Field is required";
-        return true;
-      },
-    ]);
-
-    const setAdmin = (user, admin) => {
-      userService
-        .setAdmin(user.email, admin)
-        .then((response) => {
-          toast.value.toast(response.data.msg, "#388E3C");
-
-          userService.getUser().then((response) => {
-            const current_user = response.data.data.user;
-            if (!current_user.admin) {
-              router.push({
-                name: "Home",
-              });
-            }
-          });
-
-          getUsers();
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const openUserInfo = (user) => {
-      showUserInfo.value = true;
-      userInfo.value = user;
-    };
-
-    const getVouchers = () => {
-      userService
-        .getVouchers()
-        .then((response) => {
-          const { data } = response.data;
-          approveAllCount.value = 0;
-
-          let updateDataPromise = data.map(function (voucher) {
-            return new Promise(function (resolve) {
-              setTimeout(() => {
-                if (!voucher?.approved && !voucher?.rejected) {
-                  approveAllCount.value++;
-                }
-
-                if (voucher.user_id) {
-                  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,
-                      name: userInfo?.value?.name,
-                    });
-                  }
-                }
-                resolve();
-              }, 10);
-            });
-          });
-
-          Promise.all(updateDataPromise).then(function () {
-            vouchers.value = data.filter(
-              (voucher) => voucher.approved || voucher.rejected
-            );
-            pendingVouchers.value = data.filter(
-              (voucher) => !voucher.approved && !voucher.rejected
-            );
-          });
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const approveVoucher = (id, approved) => {
-      userService
-        .approveVoucher(id, approved)
-        .then((response) => {
-          toast.value.toast(response.data.msg, "#388E3C");
-          getVouchers();
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const approveAllVouchers = () => {
-      userService
-        .approveAllVouchers()
-        .then((response) => {
-          toast.value.toast(response.data.msg, "#388E3C");
-          getVouchers();
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const getUsers = () => {
-      userService
-        .getUsers()
-        .then((response) => {
-          const { data } = response.data;
-          users.value = data;
-          users.value.map((usedData) => {
-            usedResources.value += usedData.used_vms;
-            usedIPs.value += usedData.used_public_ips;
-          });
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const getDeploymentsCount = () => {
-      userService
-        .getDeploymentsCount()
-        .then((response) => {
-          const { data } = response.data;
-          deployedResources.value += data.vms;
-          reservedIPs.value += data.ips;
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const getBalance = () => {
-      userService
-        .getBalance()
-        .then((response) => {
-          const { data } = response.data;
-          balance.value = data;
-        })
-        .catch((response) => {
-          const { err } = response.response.data;
-          toast.value.toast(err, "#FF5252");
-        });
-    };
-
-    const addAvatar = (name) => {
-      return name.charAt(0);
-    };
-
-    if (localStorage.getItem("token")) {
-      setInterval(() => {
-        getBalance();
-      }, 30 * 1000);
-    }
-
-    watch(dialog, (val) => {
-      if (val) {
-        vms.value = 1;
-        ips.value = 0;
-        length.value = 3;
-      }
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/UserStore";
+import router from "@/router";
+
+const vouchers = ref([]);
+const pendingVouchers = ref([]);
+const approveAllCount = ref(0);
+const userInfo = ref(null);
+const users = ref([]);
+const toast = ref();
+const tabs = ref([
+  { name: "Users Requests", route: `/admin` },
+  { name: "Users History", route: `/admin/history` },
+]);
+const activeTab = ref(tabs.value[0]);
+const loading = ref(false);
+const usedResources = ref(0);
+const deployedResources = ref(0);
+const balance = ref(0);
+const usedIPs = ref(0);
+const reservedIPs = ref(0);
+const announcementDialog = ref(false);
+// const showUserInfo = ref(false);
+const subject = ref(null);
+const announcement = ref(null);
+const nextLaunchDialog = ref(false);
+const store = useUserStore();
+const { isNextLaunchEnabled } = storeToRefs(store);
+nextLaunchDialog.value = localStorage.getItem("nextlaunchadmin") == "true";
+
+// const openUserInfo = (user) => {
+//   showUserInfo.value = true;
+//   userInfo.value = user;
+// };
+
+const getUsers = () => {
+  userService
+    .getUsers()
+    .then((response) => {
+      const { data } = response.data;
+      users.value = data;
+      users.value.map((usedData) => {
+        // FIXME
+        usedResources.value += usedData.used_vms;
+        usedIPs.value += usedData.used_public_ips;
+      });
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
     });
+};
 
-    watch(announcementDialog, (val) => {
-      if (val) {
-        announcement.value = "";
-        subject.value = "";
-      }
+const getDeploymentsCount = () => {
+  userService
+    .getDeploymentsCount()
+    .then((response) => {
+      const { data } = response.data;
+      deployedResources.value += data.vms;
+      reservedIPs.value += data.ips;
+    })
+    .catch((response) => {
+      const msg = response.message;
+      toast.value.toast(msg, "#FF5252");
     });
+};
 
-    const generateVoucher = async () => {
-      var { valid } = await form.value.validate();
-      if (!valid) return;
-
-      userService
-        .generateVoucher(+length.value, +vms.value, +ips.value)
-        .then((response) => {
-          const { data, msg } = response.data;
-          message.value = msg;
-          voucher.value = data.voucher;
-        })
-        .catch((response) => {
-          toast.value.toast(response.response.data.err, "#FF5252");
-        })
-        .finally(() => {
-          getVouchers();
-          dialog.value = false;
-        });
-    };
-
-    const sendAnnouncement = async () => {
-      var { valid } = await form.value.validate();
-      if (!valid) return;
+const getBalance = () => {
+  userService
+    .getBalance()
+    .then((response) => {
+      const { data } = response.data;
+      balance.value = data;
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
+};
 
-      userService
-        .sendAnnouncement(subject.value, announcement.value)
-        .then((response) => {
-          const { msg } = response.data;
-          toast.value.toast(msg, "#388E3C");
-        })
-        .catch((response) => {
-          toast.value.toast(response.response.data.err, "#FF5252");
-        })
-        .finally(() => {
-          announcementDialog.value = false;
-        });
-    };
-    const setNextLaunch = async () => {
-      await userService.nextLaunch();
-      await userService
-        .setNextLaunch(!(localStorage.getItem("nextlaunchadmin") == "true"))
-        .then((response) => {
-          if (response.status == 200) {
-            nextLaunchDialog.value = !nextLaunchDialog.value;
-          }
-        });
-    };
+async function getVouchers() {
+  loading.value = true;
+
+  try {
+    const response = await userService.getVouchers();
+    const { data } = response.data;
+
+    await updateVouchers(data);
+
+    vouchers.value = data.filter(
+      (voucher) => voucher.approved || voucher.rejected
+    );
+    pendingVouchers.value = data.filter(
+      (voucher) => !voucher.approved && !voucher.rejected
+    );
+  } catch (error) {
+    const { err } = error.response.data;
+    toast.value.toast(err, "#FF5252");
+  } finally {
+    loading.value = false;
+  }
+}
 
-    const resetVoucher = () => {
-      message.value = null;
-      voucher.value = null;
-    };
+async function updateVouchers(data) {
+  const updatePromises = data.map(async (voucher) => {
+    await new Promise((resolve) => setTimeout(resolve, 10));
 
-    const dateIsNull = (date) => {
-      return (
-        new Date(date).toLocaleString() ==
-        new Date("0001-01-01").toLocaleString()
-      );
-    };
+    if (voucher.approved && voucher.rejected) {
+      approveAllCount.value++;
+    }
 
-    const stringDate = (date) => {
-      return new Date(date).toLocaleString();
-    };
+    if (users.value && voucher.user_id) {
+      userInfo.value = users.value.find((user) => user.ID === voucher.user_id);
 
-    onMounted(() => {
-      let token = localStorage.getItem("token");
-      if (token) {
-        getUsers();
-        getVouchers();
-        getBalance();
-        getDeploymentsCount();
+      if (userInfo.value && voucher.user_id === userInfo.value.ID) {
+        Object.assign(voucher, {
+          email: userInfo.value.email,
+          name: userInfo.value.first_name,
+        });
       }
-    });
-
-    return {
-      vouchersHeaders,
-      pendingVouchersHeaders,
-      vouchers,
-      pendingVouchers,
-      usedResources,
-      usedIPs,
-      deployedResources,
-      reservedIPs,
-      balance,
-      approveAllCount,
-      usersHeaders,
-      users,
-      userInfo,
-      loading,
-      confirm,
-      toast,
-      itemsPerPage,
-      dialog,
-      announcementDialog,
-      showUserInfo,
-      vms,
-      ips,
-      length,
-      requiredRules,
-      voucher,
-      message,
-      form,
-      announcement,
-      subject,
-      getVouchers,
-      getBalance,
-      approveVoucher,
-      approveAllVouchers,
-      getUsers,
-      addAvatar,
-      generateVoucher,
-      resetVoucher,
-      getDeploymentsCount,
-      openUserInfo,
-      setAdmin,
-      sendAnnouncement,
-      dateIsNull,
-      stringDate,
-      setNextLaunch,
-      nextLaunchDialog,
-    };
-  },
-  beforeRouteEnter(to, from, next) {
-    userService
-      .getUser()
-      .then((response) => {
-        const { user } = response.data.data;
-        const isAdmin = user.admin;
-        if (isAdmin) {
-          next();
-        } else {
-          next("/home");
-        }
-      })
-      .catch((err) => {
-        console.log(err);
-      });
-  },
-};
-</script>
-
-<style>
-.resources {
-  margin-top: 0.5rem;
-}
+    }
+  });
 
-.balance {
-  border: 3px solid #217dbb;
+  await Promise.all(updatePromises);
 }
 
-td {
-  line-height: 1em;
+watch(announcementDialog, (val) => {
+  if (val) {
+    announcement.value = "";
+    subject.value = "";
+  }
+});
+
+// TODO generate voucher
+// const generateVoucher = async () => {
+//   var { valid } = await form.value.validate();
+//   if (!valid) return;
+
+//   userService
+//     .generateVoucher(+length.value, +vms.value, +ips.value)
+//     .then((response) => {
+//       const { data, msg } = response.data;
+//       message.value = msg;
+//       voucher.value = data.voucher;
+//     })
+//     .catch((response) => {
+//       toast.value.toast(response.response.data.err, "#FF5252");
+//     })
+//     .finally(() => {
+//       getVouchers();
+//       dialog.value = false;
+//     });
+// };
+
+// const sendAnnouncement = async () => {
+//   var { valid } = await form.value.validate();
+//   if (!valid) return;
+
+//   userService
+//     .sendAnnouncement(subject.value, announcement.value)
+//     .then((response) => {
+//       const { msg } = response.data;
+//       toast.value.toast(msg, "#388E3C");
+//     })
+//     .catch((response) => {
+//       toast.value.toast(response.response.data.err, "#FF5252");
+//     })
+//     .finally(() => {
+//       announcementDialog.value = false;
+//     });
+// };
+function setNextLaunch() {
+  store
+    .setNextLaunch(!isNextLaunchEnabled.value)
+    .then((response) => {
+      const { msg } = response.data;
+      toast.value.toast(msg, "#388E3C");
+      store.next_launch_admin = false;
+      router.push("/nextlaunch");
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
 }
 
-.shadow {
-  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.1);
-}
-</style>
+onMounted(() => {
+  getUsers();
+  getVouchers();
+  getBalance();
+  getDeploymentsCount();
+});
+</script>
diff --git a/client/src/views/tabs/AuditLogs.vue b/client/src/views/accManagemenTabs/AuditLogs.vue
similarity index 82%
rename from client/src/views/tabs/AuditLogs.vue
rename to client/src/views/accManagemenTabs/AuditLogs.vue
index 3dd97eb0..885bdea1 100644
--- a/client/src/views/tabs/AuditLogs.vue
+++ b/client/src/views/accManagemenTabs/AuditLogs.vue
@@ -14,7 +14,7 @@
           </template>
 
           <template #[`item.timestamp`]="{ item }">
-            {{ formatDate(item.timestamp) }}
+            {{ timeAgo.format(convertDate(item.timestamp)) }}
           </template>
         </v-data-table>
       </v-col>
@@ -26,7 +26,11 @@
 import { ref, onMounted } from "vue";
 import userService from "@/services/userService";
 import Toast from "@/components/Toast.vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+TimeAgo.addLocale(en)
 
+const timeAgo = ref(new TimeAgo("en-US"));
 const events = ref([]);
 const toast = ref(null);
 const loading = ref(false);
@@ -41,6 +45,10 @@ const headers = ref([
   },
 ]);
 
+function convertDate(date) {
+  return new Date(date);
+}
+
 async function getAuditEvents() {
   loading.value = true;
   await userService
@@ -58,18 +66,6 @@ async function getAuditEvents() {
     });
 }
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [day, month, year].join("-");
-}
-
 onMounted(async () => {
   await getAuditEvents();
 });
diff --git a/client/src/views/tabs/ChangePassword.vue b/client/src/views/accManagemenTabs/ChangePassword.vue
similarity index 100%
rename from client/src/views/tabs/ChangePassword.vue
rename to client/src/views/accManagemenTabs/ChangePassword.vue
diff --git a/client/src/views/tabs/DeleteAccount.vue b/client/src/views/accManagemenTabs/DeleteAccount.vue
similarity index 100%
rename from client/src/views/tabs/DeleteAccount.vue
rename to client/src/views/accManagemenTabs/DeleteAccount.vue
diff --git a/client/src/views/tabs/Invoices.vue b/client/src/views/accManagemenTabs/Invoices.vue
similarity index 92%
rename from client/src/views/tabs/Invoices.vue
rename to client/src/views/accManagemenTabs/Invoices.vue
index 4f297079..5978b08f 100644
--- a/client/src/views/tabs/Invoices.vue
+++ b/client/src/views/accManagemenTabs/Invoices.vue
@@ -19,7 +19,7 @@
           :hide-default-footer="invoices == 0"
         >
           <template #[`item.created_at`]="{ item }">
-            {{ formatDate(item.created_at) }}
+            {{ timeAgo.format(convertDate(item.created_at)) }}
           </template>
 
           <template #[`item.invoice`]="{ item }">
@@ -52,7 +52,11 @@ import userService from "@/services/userService";
 import Toast from "@/components/Toast.vue";
 import { storeToRefs } from "pinia";
 import { useUserStore } from "@/store/UserStore";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+TimeAgo.addLocale(en);
 
+const timeAgo = ref(new TimeAgo("en-US"));
 const invoices = ref();
 const toast = ref(null);
 const message = ref();
@@ -75,16 +79,8 @@ const headers = ref([
   },
 ]);
 
-function formatDate(date) {
-  var d = new Date(date),
-    month = "" + (d.getMonth() + 1),
-    day = "" + d.getDate(),
-    year = d.getFullYear();
-
-  if (month.length < 2) month = "0" + month;
-  if (day.length < 2) day = "0" + day;
-
-  return [day, month, year].join("-");
+function convertDate(date) {
+  return new Date(date);
 }
 
 // TODO handle invoices InvoiceID
diff --git a/client/src/views/tabs/Payments.vue b/client/src/views/accManagemenTabs/Payments.vue
similarity index 100%
rename from client/src/views/tabs/Payments.vue
rename to client/src/views/accManagemenTabs/Payments.vue
diff --git a/client/src/views/tabs/Profile.vue b/client/src/views/accManagemenTabs/Profile.vue
similarity index 100%
rename from client/src/views/tabs/Profile.vue
rename to client/src/views/accManagemenTabs/Profile.vue
diff --git a/client/src/views/adminTabs/History.vue b/client/src/views/adminTabs/History.vue
new file mode 100644
index 00000000..c7a3a020
--- /dev/null
+++ b/client/src/views/adminTabs/History.vue
@@ -0,0 +1,105 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <v-data-table
+          :headers="vouchersHeaders"
+          :items="vouchers"
+          :loading="vouchers.length == 0"
+          sort-desc.sync
+          class="d-flex justify-center elevation-1"
+          :hide-default-footer="vouchers.length == 0"
+        >
+          <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
+
+          <template #[`item.name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.name">
+              <v-avatar color="secondary" size="30" class="mr-2">
+                <span class="text-uppercase">{{ userAvatar(item.name) }}</span>
+              </v-avatar>
+              <div>
+                <p>{{ item.name }}</p>
+                <p>
+                  {{ item.email }}
+                </p>
+              </div>
+            </div>
+            <div 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>
+            </div>
+          </template>
+          <template #[`item.created_at`]="{ item }">
+            {{ timeAgo.format(convertDate(item.created_at)) }}
+          </template>
+          <template #[`item.updated_at`]="{ item }">
+            {{ timeAgo.format(convertDate(item.updated_at)) }}
+          </template>
+
+          <template #[`item.reason`]="{ item }">
+            {{ item.reason || "-" }}
+          </template>
+
+          <template #[`item.balance`]="{ item }">
+            {{ item.balance > 0 ? `$${item.balance}` : item.balance }}
+          </template>
+
+          <template #[`item.actions`]="{ item }">
+            <BaseButton
+              v-if="item.rejected"
+              variant="text"
+              color="error"
+              text="Rejected"
+              class="mr-1 text-capitalize"
+            />
+            <BaseButton
+              v-else
+              variant="text"
+              color="success"
+              text="Approved"
+              class="mr-1 text-capitalize"
+            />
+          </template>
+        </v-data-table>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+import BaseButton from "@/components/Form/BaseButton.vue";
+
+TimeAgo.addLocale(en);
+defineProps({
+  vouchers: {
+    type: Array,
+  },
+});
+
+const vouchersHeaders = ref([
+  { title: "#", key: "id" },
+  { title: "User", key: "name", sortable: false },
+  { title: "created at", key: "created_at" },
+  { title: "Updated at", key: "updated_at" },
+  { title: "Reason for Voucher", key: "reason", sortable: false },
+  { title: "Balance", key: "balance" },
+  { title: "Voucher", key: "voucher" },
+  { title: "Actions", key: "actions", sortable: false },
+]);
+const timeAgo = ref(new TimeAgo("en-US"));
+
+function userAvatar(name) {
+  return name.charAt(0);
+}
+
+function convertDate(date) {
+  return new Date(date);
+}
+</script>
diff --git a/client/src/views/adminTabs/Requests.vue b/client/src/views/adminTabs/Requests.vue
new file mode 100644
index 00000000..8bc71270
--- /dev/null
+++ b/client/src/views/adminTabs/Requests.vue
@@ -0,0 +1,253 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12" md="8">
+        <v-data-table
+          :loading="loading"
+          :headers="pendingVouchersHeaders"
+          :items="pendingVouchers"
+          class="d-flex justify-center elevation-1"
+          :hide-default-footer="pendingVouchers == 0"
+        >
+          <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
+
+          <template #[`item.name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.name">
+              <v-avatar color="secondary" size="30" class="mr-2">
+                <span class="text-uppercase">{{ userAvatar(item.name) }}</span>
+              </v-avatar>
+              <div>
+                <p>{{ item.name }}</p>
+                <p>
+                  {{ item.email }}
+                </p>
+              </div>
+            </div>
+            <div 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>
+            </div>
+          </template>
+          <template #[`item.created_at`]="{ item }">
+            {{ timeAgo.format(convertDate(item.created_at)) }}
+          </template>
+          <template #[`item.balance`]="{ item }">
+            {{ item.balance > 0 ? `$${item.balance}` : item.balance }}
+          </template>
+          <template #[`item.actions`]="{ item }">
+            <BaseButton
+              color="secondary"
+              text="Approve"
+              size="small"
+              class="mr-1 text-capitalize"
+              @click="approveVoucher(item.id, true)"
+            />
+            <BaseButton
+              color="error"
+              text="Reject"
+              size="small"
+              class="text-capitalize"
+              @click="approveVoucher(item.id, false)"
+            />
+          </template>
+        </v-data-table>
+        <div class="d-flex justify-end">
+          <BaseButton
+            color="secondary"
+            text="Approve All"
+            class="my-2"
+            :disabled="pendingVouchers > 0"
+            @click="approveAllVouchers"
+          />
+        </div>
+      </v-col>
+      <v-col cols="12" md="4">
+        <v-data-table
+          :headers="usersHeaders"
+          :items="users"
+          class="d-flex justify-center elevation-1"
+          :hide-default-footer="users == 0"
+        >
+          <template #[`item.id`]="{ index }"> {{ index + 1 }} </template>
+
+          <template #[`item.first_name`]="{ item }">
+            <div class="d-flex align-center" v-if="item.first_name">
+              <v-avatar color="secondary" size="30" class="mr-2">
+                <span class="text-uppercase">{{
+                  userAvatar(item.first_name)
+                }}</span>
+              </v-avatar>
+              <div>
+                <p>{{ item.first_name }}</p>
+                <p>
+                  {{ item.email }}
+                </p>
+              </div>
+            </div>
+            <div 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>
+            </div>
+          </template>
+          <template #[`item.count.vms`]="{ item }">
+            {{ item.count.vms }}
+          </template>
+          <template #[`item.count.ips`]="{ item }">
+            {{ item.count.ips }}
+          </template>
+
+          <template #[`item.created_at`]="{ item }">
+            <timeago :datetime="item.created_at"></timeago>
+          </template>
+          <template #[`item.actions`]="{ item }">
+            <v-icon class="mr-2">mdi-information</v-icon>
+            <v-icon v-if="item.admin" @click="setAdmin(item.email, !item.admin)"
+              >mdi-account-key</v-icon
+            >
+            <v-icon v-else @click="setAdmin(item.email, !item.admin)"
+              >mdi-account-lock</v-icon
+            >
+          </template>
+        </v-data-table></v-col
+      >
+    </v-row>
+  </v-container>
+  <Toast ref="toast" />
+</template>
+<script setup>
+import { ref, onMounted } from "vue";
+import router from "@/router";
+import userService from "@/services/userService";
+import BaseButton from "@/components/Form/BaseButton.vue";
+import Toast from "@/components/Toast.vue";
+import TimeAgo from "javascript-time-ago";
+import en from "javascript-time-ago/locale/en";
+import { storeToRefs } from "pinia";
+import { useUserStore } from "@/store/UserStore";
+
+defineProps({
+  pendingVouchers: {
+    type: Array,
+  },
+});
+const emit = defineEmits("updateVouchers");
+
+TimeAgo.addLocale(en);
+const timeAgo = ref(new TimeAgo("en-US"));
+const users = ref([]);
+const toast = ref(null);
+const loading = ref(false);
+const store = useUserStore();
+const { isAdmin } = storeToRefs(store);
+
+const pendingVouchersHeaders = ref([
+  { title: "No", key: "id" },
+  { title: "User", key: "name", sortable: false },
+  { title: "Created at", key: "created_at" },
+  { title: "Reason for Voucher", key: "reason", sortable: false },
+  { title: "Balance", key: "balance" },
+  { title: "Voucher", key: "voucher" },
+  { title: "Actions", key: "actions", sortable: false },
+]);
+
+const usersHeaders = ref([
+  { title: "No", key: "id", sortable: false },
+  { title: "Name", key: "first_name", sortable: false },
+  { title: "VMs", key: "count.vms", sortable: false },
+  { title: "IPs", key: "count.ips", sortable: false },
+  { title: "Actions", key: "actions", sortable: false },
+]);
+
+function convertDate(date) {
+  return new Date(date);
+}
+
+async function getUsers() {
+  loading.value = true;
+  await userService
+    .getUsers()
+    .then((response) => {
+      const { data } = response.data;
+      users.value = data;
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+function userAvatar(name) {
+  return name.charAt(0);
+}
+
+async function approveVoucher(id, approved) {
+  await userService
+    .approveVoucher(id, approved)
+    .then(async (response) => {
+      toast.value.toast(response.data.msg, "#388E3C");
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => emit("updateData"));
+}
+
+async function approveAllVouchers() {
+  await userService
+    .approveAllVouchers()
+    .then(async (response) => {
+      toast.value.toast(response.data.msg, "#388E3C");
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    })
+    .finally(() => emit("updateData"));
+}
+
+async function setAdmin(email, admin) {
+  await userService
+    .setAdmin(email, admin)
+    .then(async (response) => {
+      toast.value.toast(response.data.msg, "#388E3C");
+      if (!isAdmin) {
+        router.push("/");
+      }
+      await getUsers();
+    })
+    .catch((response) => {
+      const { err } = response.response.data;
+      toast.value.toast(err, "#FF5252");
+    });
+}
+
+onMounted(async () => {
+  await getUsers();
+});
+</script>
+<style>
+thead th {
+  background-color: #19647e !important;
+}
+tbody tr {
+  background-color: #474747;
+}
+
+.v-btn--disabled.bg-error,
+.v-btn--disabled.bg-secondary,
+.v-btn--disabled.bg-info {
+  background-color: transparent !important;
+}
+</style>