diff --git a/canisters/imgTank/main.mo b/canisters/imgTank/main.mo
deleted file mode 100644
index 5105ad70..00000000
--- a/canisters/imgTank/main.mo
+++ /dev/null
@@ -1,167 +0,0 @@
-import Text "mo:base/Text";
-import Nat "mo:base/Nat";
-import Nat32 "mo:base/Nat32";
-import Nat64 "mo:base/Nat64";
-import Iter "mo:base/Iter";
-
-import Blob "mo:base/Blob";
-import Array "mo:base/Array";
-import HttpTypes "../ext/HttpTypes";
-
-import Memory "mo:base/ExperimentalStableMemory";
-import HashMap "mo:base/HashMap";
-
-actor {
-
-    type ImgId = Text;
-
-    private stable var _currentMemoryOffset : Nat64  = 2;
-    private stable var _imgOffset : [(ImgId, Nat64)] = [];
-    private var imgOffset : HashMap.HashMap<ImgId, Nat64> = HashMap.fromIter(_imgOffset.vals(), 0, Text.equal, Text.hash);
-    private stable var _imgSize : [(ImgId, Nat)] = [];
-    private var imgSize : HashMap.HashMap<ImgId, Nat> = HashMap.fromIter(_imgSize.vals(), 0, Text.equal, Text.hash);
-
-    // thumbnail handling
-    private stable var _thumbs : [(ImgId, Blob)] = [];
-    private var thumbs = HashMap.HashMap<ImgId, Blob>(0, Text.equal, Text.hash);
-
-    system func preupgrade() {
-        _imgOffset := Iter.toArray(imgOffset.entries());
-        _imgSize := Iter.toArray(imgSize.entries());
-        
-        _thumbs := Iter.toArray(thumbs.entries());
-    };
-
-    system func postupgrade() {
-        _imgOffset := [];
-        _imgSize := [];
-        
-        thumbs := HashMap.fromIter<ImgId, Blob>(_thumbs.vals(), 10, Text.equal, Text.hash);
-        _thumbs := [];
-    };
-
-    public shared(msg) func uploadImg(imgId : ImgId, image : Blob) {
-        storeBlobImg(imgId, image);
-    };
-
-    public shared(msg) func uploadThumbnail(imgId : ImgId, thumbnail : Blob) {
-        thumbs.put(imgId, thumbnail);
-    };
-
-    public query({ caller }) func getPic(id : ImgId): async Blob {
-        var pic = loadBlobImg(id);
-        switch(pic) {
-            case (null) {
-                return Blob.fromArray([]);
-            };
-            case (?existingPic) {
-              return existingPic;
-            };
-        };
-   };
-
-    public query({ caller }) func getThumbnail(id : ImgId): async Blob {
-        var pic = thumbs.get(id);
-        switch(pic) {
-            case (null) {
-                return Blob.fromArray([]);
-            };
-            case (?existingPic) {
-                 return existingPic;
-            };
-        };
-    };
-
-    private func storeBlobImg(imgId : ImgId, value : Blob)  {
-        var size : Nat = Nat32.toNat(Nat32.fromIntWrap(value.size()));
-        // Each page is 64KiB (65536 bytes)
-        var growBy : Nat = size / 65536 + 1;
-        let a = Memory.grow(Nat64.fromNat(growBy));
-        Memory.storeBlob(_currentMemoryOffset, value);
-        imgOffset.put(imgId, _currentMemoryOffset);
-        imgSize.put(imgId, size);
-        size := size + 4;
-        _currentMemoryOffset += Nat64.fromNat(size);
-    };
-
-    private func loadBlobImg(imgId : ImgId) : ?Blob {
-        let offset = imgOffset.get(imgId);
-        switch(offset) {
-            case (null) {
-                return null;
-            };
-            case (?offset) {
-              let size = imgSize.get(imgId);
-                 switch(size) {
-                    case (null) {
-                        return null;
-                    };
-                    case (?size) {
-                      return ?Memory.loadBlob(offset, size);
-                    };
-                };
-            };
-        };
-    };
-
-    public query func http_request(request : HttpTypes.Request) : async HttpTypes.Response {
-        if (Text.contains(request.url, #text("imgid"))) {
-            let imgId = Iter.toArray(Text.tokens(request.url, #text("imgid=")))[1];
-
-          if (Text.contains(request.url, #text("thumbnail"))) {
-              var pic = thumbs.get(imgId);
-              switch(pic) {
-                  case (null) {
-                      return http404(?"no pic available");
-                  };
-                  case (?existingPic) {
-                       return picture(existingPic);
-                  };
-              };
-            } else {
-              var pic = loadBlobImg(imgId);
-              switch(pic) {
-                  case (null) {
-                      return http404(?"no thumbnail available");
-                  };
-                  case (?existingPic) {
-                    return picture(existingPic);
-                  };
-              };
-            };
-        };
-        return http404(?"Path not found.");
-    };
-
-    // A 200 Ok response with picture
-    private func picture(pic : Blob) : HttpTypes.Response {
-        {
-              body = pic;
-              headers = [
-                  ("Content-Type", "image/jpg"),
-                  ("Access-Control-Allow-Origin", "*"),
-                  ("Expires", "Wed, 9 Jan 2099 09:09:09 GMT")
-              ];
-              status_code = 200;
-              streaming_strategy = null;
-        };
-    };
-
-    // A 404 response with an optional error message.
-    private func http404(msg : ?Text) : HttpTypes.Response {
-      {
-          body = Text.encodeUtf8(
-              switch (msg) {
-                  case (?msg) msg;
-                  case null "Not found.";
-              }
-          );
-          headers = [
-              ("Content-Type", "text/plain"),
-          ];
-          status_code = 404;
-          streaming_strategy = null;
-      };
-    };
-
-};
diff --git a/frontend/Home.vue b/frontend/Home.vue
deleted file mode 100644
index f9fa4f53..00000000
--- a/frontend/Home.vue
+++ /dev/null
@@ -1,400 +0,0 @@
-<script setup>
-import { ref, watchEffect } from "vue"
-import { useAuthStore } from "./store/auth"
-import Header from "./components/MainHeader.vue"
-import router from "./router/"
-
-const authStore = useAuthStore()
-const darkmode = ref(false)
-let unreadNotifications = ref("")
-let fundingaddress = ref("")
-let tradingaddress = ref("")
-let canisteraddress = ref("")
-let tradingbalance = ref("")
-let fundingbalance = ref("")
-let canisterbalance = ref("")
-let transferresponse = ref("")
-let sendtocanisterresponse = ref("")
-let invoice = ref("")
-let notifresponse = ref("")
-let showNotification = ref(false)
-const selectedAccountType = ref("main")
-let editing = ref(false);
-let originalUser = ref(null);
-let email = ref("");
-let phone = ref("");
-let name = ref("");
-let phoneNotifications = ref(false);
-let emailNotifications = ref(false);
-
-const logout = () => {
-  router.push("/auth")
-  authStore.logout()
-}
-
-watchEffect(async () => {
-  const user = await authStore.whoamiActor?.getUser();
-  if (user.status === 200) {
-    console.log("User:", user.data);
-    email.value = await user.data[0].email_address;
-    phone.value = await user.data[0].phone_number;
-    name.value = await user.data[0].name;
-    phoneNotifications.value = await user.data[0].phone_notifications;
-    emailNotifications.value = await user.data[0].email_notifications;
-  }
-});
-
-const gotoNotifications = () => {
-  router.push("/home/notifications")
-}
-
-watchEffect(async () => {
-  // const res = await authStore.whoamiActor?.getInvoice();
-  // invoice.value = await res;
-  setInterval(async function() {
-    try {
-      notifresponse =
-        await authStore.whoamiActor?.getUnreadNotificationsLength()
-      unreadNotifications.value = await notifresponse
-      console.log(notifresponse)
-    } catch (e) {
-      console.log("Error fetching data")
-    } finally {
-      if (unreadNotifications.value > 0) {
-        showNotification.value = true
-        console.log("gets here")
-      }
-    }
-  }, 60000)
-})
-
-// watchEffect(async () => {
-//   // const res = await authStore.whoamiActor?.getInvoice();
-//   // invoice.value = await res;
-//   setInterval(
-//     async function(){
-//       if(unreadNotifications.value > 0){
-//           showNotification.value = true;
-//          // console.log("gets here");
-//         };
-//  }, 3000);
-// });
-
-const isLoading = ref(false)
-const dropdownOpen = ref(false)
-
-watchEffect(async () => {
-  const res = await authStore.whoamiActor?.getInvoice()
-  invoice.value = await res
-})
-
-watchEffect(async () => {
-  const res = await authStore.refresh()
-  console.log(res)
-  const loan = authStore.whoamiActor.transferFromCanistertoSubAccount()
-  tradingbalance.value = await authStore.tradingbalance
-  fundingbalance.value = await authStore.fundingbalance
-  fundingaddress.value = await authStore.fundingaddress
-  tradingaddress.value = await authStore.tradingaddress
-  canisteraddress.value = await authStore.canisteraddress
-  canisterbalance.value = await authStore.canisterbalance
-})
-const refreshBalance = async () => {
-  try {
-    isLoading.value = true
-    const res = await authStore.refresh()
-    tradingbalance.value = await authStore.tradingbalance
-    fundingbalance.value = await authStore.fundingbalance
-    fundingaddress.value = await authStore.fundingaddress
-    tradingaddress.value = await authStore.tradingaddress
-    canisterbalance.value = await authStore.canisterbalance
-    console.log(res)
-  } catch (e) {
-    console.log("Error fetching data")
-  } finally {
-    isLoading.value = false
-  }
-}
-
-const getTodaysDate = () => {
-  const today = new Date()
-  const date =
-    today.getFullYear() + "-" + (today.getMonth() + 1) + "-" + today.getDate()
-  return date
-}
-
-const getTestTokens = async () => {
-  try {
-    isLoading.value = true
-    const response = authStore.whoamiActor.transferFromCanistertoSubAccount()
-    console.log(response)
-    transferresponse.value = await response
-  } catch (error) {
-    console.error("Error Getting tokens:", error)
-  } finally {
-    isLoading.value = false
-  }
-}
-
-// const sendToOwner =async () => {
-//   try {
-//     isLoading.value = true;
-//     const response = authStore.whoamiActor.sendToOwner(
-
-//        40000,"5lnja-ztbzy-c4kyn-telka-nwtuk-5h2jn-fcesl-tovut-2ytto-5stlw-pae"
-
-//     );
-//     console.log(response);
-//     sendtocanisterresponse.value = await response;
-//   } catch (error) {
-//     console.error("Error Getting tokens:", error);
-//   } finally {
-//     isLoading.value = false;
-//   }
-
-// };
-
-
-const toggleDarkMode = () => {
-  darkmode.value = !darkmode.value
-  if (darkmode.value) {
-    document.documentElement.classList.add("dark")
-  } else {
-    document.documentElement.classList.remove("dark")
-  }
-}
-</script>
-
-<template class="font-lexend h-screen w-full">
-  <div
-    class="w-full h-full flex flex-row space-x-[30px] self-stretch bg-white dark:bg-[#16151C]"
-  >
-    <div
-      class="w-[280px] hidden sm:flex flex-col shrink-0 items-stretch rounded-[20px] bg-[#A2A1A80D] p-[30px] h-screen"
-    >
-      <div class="flex flex-col justify-between h-full">
-        <div>
-          <div v-if="darkmode">
-            <img class="h-[50px]" src="./assets/darklogo.png" />
-          </div>
-          <div v-else>
-            <img class="h-[50px]" src="./assets/logo.png" />
-          </div>
-          <div class="space-y-[10px] h-full">
-            <router-link
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/dashboard"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/dashboard.png"
-              />
-              <span>Dashboard</span>
-            </router-link>
-
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/transfer"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/payroll.png"
-              />
-              <span>Single Transfer</span>
-            </router-link>
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/all-employees"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/payroll.png"
-              />
-              <span>Staff</span>
-            </router-link>
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/loans"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/payroll.png"
-              />
-              <span>Loans</span>
-            </router-link>
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/transactions"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/payroll.png"
-              />
-              <span>History</span>
-            </router-link>
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/payroll"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/payroll.png"
-              />
-              <span>Bulk Payments</span>
-            </router-link>
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/notifications"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/candidates.png"
-              />
-              <span v-if="unreadNotifications.value > 0"
-              >Notifications {{ unreadNotifications.value }}</span
-              >
-              <span v-else>Notifications</span>
-            </router-link>
-            <router-link
-              v-if="authStore.isRegistered === true"
-              active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-              class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-              to="/home/settings"
-            >
-              <img
-                alt="Vite logo"
-                class="shrink-0 h-6 w-6"
-                src="./assets/settings.png"
-              />
-              <span>Profile</span>
-            </router-link>
-          </div>
-        </div>
-
-        <button
-          class="border border-gray-300 rounded-[10px] p-1"
-          @click="logout"
-        >
-          Log out
-        </button>
-        <nav aria-label="Tabs" class="flex rounded-[10px] align-bottom">
-          <div
-            :class="{
-              'bg-[#7152F3]  rounded-[10px] text-white ': !darkmode,
-              'bg-transparent text-white': darkmode,
-            }"
-            class="flex items-center space-x-[10px] cursor-pointer px-3 py-2 text-base font-light"
-            @click="toggleDarkMode()"
-          >
-            <div v-if="darkmode">
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2V3M12 21V22M19.0711 4.92894L18.364 5.63605M5.63605 18.364L4.92894 19.0711M22 12H21M3 12H2M19.071 19.0711L18.3639 18.364M5.63605 5.63605L4.92894 4.92894M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z"
-                  stroke="white"
-                  stroke-linecap="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <div v-else>
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M12 2V3M12 21V22M19.0711 4.92894L18.364 5.63605M5.63605 18.364L4.92894 19.0711M22 12H21M3 12H2M19.071 19.0711L18.3639 18.364M5.63605 5.63605L4.92894 4.92894M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z"
-                  stroke="white"
-                  stroke-linecap="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <span> Light </span>
-          </div>
-          <div
-            :class="{
-              'bg-[#7152F3]  rounded-[10px] ': darkmode,
-              'bg-transparent text-[#16151C]': !darkmode,
-            }"
-            class="flex items-center space-x-[10px] cursor-pointer px-3 py-2 text-base font-light"
-            @click="toggleDarkMode()"
-          >
-            <div v-if="darkmode">
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.67163 14.8687C10.751 14.8687 14.8687 10.751 14.8687 5.67163C14.8687 4.74246 14.7309 3.84548 14.4746 3C18.251 4.14461 21 7.65276 21 11.803C21 16.8824 16.8824 21 11.803 21C7.65276 21 4.14461 18.251 3 14.4746C3.84548 14.7309 4.74246 14.8687 5.67163 14.8687Z"
-                  stroke="white"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <div v-else>
-              <svg
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.67163 14.8687C10.751 14.8687 14.8687 10.751 14.8687 5.67163C14.8687 4.74246 14.7309 3.84548 14.4746 3C18.251 4.14461 21 7.65276 21 11.803C21 16.8824 16.8824 21 11.803 21C7.65276 21 4.14461 18.251 3 14.4746C3.84548 14.7309 4.74246 14.8687 5.67163 14.8687Z"
-                  stroke="#16151C"
-                  stroke-linejoin="round"
-                  stroke-width="1.5"
-                />
-              </svg>
-            </div>
-            <span> Dark </span>
-          </div>
-        </nav>
-      </div>
-    </div>
-    <div class="w-full h-screen flex flex-col pr-[30px] space-y-2">
-      <!-- Header-->
-      
-<Header :text="fundingaddress" :name="name"/>
-
-      <div class="border border-[#A2A1A833] h-full rounded-[10px]">
-        <router-view></router-view>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/assets/add-circle.png b/frontend/assets/add-circle.png
deleted file mode 100644
index 9a8a289d..00000000
Binary files a/frontend/assets/add-circle.png and /dev/null differ
diff --git a/frontend/assets/attendance.png b/frontend/assets/attendance.png
deleted file mode 100644
index 0f6f0286..00000000
Binary files a/frontend/assets/attendance.png and /dev/null differ
diff --git a/frontend/assets/briefcase 04.png b/frontend/assets/briefcase 04.png
deleted file mode 100644
index b8bd15ca..00000000
Binary files a/frontend/assets/briefcase 04.png and /dev/null differ
diff --git a/frontend/assets/candidates.png b/frontend/assets/candidates.png
deleted file mode 100644
index 426fcdcc..00000000
Binary files a/frontend/assets/candidates.png and /dev/null differ
diff --git a/frontend/assets/darklogo.png b/frontend/assets/darklogo.png
deleted file mode 100644
index f26c34dc..00000000
Binary files a/frontend/assets/darklogo.png and /dev/null differ
diff --git a/frontend/assets/dashboard.png b/frontend/assets/dashboard.png
deleted file mode 100644
index f8ebf682..00000000
Binary files a/frontend/assets/dashboard.png and /dev/null differ
diff --git a/frontend/assets/departments.png b/frontend/assets/departments.png
deleted file mode 100644
index 10402cb2..00000000
Binary files a/frontend/assets/departments.png and /dev/null differ
diff --git a/frontend/assets/direction-down 01.png b/frontend/assets/direction-down 01.png
deleted file mode 100644
index 375abdaa..00000000
Binary files a/frontend/assets/direction-down 01.png and /dev/null differ
diff --git a/frontend/assets/direction-down 02.png b/frontend/assets/direction-down 02.png
deleted file mode 100644
index d04f74cf..00000000
Binary files a/frontend/assets/direction-down 02.png and /dev/null differ
diff --git a/frontend/assets/direction-right.png b/frontend/assets/direction-right.png
deleted file mode 100644
index 22994ebe..00000000
Binary files a/frontend/assets/direction-right.png and /dev/null differ
diff --git a/frontend/assets/down-arrow.png b/frontend/assets/down-arrow.png
deleted file mode 100644
index 53a444c1..00000000
Binary files a/frontend/assets/down-arrow.png and /dev/null differ
diff --git a/frontend/assets/dp.png b/frontend/assets/dp.png
deleted file mode 100644
index 31ef1a98..00000000
Binary files a/frontend/assets/dp.png and /dev/null differ
diff --git a/frontend/assets/edit.png b/frontend/assets/edit.png
deleted file mode 100644
index 0686da8d..00000000
Binary files a/frontend/assets/edit.png and /dev/null differ
diff --git a/frontend/assets/employees.png b/frontend/assets/employees.png
deleted file mode 100644
index d186b515..00000000
Binary files a/frontend/assets/employees.png and /dev/null differ
diff --git a/frontend/assets/favicon.svg b/frontend/assets/favicon.svg
deleted file mode 100644
index de4aeddc..00000000
--- a/frontend/assets/favicon.svg
+++ /dev/null
@@ -1,15 +0,0 @@
-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/frontend/assets/filter.png b/frontend/assets/filter.png
deleted file mode 100644
index fced76cf..00000000
Binary files a/frontend/assets/filter.png and /dev/null differ
diff --git a/frontend/assets/holidays.png b/frontend/assets/holidays.png
deleted file mode 100644
index e2f95349..00000000
Binary files a/frontend/assets/holidays.png and /dev/null differ
diff --git a/frontend/assets/jobs.png b/frontend/assets/jobs.png
deleted file mode 100644
index e64a1307..00000000
Binary files a/frontend/assets/jobs.png and /dev/null differ
diff --git a/frontend/assets/leaves.png b/frontend/assets/leaves.png
deleted file mode 100644
index 8fd3c43a..00000000
Binary files a/frontend/assets/leaves.png and /dev/null differ
diff --git a/frontend/assets/logo-dark.svg b/frontend/assets/logo-dark.svg
deleted file mode 100644
index c3e79d44..00000000
--- a/frontend/assets/logo-dark.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="68" height="32" viewBox="0 0 68 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.377 32c3.765 0 7.876-1.94 12.22-5.765 2.056-1.811 3.839-3.75 5.177-5.306-.002-.002-.005-.004-.007-.008l-.006.007s-2.11-2.31-4.433-4.781c-1.25 1.493-3.057 3.53-5.133 5.359-3.861 3.401-6.383 4.114-7.818 4.114-5.415 0-9.82-4.317-9.82-9.621 0-5.276 4.407-9.588 9.827-9.621.247 0 .564.03.955.117-1.579-.687-3.276-1.18-4.893-1.18-9.926 0-11.865 6.508-11.998 6.97A15.646 15.646 0 000 16c0 8.822 7.347 16 16.377 16z" fill="url(#paint0_linear)"/><path d="M51.051 0c-3.764 0-7.876 1.94-12.219 5.765-2.056 1.811-3.84 3.75-5.177 5.306a.055.055 0 01.007.008.07.07 0 01.005-.007s2.111 2.31 4.434 4.78c1.25-1.492 3.056-3.53 5.133-5.358 3.86-3.401 6.382-4.114 7.817-4.114 5.416 0 9.82 4.317 9.82 9.621 0 5.275-4.407 9.588-9.827 9.621-.247 0-.564-.03-.955-.117 1.58.687 3.277 1.18 4.894 1.18 9.925 0 11.865-6.508 11.997-6.97a15.49 15.49 0 00.45-3.713C67.429 7.178 60.082 0 51.05 0z" fill="url(#paint1_linear)"/><path d="M54.964 26.523c-5.082-.125-10.364-4.152-11.442-5.154-2.784-2.587-9.21-9.592-9.713-10.142C29.1 5.93 22.72 0 16.377 0h-.016C8.652.039 2.173 5.285.45 12.287c.132-.461 2.664-7.094 11.99-6.863 5.081.125 10.389 4.207 11.466 5.208 2.783 2.587 9.21 9.594 9.712 10.142C38.33 26.072 44.71 32 51.051 32h.017c7.709-.039 14.187-5.285 15.91-12.287-.131.461-2.689 7.041-12.014 6.81z" fill="#C3C3C4"/><defs><linearGradient id="paint0_linear" x1="24.902" y1="29.89" x2="2.521" y2="6.828" gradientUnits="userSpaceOnUse"><stop offset=".21" stop-color="#979799"/><stop offset=".331" stop-color="#9C9C9E"/><stop offset=".477" stop-color="#ABABAD"/><stop offset=".493" stop-color="#ADADAF"/><stop offset=".575" stop-color="#BCBCBE"/><stop offset=".731" stop-color="#E4E4E5"/><stop offset=".769" stop-color="#EFEFEF"/></linearGradient><linearGradient id="paint1_linear" x1="42.526" y1="2.11" x2="64.908" y2="25.172" gradientUnits="userSpaceOnUse"><stop offset=".21" stop-color="#979799"/><stop offset=".331" stop-color="#9C9C9E"/><stop offset=".477" stop-color="#ABABAD"/><stop offset=".493" stop-color="#ADADAF"/><stop offset=".575" stop-color="#BCBCBE"/><stop offset=".731" stop-color="#E4E4E5"/><stop offset=".769" stop-color="#EFEFEF"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/frontend/assets/logo.png b/frontend/assets/logo.png
deleted file mode 100644
index a0a61701..00000000
Binary files a/frontend/assets/logo.png and /dev/null differ
diff --git a/frontend/assets/payroll.png b/frontend/assets/payroll.png
deleted file mode 100644
index 872dae66..00000000
Binary files a/frontend/assets/payroll.png and /dev/null differ
diff --git a/frontend/assets/photo.png b/frontend/assets/photo.png
deleted file mode 100644
index 9dc745df..00000000
Binary files a/frontend/assets/photo.png and /dev/null differ
diff --git a/frontend/assets/settings.png b/frontend/assets/settings.png
deleted file mode 100644
index f931496d..00000000
Binary files a/frontend/assets/settings.png and /dev/null differ
diff --git a/frontend/assets/totalemp.png b/frontend/assets/totalemp.png
deleted file mode 100644
index cffbe4b5..00000000
Binary files a/frontend/assets/totalemp.png and /dev/null differ
diff --git a/frontend/assets/trash.png b/frontend/assets/trash.png
deleted file mode 100644
index dfa06190..00000000
Binary files a/frontend/assets/trash.png and /dev/null differ
diff --git a/frontend/assets/up-arrow.png b/frontend/assets/up-arrow.png
deleted file mode 100644
index a50d9b33..00000000
Binary files a/frontend/assets/up-arrow.png and /dev/null differ
diff --git a/frontend/assets/view.png b/frontend/assets/view.png
deleted file mode 100644
index 900c7644..00000000
Binary files a/frontend/assets/view.png and /dev/null differ
diff --git a/frontend/components/AccountAccess.vue b/frontend/components/AccountAccess.vue
deleted file mode 100644
index 8334b169..00000000
--- a/frontend/components/AccountAccess.vue
+++ /dev/null
@@ -1,308 +0,0 @@
-<template>
-    <form>
-       <div class=" p-5">
-         <div>
-           <!--h2
-             class="text-base font-semibold leading-7 text-gray-900 dark:text-white"
-           >
-             Principal
-           </h2>
-           <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-white">
-             Add the user principal
-           </p-->
-      
-           <div class=" grid grid-cols-1 gap-x-6 sm:grid-cols-6">
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >First name</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-3">
-               <label
-                 for="last-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Last name</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.last_name"
-                   type="text"
-                   name="last-name"
-                   id="last-name"
-                   autocomplete="last-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Mobile Number</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Email Address</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Date of Birth</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Marital Status</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Gender</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Nationality</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-6">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Address</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-2">
-           <label
-             for="designation"
-             class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-             >City</label
-           >
-           <div >
-             <input
-               v-model="registrationData.designation"
-               type="text"
-               name="designation"
-               id="designation"
-               autocomplete="designation"
-               class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-             />
-           </div>
-         </div>
-
-             <div class="sm:col-span-2">
-               <label
-                 for="email"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >State</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.email"
-                   id="email"
-                   name="email"
-                   type="email"
-                   autocomplete="email"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-2">
-               <label
-                 for="email"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Zip Code</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.email"
-                   id="email"
-                   name="email"
-                   type="email"
-                   autocomplete="email"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             
-
-             <!--div class="col-span-full">
-               <label
-                 for="wallet-address"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Wallet address</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.wallet_address"
-                   type="text"
-                   name="wallet-address"
-                   id="wallet-address"
-                   autocomplete="wallet-address"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div-->
-
-       
-           </div>
-         </div>
-       </div>
-
-       <div class=" flex items-center justify-end gap-x-6 px-5">
-         <button
-           type="button"
-           class="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
-         >
-           Cancel
-         </button>
-         <button
-           type="button"
-           @click="addData()"
-           class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-         >
-           Submit
-         </button>
-       </div>
-     </form>
-</template>
-<script setup>
-import { ref, watchEffect } from "vue";
-import { useAuthStore } from "../store/auth";
-import Navbar from "../components/Navbar.vue";
-const isLoading = ref(false);
-const authStore = useAuthStore();
-const registrationData = {
- // first_name: "",
- // last_name: "",
- // email: "",
- // phone_number: "",
- wallet_address: "",
-};
-const addData = async () => {
- isLoading.value = true;
- authStore.updateRegistrationData(registrationData);
- // const firstname = authStore.registrationData.first_name;
- // const lastname = authStore.registrationData.last_name;
- // const email = authStore.registrationData.email;
- // const phone = authStore.registrationData.phone_number;
- const address = authStore.registrationData.wallet_address;
-
- console.log(address);
-
- try {
-   const response = authStore.create_employee(
-     // firstname,
-     // lastname,
-     // email,
-     // phone,
-     address
-   );
-   await new Promise((resolve) => setTimeout(resolve, 5000));
- } catch (error) {
-   console.error("Error submitting data:", error);
- } finally {
-   isLoading.value = false;
-   console.error("Successful:");
-   router.push("/home/contacts");
- }
-};
-</script>
\ No newline at end of file
diff --git a/frontend/components/AccountSwitcher.vue b/frontend/components/AccountSwitcher.vue
deleted file mode 100644
index b9ef8472..00000000
--- a/frontend/components/AccountSwitcher.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <Menu as="div" class="relative inline-block text-left">
-    <div>
-      <MenuButton
-        class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
-      >
-        {{ walletAddress }}
-        <ChevronDownIcon
-          class="-mr-1 h-5 w-5 text-gray-400"
-          aria-hidden="true"
-        />
-      </MenuButton>
-    </div>
-
-    <transition
-      enter-active-class="transition ease-out duration-100"
-      enter-from-class="transform opacity-0 scale-95"
-      enter-to-class="transform opacity-100 scale-100"
-      leave-active-class="transition ease-in duration-75"
-      leave-from-class="transform opacity-100 scale-100"
-      leave-to-class="transform opacity-0 scale-95"
-    >
-      <MenuItems
-        class="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-      >
-        <div class="py-1">
-          <MenuItem v-slot="{ active }">
-            <a
-              href="#"
-              :class="[
-                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                'block px-4 py-2 text-sm',
-              ]"
-              >Account settings</a
-            >
-          </MenuItem>
-          <MenuItem v-slot="{ active }">
-            <a
-              href="#"
-              :class="[
-                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                'block px-4 py-2 text-sm',
-              ]"
-              >Support</a
-            >
-          </MenuItem>
-          <MenuItem v-slot="{ active }">
-            <a
-              href="#"
-              :class="[
-                active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                'block px-4 py-2 text-sm',
-              ]"
-              >License</a
-            >
-          </MenuItem>
-          <form method="POST" action="#">
-            <MenuItem v-slot="{ active }">
-              <button
-                type="submit"
-                :class="[
-                  active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                  'block w-full px-4 py-2 text-left text-sm',
-                ]"
-              >
-                Sign out
-              </button>
-            </MenuItem>
-          </form>
-        </div>
-      </MenuItems>
-    </transition>
-  </Menu>
-</template>
-
-<script setup>
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { ChevronDownIcon } from "@heroicons/vue/20/solid";
-
-import { ref } from "vue";
-
-defineProps({
-  walletAddress: String,
-});
-</script>
diff --git a/frontend/components/AssetUpload.vue b/frontend/components/AssetUpload.vue
deleted file mode 100644
index 3c7c0853..00000000
--- a/frontend/components/AssetUpload.vue
+++ /dev/null
@@ -1,24 +0,0 @@
-<script setup></script>
-<template>
-  <div
-    class="flex flex-col w-full rounded-[10px] border border-dashed border-[#7152F3] p-5"
-  >
-  <slot></slot>
-    <div class="flex p-5 justify-center items-center bg-primary-500 rounded-[10px] self-center">
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.22464 3.5579C3.98056 3.80198 3.98057 4.19771 4.22465 4.44178C4.46872 4.68586 4.86445 4.68586 5.10853 4.44178L7.37489 2.1754L7.37489 12.3332C7.37489 12.6784 7.65471 12.9582 7.99989 12.9582C8.34507 12.9582 8.62489 12.6784 8.62489 12.3332L8.62489 2.17538L10.8913 4.44178C11.1354 4.68586 11.5311 4.68586 11.7752 4.44178C12.0193 4.1977 12.0193 3.80197 11.7752 3.5579L8.44183 0.22456C8.32462 0.10735 8.16565 0.0415031 7.99989 0.0415039C7.83412 0.0415047 7.67515 0.107354 7.55794 0.224564L4.22464 3.5579ZM3.28309 6.89078C3.49899 6.62146 3.45568 6.22811 3.18636 6.01221C2.91703 5.79631 2.52368 5.83962 2.30778 6.10894C1.30718 7.35716 0.708252 8.94275 0.708252 10.6665C0.708252 14.6936 3.97284 17.9582 7.99992 17.9582C12.027 17.9582 15.2916 14.6936 15.2916 10.6665C15.2916 8.94275 14.6927 7.35716 13.6921 6.10894C13.4762 5.83962 13.0828 5.79631 12.8135 6.01221C12.5442 6.22811 12.5008 6.62146 12.7167 6.89078C13.546 7.92523 14.0416 9.23714 14.0416 10.6665C14.0416 14.0032 11.3366 16.7082 7.99992 16.7082C4.6632 16.7082 1.95825 14.0032 1.95825 10.6665C1.95825 9.23714 2.45385 7.92523 3.28309 6.89078Z" fill="white"/>
-</svg>
-    </div>
-    <div class="flex flex-col items-center">
-      <p
-        class="text-base font-light text-textcolor dark:text-white leading-[22px]"
-      >
-        Drag & Drop or
-        <span class="text-[@7152F3]"> choose file </span> to upload
-      </p>
-      <p class="font-light text-accentgray text-[11px] leading-[16px]">
-        Supported formats : Jpeg, pdf
-      </p>
-    </div>
-  </div>
-</template>
diff --git a/frontend/components/BtnPill.vue b/frontend/components/BtnPill.vue
deleted file mode 100644
index 28c508f4..00000000
--- a/frontend/components/BtnPill.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <div>
-    <button
-      :style="{ backgroundColor: bgColor || 'transparent' }"
-      class="py-1 px-4 rounded-lg border flex flex-row items-center space-x-2 border-[#F2F8FF] text-[#1C3680]"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
-        viewBox="0 0 16 16"
-        fill="none"
-      >
-        <path
-          d="M13.3437 4.66669H3.41659C3.18638 4.66669 2.99992 4.48023 2.99992 4.25002C2.99992 4.01981 3.18638 3.83335 3.41659 3.83335H13.4166C13.6468 3.83335 13.8333 3.6469 13.8333 3.41669C13.8333 2.72632 13.2736 2.16669 12.5833 2.16669H2.99992C2.07935 2.16669 1.33325 2.91278 1.33325 3.83335V12.1667C1.33325 13.0873 2.07935 13.8334 2.99992 13.8334H13.3437C14.0734 13.8334 14.6666 13.2727 14.6666 12.5834V5.91669C14.6666 5.22736 14.0734 4.66669 13.3437 4.66669ZM12.1666 10.0834C11.7064 10.0834 11.3333 9.71018 11.3333 9.25002C11.3333 8.78986 11.7064 8.41669 12.1666 8.41669C12.6267 8.41669 12.9999 8.78986 12.9999 9.25002C12.9999 9.71018 12.6267 10.0834 12.1666 10.0834Z"
-          fill="#4C98FF"
-        />
-      </svg>
-      <span :style="{ color: textcolor }">
-        {{ props.text }}
-      </span>
-    </button>
-  </div>
-</template>
-<script setup>
-const props = defineProps(["text", "bgColor", "textcolor"]);
-</script>
diff --git a/frontend/components/Button.vue b/frontend/components/Button.vue
deleted file mode 100644
index afcd980f..00000000
--- a/frontend/components/Button.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<script setup>
-defineProps({
-  title: String,
-});
-</script>
-
-<template>
-  <div class="rounded-[10px] inline-flex flex-row p-5 bg-[#7152F3]">
-    <!--img :src="iconUrl" alt="" class="w-6 h-6"/-->
-    <p class="text-base font-light dark:text-white text-textcolor">
-      {{ title }}
-    </p>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/ButtonWhite.vue b/frontend/components/ButtonWhite.vue
deleted file mode 100644
index 01cb85be..00000000
--- a/frontend/components/ButtonWhite.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup>
-import { ref } from "vue";
-defineProps({
-  title: String,
-  iconUrl: String,
-  bgcolor: String,
-});
-</script>
-
-<template>
-  <div
-    class="rounded-[10px] inline-flex flex-row p-5 bg-transparent border border-[#A2A1A833]"
-  >
-    <!--img :src="iconUrl" alt="" class="w-6 h-6"/-->
-    <p class="text-base font-light dark:text-white text-textcolor">
-      {{ title }}
-    </p>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/Calendar.vue b/frontend/components/Calendar.vue
deleted file mode 100644
index d632f5ea..00000000
--- a/frontend/components/Calendar.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-  <div>
-    <div class="flex items-center">
-      <h2 class="flex-auto text-sm font-semibold text-gray-900">
-        January 2022
-      </h2>
-      <button
-        type="button"
-        class="-my-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
-      >
-        <span class="sr-only">Previous month</span>
-        <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
-      </button>
-      <button
-        type="button"
-        class="-my-1.5 -mr-1.5 ml-2 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500"
-      >
-        <span class="sr-only">Next month</span>
-        <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
-      </button>
-    </div>
-    <div
-      class="mt-10 grid grid-cols-7 text-center text-xs leading-6 text-gray-500"
-    >
-      <div>M</div>
-      <div>T</div>
-      <div>W</div>
-      <div>T</div>
-      <div>F</div>
-      <div>S</div>
-      <div>S</div>
-    </div>
-    <div class="mt-2 grid grid-cols-7 text-sm">
-      <div
-        v-for="(day, dayIdx) in days"
-        :key="day.date"
-        :class="[dayIdx > 6 && 'border-t border-gray-200', 'py-2']"
-      >
-        <button
-          type="button"
-          :class="[
-            day.isSelected && 'text-white',
-            !day.isSelected && day.isToday && 'text-indigo-600',
-            !day.isSelected &&
-              !day.isToday &&
-              day.isCurrentMonth &&
-              'text-gray-900',
-            !day.isSelected &&
-              !day.isToday &&
-              !day.isCurrentMonth &&
-              'text-gray-400',
-            day.isSelected && day.isToday && 'bg-indigo-600',
-            day.isSelected && !day.isToday && 'bg-gray-900',
-            !day.isSelected && 'hover:bg-gray-200',
-            (day.isSelected || day.isToday) && 'font-semibold',
-            'mx-auto flex h-8 w-8 items-center justify-center rounded-full',
-          ]"
-        >
-          <time :datetime="day.date">{{
-            day.date.split("-").pop().replace(/^0/, "")
-          }}</time>
-        </button>
-      </div>
-    </div>
-    <section class="mt-12">
-      <h2 class="text-base font-semibold leading-6 text-gray-900">
-        Schedule for <time datetime="2022-01-21">January 21, 2022</time>
-      </h2>
-      <ol class="mt-4 space-y-1 text-sm leading-6 text-gray-500">
-        <li
-          v-for="meeting in meetings"
-          :key="meeting.id"
-          class="group flex items-center space-x-4 rounded-xl px-4 py-2 focus-within:bg-gray-100 hover:bg-gray-100"
-        >
-          <img
-            :src="meeting.imageUrl"
-            alt=""
-            class="h-10 w-10 flex-none rounded-full"
-          />
-          <div class="flex-auto">
-            <p class="text-gray-900">{{ meeting.name }}</p>
-            <p class="mt-0.5">
-              <time :datetime="meeting.startDatetime">{{ meeting.start }}</time>
-              -
-              <time :datetime="meeting.endDatetime">{{ meeting.end }}</time>
-            </p>
-          </div>
-          <Menu
-            as="div"
-            class="relative opacity-0 focus-within:opacity-100 group-hover:opacity-100"
-          >
-            <div>
-              <MenuButton
-                class="-m-2 flex items-center rounded-full p-1.5 text-gray-500 hover:text-gray-600"
-              >
-                <span class="sr-only">Open options</span>
-                <EllipsisVerticalIcon class="h-6 w-6" aria-hidden="true" />
-              </MenuButton>
-            </div>
-
-            <transition
-              enter-active-class="transition ease-out duration-100"
-              enter-from-class="transform opacity-0 scale-95"
-              enter-to-class="transform opacity-100 scale-100"
-              leave-active-class="transition ease-in duration-75"
-              leave-from-class="transform opacity-100 scale-100"
-              leave-to-class="transform opacity-0 scale-95"
-            >
-              <MenuItems
-                class="absolute right-0 z-10 mt-2 w-36 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
-              >
-                <div class="py-1">
-                  <MenuItem v-slot="{ active }">
-                    <a
-                      href="#"
-                      :class="[
-                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                        'block px-4 py-2 text-sm',
-                      ]"
-                      >Edit</a
-                    >
-                  </MenuItem>
-                  <MenuItem v-slot="{ active }">
-                    <a
-                      href="#"
-                      :class="[
-                        active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
-                        'block px-4 py-2 text-sm',
-                      ]"
-                      >Cancel</a
-                    >
-                  </MenuItem>
-                </div>
-              </MenuItems>
-            </transition>
-          </Menu>
-        </li>
-      </ol>
-    </section>
-  </div>
-</template>
-
-<script setup>
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/20/solid";
-import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
-import { EllipsisVerticalIcon } from "@heroicons/vue/24/outline";
-
-const days = [
-  { date: "2021-12-27" },
-  { date: "2021-12-28" },
-  { date: "2021-12-29" },
-  { date: "2021-12-30" },
-  { date: "2021-12-31" },
-  { date: "2022-01-01", isCurrentMonth: true },
-  { date: "2022-01-02", isCurrentMonth: true },
-  { date: "2022-01-03", isCurrentMonth: true },
-  { date: "2022-01-04", isCurrentMonth: true },
-  { date: "2022-01-05", isCurrentMonth: true },
-  { date: "2022-01-06", isCurrentMonth: true },
-  { date: "2022-01-07", isCurrentMonth: true },
-  { date: "2022-01-08", isCurrentMonth: true },
-  { date: "2022-01-09", isCurrentMonth: true },
-  { date: "2022-01-10", isCurrentMonth: true },
-  { date: "2022-01-11", isCurrentMonth: true },
-  { date: "2022-01-12", isCurrentMonth: true, isToday: true },
-  { date: "2022-01-13", isCurrentMonth: true },
-  { date: "2022-01-14", isCurrentMonth: true },
-  { date: "2022-01-15", isCurrentMonth: true },
-  { date: "2022-01-16", isCurrentMonth: true },
-  { date: "2022-01-17", isCurrentMonth: true },
-  { date: "2022-01-18", isCurrentMonth: true },
-  { date: "2022-01-19", isCurrentMonth: true },
-  { date: "2022-01-20", isCurrentMonth: true },
-  { date: "2022-01-21", isCurrentMonth: true, isSelected: true },
-  { date: "2022-01-22", isCurrentMonth: true },
-  { date: "2022-01-23", isCurrentMonth: true },
-  { date: "2022-01-24", isCurrentMonth: true },
-  { date: "2022-01-25", isCurrentMonth: true },
-  { date: "2022-01-26", isCurrentMonth: true },
-  { date: "2022-01-27", isCurrentMonth: true },
-  { date: "2022-01-28", isCurrentMonth: true },
-  { date: "2022-01-29", isCurrentMonth: true },
-  { date: "2022-01-30", isCurrentMonth: true },
-  { date: "2022-01-31", isCurrentMonth: true },
-  { date: "2022-02-01" },
-  { date: "2022-02-02" },
-  { date: "2022-02-03" },
-  { date: "2022-02-04" },
-  { date: "2022-02-05" },
-  { date: "2022-02-06" },
-];
-const meetings = [
-  {
-    id: 1,
-    name: "Leslie Alexander",
-    imageUrl:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-    start: "1:00 PM",
-    startDatetime: "2022-01-21T13:00",
-    end: "2:30 PM",
-    endDatetime: "2022-01-21T14:30",
-  },
-  {
-    id: 2,
-    name: "Cosmas Aruba",
-    imageUrl:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
-    start: "4:00 PM",
-    startDatetime: "2022-01-21T13:00",
-    end: "6:30 PM",
-    endDatetime: "2022-01-21T14:30",
-  },
-  // More meetings...
-];
-</script>
diff --git a/frontend/components/DepartmentCard.vue b/frontend/components/DepartmentCard.vue
deleted file mode 100644
index 6435cf86..00000000
--- a/frontend/components/DepartmentCard.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import EmployeeDepartmentCard from "./EmployeeDepartmentCard.vue";
-import router from "../router";
-
-defineProps({
-  msg: String,
-});
-
-const count = ref(0);
-const gotoViewDepartment = () => {
-  router.push("/view-department");
-};
-</script>
-
-<template>
-  <div
-    class="border divide-y divide-[#A2A1A833] border-[#A2A1A833] rounded-[10px] p-5 flex flex-col"
-  >
-    <div class="flex flex-row justify-between items-center pb-[10px]">
-      <div class="flex flex-col">
-        <p
-          class="font-semibold text-xl leading-[30px] text-[#16151C] dark:text-white"
-        >
-          Design Department
-        </p>
-        <p class="font-light text-base leading-[22px] text-[#A2A1A8]">
-          20 Members
-        </p>
-      </div>
-      <p
-        @click="gotoViewDepartment()"
-        class="font-light text-base text-[#7152F3] cursor-pointer hover:text-lg"
-      >
-        View All
-      </p>
-    </div>
-
-    <div class="flex flex-col pt-5 space-y-4">
-      <EmployeeDepartmentCard name="Dianne Russ" role="Engineering head" />
-      <EmployeeDepartmentCard name="Dianne Russ" role="Engineering head" />
-      <EmployeeDepartmentCard name="Dianne Russ" role="Engineering head" />
-      <EmployeeDepartmentCard name="Dianne Russ" role="Engineering head" />
-      <EmployeeDepartmentCard name="Dianne Russ" role="Engineering head" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/Documents.vue b/frontend/components/Documents.vue
deleted file mode 100644
index 4c691500..00000000
--- a/frontend/components/Documents.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <form>
-    <div class=" p-5">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
-        <AssetUpload >Upload Appointment Letter</AssetUpload>
-        <AssetUpload >Upload Salary Slips</AssetUpload>
-        <AssetUpload >Upload Reliving Letter</AssetUpload>
-        <AssetUpload >Upload Experience Letter</AssetUpload>
-      </div>
-    </div>
-
-    <div class=" flex items-center justify-end gap-x-6 px-5">
-      <button
-        class="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
-        type="button"
-      >
-        Cancel
-      </button>
-      <button
-        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-        type="button"
-        @click="addData()"
-      >
-        Submit
-      </button>
-    </div>
-  </form>
-</template>
-<script setup>
-import { ref } from "vue"
-import { useAuthStore } from "../store/auth"
-import AssetUpload from "../components/AssetUpload.vue"
-
-const isLoading = ref(false)
-const authStore = useAuthStore()
-const registrationData = {
-  // first_name: "",
-  // last_name: "",
-  // email: "",
-  // phone_number: "",
-  wallet_address: "",
-}
-const addData = async () => {
-  isLoading.value = true
-  authStore.updateRegistrationData(registrationData)
-  // const firstname = authStore.registrationData.first_name;
-  // const lastname = authStore.registrationData.last_name;
-  // const email = authStore.registrationData.email;
-  // const phone = authStore.registrationData.phone_number;
-  const address = authStore.registrationData.wallet_address
-
-  console.log(address)
-
-  try {
-    const response = authStore.create_employee(
-      // firstname,
-      // lastname,
-      // email,
-      // phone,
-      address,
-    )
-    await new Promise((resolve) => setTimeout(resolve, 5000))
-  } catch (error) {
-    console.error("Error submitting data:", error)
-  } finally {
-    isLoading.value = false
-    console.error("Successful:")
-    router.push("/home/contacts")
-  }
-}
-</script>
\ No newline at end of file
diff --git a/frontend/components/EmployeeDepartmentCard.vue b/frontend/components/EmployeeDepartmentCard.vue
deleted file mode 100644
index 04529e29..00000000
--- a/frontend/components/EmployeeDepartmentCard.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  name: String,
-  role: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex flex-row justify-between items-center cursor-pointer">
-    <div class="flex flex-row items-center space-x-[10px]">
-      <div>
-        <img src="../assets/dp.png" class="h-10 w-10 rounded-full" />
-      </div>
-      <div class="flex flex-col">
-        <p class="font-light text-base text-[#16151C] dark:text-white">
-          {{ name }}
-        </p>
-        <p class="font-light text-xs leading-[18px] text-[#A2A1A8]">
-          {{ role }}
-        </p>
-      </div>
-    </div>
-
-    <img src="../assets/direction-right.png" class="h-6 w-6" />
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/Employees/DatePicker.vue b/frontend/components/Employees/DatePicker.vue
deleted file mode 100644
index fa6b0ce1..00000000
--- a/frontend/components/Employees/DatePicker.vue
+++ /dev/null
@@ -1,122 +0,0 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue'
-import {
-  DatePickerArrow,
-  DatePickerCalendar,
-  DatePickerCell,
-  DatePickerCellTrigger,
-  DatePickerContent,
-  DatePickerField,
-  DatePickerGrid,
-  DatePickerGridBody,
-  DatePickerGridHead,
-  DatePickerGridRow,
-  DatePickerHeadCell,
-  DatePickerHeader,
-  DatePickerHeading,
-  DatePickerInput,
-  DatePickerNext,
-  DatePickerPrev,
-  DatePickerRoot,
-  DatePickerTrigger,
-  Label,
-} from 'radix-vue'
-</script>
-
-<template>
-  <div class="flex flex-col gap-2">
-    <Label class="text-sm font-medium leading-6 text-gray-900 dark:text-white" for="date-field">Birthday</Label>
-    <DatePickerRoot
-      id="date-field"
-      :is-date-unavailable="date => date.day === 19"
-    >
-      <DatePickerField
-        v-slot="{ segments }"
-        class="flex select-none bg-white items-center justify-between rounded-lg text-center text-green10 border border-transparent p-1 w-40 data-[invalid]:border-red-500"
-      >
-        <div class="flex items-center">
-          <template v-for="item in segments" :key="item.part">
-            <DatePickerInput
-              v-if="item.part === 'literal'"
-              :part="item.part"
-            >
-              {{ item.value }}
-            </DatePickerInput>
-            <DatePickerInput
-              v-else
-              :part="item.part"
-              class="rounded-md p-0.5 focus:outline-none focus:shadow-[0_0_0_2px] focus:shadow-gray-500 aria-[valuetext=Empty]:text-green9 "
-            >
-              {{ item.value }}
-            </DatePickerInput>
-          </template>
-        </div>
-
-        <DatePickerTrigger class="focus:shadow-[0_0_0_2px] rounded-md text-xl p-1 focus:shadow-gray-500">
-          <Icon icon="radix-icons:calendar" />
-        </DatePickerTrigger>
-      </DatePickerField>
-
-      <DatePickerContent
-        :side-offset="4"
-        class="rounded-xl bg-white shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2)] focus:shadow-[0_10px_38px_-10px_hsla(206,22%,7%,.35),0_10px_20px_-15px_hsla(206,22%,7%,.2),0_0_0_2px_theme(colors.green7)] will-change-[transform,opacity] data-[state=open]:data-[side=top]:animate-slideDownAndFade data-[state=open]:data-[side=right]:animate-slideLeftAndFade data-[state=open]:data-[side=bottom]:animate-slideUpAndFade data-[state=open]:data-[side=left]:animate-slideRightAndFade"
-      >
-        <DatePickerArrow class="fill-white" />
-        <DatePickerCalendar
-          v-slot="{ weekDays, grid }"
-          class="p-4"
-        >
-          <DatePickerHeader class="flex items-center justify-between">
-            <DatePickerPrev
-              class="inline-flex items-center cursor-pointer text-black justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
-            >
-              <Icon icon="radix-icons:chevron-left" class="w-6 h-6" />
-            </DatePickerPrev>
-
-            <DatePickerHeading class="text-black font-medium" />
-            <DatePickerNext
-              class="inline-flex items-center cursor-pointer text-black justify-center rounded-[9px] bg-transparent w-8 h-8 hover:bg-black hover:text-white active:scale-98 active:transition-all focus:shadow-[0_0_0_2px] focus:shadow-black"
-            >
-              <Icon icon="radix-icons:chevron-right" class="w-6 h-6" />
-            </DatePickerNext>
-          </DatePickerHeader>
-          <div
-            class="flex flex-col space-y-4 pt-4 sm:flex-row sm:space-x-4 sm:space-y-0"
-          >
-            <DatePickerGrid v-for="month in grid" :key="month.value.toString()" class="w-full border-collapse select-none space-y-1">
-              <DatePickerGridHead>
-                <DatePickerGridRow class="mb-1 flex w-full justify-between">
-                  <DatePickerHeadCell
-                    v-for="day in weekDays" :key="day"
-                    class="w-8 rounded-md text-xs text-green8"
-                  >
-                    {{ day }}
-                  </DatePickerHeadCell>
-                </DatePickerGridRow>
-              </DatePickerGridHead>
-              <DatePickerGridBody>
-                <DatePickerGridRow
-                  v-for="(weekDates, index) in month.rows"
-                  :key="`weekDate-${index}`"
-                  class="flex w-full"
-                >
-                  <DatePickerCell
-                    v-for="weekDate in weekDates"
-                    :key="weekDate.toString()"
-                    :date="weekDate"
-                  >
-                    <DatePickerCellTrigger
-                      :day="weekDate"
-                      :month="month.value"
-                      class="relative flex items-center justify-center whitespace-nowrap rounded-[9px] border border-transparent bg-transparent text-sm font-normal text-black w-8 h-8 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black hover:border-black data-[selected]:bg-black data-[selected]:font-medium data-[disabled]:text-black/30 data-[selected]:text-white data-[unavailable]:pointer-events-none data-[unavailable]:text-black/30 data-[unavailable]:line-through before:absolute before:top-[5px] before:hidden before:rounded-full before:w-1 before:h-1 before:bg-white data-[today]:before:block data-[today]:before:bg-green9 data-[selected]:before:bg-white"
-                    />
-                  </DatePickerCell>
-                </DatePickerGridRow>
-              </DatePickerGridBody>
-            </DatePickerGrid>
-          </div>
-        </DatePickerCalendar>
-      </DatePickerContent>
-    </DatePickerRoot>
-  </div>
-</template>
\ No newline at end of file
diff --git a/frontend/components/Employees/EmployeeSideBar.vue b/frontend/components/Employees/EmployeeSideBar.vue
deleted file mode 100644
index d8f6225e..00000000
--- a/frontend/components/Employees/EmployeeSideBar.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { storeToRefs } from 'pinia';
-import { useMenuStore } from '../../store/menu';
-import MenuItem from './MenuItem.vue';
-
-const menuStore = useMenuStore();
-const { menus } = storeToRefs(menuStore);
-</script>
-
-<template>
-  <div
-    class="flex items-start p-6 pt-10 gap-4 justify-center md:block w-full md:w-[270px] h-44 xs:h-52 md:h-full md:rounded-xl bg-mobile-sidebar-bg md:bg-desktop-sidebar-bg bg-no-repeat bg-cover bg-center"
-  >
-    <MenuItem
-      v-for="(menu, idx) in menus"
-      :key="menu"
-      :name="menu"
-      :idx="idx + 1"
-    />
-  </div>
-</template>
diff --git a/frontend/components/Employees/MenuItem.vue b/frontend/components/Employees/MenuItem.vue
deleted file mode 100644
index f36466d2..00000000
--- a/frontend/components/Employees/MenuItem.vue
+++ /dev/null
@@ -1,33 +0,0 @@
-<script setup lang="ts">
-import { useMenuStore } from '../../store/menu';
-import { storeToRefs } from 'pinia';
-
-defineProps<{
-  idx: number;
-  name: string;
-}>();
-
-const menuStore = useMenuStore();
-const { currentMenuIdx } = storeToRefs(menuStore);
-</script>
-
-<template>
-  <div class="flex items-center mb-6 text-sm">
-    <div
-      class="w-10 h-10 md:w-9 md:h-9 flex items-center justify-center font-bold transition-all border rounded-full"
-      :class="
-        currentMenuIdx === idx
-          ? 'bg-light-blue text-black border-light-blue'
-          : 'text-white border-white'
-      "
-    >
-      {{ idx }}
-    </div>
-    <div class="flex-1 pl-4 uppercase hidden md:block">
-      <p class="text-pastel-blue font-thin text-sm leading-5">Step {{ idx }}</p>
-      <h1 class="text-white font-bold tracking-wide">
-        {{ name }}
-      </h1>
-    </div>
-  </div>
-</template>
diff --git a/frontend/components/Gender.vue b/frontend/components/Gender.vue
deleted file mode 100644
index 2c86125f..00000000
--- a/frontend/components/Gender.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<script setup>
-import { ref } from "vue";
-const tabs = [
-  { name: "Male", current: true },
-  { name: "Female", current: false },
-];
-
-defineProps({
-  tabs: Array,
-});
-</script>
-<template>
-  <div>
-    <select
-      v-model="selectedTab"
-      id="tabs"
-      name="tabs"
-      class="block w-full rounded-[10px] border border-[#A2A1A833]/10 py-4 pl-4 pr-5 text-textcolor dark:text-darktextcolor ring-1 ring-inset ring-[#A2A1A8CC]/80 placeholder:text-[#A2A1A8CC]/80 focus:ring-2 focus:ring-inset focus:ring-[#A2A1A8CC]/80 sm:text-base sm:leading-6 font-light"
-    >
-      <option
-        placeholder="Gender"
-        v-for="tab in tabs"
-        :key="tab.name"
-        :selected="tab.current"
-      >
-        {{ tab.name }}
-      </option>
-    </select>
-  </div>
-</template>
diff --git a/frontend/components/Header.vue b/frontend/components/Header.vue
deleted file mode 100644
index 009d16fa..00000000
--- a/frontend/components/Header.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  text: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex flex-row justify-between">
-    <Searchbar />
-    <div class="flex flex-row space-x-5">
-      <div
-        class="rounded-[10px] cursor-pointer flex flex-row p-5 bg-[#7152F3] h-[50px] items-center space-x-[10px]"
-      >
-        <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-        <p class="text-base font-light text-white">
-          {{ text }}
-        </p>
-      </div>
-      <div
-        class="rounded-[10px] flex flex-row cursor-pointer border border-[#A2A1A833] p-5 h-[50px] items-center space-x-[10px]"
-      >
-        <img src="../assets/filter.png" alt="" class="w-6 h-6" />
-        <p class="text-base font-light dark:text-white text-[#16151C]">
-          Filter
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/JobCard.vue b/frontend/components/JobCard.vue
deleted file mode 100644
index c472ea3a..00000000
--- a/frontend/components/JobCard.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  designation: String,
-  department: String,
-  location: String,
-  type: String,
-  remote: String,
-  salary: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex flex-col bg-[#A2A1A80D] rounded-[10px] p-4">
-    <div class="flex flex-row pb-[14px]">
-      <div class="p-[10px]">
-        <img src="../assets/briefcase 04.png" class="h-6 w-6" />
-      </div>
-      <div class="flex flex-col">
-        <p class="text-base text-[#16151C] dark:text-white font-semibold">
-          UI/UX Designer
-        </p>
-        <p class="text-[#A2A1A8] font-light text-[14px] leading-[22px]">
-          Design
-        </p>
-      </div>
-    </div>
-    <div class="flex flex-row space-x-[10px] pb-[21px]">
-      <button
-        class="rounded-[5px] bg-[#7152F3] text-[#FFFFFF] p-[10px] text-xs leading-[18px] font-light"
-      >
-        Design
-      </button>
-      <button
-        class="rounded-[5px] bg-[#7152F3] text-[#FFFFFF] p-[10px] text-xs leading-[18px] font-light"
-      >
-        FullTime
-      </button>
-      <button
-        class="rounded-[5px] bg-[#7152F3] text-[#FFFFFF] p-[10px] text-xs leading-[18px] font-light"
-      >
-        Remote
-      </button>
-    </div>
-    <div class="flex flex-row justify-between">
-      <div class="flex flex-row items-center">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <circle cx="12" cy="11" r="3" stroke="#16151C" stroke-width="1.5" />
-          <path
-            d="M21 10.8889C21 15.7981 15.375 22 12 22C8.625 22 3 15.7981 3 10.8889C3 5.97969 7.02944 2 12 2C16.9706 2 21 5.97969 21 10.8889Z"
-            stroke="#16151C"
-            stroke-width="1.5"
-          />
-        </svg>
-        <p
-          class="font-light text-[14px] leading-[22px] text-[#16151C] dark:text-white"
-        >
-          New York, USA
-        </p>
-      </div>
-      <div class="flex flex-row items-center">
-        <p
-          class="text-[#16151C] dark:text-white text-[18px] leading-[26px] font-semibold"
-        >
-          1500
-        </p>
-        <p class="text-[#16151C] dark:text-white text-base font-light">/Hour</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/LoggedIn.vue b/frontend/components/LoggedIn.vue
deleted file mode 100644
index 14182007..00000000
--- a/frontend/components/LoggedIn.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <!--div class="mx-auto w-full">
-    <h2>You are authenticated!</h2>
-    <p>
-      {{  response }}
-    </p>
-    <p @click="whoamiCall">To see how a canister views you, click this button!</p>
-   
-    <div v-if="companyStore.isInitialized == false">
-<p class="font-light text-grey text-base dark:text-white">Setup your company by importing your data</p>
-<UserType/>
-    </div>
-    <div v-else>
-      <button  class="text-sm tex-black ring-1 ring-black">Proceed</button>
-    </div>
-    
-    <button
-      class="border border-gray-600 flex p-2 mt-4 mr-4 mb-4 ml-auto text-sm w-auto"
-      @click="async () => await authStore.logout()"
-    >
-      log out
-    </button>
-  </div-->
-
-  <div class="flex min-h-full flex-1">
-    <div class="mx-auto flex flex-col w-full max-w-screen lg:w-96 items-center">
-      <img class="h-10 w-auto" src="../assets/dfinity.svg" alt="Dfinity" />
-      <div>
-        <h2
-          class="mt-8 text-2xl text-center font-bold leading-9 tracking-tight text-gray-900"
-        >
-          You are authenticated!
-        </h2>
-
-        <button class="border border-gray-300 rounded-[10px] p-5">
-          principal : {{ response }}<br />
-          ckbtc balance : {{ balance }}<br />
-        </button>
-
-        <UserType />
-
-        <div @click="gotoDashboard()" class="mt-6 grid grid-cols-1 gap-4">
-          <a
-            href="#"
-            class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent"
-          >
-            <img src="../assets/dfinity.svg" alt="Dfinity" class="h-5 w-5" />
-            <span class="text-sm font-semibold leading-6">Proceed</span>
-          </a>
-        </div>
-      </div>
-
-      <div class="mt-10">
-        <div @click="authStore.logout()" class="mt-6 grid grid-cols-1 gap-4">
-          <a
-            href="#"
-            class="flex w-full items-center justify-center gap-3 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:ring-transparent"
-          >
-            <img src="../assets/dfinity.svg" alt="Dfinity" class="h-5 w-5" />
-            <span class="text-sm font-semibold leading-6">Logout</span>
-          </a>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watchEffect } from "vue";
-import { useAuthStore } from "../store/auth";
-import UserType from "./onboarding/UserType.vue";
-
-import router from "../router";
-
-const companyStore = useCompanyStore();
-
-const authStore = useAuthStore();
-let response = ref("");
-
-const balance = ref("");
-
-watchEffect(async () => {
-  const res = await authStore.whoamiActor?.whoami();
-  response.value = await res;
-});
-
-watchEffect(async () => {
-  const res = await authStore.whoamiActor?.getBalance();
-  balance.value = await res;
-});
-
-function gotoDashboard() {
-  router.push("/home/dashboard");
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>
diff --git a/frontend/components/MainHeader.vue b/frontend/components/MainHeader.vue
deleted file mode 100644
index 7e0467e4..00000000
--- a/frontend/components/MainHeader.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  text: String,
-  name: String,
-  designation: String,
-  department: String,
-
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex flex-row justify-between py-4">
-    <div class="flex flex-col ">
-      <p class="text-dark-500 dark:text-white-500 text-sm">
-        {{ text }}
-      </p>
-      <!--p class="text-dark-500 dark:text-white-500 text-[20px] font-semibold leading-[30px]">
-        All Departments
-      </p-->
-      <p class="text-gray-500 text-sm leading-[22px]">
-        {{department}}
-      </p>
-    </div>
-
-
-    <div class="flex flex-row  justify-start items-center  border border-gray-500 rounded-[10px] p-1">
-      <div class=" h-full w-10 overflow-hidden rounded-[10px]">
-    <img src="../assets/photo.png" class="h-full w-full" />
-  </div>
-
-  <div class="flex space-x-2 flex-row items-center justify-between rounded px-3">
-    <div>
-      <p class="-mb-1 text-left text-sm font-medium text-gray-600 group-hover:text-white">{{ name }}</p>
-      <p class="text-left text-sm font-semibold text-gray-900 group-hover:text-gray-400">{{ designation}}</p>
-    </div>
-    <div class=" rounded-md border p-1.5 hover:bg-gray-100">
-      <svg class="h-3 w-3  rotate-180 transform  text-gray-500"
-       xmlns="http://www.w3.org/2000/svg" width="10" height="7" viewBox="0 0 10 7"
-        fill="none"><path fill-rule="evenodd" clip-rule="evenodd"
-         d="M0.293081 0.792971C0.480608 0.6055 0.734916 0.500184 1.00008 0.500184C1.26524 0.500184 1.51955 0.6055 1.70708 0.79297L5.00008 4.08597L8.29308 0.79297C8.48168 0.610812 8.73428 0.510018 8.99648 0.512296C9.25868 0.514574 9.50949 0.619743 9.6949 0.805151C9.88031 0.990559 9.98548 1.24137 9.98775 1.50357C9.99003 1.76577 9.88924 2.01837 9.70708 2.20697L5.70708 6.20697C5.51955 6.39444 5.26525 6.49976 5.00008 6.49976C4.73492 6.49976 4.48061 6.39444 4.29308 6.20697L0.293081 2.20697C0.10561 2.01944 0.000294271 1.76513 0.000294248 1.49997C0.000294225 1.23481 0.105609 0.980498 0.293081 0.792971Z" fill="#B2B9C0"></path></svg>
-    </div>
-  </div>
-
-</div>
-
-
-
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/Marital.vue b/frontend/components/Marital.vue
deleted file mode 100644
index 6788aa3e..00000000
--- a/frontend/components/Marital.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { ref } from "vue";
-const tabs = [
-  { name: "Married", current: false },
-  { name: "Single", current: false },
-  { name: "Divorced", current: false },
-];
-
-defineProps({
-  tabs: Array,
-});
-</script>
-<template>
-  <div>
-    <select
-      v-model="selectedTab"
-      id="tabs"
-      name="tabs"
-      class="block w-full rounded-[10px] border border-[#A2A1A833]/10 py-4 pl-4 pr-5 text-textcolor dark:text-darktextcolor ring-1 ring-inset ring-[#A2A1A8CC]/80 placeholder:text-[#A2A1A8CC]/80 focus:ring-2 focus:ring-inset focus:ring-[#A2A1A8CC]/80 sm:text-base sm:leading-6 font-light"
-    >
-      <option v-for="tab in tabs" :key="tab.name" :selected="tab.current">
-        {{ tab.name }}
-      </option>
-    </select>
-  </div>
-</template>
diff --git a/frontend/components/Modal.vue b/frontend/components/Modal.vue
deleted file mode 100644
index db948c81..00000000
--- a/frontend/components/Modal.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<template>
-  <TransitionRoot as="template" :show="open">
-    <Dialog as="div" class="relative z-10" @close="open = false">
-      <TransitionChild
-        as="template"
-        enter="ease-out duration-300"
-        enter-from="opacity-0"
-        enter-to="opacity-100"
-        leave="ease-in duration-200"
-        leave-from="opacity-100"
-        leave-to="opacity-0"
-      >
-        <div
-          class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-        />
-      </TransitionChild>
-
-      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-        <div
-          class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
-        >
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            enter-to="opacity-100 translate-y-0 sm:scale-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100 translate-y-0 sm:scale-100"
-            leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-          >
-            <DialogPanel
-              class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
-            >
-              <div>
-                <div
-                  class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
-                >
-                  <CheckIcon
-                    class="h-6 w-6 text-green-600"
-                    aria-hidden="true"
-                  />
-                </div>
-                <div class="mt-3 text-center sm:mt-5">
-                  <DialogTitle
-                    as="h3"
-                    class="text-base font-semibold leading-6 text-gray-900"
-                    >Payment successful</DialogTitle
-                  >
-                  <div class="mt-2">
-                    <p class="text-sm text-gray-500">
-                      Lorem ipsum, dolor sit amet consectetur adipisicing elit.
-                      Eius aliquam laudantium explicabo pariatur iste dolorem
-                      animi vitae error totam. At sapiente aliquam accusamus
-                      facere veritatis.
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
-              >
-                <button
-                  type="button"
-                  class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2"
-                  @click="open = false"
-                >
-                  Deactivate
-                </button>
-                <button
-                  type="button"
-                  class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
-                  @click="open = false"
-                  ref="cancelButtonRef"
-                >
-                  Cancel
-                </button>
-              </div>
-            </DialogPanel>
-          </TransitionChild>
-        </div>
-      </div>
-    </Dialog>
-  </TransitionRoot>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { CheckIcon } from "@heroicons/vue/24/outline";
-
-const open = ref(true);
-</script>
diff --git a/frontend/components/MultiStepForm.vue b/frontend/components/MultiStepForm.vue
deleted file mode 100644
index 1fecb0c4..00000000
--- a/frontend/components/MultiStepForm.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-
-const step = ref(0);
-const props = defineProps<{
-  steps: string[];
-}>();
-const count = ref(0);
-</script>
-
-<template>
-  <template>
-    <div class="w-6/12">
-      <ul class="steps min-w-full">
-        <li
-          v-for="(stepText, index) in props.steps"
-          class="step"
-          :class="index <= step ? 'step-primary' : ''"
-        >
-          {{ stepText }}
-        </li>
-      </ul>
-    </div>
-  </template>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/Nationality.vue b/frontend/components/Nationality.vue
deleted file mode 100644
index ac58632c..00000000
--- a/frontend/components/Nationality.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<script setup>
-import { ref } from "vue";
-const tabs = [
-  { name: "Male", current: false },
-  { name: "Female", current: false },
-];
-
-defineProps({
-  tabs: Array,
-});
-</script>
-<template>
-  <div>
-    <select
-      v-model="selectedTab"
-      id="tabs"
-      name="tabs"
-      class="block w-full rounded-[10px] border border-[#A2A1A833]/10 py-4 pl-4 pr-5 text-textcolor dark:text-darktextcolor ring-1 ring-inset ring-[#A2A1A8CC]/80 placeholder:text-[#A2A1A8CC]/80 focus:ring-2 focus:ring-inset focus:ring-[#A2A1A8CC]/80 sm:text-base sm:leading-6 font-light"
-    >
-      <option v-for="tab in tabs" :key="tab.name" :selected="tab.current">
-        {{ tab.name }}
-      </option>
-    </select>
-  </div>
-</template>
diff --git a/frontend/components/Navbar.vue b/frontend/components/Navbar.vue
deleted file mode 100644
index f8bd6bfb..00000000
--- a/frontend/components/Navbar.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--template>
-    <div class="border-b  border-gray-200 pb-5 sm:pb-0 px-5">
-      <div class="mt-3 sm:mt-4">
-        <div class="sm:hidden">
-          <label for="current-tab" class="sr-only">Select a tab</label>
-          <select id="current-tab" name="current-tab" class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-[#7152F3] focus:outline-none focus:ring-[#7152F3]00 sm:text-sm">
-            <option v-for="tab in tabs" :key="tab.name" :selected="tab.current">{{ tab.name }}</option>
-          </select>
-        </div>
-        <div class="hidden sm:block">
-          <nav class="-mb-px flex space-x-8">
-            <router-link v-for="tab in tabs" :key="tab.name" :to="tab.href" :class="[tab.current ? 'border-[#7152F3] text-[#7152F3]' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700', 'whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium']" :aria-current="tab.current ? 'page' : undefined">{{ tab.name }}</router-link>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script setup>
-  const tabs = [
-    { name: 'Personal Information', href: '/home/add-employee/personal-information', current: false },
-    { name: 'Professional Information', href: '/home/add-employee/professional-information', current: false },
-    { name: 'Documents', href: '/home/add-employee/documents', current: true },
-    { name: 'Account Access', href: '/home/add-employee/account-access', current: false },
-  ]
-  </script-->
-  <template>
-    <div class="border-b border-gray-200 pb-5 sm:pb-0 px-5">
-      <div class="mt-3 sm:mt-4">
-        <div class="sm:hidden">
-          <label for="current-tab" class="sr-only">Select a tab</label>
-          <select
-            id="current-tab"
-            name="current-tab"
-            class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-[#7152F3] focus:outline-none focus:ring-[#7152F3]00 sm:text-sm"
-            v-model="selectedTab"
-          >
-            <option v-for="tab in tabs" :key="tab.name" :value="tab">{{ tab.name }}</option>
-          </select>
-        </div>
-        <div class="hidden sm:block">
-          <nav class="-mb-px flex space-x-8">
-            <router-link
-              v-for="tab in tabs"
-              :key="tab.name"
-              :to="tab.href"
-              :class="[
-                'whitespace-nowrap border-b-2 px-1 pb-4 text-sm font-medium',
-                tab === selectedTab ? 'border-[#7152F3] text-[#7152F3]' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
-              ]"
-              @click="selectTab(tab)"
-              :aria-current="tab === selectedTab ? 'page' : undefined"
-            >
-              {{ tab.name }}
-            </router-link>
-          </nav>
-        </div>
-      </div>
-    </div>
-  </template>
-  
-  <script setup>
-  const tabs = [
-    { name: 'Personal Information', href: '/home/add-employee/personal-information' },
-    { name: 'Professional Information', href: '/home/add-employee/professional-information' },
-    { name: 'Documents', href: '/home/add-employee/documents' },
-    { name: 'Account Access', href: '/home/add-employee/account-access' },
-  ]
-  
-  let selectedTab = tabs[0]; // Default selected tab
-  
-  const selectTab = (tab) => {
-    selectedTab = tab;
-  }
-  </script>
-  
\ No newline at end of file
diff --git a/frontend/components/NotificationCard.vue b/frontend/components/NotificationCard.vue
deleted file mode 100644
index 28182fdb..00000000
--- a/frontend/components/NotificationCard.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import { Switch } from "@headlessui/vue";
-
-const enabled = ref(false);
-defineProps({
-  heading: String,
-  subtitle: String,
-  active: Boolean,
-});
-</script>
-<template>
-  <div class="flex flex-row justify-between py-5">
-    <div class="flex flex-col">
-      <p class="text-[#16151C] dark:text-white text-base font-semibold">
-        {{ heading }}
-      </p>
-      <p class="text-[#A2A1A8] text-base font-semibold">
-        {{ subtitle }}
-      </p>
-    </div>
-    <Switch
-      v-model="enabled"
-      :class="[
-        enabled ? 'bg-indigo-600' : 'bg-gray-200',
-        'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
-      ]"
-    >
-      <span class="sr-only">Use setting</span>
-      <span
-        aria-hidden="true"
-        :class="[
-          enabled ? 'translate-x-5' : 'translate-x-0',
-          'pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out',
-        ]"
-      />
-    </Switch>
-  </div>
-</template>
diff --git a/frontend/components/OverviewCard.vue b/frontend/components/OverviewCard.vue
deleted file mode 100644
index bf2dca5f..00000000
--- a/frontend/components/OverviewCard.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div
-    class="rounded-lg py-2 px-4 shadow-sm"
-    :style="{ backgroundColor: props.bgcolor }"
-  >
-    <div class="flex flex-col space-y-2">
-      <p class="text-base font-semibold" :style="{ color: props.headercolor }">
-        {{ props.header }}
-      </p>
-
-      <div class="flex basis-1/2 flex-col border-r border-gray-300 shrink-0">
-        <p class="text-xs font-normal">{{ props.currency1 }}</p>
-        <p
-          class="font-semibold text-2xl"
-          :style="{ color: props.currency1color }"
-        >
-          {{ props.balance }}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-const props = defineProps([
-  "header",
-  "fiat",
-  "currency1",
-  "currency2",
-  "bgcolor",
-  "headercolor",
-  "currency1color",
-  "currency2color",
-  "balance",
-]);
-</script>
diff --git a/frontend/components/PersonalInformation.vue b/frontend/components/PersonalInformation.vue
deleted file mode 100644
index 89c46fb3..00000000
--- a/frontend/components/PersonalInformation.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-     
-</template>
-<script setup>
-import { ref } from "vue";
-import { useAuthStore } from "../store/auth";
-const isLoading = ref(false);
-const authStore = useAuthStore();
-const registrationData = {
-  wallet_address: "",
-  employee_type: "",
-  access_type: "",
-};
-
-</script>
\ No newline at end of file
diff --git a/frontend/components/ProfessionalInformation.vue b/frontend/components/ProfessionalInformation.vue
deleted file mode 100644
index 07aff344..00000000
--- a/frontend/components/ProfessionalInformation.vue
+++ /dev/null
@@ -1,309 +0,0 @@
-<template>
-    <form>
-       <div class=" p-5">
-         <div>
-           <!--h2
-             class="text-base font-semibold leading-7 text-gray-900 dark:text-white"
-           >
-             Principal
-           </h2>
-           <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-white">
-             Add the user principal
-           </p-->
-
-
-           <div class=" grid grid-cols-1 gap-x-6 sm:grid-cols-6">
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >First name</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-3">
-               <label
-                 for="last-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Last name</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.last_name"
-                   type="text"
-                   name="last-name"
-                   id="last-name"
-                   autocomplete="last-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Mobile Number</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Email Address</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Date of Birth</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Marital Status</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Gender</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Nationality</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-             <div class="sm:col-span-6">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Address</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.first_name"
-                   type="text"
-                   name="first-name"
-                   id="first-name"
-                   autocomplete="first-name"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-2">
-           <label
-             for="designation"
-             class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-             >City</label
-           >
-           <div >
-             <input
-               v-model="registrationData.designation"
-               type="text"
-               name="designation"
-               id="designation"
-               autocomplete="designation"
-               class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-             />
-           </div>
-         </div>
-
-             <div class="sm:col-span-2">
-               <label
-                 for="email"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >State</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.email"
-                   id="email"
-                   name="email"
-                   type="email"
-                   autocomplete="email"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             <div class="sm:col-span-2">
-               <label
-                 for="email"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Zip Code</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.email"
-                   id="email"
-                   name="email"
-                   type="email"
-                   autocomplete="email"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div>
-
-             
-
-             <!--div class="col-span-full">
-               <label
-                 for="wallet-address"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Wallet address</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.wallet_address"
-                   type="text"
-                   name="wallet-address"
-                   id="wallet-address"
-                   autocomplete="wallet-address"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-             </div-->
-
-       
-           </div>
-         </div>
-       </div>
-
-       <div class=" flex items-center justify-end gap-x-6 px-5">
-         <button
-           type="button"
-           class="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
-         >
-           Cancel
-         </button>
-         <button
-           type="button"
-           @click="addData()"
-           class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-         >
-           Submit
-         </button>
-       </div>
-     </form>
-</template>
-<script setup>
-import { ref, watchEffect } from "vue";
-import { useAuthStore } from "../store/auth";
-import Navbar from "../components/Navbar.vue";
-const isLoading = ref(false);
-const authStore = useAuthStore();
-const registrationData = {
- // first_name: "",
- // last_name: "",
- // email: "",
- // phone_number: "",
- wallet_address: "",
-};
-const addData = async () => {
- isLoading.value = true;
- authStore.updateRegistrationData(registrationData);
- // const firstname = authStore.registrationData.first_name;
- // const lastname = authStore.registrationData.last_name;
- // const email = authStore.registrationData.email;
- // const phone = authStore.registrationData.phone_number;
- const address = authStore.registrationData.wallet_address;
-
- console.log(address);
-
- try {
-   const response = authStore.create_employee(
-     // firstname,
-     // lastname,
-     // email,
-     // phone,
-     address
-   );
-   await new Promise((resolve) => setTimeout(resolve, 5000));
- } catch (error) {
-   console.error("Error submitting data:", error);
- } finally {
-   isLoading.value = false;
-   console.error("Successful:");
-   router.push("/home/contacts");
- }
-};
-</script>
\ No newline at end of file
diff --git a/frontend/components/ProfileHeader.vue b/frontend/components/ProfileHeader.vue
deleted file mode 100644
index 7f080414..00000000
--- a/frontend/components/ProfileHeader.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  msg: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="w-full flex flex-row justify-between">
-    <div class="flex flex-row space-x-4">
-      <div class="rounded-[10px] h-20 w-20">
-        <img
-          class="h-12 w-12 rounded-full"
-          src="./assets/photo.png"
-          alt="Photo"
-        />
-      </div>
-      <div class="flex flex-col space-y-2">
-        <p
-          class="text-[#16151C] dark:text-white font-semibold text-2xl leading-9"
-        >
-          Brooklyn Simmons
-        </p>
-        <p class="text-[#16151C] dark:text-white font-light text-base">
-          Project Manager
-        </p>
-        <p class="text-[#16151C] dark:text-white font-light text-base">
-          brooklyn@gmail.com
-        </p>
-      </div>
-    </div>
-    <div>
-      <button class="bg-[#7152F3] text-white text-base">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <path
-            d="M3 21H21M13.7844 5.31171C13.7844 5.31171 13.7844 6.94634 15.419 8.58096C17.0537 10.2156 18.6883 10.2156 18.6883 10.2156M7.31963 17.9881L10.7523 17.4977C11.2475 17.4269 11.7064 17.1975 12.06 16.8438L20.3229 8.58096C21.2257 7.67818 21.2257 6.21449 20.3229 5.31171L18.6883 3.67708C17.7855 2.77431 16.3218 2.77431 15.419 3.67708L7.15616 11.94C6.80248 12.2936 6.57305 12.7525 6.50231 13.2477L6.01193 16.6804C5.90295 17.4432 6.5568 18.097 7.31963 17.9881Z"
-            stroke="white"
-            stroke-width="1.5"
-            stroke-linecap="round"
-          />
-        </svg>
-        Edit Profile
-      </button>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/Searchbar.vue b/frontend/components/Searchbar.vue
deleted file mode 100644
index 78d30a80..00000000
--- a/frontend/components/Searchbar.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  msg: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="rounded-lg w-[330px]">
-    <label for="search" class="sr-only">Search</label>
-    <div class="relative text-gray-400 focus-within:text-gray-600">
-      <div
-        class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3"
-      >
-        <svg
-          class="h-5 w-5"
-          x-description="Heroicon name: mini/magnifying-glass"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            fill-rule="evenodd"
-            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-            clip-rule="evenodd"
-          ></path>
-        </svg>
-      </div>
-      <input
-        id="search"
-        class="block w-full h-full rounded-lg border border-gray-300 dark:border-transparent bg-transparent py-2 pl-10 pr-3 leading-5 text-gray-900 placeholder-gray-500 focus:border-white dark:focus:border-transparent focus:outline-none focus:ring-2 focus:ring-white dark:focus:ring-transparent focus:ring-offset-2 focus:ring-offset-autom8-blue-600 sm:text-sm"
-        placeholder="Search"
-        type="search"
-        name="search"
-      />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/SettingsCard.vue b/frontend/components/SettingsCard.vue
deleted file mode 100644
index 1344865f..00000000
--- a/frontend/components/SettingsCard.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<script setup>
-import { BeakerIcon, ChevronDownIcon } from "@heroicons/vue/24/solid";
-defineProps({
-  heading: String,
-  subtitle: String,
-  btnText: String,
-  type: String,
-  remote: String,
-  salary: String,
-});
-</script>
-<template>
-  <div class="flex flex-row justify-between py-5">
-    <div class="flex flex-col">
-      <p class="text-[#16151C] dark:text-white text-base font-semibold">
-        {{ heading }}
-      </p>
-      <p class="text-[#A2A1A8] text-base font-semibold">
-        {{ subtitle }}
-      </p>
-    </div>
-    <div
-      class="flex flex-row space-x-[10px] bg-gray-100 items-center justify-center px-[10px] rounded-[10px]"
-    >
-      <p class="text-[#16151C] dark:text-white text-sm font-semibold">
-        {{ btnText }}
-      </p>
-      <ChevronDownIcon class="h-5" />
-    </div>
-  </div>
-</template>
diff --git a/frontend/components/Sidebar.vue b/frontend/components/Sidebar.vue
deleted file mode 100644
index 17eebbbe..00000000
--- a/frontend/components/Sidebar.vue
+++ /dev/null
@@ -1,236 +0,0 @@
-<template>
-  <div class="flex flex-col justify-between h-full">
-    <div>
-      <div v-if="darkmode">
-        <img src="../assets/darklogo.png" class="h-[50px]" />
-      </div>
-      <div v-else>
-        <img src="../assets/logo.png" class="h-[50px]" />
-      </div>
-      <div class="space-y-[10px] h-full">
-        <router-link
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/dashboard"
-        >
-          <img
-            src="../assets/dashboard.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span>Dashboard</span>
-        </router-link>
-
-        <router-link
-          v-if="authStore.isRegistered === true"
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/transfer"
-        >
-          <img
-            src="../assets/payroll.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span>Send</span>
-        </router-link>
-        <router-link
-          v-if="authStore.isRegistered === true"
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/contacts"
-        >
-          <img
-            src="../assets/payroll.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span>Contacts</span>
-        </router-link>
-        <router-link
-          v-if="authStore.isRegistered === true"
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/transactions"
-        >
-          <img
-            src="../assets/payroll.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span>Transactions</span>
-        </router-link>
-        <router-link
-          v-if="authStore.isRegistered === true"
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/payroll"
-        >
-          <img
-            src="../assets/payroll.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span>Bulk Payments</span>
-        </router-link>
-        <router-link
-          v-if="authStore.isRegistered === true"
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/notifications"
-        >
-          <img
-            src="../assets/candidates.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span v-if="unreadNotifications.value > 0"
-            >Notifications {{ unreadNotifications.value }}</span
-          >
-          <span v-else>Notifications</span>
-        </router-link>
-        <router-link
-          v-if="authStore.isRegistered === true"
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D] rounded-r-[10px] text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer rounded-r-[10px] text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/settings"
-        >
-          <img
-            src="../assets/settings.png"
-            class="shrink-0 h-6 w-6"
-            alt="Vite logo"
-          />
-          <span>Profile</span>
-        </router-link>
-      </div>
-    </div>
-
-    <button @click="logout" class="border border-gray-300 rounded-[10px] p-5">
-      Log out
-    </button>
-    <nav class="flex rounded-[10px] align-bottom" aria-label="Tabs">
-      <div
-        @click="toggleDarkMode()"
-        :class="{
-          'bg-[#7152F3]  rounded-[10px] text-white ': !darkmode,
-          'bg-transparent text-white': darkmode,
-        }"
-        class="flex items-center space-x-[10px] cursor-pointer px-3 py-2 text-base font-light"
-      >
-        <div v-if="darkmode">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <path
-              d="M12 2V3M12 21V22M19.0711 4.92894L18.364 5.63605M5.63605 18.364L4.92894 19.0711M22 12H21M3 12H2M19.071 19.0711L18.3639 18.364M5.63605 5.63605L4.92894 4.92894M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z"
-              stroke="white"
-              stroke-width="1.5"
-              stroke-linecap="round"
-            />
-          </svg>
-        </div>
-        <div v-else>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <path
-              d="M12 2V3M12 21V22M19.0711 4.92894L18.364 5.63605M5.63605 18.364L4.92894 19.0711M22 12H21M3 12H2M19.071 19.0711L18.3639 18.364M5.63605 5.63605L4.92894 4.92894M18 12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12C6 8.68629 8.68629 6 12 6C15.3137 6 18 8.68629 18 12Z"
-              stroke="white"
-              stroke-width="1.5"
-              stroke-linecap="round"
-            />
-          </svg>
-        </div>
-        <span> Light </span>
-      </div>
-      <div
-        @click="toggleDarkMode()"
-        :class="{
-          'bg-[#7152F3]  rounded-[10px] ': darkmode,
-          'bg-transparent text-[#16151C]': !darkmode,
-        }"
-        class="flex items-center space-x-[10px] cursor-pointer px-3 py-2 text-base font-light"
-      >
-        <div v-if="darkmode">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <path
-              d="M5.67163 14.8687C10.751 14.8687 14.8687 10.751 14.8687 5.67163C14.8687 4.74246 14.7309 3.84548 14.4746 3C18.251 4.14461 21 7.65276 21 11.803C21 16.8824 16.8824 21 11.803 21C7.65276 21 4.14461 18.251 3 14.4746C3.84548 14.7309 4.74246 14.8687 5.67163 14.8687Z"
-              stroke="white"
-              stroke-width="1.5"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </div>
-        <div v-else>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <path
-              d="M5.67163 14.8687C10.751 14.8687 14.8687 10.751 14.8687 5.67163C14.8687 4.74246 14.7309 3.84548 14.4746 3C18.251 4.14461 21 7.65276 21 11.803C21 16.8824 16.8824 21 11.803 21C7.65276 21 4.14461 18.251 3 14.4746C3.84548 14.7309 4.74246 14.8687 5.67163 14.8687Z"
-              stroke="#16151C"
-              stroke-width="1.5"
-              stroke-linejoin="round"
-            />
-          </svg>
-        </div>
-        <span> Dark </span>
-      </div>
-    </nav>
-  </div>
-</template>
-<script setup>
-import { useAuthStore } from "../store/auth";
-import router from "../router/";
-const authStore = useAuthStore();
-const darkmode = ref(false);
-const logout = () => {
-  router.push("/auth");
-  authStore.logout();
-};
-
-const toggleDarkMode = () => {
-  darkmode.value = !darkmode.value;
-  if (darkmode.value) {
-    document.documentElement.classList.add("dark");
-  } else {
-    document.documentElement.classList.remove("dark");
-  }
-};
-watchEffect(async () => {
-  // const res = await authStore.whoamiActor?.getInvoice();
-  // invoice.value = await res;
-  setInterval(async function () {
-    try {
-      notifresponse =
-        await authStore.whoamiActor?.getUnreadNotificationsLength();
-      unreadNotifications.value = await notifresponse;
-      console.log(notifresponse);
-    } catch (e) {
-      console.log("Error fetching data");
-    } finally {
-      if (unreadNotifications.value > 0) {
-        showNotification.value = true;
-        console.log("gets here");
-      }
-    }
-  }, 60000);
-});
-</script>
diff --git a/frontend/components/SkeletonLoader.vue b/frontend/components/SkeletonLoader.vue
deleted file mode 100644
index 2057a1de..00000000
--- a/frontend/components/SkeletonLoader.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div :class="[bgClass, loaderClass, 'relative overflow-hidden']">
-    <div
-      class="shimmer absolute top-0 right-0 bottom-0 left-0"
-      :style="shimmerStyle"
-    ></div>
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-const LOADER_TYPES = { rectangle: "rectangle", circle: "circle" };
-
-const LOADER_CSS_CLASSES = {
-  [LOADER_TYPES.rectangle]: "rounded",
-  [LOADER_TYPES.circle]: "rounded-full",
-};
-
-type LoaderTypesKeys = keyof typeof LOADER_TYPES;
-type LoaderTypesValues = (typeof LOADER_TYPES)[LoaderTypesKeys];
-
-const SHIMMER_COLOR = "#ffffff";
-
-const isHexColor = (hexColor: string) => {
-  const hex = hexColor.replace("#", "");
-
-  return (
-    typeof hexColor === "string" &&
-    hexColor.startsWith("#") &&
-    hex.length === 6 &&
-    !isNaN(Number("0x" + hex))
-  );
-};
-
-const hexToRgb = (hex: string) =>
-  `${hex.match(/\w\w/g)?.map((x) => +`0x${x}`)}`;
-</script>
-
-<script setup lang="ts">
-import { computed, toRefs } from "vue";
-
-const props = defineProps({
-  type: {
-    type: String,
-    default: LOADER_TYPES.rectangle,
-    validator(value: LoaderTypesValues) {
-      return Object.values(LOADER_TYPES).includes(value);
-    },
-  },
-  bgClass: {
-    type: String,
-    default: "bg-gray-300",
-  },
-  cssClass: {
-    type: String,
-    default: "",
-  },
-  shimmerColor: {
-    type: String,
-    default: SHIMMER_COLOR,
-  },
-});
-
-const { type, bgClass, cssClass, shimmerColor } = toRefs(props);
-
-const shimmerStyle = computed(() => {
-  const rgb = isHexColor(shimmerColor.value)
-    ? hexToRgb(shimmerColor.value)
-    : SHIMMER_COLOR;
-
-  return {
-    backgroundImage: `linear-gradient(90deg, rgba(${rgb}, 0) 0%, rgba(${rgb}, 0.2) 20%, rgba(${rgb}, 0.5) 60%, rgba(${rgb}, 0))`,
-  };
-});
-
-const loaderClass = computed(() =>
-  cssClass.value ? cssClass.value : LOADER_CSS_CLASSES[type.value]
-);
-</script>
-
-<style lang="css" scoped>
-.shimmer {
-  transform: translateX(-100%);
-  animation: shimmer 1.4s infinite;
-}
-
-@keyframes shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-</style>
diff --git a/frontend/components/StatusButton.vue b/frontend/components/StatusButton.vue
deleted file mode 100644
index f80d57d4..00000000
--- a/frontend/components/StatusButton.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  msg: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/StatusPill.vue b/frontend/components/StatusPill.vue
deleted file mode 100644
index 51cb8e56..00000000
--- a/frontend/components/StatusPill.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<script setup>
-defineProps({
-  text: String,
-  backgroundColor: String,
-  onTime: Boolean,
-});
-</script>
-<template>
-  <div
-    class="px-2 py-[3px] justify-center items-center rounded"
-    :class="{ 'bg-earlyBgColor': onTime, 'bg-lateBgColor': !onTime }"
-  >
-    <p
-      :class="{ 'text-earlyTextColor': onTime, 'text-lateTextColor': !onTime }"
-    >
-      {{ text }}
-    </p>
-  </div>
-</template>
diff --git a/frontend/components/TableComponent.vue b/frontend/components/TableComponent.vue
deleted file mode 100644
index 8a7f236d..00000000
--- a/frontend/components/TableComponent.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  msg: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div>
-    <div>
-      <table class="divide-y divide-gray-500 w-full">
-        <thead class="bg-white dark:bg-transparent">
-          <tr>
-            <th
-              scope="col"
-              class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-            >
-              Employee Name
-            </th>
-            <th
-              scope="col"
-              class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-            >
-              Employee CTC
-            </th>
-            <th
-              scope="col"
-              class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-            >
-              Salary
-            </th>
-            <th
-              scope="col"
-              class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-            >
-              Deduction
-            </th>
-            <th
-              scope="col"
-              class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-            >
-              Status
-            </th>
-            <!--th
-                        scope="col"
-                        class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-                      >
-                        Action
-                      </th-->
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-200 bg-transparent">
-          <tr>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">
-                Cosmas Ken
-              </div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">
-                $45000
-              </div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">$4000</div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">$400</div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] text-base">
-              <div
-                class="font-light text-[#3FC28A] bg-[#3FC28A]/10 rounded-[4px] py-[3px] px-2"
-              >
-                Completed
-              </div>
-            </td>
-            <!--td
-                        class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6"
-                      >
-                        <div class="flex flex-row items-center justify-end space-x-4">
-                          <button
-                            type="button"
-                            class="inline-flex items-center rounded bg-white px-1 py-1 text-sm font-medium leading-4 text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="18"
-                              height="20"
-                              viewBox="0 0 18 20"
-                              fill="none"
-                            >
-                              <path
-                                d="M12.3333 5.00002V4.33335C12.3333 3.39993 12.3333 2.93322 12.1517 2.5767C11.9919 2.2631 11.7369 2.00813 11.4233 1.84834C11.0668 1.66669 10.6001 1.66669 9.66667 1.66669H8.33333C7.39991 1.66669 6.9332 1.66669 6.57668 1.84834C6.26308 2.00813 6.00811 2.2631 5.84832 2.5767C5.66667 2.93322 5.66667 3.39993 5.66667 4.33335V5.00002M7.33333 9.58335V13.75M10.6667 9.58335V13.75M1.5 5.00002H16.5M14.8333 5.00002V14.3334C14.8333 15.7335 14.8333 16.4336 14.5608 16.9683C14.3212 17.4387 13.9387 17.8212 13.4683 18.0609C12.9335 18.3334 12.2335 18.3334 10.8333 18.3334H7.16667C5.76654 18.3334 5.06647 18.3334 4.53169 18.0609C4.06129 17.8212 3.67883 17.4387 3.43915 16.9683C3.16667 16.4336 3.16667 15.7335 3.16667 14.3334V5.00002"
-                                stroke="#F0372B"
-                                stroke-width="1.66667"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              ></path>
-                            </svg>
-                          </button>
-                          <button
-                            type="button"
-                            class="inline-flex items-center rounded bg-white px-1 py-1 text-sm font-medium leading-4 text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                            x-data="{id:'import-workflow-modal'}"
-                            x-on:click="$dispatch('modal-overlay',{id})"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="20"
-                              height="18"
-                              viewBox="0 0 20 18"
-                              fill="none"
-                              stroke="currentColor"
-                            >
-                              <path
-                                d="M6.66602 13.1667L9.99935 16.5M9.99935 16.5L13.3327 13.1667M9.99935 16.5V9M16.666 12.9524C17.6839 12.1117 18.3327 10.8399 18.3327 9.41667C18.3327 6.88536 16.2807 4.83333 13.7493 4.83333C13.5673 4.83333 13.3969 4.73833 13.3044 4.58145C12.2177 2.73736 10.2114 1.5 7.91602 1.5C4.46424 1.5 1.66602 4.29822 1.66602 7.75C1.66602 9.47175 2.36222 11.0309 3.48847 12.1613"
-                                stroke-width="1.67"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              ></path>
-                            </svg>
-                          </button>
-                          <button
-                            type="button"
-                            class="inline-flex items-center rounded bg-white px-1 py-1 text-sm font-medium leading-4 text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                            x-data="{id:'export-workflow-modal'}"
-                            x-on:click="$dispatch('modal-overlay',{id})"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="20"
-                              height="18"
-                              viewBox="0 0 20 18"
-                              fill="none"
-                              stroke="currentColor"
-                            >
-                              <path
-                                d="M6.66602 12.3333L9.99935 9M9.99935 9L13.3327 12.3333M9.99935 9V16.5M16.666 12.9524C17.6839 12.1117 18.3327 10.8399 18.3327 9.41667C18.3327 6.88536 16.2807 4.83333 13.7493 4.83333C13.5673 4.83333 13.3969 4.73833 13.3044 4.58145C12.2177 2.73736 10.2114 1.5 7.91602 1.5C4.46424 1.5 1.66602 4.29822 1.66602 7.75C1.66602 9.47175 2.36222 11.0309 3.48847 12.1613"
-                                stroke-width="1.67"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              ></path>
-                            </svg>
-                          </button>
-                          <a
-                            href="./workflow-config.html"
-                            class="inline-flex items-center rounded bg-white px-1 py-1 text-sm font-medium leading-4 text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="16"
-                              height="16"
-                              viewBox="0 0 16 16"
-                              fill="none"
-                              stroke="currentColor"
-                            >
-                              <path
-                                d="M8.00065 2.99998V1.33331M8.00065 2.99998C7.08018 2.99998 6.33398 3.74617 6.33398 4.66665C6.33398 5.58712 7.08018 6.33331 8.00065 6.33331M8.00065 2.99998C8.92113 2.99998 9.66732 3.74617 9.66732 4.66665C9.66732 5.58712 8.92113 6.33331 8.00065 6.33331M3.00065 13C3.92113 13 4.66732 12.2538 4.66732 11.3333C4.66732 10.4128 3.92113 9.66665 3.00065 9.66665M3.00065 13C2.08018 13 1.33398 12.2538 1.33398 11.3333C1.33398 10.4128 2.08018 9.66665 3.00065 9.66665M3.00065 13V14.6666M3.00065 9.66665V1.33331M8.00065 6.33331V14.6666M13.0007 13C13.9211 13 14.6673 12.2538 14.6673 11.3333C14.6673 10.4128 13.9211 9.66665 13.0007 9.66665M13.0007 13C12.0802 13 11.334 12.2538 11.334 11.3333C11.334 10.4128 12.0802 9.66665 13.0007 9.66665M13.0007 13V14.6666M13.0007 9.66665V1.33331"
-                                stroke-width="1.67"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              ></path>
-                            </svg>
-                          </a>
-                          <button
-                            type="button"
-                            class="inline-flex items-center rounded bg-white px-1 py-1 text-sm font-medium leading-4 text-gray-700 hover:text-gray-900 hover:bg-gray-50"
-                            x-data="{id:'edit-workflow-modal'}"
-                            x-on:click="$dispatch('modal-overlay',{id})"
-                          >
-                            <svg
-                              xmlns="http://www.w3.org/2000/svg"
-                              width="19"
-                              height="19"
-                              viewBox="0 0 19 19"
-                              fill="none"
-                              stroke="currentColor"
-                            >
-                              <path
-                                d="M1.39735 15.0964C1.43564 14.7518 1.45478 14.5795 1.50691 14.4185C1.55316 14.2756 1.61851 14.1396 1.70118 14.0142C1.79436 13.8729 1.91694 13.7504 2.16209 13.5052L13.1673 2.49999C14.0878 1.57951 15.5802 1.57951 16.5007 2.49999C17.4211 3.42046 17.4211 4.91285 16.5007 5.83332L5.49542 16.8386C5.25027 17.0837 5.1277 17.2063 4.98639 17.2995C4.86102 17.3821 4.72506 17.4475 4.58219 17.4937C4.42115 17.5459 4.24887 17.565 3.90429 17.6033L1.08398 17.9167L1.39735 15.0964Z"
-                                stroke-width="1.66667"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                              ></path>
-                            </svg>
-                          </button>
-                        </div>
-                      </td-->
-          </tr>
-          <tr>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">
-                Cosmas Ken
-              </div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">
-                $45000
-              </div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">$4000</div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">$400</div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] text-base">
-              <div
-                class="font-light text-[#3FC28A] bg-[#3FC28A]/10 rounded-[4px] py-[3px] px-2"
-              >
-                Completed
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">
-                Cosmas Ken
-              </div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">
-                $45000
-              </div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">$4000</div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-              <div class="font-light dark:text-white text-[#16151C]">$400</div>
-            </td>
-            <td class="whitespace-nowrap py-[10px] text-base">
-              <div
-                class="font-light text-[#3FC28A] bg-[#3FC28A]/10 rounded-[4px] py-[3px] px-2"
-              >
-                Completed
-              </div>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/TextInput.vue b/frontend/components/TextInput.vue
deleted file mode 100644
index 51b4de8a..00000000
--- a/frontend/components/TextInput.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import { ref } from "vue";
-defineProps({
-  label: String,
-  placeholder: String,
-});
-</script>
-
-<template>
-  <div>
-    <label for="email" class="sr-only">Email</label>
-    <input
-      type="email"
-      name="email"
-      id="email"
-      class="block w-full rounded-[10px] border border-[#A2A1A833]/10 py-4 pl-4 pr-5 text-textcolor dark:text-darktextcolor ring-1 ring-inset ring-[#A2A1A8CC]/80 placeholder:text-[#A2A1A8CC]/80 focus:ring-2 focus:ring-inset focus:ring-[#A2A1A8CC]/80 sm:text-base sm:leading-6 font-light"
-      :placeholder="placeholder"
-    />
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/TransactionCard.vue b/frontend/components/TransactionCard.vue
deleted file mode 100644
index 07299c99..00000000
--- a/frontend/components/TransactionCard.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <div class="container">
-    <div
-      class="flex flex-row justify-between pb-3 border border-gray-500 p-2 rounded-[10px]"
-    >
-      <div
-        class="px-4 py-1 dark:border-[#272730] text-end pl-0 flex flex-row justify-center align-middle"
-      >
-        <span
-          class="text-[12px] font-semibold leading-[22px] text-end text-[#219653]"
-          >{{ sender }}</span
-        >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M4.26698 1.455C4.91024 1.40364 5.52089 1.15063 6.01198 0.731997C6.56664 0.259588 7.27141 0.000137329 7.99998 0.000137329C8.72856 0.000137329 9.43332 0.259588 9.98798 0.731997C10.4791 1.15063 11.0897 1.40364 11.733 1.455C12.4594 1.51305 13.1414 1.82796 13.6567 2.34326C14.172 2.85856 14.4869 3.54057 14.545 4.267C14.596 4.91 14.849 5.521 15.268 6.012C15.7404 6.56666 15.9998 7.27142 15.9998 8C15.9998 8.72857 15.7404 9.43333 15.268 9.988C14.8493 10.4791 14.5963 11.0897 14.545 11.733C14.4869 12.4594 14.172 13.1414 13.6567 13.6567C13.1414 14.172 12.4594 14.4869 11.733 14.545C11.0897 14.5964 10.4791 14.8494 9.98798 15.268C9.43332 15.7404 8.72856 15.9999 7.99998 15.9999C7.27141 15.9999 6.56664 15.7404 6.01198 15.268C5.52089 14.8494 4.91024 14.5964 4.26698 14.545C3.54055 14.4869 2.85855 14.172 2.34325 13.6567C1.82794 13.1414 1.51304 12.4594 1.45498 11.733C1.40362 11.0897 1.15061 10.4791 0.731982 9.988C0.259573 9.43333 0.00012207 8.72857 0.00012207 8C0.00012207 7.27142 0.259573 6.56666 0.731982 6.012C1.15061 5.52091 1.40362 4.91026 1.45498 4.267C1.51304 3.54057 1.82794 2.85856 2.34325 2.34326C2.85855 1.82796 3.54055 1.51305 4.26698 1.455ZM11.707 6.707C11.8891 6.51839 11.9899 6.26579 11.9877 6.0036C11.9854 5.7414 11.8802 5.49059 11.6948 5.30518C11.5094 5.11977 11.2586 5.0146 10.9964 5.01232C10.7342 5.01004 10.4816 5.11084 10.293 5.293L6.99998 8.586L5.70698 7.293C5.51838 7.11084 5.26578 7.01005 5.00358 7.01232C4.74138 7.0146 4.49057 7.11977 4.30516 7.30518C4.11976 7.49059 4.01459 7.7414 4.01231 8.0036C4.01003 8.26579 4.11082 8.51839 4.29298 8.707L6.29298 10.707C6.48051 10.8945 6.73482 10.9998 6.99998 10.9998C7.26515 10.9998 7.51945 10.8945 7.70698 10.707L11.707 6.707Z"
-            fill="#0066FF"
-          ></path>
-        </svg>
-      </div>
-      <div
-        class="px-4 py-1 dark:border-[#272730] text-[#000] dark:text-white text-[12px] font-semibold leading-[28px]"
-      >
-        Deposit
-      </div>
-      <div class="px-4 py-1 dark:border-[#272730] text-end">
-        <span
-          class="text-[12px] font-semibold leading-[22px] text-end text-[#219653]"
-          >{{ amount }}</span
-        >
-      </div>
-      <div
-        class="px-4 py-1 dark:border-[#272730] text-[#000] dark:text-white text-[12px] font-semibold leading-[22px] text-end"
-      >
-        {{ created_at }}
-      </div>
-      <div class="px-4 py-1 dark:border-[#272730] text-end pr-0">
-        <span
-          class="px-2 py-0.5 rounded-[6px] w-[58px] inline-block text-center bg-[#63cf2433] text-[#349250] text-[10px] leading-[22px] font-semibold"
-          >Successful</span
-        >
-      </div>
-    </div>
-    <!--div class="flex flex-col divide-y rounded-md bg-gray-100 p-6">
-      <div class="flex flex-row justify-between pb-3">
-        <div class="flex flex-col">
-          <div class="flex flex-row items-center">
-            <span class="text-mbrs-titlecolor pr-1 text-base">{{
-              sender
-            }}</span>
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M4.26698 1.455C4.91024 1.40364 5.52089 1.15063 6.01198 0.731997C6.56664 0.259588 7.27141 0.000137329 7.99998 0.000137329C8.72856 0.000137329 9.43332 0.259588 9.98798 0.731997C10.4791 1.15063 11.0897 1.40364 11.733 1.455C12.4594 1.51305 13.1414 1.82796 13.6567 2.34326C14.172 2.85856 14.4869 3.54057 14.545 4.267C14.596 4.91 14.849 5.521 15.268 6.012C15.7404 6.56666 15.9998 7.27142 15.9998 8C15.9998 8.72857 15.7404 9.43333 15.268 9.988C14.8493 10.4791 14.5963 11.0897 14.545 11.733C14.4869 12.4594 14.172 13.1414 13.6567 13.6567C13.1414 14.172 12.4594 14.4869 11.733 14.545C11.0897 14.5964 10.4791 14.8494 9.98798 15.268C9.43332 15.7404 8.72856 15.9999 7.99998 15.9999C7.27141 15.9999 6.56664 15.7404 6.01198 15.268C5.52089 14.8494 4.91024 14.5964 4.26698 14.545C3.54055 14.4869 2.85855 14.172 2.34325 13.6567C1.82794 13.1414 1.51304 12.4594 1.45498 11.733C1.40362 11.0897 1.15061 10.4791 0.731982 9.988C0.259573 9.43333 0.00012207 8.72857 0.00012207 8C0.00012207 7.27142 0.259573 6.56666 0.731982 6.012C1.15061 5.52091 1.40362 4.91026 1.45498 4.267C1.51304 3.54057 1.82794 2.85856 2.34325 2.34326C2.85855 1.82796 3.54055 1.51305 4.26698 1.455ZM11.707 6.707C11.8891 6.51839 11.9899 6.26579 11.9877 6.0036C11.9854 5.7414 11.8802 5.49059 11.6948 5.30518C11.5094 5.11977 11.2586 5.0146 10.9964 5.01232C10.7342 5.01004 10.4816 5.11084 10.293 5.293L6.99998 8.586L5.70698 7.293C5.51838 7.11084 5.26578 7.01005 5.00358 7.01232C4.74138 7.0146 4.49057 7.11977 4.30516 7.30518C4.11976 7.49059 4.01459 7.7414 4.01231 8.0036C4.01003 8.26579 4.11082 8.51839 4.29298 8.707L6.29298 10.707C6.48051 10.8945 6.73482 10.9998 6.99998 10.9998C7.26515 10.9998 7.51945 10.8945 7.70698 10.707L11.707 6.707Z"
-                fill="#0066FF"
-              ></path>
-            </svg>
-          </div>
-          <p class="truncate text-sm leading-6 text-black">
-            Transaction Id : {{ id }}
-          </p>
-        </div>
-        <div>
-          <span
-            class="inline-flex items-center rounded-full space-x-2 bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20"
-          >
-            
-
-            {{ created_at }}</span
-          >
-        </div>
-      </div>
-      <div class="pt-3 space-y-4">
-        <div
-          class="grid grid-cols-1 items-center gap-6 md:grid-cols-3 lg:grid-cols-6"
-        >
-          <div class="md:col-span-1 lg:col-span-2">
-            <p class="text-xs text-gray-500">Sender.</p>
-            <p class="text-gray-900 text-sm">{{ sender }}</p>
-          </div>
-          <div class="md:col-span-1 lg:col-span-2">
-            <p class="text-xs text-gray-500">Receiver</p>
-            <p class="text-gray-900 text-sm">{{ receiver }}</p>
-          </div>
-          <div class="md:col-span-1 lg:col-span-2">
-            <p class="text-xs text-gray-500">Amount</p>
-            <p class="text-green-500 text-sm font-bold">{{ amount }} ckSats</p>
-          </div>
-        </div>
-      </div>
-    </div-->
-  </div>
-</template>
-<script setup>
-const props = defineProps(["sender", "id", "receiver", "amount", "created_at"]);
-
-// let myDate = new Date(timestamp.seconds * 1000)
-</script>
diff --git a/frontend/components/TrendCard.vue b/frontend/components/TrendCard.vue
deleted file mode 100644
index 5e2b83bf..00000000
--- a/frontend/components/TrendCard.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup>
-import { ref } from "vue";
-
-defineProps({
-  title: String,
-  number: String,
-});
-
-const count = ref(0);
-</script>
-
-<template>
-  <div
-    class="flex flex-col border border-[#A2A1A833] rounded-[10px] divide-y divide-[#A2A1A833]"
-  >
-    <div class="px-4 pt-4 pb-[10px]">
-      <div class="flex flex-row">
-        <img src="../assets/totalemp.png" alt="" class="w-6 h-6" />
-        <p
-          class="text-[#16151C] dark:text-white text-sm leading-[22px] font-light"
-        >
-          {{ title }}
-        </p>
-      </div>
-      <div class="flex flex-row justify-between items-center">
-        <p
-          class="text-[#16151C] dark:text-white text-[30px] leading-10 font-semibold"
-        >
-          {{ number }}
-        </p>
-        <div
-          class="flex flex-row space-x-[10px] items-center bg-[#30BE821A] p-[5px] rounded-[5px]"
-        >
-          <img src="../assets/up-arrow.png" alt="" class="w-6 h-6" />
-          <p class="text-[#30BE82] text-[11px] leading-[16px] font-light">12</p>
-        </div>
-      </div>
-    </div>
-    <div class="px-4 py-[10px]">
-      <p class="text-[#A2A1A8] font-light text-xs leading-[18px]">
-        Update: July 16, 2023
-      </p>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/ViewAccountAccess.vue b/frontend/components/ViewAccountAccess.vue
deleted file mode 100644
index 27e0f695..00000000
--- a/frontend/components/ViewAccountAccess.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    
-</template>
\ No newline at end of file
diff --git a/frontend/components/ViewDocuments.vue b/frontend/components/ViewDocuments.vue
deleted file mode 100644
index 27e0f695..00000000
--- a/frontend/components/ViewDocuments.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    
-</template>
\ No newline at end of file
diff --git a/frontend/components/ViewPersonalInformation.vue b/frontend/components/ViewPersonalInformation.vue
deleted file mode 100644
index 27e0f695..00000000
--- a/frontend/components/ViewPersonalInformation.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    
-</template>
\ No newline at end of file
diff --git a/frontend/components/ViewProfessionalInformation.vue b/frontend/components/ViewProfessionalInformation.vue
deleted file mode 100644
index 27e0f695..00000000
--- a/frontend/components/ViewProfessionalInformation.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    
-</template>
\ No newline at end of file
diff --git a/frontend/components/freelancers/AccountAccess.vue b/frontend/components/freelancers/AccountAccess.vue
deleted file mode 100644
index 48738bab..00000000
--- a/frontend/components/freelancers/AccountAccess.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<script setup>
-import TextInput from "./TextInput.vue";
-import Button from "../../components/Button.vue";
-import ButtonWhite from "../../components/ButtonWhite.vue";
-</script>
-
-<template>
-  <div class="flex flex-col space-y-5 py-[30px]">
-    <div class="grid grid-cols-1 sm:grid-cols-2">
-      <TextInput label="First Name" placeholder="First Name" />
-      <TextInput label="First Name" placeholder="First Name" />
-      <TextInput label="First Name" placeholder="First Name" />
-      <TextInput label="First Name" placeholder="First Name" />
-    </div>
-
-    <div class="flex flex-row justify-end space-x-5 pt-[10px]">
-      <Button title="Next" />
-      <ButtonWhite title="Cancel" />
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/freelancers/Documents.vue b/frontend/components/freelancers/Documents.vue
deleted file mode 100644
index 05b1c7f2..00000000
--- a/frontend/components/freelancers/Documents.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<script setup>
-import { ref } from "vue";
-import AssetUpload from "../AssetUpload.vue";
-
-defineProps({
-  msg: String,
-});
-
-const tabs = [
-  {
-    name: "Personal Information",
-    href: "/home/add-employee/personal-information",
-    current: false,
-  },
-  {
-    name: "Professional Information",
-    href: "/home/add-employee/professional-information",
-    current: false,
-  },
-  { name: "Documents", href: "/home/add-employee/documents", current: true },
-  { name: "Account Access", href: "/account-access", current: false },
-];
-
-const changeTab = (index) => {
-  tabs.forEach((tab, i) => {
-    tab.current = i === index;
-  });
-};
-
-const count = ref(0);
-</script>
-
-<template>
-  <div class="flex flex-col space-y-5 py-[30px]">
-    <div class="grid grid-cols-1 sm:grid-cols-2">
-      <AssetUpload />
-      <AssetUpload />
-      <AssetUpload />
-      <AssetUpload />
-    </div>
-    <div class="flex flex-row justify-end space-x-5 pt-[10px]">
-      <Button title="Next" />
-      <ButtonWhite title="Cancel" />
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/freelancers/PaymentMethods.vue b/frontend/components/freelancers/PaymentMethods.vue
deleted file mode 100644
index ca2fd481..00000000
--- a/frontend/components/freelancers/PaymentMethods.vue
+++ /dev/null
@@ -1,52 +0,0 @@
-<script setup>
-import TextInput from "./TextInput.vue";
-import Button from "../../components/Button.vue";
-import ButtonWhite from "../../components/ButtonWhite.vue";
-</script>
-
-<template>
-  <div class="flex flex-col space-y-5 py-[30px]">
-    <div
-      class="flex h-20 w-20 bg-[#A2A1A80D] border border-[#A2A1A833] rounded-[10px] items-center justify-center"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          d="M15 13.5C15 15.1569 13.6569 16.5 12 16.5C10.3431 16.5 9 15.1569 9 13.5C9 11.8431 10.3431 10.5 12 10.5C13.6569 10.5 15 11.8431 15 13.5Z"
-          stroke="#16151C"
-          stroke-width="1.5"
-        />
-        <circle cx="12" cy="7" r="1" fill="#16151C" />
-        <path
-          d="M21 15.5V11.5C21 8.73858 18.7614 6.5 16 6.5H15.874C15.4299 4.77477 13.8638 3.5 12 3.5C10.1362 3.5 8.57006 4.77477 8.12602 6.5H8C5.23858 6.5 3 8.73858 3 11.5V15.5C3 18.2614 5.23858 20.5 8 20.5H16C18.7614 20.5 21 18.2614 21 15.5Z"
-          stroke="#16151C"
-          stroke-width="1.5"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-
-    <div class="grid grid-cols-1 gap-5">
-      <TextInput label="icpaddress" placeholder="ICP Adress" />
-      <TextInput label="ckbtcadress" placeholder="CKBT Address" />
-      <TextInput label="ethadress" placeholder="ETH adress" />
-      <TextInput label="mobilemoney" placeholder="Mobile Money number" />
-    </div>
-
-    <div class="flex flex-row justify-end space-x-5 pt-[10px]">
-      <Button title="Next" />
-      <ButtonWhite title="Cancel" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/freelancers/PersonalInformation.vue b/frontend/components/freelancers/PersonalInformation.vue
deleted file mode 100644
index 8dfe79a4..00000000
--- a/frontend/components/freelancers/PersonalInformation.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<script setup>
-import TextInput from "./TextInput.vue";
-import Button from "../../components/Button.vue";
-import ButtonWhite from "../../components/ButtonWhite.vue";
-</script>
-
-<template>
-  <div class="flex flex-col space-y-5 py-[30px]">
-    <div
-      class="flex h-20 w-20 bg-[#A2A1A80D] border border-[#A2A1A833] rounded-[10px] items-center justify-center"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <path
-          d="M15 13.5C15 15.1569 13.6569 16.5 12 16.5C10.3431 16.5 9 15.1569 9 13.5C9 11.8431 10.3431 10.5 12 10.5C13.6569 10.5 15 11.8431 15 13.5Z"
-          stroke="#16151C"
-          stroke-width="1.5"
-        />
-        <circle cx="12" cy="7" r="1" fill="#16151C" />
-        <path
-          d="M21 15.5V11.5C21 8.73858 18.7614 6.5 16 6.5H15.874C15.4299 4.77477 13.8638 3.5 12 3.5C10.1362 3.5 8.57006 4.77477 8.12602 6.5H8C5.23858 6.5 3 8.73858 3 11.5V15.5C3 18.2614 5.23858 20.5 8 20.5H16C18.7614 20.5 21 18.2614 21 15.5Z"
-          stroke="#16151C"
-          stroke-width="1.5"
-          stroke-linejoin="round"
-        />
-      </svg>
-    </div>
-
-    <div class="grid grid-cols-1 gap-5">
-      <TextInput label="FullName" placeholder="FullName" />
-      <TextInput label="Email" placeholder="Email" />
-      <TextInput label="Phone" placeholder="Phone" />
-      <TextInput label="Address" placeholder="Address" />
-      <TextInput label="City" placeholder="City" />
-    </div>
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
-      <TextInput label="First Name" placeholder="First Name" />
-      <Marital />
-      <Gender />
-      <Nationality />
-    </div>
-
-    <div class="flex flex-row justify-end space-x-5 pt-[10px]">
-      <Button title="Next" />
-      <ButtonWhite title="Cancel" />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>
diff --git a/frontend/components/freelancers/ProfessionalInformation.vue b/frontend/components/freelancers/ProfessionalInformation.vue
deleted file mode 100644
index dfcd0294..00000000
--- a/frontend/components/freelancers/ProfessionalInformation.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<script setup>
-import TextInput from "./TextInput.vue";
-import Button from "../../components/Button.vue";
-import ButtonWhite from "../../components/ButtonWhite.vue";
-</script>
-
-<template>
-  <div class="flex flex-col space-y-5 py-[30px]">
-    <div class="grid grid-cols-1">
-      <TextInput label="EmpID" placeholder="FreelancerID" />
-      <TextInput label="Designation" placeholder="Designation" />
-      <TextInput label="Department" placeholder="Department" />
-    </div>
-
-    <div class="flex flex-row justify-end space-x-5 pt-[10px]">
-      <Button title="Next" />
-      <ButtonWhite title="Cancel" />
-    </div>
-  </div>
-</template>
-
-<style scoped></style>
diff --git a/frontend/components/onboarding/UserType.vue b/frontend/components/onboarding/UserType.vue
deleted file mode 100644
index 6b26d95d..00000000
--- a/frontend/components/onboarding/UserType.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<!-- <script setup>
-import { useCompanyStore } from "../../store/company"
-
-const companyStore = useCompanyStore()
-</script>
-<template>
-    <div>
-        <p class="text-[22px] font-semibold text-grey dark:text-white">Account Type</p>
-        <button @click="companyStore.setIsInitialized(true)">I'm a company</button>
-        <button @click="companyStore.setIsInitialized(false)">I'm a freelancer</button>
-    </div>
-</template> -->
-
-<template>
-  <RadioGroup v-model="selectedMailingLists">
-    <RadioGroupLabel class="text-base font-semibold leading-6 text-gray-900"
-      >Select Account Type</RadioGroupLabel
-    >
-
-    <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-2 sm:gap-x-4">
-      <RadioGroupOption
-        as="template"
-        v-for="mailingList in mailingLists"
-        :key="mailingList.id"
-        :value="mailingList"
-        v-slot="{ active, checked }"
-      >
-        <div
-          :class="[
-            active
-              ? 'border-indigo-600 ring-2 ring-indigo-600'
-              : 'border-gray-300',
-            'relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none',
-          ]"
-        >
-          <span class="flex flex-1">
-            <span class="flex flex-col">
-              <RadioGroupLabel
-                as="span"
-                class="block text-sm font-medium text-gray-900"
-                >{{ mailingList.title }}</RadioGroupLabel
-              >
-            </span>
-          </span>
-          <CheckCircleIcon
-            :class="[!checked ? 'invisible' : '', 'h-5 w-5 text-indigo-600']"
-            aria-hidden="true"
-          />
-          <span
-            :class="[
-              active ? 'border' : 'border-2',
-              checked ? 'border-indigo-600' : 'border-transparent',
-              'pointer-events-none absolute -inset-px rounded-lg',
-            ]"
-            aria-hidden="true"
-          />
-        </div>
-      </RadioGroupOption>
-    </div>
-  </RadioGroup>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import {
-  RadioGroup,
-  RadioGroupDescription,
-  RadioGroupLabel,
-  RadioGroupOption,
-} from "@headlessui/vue";
-import { CheckCircleIcon } from "@heroicons/vue/20/solid";
-
-const mailingLists = [
-  { id: 1, title: "Business" },
-  { id: 2, title: "Individual" },
-];
-
-const selectedMailingLists = ref(mailingLists[0]);
-</script>
diff --git a/frontend/data/data.json b/frontend/data/data.json
deleted file mode 100644
index 6050a42d..00000000
--- a/frontend/data/data.json
+++ /dev/null
@@ -1,139 +0,0 @@
-{
-  "company": {
-    "name": "ABC Corporation",
-    "departments": [
-      {
-        "name": "Human Resources",
-        "employees": [
-          {
-            "firstname": "John",
-            "lastname": "Doe",
-            "mobile": "123-456-7890",
-            "email": "john.doe@example.com",
-            "address": "123 Main St, Cityville",
-            "gender": "Male",
-            "nationality": "American",
-            "state": "CA",
-            "zip": "90001",
-            "code": "HR001",
-            "employeeId": "EMP001",
-            "username": "john_doe"
-          },
-          {
-            "firstname": "Jane",
-            "lastname": "Smith",
-            "mobile": "987-654-3210",
-            "email": "jane.smith@example.com",
-            "address": "456 Oak St, Townsville",
-            "gender": "Female",
-            "nationality": "Canadian",
-            "state": "ON",
-            "zip": "M5A 1A1",
-            "code": "HR002",
-            "employeeId": "EMP002",
-            "username": "jane_smith"
-          }
-        ]
-      },
-      {
-        "name": "Finance",
-        "employees": [
-          {
-            "firstname": "Robert",
-            "lastname": "Johnson",
-            "mobile": "555-123-4567",
-            "email": "robert.johnson@example.com",
-            "address": "789 Pine St, Villageton",
-            "gender": "Male",
-            "nationality": "British",
-            "state": "NY",
-            "zip": "10001",
-            "code": "FN001",
-            "employeeId": "EMP003",
-            "username": "robert_johnson"
-          },
-          {
-            "firstname": "Elena",
-            "lastname": "Garcia",
-            "mobile": "888-987-6543",
-            "email": "elena.garcia@example.com",
-            "address": "321 Elm St, Hamletville",
-            "gender": "Female",
-            "nationality": "Spanish",
-            "state": "TX",
-            "zip": "75001",
-            "code": "FN002",
-            "employeeId": "EMP004",
-            "username": "elena_garcia"
-          }
-        ]
-      },
-      {
-        "name": "Engineering",
-        "employees": [
-          {
-            "firstname": "Robert",
-            "lastname": "Johnson",
-            "mobile": "555-123-4567",
-            "email": "robert.johnson@example.com",
-            "address": "789 Pine St, Villageton",
-            "gender": "Male",
-            "nationality": "British",
-            "state": "NY",
-            "zip": "10001",
-            "code": "FN001",
-            "employeeId": "EMP003",
-            "username": "robert_johnson"
-          },
-          {
-            "firstname": "Elena",
-            "lastname": "Garcia",
-            "mobile": "888-987-6543",
-            "email": "elena.garcia@example.com",
-            "address": "321 Elm St, Hamletville",
-            "gender": "Female",
-            "nationality": "Spanish",
-            "state": "TX",
-            "zip": "75001",
-            "code": "FN002",
-            "employeeId": "EMP004",
-            "username": "elena_garcia"
-          }
-        ]
-      },
-      {
-        "name": "Frontend",
-        "employees": [
-          {
-            "firstname": "Robert",
-            "lastname": "Johnson",
-            "mobile": "555-123-4567",
-            "email": "robert.johnson@example.com",
-            "address": "789 Pine St, Villageton",
-            "gender": "Male",
-            "nationality": "British",
-            "state": "NY",
-            "zip": "10001",
-            "code": "FN001",
-            "employeeId": "EMP003",
-            "username": "robert_johnson"
-          },
-          {
-            "firstname": "Elena",
-            "lastname": "Garcia",
-            "mobile": "888-987-6543",
-            "email": "elena.garcia@example.com",
-            "address": "321 Elm St, Hamletville",
-            "gender": "Female",
-            "nationality": "Spanish",
-            "state": "TX",
-            "zip": "75001",
-            "code": "FN002",
-            "employeeId": "EMP004",
-            "username": "elena_garcia"
-          }
-        ]
-      }
-    ]
-  }
-}
diff --git a/frontend/freelancer/Dashboard.vue b/frontend/freelancer/Dashboard.vue
deleted file mode 100644
index 2170cd19..00000000
--- a/frontend/freelancer/Dashboard.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<script setup></script>
-<template>Freelancers Dashboard</template>
-<style scoped></style>
diff --git a/frontend/index.css b/frontend/index.css
deleted file mode 100644
index 0752b29d..00000000
--- a/frontend/index.css
+++ /dev/null
@@ -1,6 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/frontend/store/auth.js b/frontend/store/auth.js
index 3a623bcd..f4b252be 100644
--- a/frontend/store/auth.js
+++ b/frontend/store/auth.js
@@ -1,9 +1,39 @@
 import { defineStore } from "pinia";
 import { AuthClient } from "@dfinity/auth-client";
+<<<<<<< HEAD
+import { createActor, canisterId } from "../../src/declarations/backend";
+import { toRaw } from "vue";
+import { ethers } from 'ethers';
+import { ref } from "vue";
+import { Actor } from '@dfinity/agent';
+import { Ed25519KeyIdentity } from '@dfinity/identity';
+import { useMetaMaskWallet } from "vue-connect-wallet";
+import { SiweMessage } from 'siwe';
+import { siwe_ic, canisterId as canID  } from "../../src/declarations/siwe_ic";
+import { Principal } from "@dfinity/principal";
+
+const address = ref("");
+const principal = ref("");
+const wallet = useMetaMaskWallet();
+
+
+
+
+
+
+const isConnected = async () => {
+  const accounts = await wallet.getAccounts();
+  if (typeof accounts === "string") return false;
+  return accounts.length > 0;
+};
+
+
+=======
 import {HttpAgent} from '@dfinity/agent';
 import { createActor, canisterId } from "../../src/declarations/backend";
 import { toRaw } from "vue";
 import Swal from "sweetalert2";
+>>>>>>> workingpoint
 
 const defaultOptions = {
   /**
@@ -33,9 +63,21 @@ function actorFromIdentity(identity) {
       identity,
     },
   });
+<<<<<<< HEAD
+}
+
+function actorFromEthIdentity(identity) {
+  return createActor(canId, {
+    agentOptions: {
+      identity,
+    },
+  });
+}
+=======
 };
 
 
+>>>>>>> workingpoint
 export const useAuthStore = defineStore("auth", {
   id: "auth",
   state: () => {
@@ -73,12 +115,61 @@ export const useAuthStore = defineStore("auth", {
   },
   actions: {
     async init() {
+<<<<<<< HEAD
+        // const authClient = await AuthClient.create(defaultOptions.createOptions);
+        // this.authClient = authClient;
+        // const isAuthenticated = await authClient.isAuthenticated();
+        // const identity = isAuthenticated ? authClient.getIdentity() : null;
+        // const whoamiActor = identity ? actorFromIdentity(identity) : null;       
+        
+        // this.isAuthenticated = isAuthenticated;
+        // this.identity = identity;
+        // this.whoamiActor = whoamiActor;
+        // this.isReady = true;
+        // this.isRegistered = false;
+        if (this.authType === "internet-identity"){
+          const authClient = await AuthClient.create(defaultOptions.createOptions);
+          this.authClient = authClient;
+          const isAuthenticated = await authClient.isAuthenticated();
+          const identity = isAuthenticated ? authClient.getIdentity() : null;
+          const whoamiActor = identity ? actorFromIdentity(identity) : null;
+
+          console.log('internet-identity' + whoamiActor);
+  
+          this.isAuthenticated = isAuthenticated;
+          this.identity = identity;
+          this.whoamiActor = whoamiActor;
+          this.isReady = true;
+          this.isRegistered = false;
+        }else if(this.authType === "connect2ic"){
+          this.isReady = true;
+          this.isRegistered = false;
+        }else if(this.authType === "siwe"){
+          const wallet = useMetaMaskWallet();
+          const accounts = await wallet.getAccounts();
+          const isAuthenticated = async () => {  
+            return Array.isArray(accounts) && accounts.length > 0;
+          };
+          const identity = isAuthenticated ? Ed25519KeyIdentity.generate() : null;
+          const whoamiActor = identity ? actorFromIdentity(identity) : null;
+
+          console.log('siwe' + whoamiActor);
+
+          this.isAuthenticated = isAuthenticated;
+          this.identity = identity;
+          this.whoamiActor = whoamiActor;
+          this.isReady = true;
+          this.isRegistered = false;
+        }
+      
+=======
       const authClient = await AuthClient.create(defaultOptions.createOptions);
       this.authClient = authClient;
       const isAuthenticated = await authClient.isAuthenticated();
       const identity = isAuthenticated ? authClient.getIdentity() : null;
       const whoamiActor = identity ? actorFromIdentity(identity) : null;
 
+>>>>>>> workingpoint
 
       this.isAuthenticated = isAuthenticated;
       this.identity = identity;
@@ -108,8 +199,31 @@ export const useAuthStore = defineStore("auth", {
     },
 
     async connect2ic() {},
+<<<<<<< HEAD
+   
+    async  connect () {
+      const accounts = await wallet.connect();
+      if (typeof accounts === "string") {
+        console.log("An error occurred" + accounts);
+      }
+
+      console.log('accounts' + accounts)
+    
+       const statement = 'Sign in with Ethereum';
+       const identity = await Ed25519KeyIdentity.generate();
+       principal.value = identity.getPrincipal();
+       console.log('identity' + identity.getPrincipal());
+       
+      address.value = accounts[0];
+      console.log("Connected to account: ", accounts[0]);
+    },
+    async switchAccount () {
+      await wallet.switchAccounts();
+      await this.connect();
+=======
     async siwe() {
       // const { login, clear, identity } = useSiweIdentity();
+>>>>>>> workingpoint
     },
 
     async getBalance() {
@@ -118,6 +232,8 @@ export const useAuthStore = defineStore("auth", {
       this.tradingbalance = await balance;
     },
 
+<<<<<<< HEAD
+=======
     async decodeAddress(){
 //pseudocode for decoding address
 //       decodeAccount(text) = case Principal.fromText(text) of
@@ -135,6 +251,7 @@ export const useAuthStore = defineStore("auth", {
 
 
     },
+>>>>>>> workingpoint
 
     async refresh() {
       //const whoamiActor = toRaw(this.whoamiActor);
@@ -161,8 +278,13 @@ export const useAuthStore = defineStore("auth", {
       this.identity = null;
       this.whoamiActor = null;
     },
+<<<<<<< HEAD
+   
+    async siwelogout(){
+=======
 
     async siwelogout() {
+>>>>>>> workingpoint
       await siwe.clear_session();
     },
     updateRegistrationData(data) {
diff --git a/frontend/utils/formatCkBtc.ts b/frontend/utils/formatCkBtc.ts
deleted file mode 100644
index 530e8e72..00000000
--- a/frontend/utils/formatCkBtc.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function formatCkBtc(amount: bigint | number | null | undefined) {
-  if (amount === undefined) return "0";
-  amount = typeof amount === "number" ? BigInt(amount) : amount;
-  if (!amount) return "0";
-  const integerPart = amount / 100000000n;
-  const fractionalPart = amount % 100000000n;
-  const fractionalPartString = fractionalPart.toString().padStart(8, "0");
-  const fractionalPartTrimmed = fractionalPartString.replace(/0+$/, ""); // Removes trailing zeroes
-  return `${integerPart.toLocaleString()}.${fractionalPartTrimmed}`;
-}
diff --git a/frontend/utils/idl.js b/frontend/utils/idl.js
deleted file mode 100644
index 9afc6640..00000000
--- a/frontend/utils/idl.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// Convert a Motoko list to a JavaScript array.
-export function fromList(list) {
-  if (list.length == 0) {
-    return [];
-  } else {
-    const tuple = list[0];
-    const array = fromList(tuple[1]);
-    array.unshift(tuple[0]);
-    return array;
-  }
-}
-
-// Convert a JavaScript array to a Motoko list.
-export function toList(array) {
-  return array.reduceRight((accum, x) => {
-    return [[x, accum]];
-  }, []);
-}
-
-// Convert a Motoko optional to a JavaScript object.
-export function fromOptional(optional) {
-  return optional.length > 0 ? optional[0] : null;
-}
-
-// Convert a JavaScript object to a Motoko optional.
-export function toOptional(object) {
-  return object ? [object] : [];
-}
-
-export function formatCkBtc(amount) {
-  if (amount === undefined) return "0";
-  amount = typeof amount === "number" ? BigInt(amount) : amount;
-  if (!amount) return "0";
-  const integerPart = amount / 100000000n;
-  const fractionalPart = amount % 100000000n;
-  const fractionalPartString = fractionalPart.toString().padStart(8, "0");
-  const fractionalPartTrimmed = fractionalPartString.replace(/0+$/, ""); // Removes trailing zeroes
-  return `${integerPart.toLocaleString()}.${fractionalPartTrimmed}`;
-}
diff --git a/frontend/views/AddEmployee.vue b/frontend/views/AddEmployee.vue
deleted file mode 100644
index ceeaefb9..00000000
--- a/frontend/views/AddEmployee.vue
+++ /dev/null
@@ -1,152 +0,0 @@
-<template>
-  <div>
-    <div v-if="isLoading === true">
-      <div class="flex justify-center items-center h-screen">
-        <div
-          class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"
-        ></div>
-      </div>
-    </div>
-    <div v-else>
-      <Navbar/>
-      <form>
-        <div class=" p-5">
-          <div>
-            <!--h2
-              class="text-base font-semibold leading-7 text-gray-900 dark:text-white"
-            >
-              Principal
-            </h2>
-            <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-white">
-              Add the user principal
-            </p-->
-         
-
-            <div class=" grid grid-cols-1 gap-x-6 sm:grid-cols-6">
-            
-            
-              
-              <div class="col-span-full">
-                <label
-                  for="wallet-address"
-                  class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                  >Wallet address</label
-                >
-                <div >
-                  <input
-                    v-model="registrationData.wallet_address"
-                    type="text"
-                    name="wallet-address"
-                    id="wallet-address"
-                    autocomplete="wallet-address"
-                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                  />
-                </div>
-              </div>
-
-              <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Employee Type</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.emp_type"
-                   type="text"
-                   name="employee-type"
-                   id="employee-type"
-                   autocomplete="employee-type"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-               
-              </div>
-              <div class="sm:col-span-3">
-               <label
-                 for="first-name"
-                 class="block text-sm font-medium leading-6 text-gray-900 dark:text-white"
-                 >Access Type</label
-               >
-               <div >
-                 <input
-                   v-model="registrationData.access_type"
-                   type="text"
-                   name="access-type"
-                   id="access-type"
-                   autocomplete="access-type"
-                   class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-white bg-transparent p-1 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:placeholder:text-white focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                 />
-               </div>
-               
-              </div>
-
-        
-            </div>
-          </div>
-        </div>
-
-        <div class=" flex items-center justify-end gap-x-6 px-5">
-          <button
-            type="button"
-            class="text-sm font-semibold leading-6 text-gray-900 dark:text-white"
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            @click="addData()"
-            class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-          >
-            Submit
-          </button>
-        </div>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { useAuthStore } from "../store/auth";
-import router from "../router/";
-import Navbar from "../components/Navbar.vue";
-const isLoading = ref(false);
-const authStore = useAuthStore();
-
-//get currEnt time to int
-const getTime = () => {
-  const date = new Date();
-  const time = date.getTime();
-  return time;
-};
-
-const registrationData = {
-  wallet_address: "",
-  emp_type: "",
-  access_type: "",
-};
-const addData = async () => {
-  isLoading.value = true;
-  authStore.updateRegistrationData(registrationData);
-  const address = authStore.registrationData.wallet_address;
-  const emp_type = authStore.registrationData.emp_type;
-  const access_type = authStore.registrationData.access_type;
-  try {
-    const response = authStore.create_employee(
-      address,
-      emp_type,
-      access_type
-    );
-    console.log("main"+response)
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-  } catch (error) {
-    console.error("Error submitting data:", error);
-  } finally {
-    isLoading.value = false;
-    console.error("Successful:");
-    
-    router.push("/home/all-employees");
-  }
-};
-</script>
diff --git a/frontend/views/AllEmployees.vue b/frontend/views/AllEmployees.vue
deleted file mode 100644
index eaa9e663..00000000
--- a/frontend/views/AllEmployees.vue
+++ /dev/null
@@ -1,441 +0,0 @@
-<script setup>
-import { ref, watchEffect } from "vue";
-import Searchbar from "../components/Searchbar.vue";
-import router from "../router/";
-import { fromList, toList, fromOptional, toOptional } from "../utils/idl.js";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/20/solid";
-import { useAuthStore } from "../store/auth";
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { CheckIcon } from "@heroicons/vue/24/outline";
-
-const open = ref(false);
-const isLoading = ref(false);
-const authStore = useAuthStore();
-let response = ref(0);
-let userlength = ref(0);
-let users = ref([]);
-
-watchEffect(async () => {
-  isLoading.value = true;
-  const res = await authStore.whoamiActor?.getMyContacts();
-  let usersArray = [];
-  console.log("backend array:", usersArray);
-
-  // Loop through the result and create an array of objects
-  for (let i = 0; i < res.length; i++) {
-    const data = res[i];
-    usersArray.push(data);
-  }
-
-  // Assign the array of objects to the users ref
-  users.value = usersArray;
-
-  //get length
-  userlength.value = usersArray.length;
-
-  console.log("Users array:", usersArray);
-  isLoading.value = false;
-});
-
-const isEmpty = ref(true);
-
-const gotoaddemployee = () => {
-  router.push("/home/add-employee");
-};
-
-const userData = ref({
-  name: "John Doe",
-  email: "",
-  email_notifications: true,
-  phone: "",
-  phone_notifications: false,
-  wallet: "0x1234567890",
-});
-
-async function deleteUser(wallet) {
-  try {
-    const res = await authStore.whoamiActor?.remove_employee(wallet);
-    console.log("User deleted:", res);
-  } catch (error) {
-    console.error("Error deleting user:", error);
-  }
-}
-//import data by pointing users to static employee data for now
-async function importdata() {
-  try {
-    const res = await authStore.whoamiActor?.getMyContacts();
-    let usersArray = [];
-
-    // Loop through the result and create an array of objects
-    for (let i = 0; i < res.length; i++) {
-      const [userId, userData] = res[i];
-      usersArray.push({ userId, ...userData });
-    }
-
-    // Assign the array of objects to the users ref
-    users.value = usersArray;
-
-    console.log("Users array:", usersArray);
-  } catch (error) {
-    console.error("Error fetching users list:", error);
-  }
-}
-
-async function viewUser(name, email, phone, wallet) {
-  try {
-    open.value = true;
-    userData.name.value = name;
-    userData.email.value = email;
-    userData.phone.value = phone;
-    userData.wallet.value = wallet;
-    //const res = await authStore.whoamiActor?.getUser(user);
-    console.log("User:", res);
-  } catch (error) {
-    console.error("Error fetching user:", error);
-  }
-}
-</script>
-<template>
-  <div class="p-5 flex flex-col">
-    <div class="flex flex-row justify-between items-center">
-      <Searchbar />
-      <div class="flex flex-row space-x-5">
-        <button
-          @click="gotoaddemployee"
-          class="rounded-[10px] cursor-pointer flex flex-row bg-[#7152F3] p-3 items-center space-x-[10px]"
-        >
-          <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-          <p class="text-base font-light text-white">Add New</p>
-        </button>
-        <div
-          @click="importdata"
-          class="rounded-[10px] cursor-pointer flex flex-row bg-[#7152F3] p-3 items-center space-x-[10px]"
-        >
-          <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-          <p class="text-base font-light text-white">Download Contacts</p>
-        </div>
-      </div>
-    </div>
-    <!--div v-if="users.length === 0"
- class="animate-spin rounded-full justify-center h-10 w-10 border-t-2 border-b-2 border-gray-900 dark:border-white">
-
-
-</div-->
-
-<div v-if="isLoading" class="flex justify-center items-center">
-  <div
-    class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900 self-center"
-  >
-</div>
-</div>
-<div v-else>
-  <div v-if="users.length === 0" class="mx-auto mt-10">
-      <div class="flex flex-col items-center">
-        <div class="w-1/4 h-1/4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"
-            />
-          </svg>
-        </div>
-        <p class="text-accentgray text-lg font-light mt-5">No Contacts Found</p>
-      </div>
-    </div>
-
-    <div v-else>
-      <!-- Table-->
-      <div class="flow-root">
-        <div class="overflow-x-auto">
-          <div
-            class="inline-block min-w-full border-b border-gray-300 align-middle"
-          >
-            <table class="min-w-full divide-y divide-gray-300">
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Name
-                  </th>
-                  <!--th
-                  scope="col"
-                  class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                >
-                  ID
-                </th-->
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Email
-                  </th>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Phone
-                  </th>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Currency
-                  </th>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Wallet
-                  </th>
-
-                  <th
-                    scope="col"
-                    class="relative pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Action
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="divide-y divide-gray-300">
-                <tr v-for="person in users" :key="person.id">
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.name }}
-                  </td>
-                  <!--td
-                  class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                >
-                  {{ person.id }}
-                </td-->
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.email_address }}
-                  </td>
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.phone_number }}
-                  </td>
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    ckBtc
-                  </td>
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.wallet }}
-                  </td>
-
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    <div class="flex flex-row space-x-[10px]">
-                      <div
-                        @click="
-                          viewUser(
-                            person.name,
-                            person.email_address,
-                            person.phone_number,
-                            person.wallet
-                          )
-                        "
-                        class="cursor-pointer"
-                      >
-                        <img src="../assets/view.png" alt="" class="w-6 h-6" />
-                      </div>
-                      <div
-                        @click="deleteUser(person.wallet)"
-                        class="cursor-pointer"
-                      >
-                        <img src="../assets/trash.png" alt="" class="w-6 h-6" />
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-row justify-between pt-[14px] items-center">
-        <div class="flex flex-row space-x-5 items-center">
-          <p class="text-accentgray text-sm leading-[22px] font-light">
-            Showing
-          </p>
-          <div
-            class="rounded-[10px] border border-bordercolor flex flex-row h-[46px] w-[76px] items-center justify-around"
-          >
-            <p class="text-accentgray text-sm leading-[22px] font-light">
-              {{ userlength }}
-            </p>
-            <img src="../assets/direction-down 01.png" alt="" class="w-6 h-6" />
-          </div>
-        </div>
-
-        <div>
-          <p
-            class="text-accentgray dark:text-white text-sm leading-[22px] font-light"
-          >
-            Showing
-            {{ " " }}
-            <span class="font-medium">1</span>
-            {{ " " }}
-            to
-            {{ " " }}
-            <span class="font-medium">{{ userlength }}</span>
-            {{ " " }}
-            out of
-            {{ " " }}
-            <span class="font-medium">{{ userlength }}</span>
-            {{ " " }}
-            Records
-          </p>
-        </div>
-
-        <div>
-          <nav
-            class="isolate inline-flex -space-x-px rounded-md shadow-sm"
-            aria-label="Pagination"
-          >
-            <a
-              href="#"
-              class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              <span class="sr-only">Previous</span>
-              <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
-            </a>
-            <!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
-            <a
-              href="#"
-              aria-current="page"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset focus-visible:outline-[#7152F3]"
-              >1</a
-            >
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset focus-visible:outline-[#7152F3]"
-              >2</a
-            >
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset"
-              >3</a
-            >
-            <span
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0"
-              >...</span
-            >
-
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset"
-              >9</a
-            >
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset"
-            >
-              <span class="sr-only">Next</span>
-              <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
-            </a>
-          </nav>
-        </div>
-      </div>
-      <TransitionRoot as="template" :show="open">
-        <Dialog as="div" class="relative z-10" @close="open = false">
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <div
-              class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-            />
-          </TransitionChild>
-
-          <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-            <div
-              class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
-            >
-              <TransitionChild
-                as="template"
-                enter="ease-out duration-300"
-                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enter-to="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leave-from="opacity-100 translate-y-0 sm:scale-100"
-                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <DialogPanel
-                  class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
-                >
-                  <div>
-                    <div
-                      class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
-                    >
-                      <CheckIcon
-                        class="h-6 w-6 text-green-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div class="mt-3 text-center sm:mt-5">
-                      <DialogTitle
-                        as="h3"
-                        class="text-base font-semibold leading-6 text-gray-900"
-                        >Payment successful</DialogTitle
-                      >
-                      <div class="mt-2">
-                        <p class="text-sm text-gray-500">{{ userData.name }}</p>
-                        <p class="text-sm text-gray-500">
-                          {{ userData.wallet }}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:gap-3"
-                  >
-                    <!--button type="button" class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2" @click="open = false">Deactivate</button-->
-                    <button
-                      type="button"
-                      class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
-                      @click="open = false"
-                      ref="cancelButtonRef"
-                    >
-                      Close
-                    </button>
-                  </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </Dialog>
-      </TransitionRoot>
-    </div>
-</div>
-    
-  </div>
-</template>
diff --git a/frontend/views/Attendance.vue b/frontend/views/Attendance.vue
deleted file mode 100644
index 8c5bf953..00000000
--- a/frontend/views/Attendance.vue
+++ /dev/null
@@ -1,2 +0,0 @@
-<script setup></script>
-<template></template>
diff --git a/frontend/views/Candidates.vue b/frontend/views/Candidates.vue
deleted file mode 100644
index 8c5bf953..00000000
--- a/frontend/views/Candidates.vue
+++ /dev/null
@@ -1,2 +0,0 @@
-<script setup></script>
-<template></template>
diff --git a/frontend/views/Contacts.vue b/frontend/views/Contacts.vue
deleted file mode 100644
index db855d3c..00000000
--- a/frontend/views/Contacts.vue
+++ /dev/null
@@ -1,428 +0,0 @@
-<script setup>
-import { ref, watchEffect } from "vue";
-import Searchbar from "../components/Searchbar.vue";
-import router from "../router/";
-import { fromList, toList, fromOptional, toOptional } from "../utils/idl.js";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/vue/20/solid";
-import { useAuthStore } from "../store/auth";
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-import { CheckIcon } from "@heroicons/vue/24/outline";
-
-const open = ref(false);
-const authStore = useAuthStore();
-let response = ref(0);
-let userlength = ref(0);
-let users = ref([]);
-
-watchEffect(async () => {
-  const res = await authStore.whoamiActor?.getMyContacts();
-  let usersArray = [];
-  console.log("backend array:", usersArray);
-
-  // Loop through the result and create an array of objects
-  for (let i = 0; i < res.length; i++) {
-    const data = res[i];
-    usersArray.push(data);
-  }
-
-  // Assign the array of objects to the users ref
-  users.value = usersArray;
-
-  //get length
-  userlength.value = usersArray.length;
-
-  console.log("Users array:", usersArray);
-});
-
-const isEmpty = ref(true);
-
-const gotoaddemployee = () => {
-  router.push("/home/add-employee");
-};
-
-const userData = ref({
-  name: "John Doe",
-  email: "",
-  email_notifications: true,
-  phone: "",
-  phone_notifications: false,
-  wallet: "0x1234567890",
-});
-
-async function deleteUser(wallet) {
-  try {
-    const res = await authStore.whoamiActor?.deleteUser(wallet);
-    console.log("User deleted:", res);
-  } catch (error) {
-    console.error("Error deleting user:", error);
-  }
-}
-//import data by pointing users to static employee data for now
-async function importdata() {
-  try {
-    const res = await authStore.whoamiActor?.getMyContacts();
-    let usersArray = [];
-
-    // Loop through the result and create an array of objects
-    for (let i = 0; i < res.length; i++) {
-      const [userId, userData] = res[i];
-      usersArray.push({ userId, ...userData });
-    }
-
-    // Assign the array of objects to the users ref
-    users.value = usersArray;
-
-    console.log("Users array:", usersArray);
-  } catch (error) {
-    console.error("Error fetching users list:", error);
-  }
-}
-
-async function viewUser(name, email, phone, wallet) {
-  try {
-    open.value = true;
-    userData.name.value = name;
-    userData.email.value = email;
-    userData.phone.value = phone;
-    userData.wallet.value = wallet;
-    //const res = await authStore.whoamiActor?.getUser(user);
-    console.log("User:", res);
-  } catch (error) {
-    console.error("Error fetching user:", error);
-  }
-}
-</script>
-<template>
-  <div class="p-5 flex flex-col">
-    <div class="flex flex-row justify-between items-center">
-      <Searchbar />
-      <div class="flex flex-row space-x-5">
-        <button
-          @click="gotoaddemployee"
-          class="rounded-[10px] cursor-pointer flex flex-row bg-[#7152F3] p-3 items-center space-x-[10px]"
-        >
-          <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-          <p class="text-base font-light text-white">Add New</p>
-        </button>
-        <div
-          @click="importdata"
-          class="rounded-[10px] cursor-pointer flex flex-row bg-[#7152F3] p-3 items-center space-x-[10px]"
-        >
-          <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-          <p class="text-base font-light text-white">Refresh Data</p>
-        </div>
-      </div>
-    </div>
-    <!--div v-if="users.length === 0"
- class="animate-spin rounded-full justify-center h-10 w-10 border-t-2 border-b-2 border-gray-900 dark:border-white">
-
-
-</div-->
-    <div v-if="users.length === 0" class="mx-auto mt-10">
-      <div class="flex flex-col items-center">
-        <div class="w-1/4 h-1/4">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            class="w-6 h-6"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="M6 6.878V6a2.25 2.25 0 0 1 2.25-2.25h7.5A2.25 2.25 0 0 1 18 6v.878m-12 0c.235-.083.487-.128.75-.128h10.5c.263 0 .515.045.75.128m-12 0A2.25 2.25 0 0 0 4.5 9v.878m13.5-3A2.25 2.25 0 0 1 19.5 9v.878m0 0a2.246 2.246 0 0 0-.75-.128H5.25c-.263 0-.515.045-.75.128m15 0A2.25 2.25 0 0 1 21 12v6a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 18v-6c0-.98.626-1.813 1.5-2.122"
-            />
-          </svg>
-        </div>
-        <p class="text-accentgray text-lg font-light mt-5">No Contacts Found</p>
-      </div>
-    </div>
-
-    <div v-else>
-      <!-- Table-->
-      <div class="flow-root">
-        <div class="overflow-x-auto">
-          <div
-            class="inline-block min-w-full border-b border-gray-300 align-middle"
-          >
-            <table class="min-w-full divide-y divide-gray-300">
-              <thead>
-                <tr>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Name
-                  </th>
-                  <!--th
-                  scope="col"
-                  class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                >
-                  ID
-                </th-->
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Email
-                  </th>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Phone
-                  </th>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Currency
-                  </th>
-                  <th
-                    scope="col"
-                    class="pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Wallet
-                  </th>
-
-                  <th
-                    scope="col"
-                    class="relative pr-[10px] py-[10px] text-left text-base text-accentgray font-light"
-                  >
-                    Action
-                  </th>
-                </tr>
-              </thead>
-              <tbody class="divide-y divide-gray-300">
-                <tr v-for="person in users" :key="person.id">
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.name }}
-                  </td>
-                  <!--td
-                  class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                >
-                  {{ person.id }}
-                </td-->
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.email_address }}
-                  </td>
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.phone_number }}
-                  </td>
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    ckBtc
-                  </td>
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    {{ person.wallet }}
-                  </td>
-
-                  <td
-                    class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-                  >
-                    <div class="flex flex-row space-x-[10px]">
-                      <div
-                        @click="
-                          viewUser(
-                            person.name,
-                            person.email_address,
-                            person.phone_number,
-                            person.wallet
-                          )
-                        "
-                        class="cursor-pointer"
-                      >
-                        <img src="../assets/view.png" alt="" class="w-6 h-6" />
-                      </div>
-                      <div
-                        @click="deleteUser(person.wallet)"
-                        class="cursor-pointer"
-                      >
-                        <img src="../assets/trash.png" alt="" class="w-6 h-6" />
-                      </div>
-                    </div>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-      <div class="flex flex-row justify-between pt-[14px] items-center">
-        <div class="flex flex-row space-x-5 items-center">
-          <p class="text-accentgray text-sm leading-[22px] font-light">
-            Showing
-          </p>
-          <div
-            class="rounded-[10px] border border-bordercolor flex flex-row h-[46px] w-[76px] items-center justify-around"
-          >
-            <p class="text-accentgray text-sm leading-[22px] font-light">
-              {{ userlength }}
-            </p>
-            <img src="../assets/direction-down 01.png" alt="" class="w-6 h-6" />
-          </div>
-        </div>
-
-        <div>
-          <p
-            class="text-accentgray dark:text-white text-sm leading-[22px] font-light"
-          >
-            Showing
-            {{ " " }}
-            <span class="font-medium">1</span>
-            {{ " " }}
-            to
-            {{ " " }}
-            <span class="font-medium">{{ userlength }}</span>
-            {{ " " }}
-            out of
-            {{ " " }}
-            <span class="font-medium">{{ userlength }}</span>
-            {{ " " }}
-            Records
-          </p>
-        </div>
-
-        <div>
-          <nav
-            class="isolate inline-flex -space-x-px rounded-md shadow-sm"
-            aria-label="Pagination"
-          >
-            <a
-              href="#"
-              class="relative inline-flex items-center rounded-l-md px-2 py-2 text-gray-400 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20 focus:outline-offset-0"
-            >
-              <span class="sr-only">Previous</span>
-              <ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
-            </a>
-            <!-- Current: "z-10 bg-indigo-600 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600", Default: "text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:outline-offset-0" -->
-            <a
-              href="#"
-              aria-current="page"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset focus-visible:outline-[#7152F3]"
-              >1</a
-            >
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset focus-visible:outline-[#7152F3]"
-              >2</a
-            >
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset"
-              >3</a
-            >
-            <span
-              class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-700 ring-1 ring-inset ring-gray-300 focus:outline-offset-0"
-              >...</span
-            >
-
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset"
-              >9</a
-            >
-            <a
-              href="#"
-              class="text-accentgray text-sm leading-[22px] font-light px-3 py-[7px] relative inline-flex items-center ring-1 ring-inset"
-            >
-              <span class="sr-only">Next</span>
-              <ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
-            </a>
-          </nav>
-        </div>
-      </div>
-      <TransitionRoot as="template" :show="open">
-        <Dialog as="div" class="relative z-10" @close="open = false">
-          <TransitionChild
-            as="template"
-            enter="ease-out duration-300"
-            enter-from="opacity-0"
-            enter-to="opacity-100"
-            leave="ease-in duration-200"
-            leave-from="opacity-100"
-            leave-to="opacity-0"
-          >
-            <div
-              class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
-            />
-          </TransitionChild>
-
-          <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
-            <div
-              class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
-            >
-              <TransitionChild
-                as="template"
-                enter="ease-out duration-300"
-                enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enter-to="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leave-from="opacity-100 translate-y-0 sm:scale-100"
-                leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <DialogPanel
-                  class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
-                >
-                  <div>
-                    <div
-                      class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-green-100"
-                    >
-                      <CheckIcon
-                        class="h-6 w-6 text-green-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div class="mt-3 text-center sm:mt-5">
-                      <DialogTitle
-                        as="h3"
-                        class="text-base font-semibold leading-6 text-gray-900"
-                        >Payment successful</DialogTitle
-                      >
-                      <div class="mt-2">
-                        <p class="text-sm text-gray-500">{{ userData.name }}</p>
-                        <p class="text-sm text-gray-500">
-                          {{ userData.wallet }}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:gap-3"
-                  >
-                    <!--button type="button" class="inline-flex w-full justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 sm:col-start-2" @click="open = false">Deactivate</button-->
-                    <button
-                      type="button"
-                      class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:col-start-1 sm:mt-0"
-                      @click="open = false"
-                      ref="cancelButtonRef"
-                    >
-                      Close
-                    </button>
-                  </div>
-                </DialogPanel>
-              </TransitionChild>
-            </div>
-          </div>
-        </Dialog>
-      </TransitionRoot>
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/Dashboard.vue b/frontend/views/Dashboard.vue
deleted file mode 100644
index eb7a4498..00000000
--- a/frontend/views/Dashboard.vue
+++ /dev/null
@@ -1,364 +0,0 @@
-<script setup>
-import { ref, watchEffect } from "vue";
-import OverviewCard from "../components/OverviewCard.vue";
-import { useAuthStore } from "../store/auth";
-import { Field, Form, ErrorMessage } from "vee-validate";
-import { CheckCircleIcon, XMarkIcon } from "@heroicons/vue/20/solid";
-import * as yup from "yup";
-const authStore = useAuthStore();
-let transactions = ref(0);
-let contacts = ref(0);
-let isLoading = ref(false);
-let emailExists = ref(false);
-let tradingbalance = ref("");
-const phoneRegExp =
-  /^((\\+[1-9]{1,4}[ \\-]*)|(\\([0-9]{2,3}\\)[ \\-]*)|([0-9]{2,4})[ \\-]*)*?[0-9]{3,4}?[ \\-]*[0-9]{3,4}?$/;
-
-watchEffect(async () => {
-  tradingbalance.value = await authStore.tradingbalance;
-});
-
-watchEffect(async () => {
-  isLoading.value = true;
-  try {
-    const transactionLength =
-      await authStore.whoamiActor?.getMyTransactionLength();
-    const contactsLength = await authStore.whoamiActor?.getMyContactsLength();
-    transactions.value = transactionLength;
-    contacts.value = contactsLength;
-    //await new Promise((resolve) => setTimeout(resolve, 2000));
-  } catch (e) {
-    console.log("Error fetching data");
-  } finally {
-    isLoading.value = false;
-  }
-});
-const registrationData = {
-  first_name: "",
-  last_name: "",
-  email: "",
-  phone_number: "",
-};
-const schema = yup.object({
-  email: yup.string().required().email(),
-  firstname: yup.string().required(),
-  lastname: yup.string().required(),
-  phone: yup.string().required(),
-  phone: yup.string().matches(phoneRegExp, "Phone number is not valid"),
-});
-const addData = async () => {
-  isLoading.value = true;
-  authStore.updateRegistrationData(registrationData);
-  const exists = await authStore.whoamiActor.emailExists(
-    registrationData.email
-  );
-
-  if (exists) {
-    emailExists.value = true;
-    isLoading.value = false;
-    return;
-  }
-
-  const firstname = authStore.registrationData.first_name;
-  const lastname = authStore.registrationData.last_name;
-  const email = authStore.registrationData.email;
-  const phone = authStore.registrationData.phone_number;
-
-  console.log(firstname, lastname, email, phone);
-
-  try {
-    const response = authStore.update_user(firstname, lastname, email, phone);
-    await new Promise((resolve) => setTimeout(resolve, 1000));
-  } catch (error) {
-    console.error("Error submitting data:", error);
-  } finally {
-    isLoading.value = false;
-  }
-};
-</script>
-<template >
-  <div v-if="isLoading" class="h-full flex justify-center items-center">
-  <div
-    class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900 self-center"
-  >
-</div>
-</div>
-  <div v-else>
-    <div v-if="authStore.isRegistered === false">
-      <div class="flex flex-col items-center justify-center h-full relative">
-        <Form
-          class="text-center card"
-          @submit="addData"
-          :validation-schema="schema"
-        >
-          <div v-show="emailExists" class="rounded-md bg-red-50 p-4 w-full">
-            <div class="flex">
-              <div class="flex-shrink-0">
-                <CheckCircleIcon
-                  class="h-5 w-5 text-red-400"
-                  aria-hidden="true"
-                />
-              </div>
-              <div class="ml-3">
-                <p class="text-sm font-medium text-red-800">Email Exist</p>
-              </div>
-              <div class="ml-auto pl-3">
-                <div class="-mx-1.5 -my-1.5">
-                  <button
-                    @click="emailExists = false"
-                    type="button"
-                    class="inline-flex rounded-md bg-red-50 p-1.5 text-red-500 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-offset-2 focus:ring-offset-red-50"
-                  >
-                    <span class="sr-only">Dismiss</span>
-                    <XMarkIcon class="h-5 w-5" aria-hidden="true" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-          <p class="text-lg font-semibold mb-3">Welcome to the app!</p>
-          <p class="text-sm mb-3">You havent created your profile yet.</p>
-          <p class="text-sm mb-3">
-            Please add your data and save it to continue using the app.
-          </p>
-          <label for="firstname" class="label-text text-left"
-            >What is your first name</label
-          >
-          <Field
-            name="firstname"
-            as="input"
-            type="text"
-            v-model="registrationData.first_name"
-            placeholder="First Name"
-            class="input input-bordered w-full max-w-xs"
-            rules="required|firstname"
-          />
-          <ErrorMessage class="label-text text-left" name="firstname" />
-          <label for="lastname" class="label-text text-left"
-            >What is your last name</label
-          >
-          <Field
-            name="lastname"
-            as="input"
-            type="text"
-            v-model="registrationData.last_name"
-            placeholder="Last Name"
-            class="input input-bordered w-full max-w-xs"
-            rules="required|lastname"
-          />
-          <ErrorMessage class="label-text text-left" name="lastname" />
-          <label for="email" class="label-text text-left"
-            >What is your email?</label
-          >
-          <Field
-            name="email"
-            as="input"
-            type="text"
-            v-model="registrationData.email"
-            placeholder="Email address"
-            class="input input-bordered w-full max-w-xs"
-            rules="required|email"
-          />
-          <ErrorMessage class="label-text text-left" name="email" />
-          <label for="phone" class="label-text text-left"
-            >What is your phone number</label
-          >
-          <Field
-            name="phone"
-            as="input"
-            type="text"
-            v-model="registrationData.phone_number"
-            placeholder="Phone Number"
-            class="input input-bordered w-full max-w-xs"
-            rules="required|phone"
-          />
-          <ErrorMessage class="label-text text-left" name="phone" />
-
-          <div class="card-actions justify-end">
-            <button class="btn btn-primary">Save</button>
-          </div>
-        </Form>
-      </div>
-    </div>
-
-    <div v-else>
-      <div class="p-5 flex flex-col gap-5">
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
-          <!--div class="rounded-lg py-2 px-4 shadow-sm bg-[#EDFFFB]">
-            <div class="flex flex-col space-y-2">
-              <p class="text-base font-semibold text-[#36B293]">Balance</p>
-
-              <div
-                class="flex basis-1/2 flex-col border-r border-gray-300 shrink-0"
-              >
-                <p class="text-xs font-normal">CKBTC</p>
-                <p class="font-semibold text-2xl text-[#36B293]">
-                  {{ tradingbalance }}
-                </p>
-              </div>
-            </div>
-          </div-->
-          <div
-            class="rounded border border-gray-50 bg-gray-100 py-6 shadow-lg lg:shadow-none"
-          >
-            <h3 class="font-medium text-center">SubAccount</h3>
-
-            <div>
-              <p class="p-2 text-center text-3xl font-extrabold text-black">
-                {{ authStore.tradingbalance }}
-              </p>
-            </div>
-          </div>
-
-          <div
-            class="rounded border border-gray-50 bg-gray-100 py-6 lg:shadow-none"
-          >
-            <h3 class="font-medium text-center">Main Account</h3>
-
-            <div>
-              <p class="p-2 text-center text-3xl font-extrabold text-black">
-                {{ authStore.fundingbalance }}
-              </p>
-            </div>
-          </div>
-          <OverviewCard
-            header="Upcoming Payments"
-            currency1="CKBTC"
-            headercolor="#1F2937"
-            bgcolor="#FFF"
-            currency1color="#4C98FF"
-            currency2color="#F6BB22"
-          />
-          <div class="rounded-lg py-2 px-4 shadow-sm bg-[#FFF]">
-            <div class="flex flex-col space-y-2">
-              <p class="text-base font-semibold text-[#1F2937]">Transactions</p>
-
-              <div
-                class="flex basis-1/2 flex-col border-r border-gray-300 shrink-0"
-              >
-                <p class="text-xs font-normal">CKBTC</p>
-                <p class="font-semibold text-2xl text-[#36B293]">
-                  {{ transactions }}
-                </p>
-              </div>
-            </div>
-          </div>
-          <!--OverviewCard
-            header="Transactions"
-            currency1="CKBTC"
-            headercolor="#1F2937"
-            bgcolor="#FFF"
-            currency1color="#36B293"
-            currency2color="#F6BB22"
-          /-->
-        </div>
-
-        <div class="flex flex-row">
-          <div class="w-full">
-            <div class="flex flex-col w-full">
-              <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
-                <div
-                  class="flex flex-col border border-[#A2A1A833] rounded-[10px] divide-y divide-[#A2A1A833]"
-                >
-                  <div class="px-4 pt-4 pb-[10px]">
-                    <div class="flex flex-row">
-                      <img
-                        src="../assets/totalemp.png"
-                        alt=""
-                        class="w-6 h-6"
-                      />
-                      <p
-                        class="text-[#16151C] dark:text-white text-sm leading-[22px] font-light"
-                      >
-                        Transactions
-                      </p>
-                    </div>
-                    <div class="flex flex-row justify-between items-center">
-                      <p
-                        class="text-[#16151C] dark:text-white text-[30px] leading-10 font-semibold"
-                      >
-                        {{ transactions }}
-                      </p>
-                      <div
-                        class="flex flex-row space-x-[10px] items-center bg-[#30BE821A] p-[5px] rounded-[5px]"
-                      >
-                        <img
-                          src="../assets/up-arrow.png"
-                          alt=""
-                          class="w-6 h-6"
-                        />
-                        <p
-                          class="text-[#30BE82] text-[11px] leading-[16px] font-light"
-                        >
-                          12
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="px-4 py-[10px]">
-                    <p class="text-[#A2A1A8] font-light text-xs leading-[18px]">
-                      Update: July 16, 2023
-                    </p>
-                  </div>
-                </div>
-                <div
-                  class="flex flex-col border border-[#A2A1A833] rounded-[10px] divide-y divide-[#A2A1A833]"
-                >
-                  <div class="px-4 pt-4 pb-[10px]">
-                    <div class="flex flex-row">
-                      <img
-                        src="../assets/totalemp.png"
-                        alt=""
-                        class="w-6 h-6"
-                      />
-                      <p
-                        class="text-[#16151C] dark:text-white text-sm leading-[22px] font-light"
-                      >
-                        Contacts
-                      </p>
-                    </div>
-                    <div class="flex flex-row justify-between items-center">
-                      <p
-                        class="text-[#16151C] dark:text-white text-[30px] leading-10 font-semibold"
-                      >
-                        {{ contacts }}
-                      </p>
-                      <div
-                        class="flex flex-row space-x-[10px] items-center bg-[#30BE821A] p-[5px] rounded-[5px]"
-                      >
-                        <img
-                          src="../assets/up-arrow.png"
-                          alt=""
-                          class="w-6 h-6"
-                        />
-                        <p
-                          class="text-[#30BE82] text-[11px] leading-[16px] font-light"
-                        >
-                          12
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="px-4 py-[10px]">
-                    <p class="text-[#A2A1A8] font-light text-xs leading-[18px]">
-                      Update: July 16, 2023
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <p>
-          Funding Address : {{ authStore.fundingaddress}}
-        </p>
-        <p>
-          Trading Address : {{ authStore.tradingaddress}}
-        </p>
-        <p>
-          Canister Address : {{ authStore.canisteraddress}}
-        </p>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/DashboardFreealncer.vue b/frontend/views/DashboardFreealncer.vue
deleted file mode 100644
index 96a6b863..00000000
--- a/frontend/views/DashboardFreealncer.vue
+++ /dev/null
@@ -1,69 +0,0 @@
-<template>
-  <div>
-    <header>
-      <h1 class="text-5xl text-center mt-10">
-        Now! You play with
-        <span
-          class="font-semibold text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400"
-          >Money</span
-        >
-      </h1>
-    </header>
-    <main class="max-w-screen-xl mx-auto">
-      <section class="mt-10">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 m-2">
-          <div class="bg-green-500 p-8 text-white rounded-xl">
-            <h4 class="text-2xl">Deposit</h4>
-            <h2 class="text-4xl">$<span id="deposit-total">00</span></h2>
-          </div>
-          <div class="bg-red-500 p-8 text-white rounded-xl">
-            <h4 class="text-2xl">Withdraw</h4>
-            <h2 class="text-4xl">$<span id="withdraw-total">00</span></h2>
-          </div>
-          <div class="bg-cyan-500 p-8 text-white rounded-xl">
-            <h4 class="text-2xl">Balance</h4>
-            <h2 class="text-4xl">$<span id="balance-total">1240</span></h2>
-          </div>
-        </div>
-      </section>
-      <section class="mt-10">
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 m-2">
-          <div class="bg-indigo-500 p-16 rounded-xl">
-            <h4 class="text-2xl mb-4 text-white">Please Deposit</h4>
-
-            <input
-              class="mb-2 w-5/6 lg:w-3/4 p-2"
-              type="text"
-              name=""
-              id="deposit-amount"
-              placeholder="$ Enter Amount"
-            />
-            <button
-              id="btn-deposit"
-              class="bg-emerald-500 px-5 py-2 rounded text-white font-semibold hover:bg-gradient-to-l to-emerald-600 from-sky-400"
-            >
-              Deposit
-            </button>
-          </div>
-          <div class="bg-purple-500 p-16 rounded-xl">
-            <h4 class="text-2xl mb-4 text-white">Please Withdraw</h4>
-
-            <input
-              class="mb-2 w-5/6 lg:w-3/4 p-2"
-              type="text"
-              name=""
-              id="withdraw-amount"
-              placeholder="$ Enter Amount"
-            />
-            <button
-              id="btn-withdraw"
-              class="bg-emerald-500 px-5 py-2 rounded text-white font-semibold hover:bg-gradient-to-l to-emerald-600 from-sky-400"
-            >
-              Withdraw
-            </button>
-          </div>
-        </div>
-      </section>
-    </main>
-  </div>
-</template>
diff --git a/frontend/views/Departments.vue b/frontend/views/Departments.vue
deleted file mode 100644
index 5a4b9434..00000000
--- a/frontend/views/Departments.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<script setup>
-import Searchbar from "../components/Searchbar.vue";
-import DepartmentCard from "../components/DepartmentCard.vue";
-//
-</script>
-<template>
-  <div class="flex flex-col p-5">
-    <div>
-      <Searchbar />
-    </div>
-    <div class="pt-[30px] grid grid-cols-1 md:grid-cols-2 gap-5">
-      <DepartmentCard />
-      <DepartmentCard />
-      <DepartmentCard />
-      <DepartmentCard />
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/Employee.vue b/frontend/views/Employee.vue
deleted file mode 100644
index c82c3890..00000000
--- a/frontend/views/Employee.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script setup>
-const tabs = [
-  {
-    name: "Personal Information",
-    href: "/personal-information",
-    current: false,
-  },
-  {
-    name: "Professional Information",
-    href: "/professional-information",
-    current: false,
-  },
-  { name: "Documents", href: "/documents", current: true },
-  { name: "Account Access", href: "/account-access", current: false },
-];
-</script>
-<template>
-  <!--MultiStepForm :steps="['Personal information 👶','Series 📺','Feedback 🌟']"/-->
-
-  <div class="p-5">
-    <div>
-      <div class="sm:hidden">
-        <label for="tabs" class="sr-only">Select a tab</label>
-
-        <select
-          id="tabs"
-          name="tabs"
-          class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
-        >
-          <option v-for="tab in tabs" :key="tab.name" :selected="tab.current">
-            {{ tab.name }}
-          </option>
-        </select>
-      </div>
-      <div class="hidden sm:block">
-        <div class="border-b border-gray-200">
-          <nav class="-mb-px flex space-x-8" aria-label="Tabs">
-            <router-link
-              v-for="tab in tabs"
-              :key="tab.name"
-              :to="tab.href"
-              :class="[
-                tab.current
-                  ? 'border-indigo-500 text-indigo-600'
-                  : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
-                'whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium',
-              ]"
-              :aria-current="tab.current ? 'page' : undefined"
-              >{{ tab.name }}</router-link
-            >
-          </nav>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/Holidays.vue b/frontend/views/Holidays.vue
deleted file mode 100644
index 8c5bf953..00000000
--- a/frontend/views/Holidays.vue
+++ /dev/null
@@ -1,2 +0,0 @@
-<script setup></script>
-<template></template>
diff --git a/frontend/views/Invoices.vue b/frontend/views/Invoices.vue
deleted file mode 100644
index 44a6c62c..00000000
--- a/frontend/views/Invoices.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <div class="space-y-2">
-    <h1
-      class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-    >
-      Transactions
-    </h1>
-    <p
-      class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-    >
-      This is a list of all your transactions
-    </p>
-    <div class="p-2" v-for="invoice in invoices" :key="transaction.id">
-      <TransactionCard
-        :sender="invoice.creator"
-        :id="invoice.id"
-        :receiver="invoice.payer"
-        :amount="invoice.amount"
-      />
-    </div>
-  </div>
-</template>
-<script setup>
-import { useAuthStore } from "../store/auth";
-import { ref, watchEffect } from "vue";
-import TransactionCard from "../components/TransactionCard.vue";
-const authStore = useAuthStore();
-let invoices = ref([]);
-
-// watchEffect(async () => {
-//   const res = await authStore.whoamiActor?.get_invoices();
-//   invoices.value = await res;
-// });
-</script>
diff --git a/frontend/views/Jobs.vue b/frontend/views/Jobs.vue
deleted file mode 100644
index 81b65a2e..00000000
--- a/frontend/views/Jobs.vue
+++ /dev/null
@@ -1,100 +0,0 @@
-<script setup>
-import JobCardVue from "../components/JobCard.vue";
-import Searchbar from "../components/Searchbar.vue";
-</script>
-<template>
-  <div class="flex flex-col space-y-[30px] p-5">
-    <div class="flex flex-row justify-between">
-      <Searchbar />
-      <div
-        class="rounded-[10px] inline-flex flex-row p-5 bg-[#7152F3] h-[50px] space-x-[10px] items-center"
-      >
-        <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-        <p class="text-base font-light text-white">Add New Job</p>
-      </div>
-    </div>
-
-    <div class="grid grid-cols-1 sm:grid-cols-3 gap-5">
-      <!-- Active jobs-->
-      <div
-        class="flex flex-col space-y-4 rounded-[10px] border border-[#A2A1A833] p-4"
-      >
-        <div class="flex flex-row space-x-2 items-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="none"
-          >
-            <circle cx="5" cy="5" r="5" fill="#EFBE12" />
-          </svg>
-          <p
-            class="text-[14px] leading-[22px] text-[#16151C] dark:text-white font-semibold"
-          >
-            Active Class
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 gap-4">
-          <JobCardVue />
-          <JobCardVue />
-          <JobCardVue />
-          <JobCardVue />
-        </div>
-      </div>
-      <!-- InAcive jobs-->
-      <div
-        class="flex flex-col space-y-4 rounded-[10px] border border-[#A2A1A833] p-4"
-      >
-        <div class="flex flex-row space-x-2 items-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="none"
-          >
-            <circle cx="5" cy="5" r="5" fill="#EFBE12" />
-          </svg>
-          <p
-            class="text-[14px] leading-[22px] text-[#16151C] dark:text-white font-semibold"
-          >
-            Active Class
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 gap-4">
-          <JobCardVue />
-          <JobCardVue />
-        </div>
-      </div>
-      <!-- Complete jobs-->
-      <div
-        class="flex flex-col space-y-4 rounded-[10px] border border-[#A2A1A833] p-4"
-      >
-        <div class="flex flex-row space-x-2 items-center">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="10"
-            height="10"
-            viewBox="0 0 10 10"
-            fill="none"
-          >
-            <circle cx="5" cy="5" r="5" fill="#EFBE12" />
-          </svg>
-          <p
-            class="text-[14px] leading-[22px] text-[#16151C] dark:text-white font-semibold"
-          >
-            Active Class
-          </p>
-        </div>
-
-        <div class="grid grid-cols-1 gap-4">
-          <JobCardVue />
-          <JobCardVue />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/Leaves.vue b/frontend/views/Leaves.vue
deleted file mode 100644
index 8c5bf953..00000000
--- a/frontend/views/Leaves.vue
+++ /dev/null
@@ -1,2 +0,0 @@
-<script setup></script>
-<template></template>
diff --git a/frontend/views/Loans.vue b/frontend/views/Loans.vue
deleted file mode 100644
index c41ac2b1..00000000
--- a/frontend/views/Loans.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-  <div>
-    <div v-if="isTransferring == true">
-      <div class="flex justify-center items-center h-screen">
-        <div
-          class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"
-        ></div>
-      </div>
-    </div>
-    <div v-else class="p-5 flex flex-col space-y-4">
-      <div
-        v-show="showSuccess == true"
-        role="alert"
-        class="alert alert-success"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>Your transfer was successful! Go to transactions to view it</span>
-      </div>
-      <div v-show="showFailure == true" role="alert" class="alert alert-error">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>Error! Transfer failed . Retry</span>
-      </div>
-
-      <h1 class="text-3xl text-[#16151C] dark:text-white font-semibold">
-        Transfer
-      </h1>
-
-      <div class="flex flex-col space-y-1">
-        <div class="flex flex-row justify-between">
-          <p
-            class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-          >
-            Enter AMount
-          </p>
-          <button
-            @click="transferArgs.amount = tradingbalance"
-            class="rounded-[10px] p-2 bg-slate-400"
-          >
-            <span
-              class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-              >Max</span
-            >
-          </button>
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <div
-            class="select-none font-bold h-full bg-gray-200 rounded-md px-2 py-1 flex items-center justify-center text-gray-800 border border-gray-300"
-          >
-            KES
-          </div>
-          <input
-            v-model="transferArgs.amount"
-            type="text"
-            class="flex h-9 w-full border border-slate-200 px-3 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-800 focus-visible:border-gray-700 bg-gray-100 rounded-md py-2 text-md uppercase tracking-widest font-bold"
-            inputmode="numeric"
-            aria-label="Enter Amount"
-            placeholder="Enter Amount in ckSats"
-            value="0"
-          />
-        </div>
-        <div class="text-right text-sm text-black dark:text-white">
-          <div v-if="isRefreshing == true">
-            <span class="loading loading-spinner loading-xs"></span>
-          </div>
-          <div v-else>
-            <span
-              class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-            >
-              Available Balance:
-              {{
-                selectedAccountType === "main"
-                  ? BigInt(Math.round(authStore.fundingbalance))
-                  : authStore.tradingbalance
-              }}
-              ckSats
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div class="space-y-2">
-        <p
-          class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-        >
-          Wallet Address
-        </p>
-
-        <input
-          v-model="transferArgs.address"
-          type="text"
-          class="flex h-9 w-full border border-slate-200 px-3 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-800 focus-visible:border-gray-700 bg-gray-100 rounded-md py-2 text-md uppercase tracking-widest font-bold"
-          aria-label="Enter Wallet Address"
-          placeholder="Enter Wallet Address"
-          value="qcere-cvwig-oc5gc-rxklh-wmpwf-2ce5g-evkxy-zxi4q-bkvbh-spuf2-eae"
-        />
-      </div>
-
-      <div class="space-y-2">
-        <label
-          class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-        >
-          Memo (Optional)
-        </label>
-        <textarea
-          v-model="transferArgs.memo"
-          name="memo"
-          placeholder="Add Memo to Transaction"
-          class="w-full h-50 rounded-md border uppercase tracking-widest text-gray-800 dark:text-white font-semibold bg-transparent border-[#16151C] dark:border-white dark:bg-[#16151C] dark:text-white"
-        >
-Write something here</textarea
-        >
-      </div>
-
-      <div>
-        <button
-          @click="transfer"
-          type="button"
-          class="inline-flex w-1/5 items-center gap-x-1.5 justify-between rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-        >
-          Send
-          <div class="-mr-0.5 h-5 w-5" aria-hidden="true">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M0 10C0 4.48609 4.48609 0 10 0C15.5143 0 20 4.48609 20 10C20 15.5143 15.5143 20 10 20C4.48609 20 0 15.5143 0 10ZM12.0465 13.7857L15.5243 10.3078C15.5648 10.2674 15.5965 10.2196 15.6187 10.1661C15.6626 10.06 15.6626 9.94 15.6187 9.83391C15.5965 9.78043 15.5648 9.73217 15.5243 9.69217L12.0465 6.21435C11.8765 6.04435 11.6017 6.04435 11.4317 6.21435C11.2617 6.38435 11.2617 6.65913 11.4317 6.82913L14.1678 9.56522H4.78261C4.54261 9.56522 4.34783 9.76 4.34783 10C4.34783 10.24 4.54261 10.4348 4.78261 10.4348H14.1678L11.4317 13.1709C11.2617 13.3409 11.2617 13.6157 11.4317 13.7857C11.5165 13.8704 11.6278 13.913 11.7391 13.913C11.8504 13.913 11.9617 13.8704 12.0465 13.7857Z"
-                fill="white"
-              />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M13.6377 9.2429H4.24774C3.83478 9.2429 3.5 9.58178 3.5 9.99981C3.5 10.4178 3.83478 10.7567 4.24774 10.7567H13.6375L11.2162 13.2079C10.9243 13.5035 10.9243 13.9828 11.2163 14.2783C11.5083 14.5739 11.9818 14.5739 12.2738 14.2783L16.5 9.99984L12.2745 5.72175C11.9826 5.42613 11.5091 5.42608 11.2171 5.72164C10.925 6.0172 10.925 6.49645 11.217 6.79207L13.6377 9.2429Z"
-                fill="#FA7200"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref, watchEffect } from "vue";
-import { useAuthStore } from "../store/auth";
-import router from "../router";
-let tradingbalance = ref("");
-let transferResult = ref("");
-const isTransferring = ref(false);
-const showSuccess = ref(false);
-const showFailure = ref(false);
-const isRefreshing = ref(false);
-const getTime = () => {
-  const date = new Date();
-  const time = date.getTime();
-  return time;
-};
-
-const authStore = useAuthStore();
-const transferArgs = {
-  address: "",
-  memo: "",
-  created_at: getTime(),
-  amount: "",
-};
-
-watchEffect(async () => {
-  tradingbalance.value = await authStore.tradingbalance;
-});
-
-const refreshBalance = async () => {
-  try {
-    isRefreshing.value = true;
-    const res = await authStore.refresh();
-    tradingbalance.value = await authStore.tradingbalance;
-    console.log(res);
-  } catch (e) {
-    console.log("Error fetching data");
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-//set max amount on click
-// async setMax () => {
-//   maxAmount.value = await authStore.tradingbalance;
-// };
-
-const transfer = async () => {
-  isTransferring.value = true;
-  showFailure.value = false;
-  showSuccess.value = false;
-  authStore.updateTranferArgs(transferArgs);
-  const address = authStore.transferArgs.address;
-  const amount = authStore.transferArgs.amount;
-  const memo = authStore.transferArgs.memo;
-  const created_at = authStore.transferArgs.created_at;
-  let response = ref("");
-  try {
-    response = await authStore.whoamiActor?.transferFromSubAccountToSubAccount(
-      address,
-      BigInt(Math.round(amount))
-    );
-
-    console.log(response);
-  } catch (error) {
-    console.error("Error fetching data:", error);
-  } finally {
-    isTransferring.value = false;
-
-    if (response.status === 200) {
-      refreshBalance();
-      showSuccess.value = true;
-      transferArgs.address = "";
-      transferArgs.amount = "";
-      transferArgs.memo = "";
-    } else {
-      showFailure.value = true;
-    }
-  }
-};
-</script>
diff --git a/frontend/views/Notifications.vue b/frontend/views/Notifications.vue
deleted file mode 100644
index 84755a8a..00000000
--- a/frontend/views/Notifications.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-  <!--div class="flex items-center justify-center h-screen bg-gray-900"-->
-  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-xl p-8 w-full h-full">
-    <div class="mb-4">
-      <h1 class="font-semibold text-gray-50">Notifications</h1>
-    </div>
-    <div
-      class="p-2"
-      v-for="notification in notifications"
-      :key="notification.id"
-    >
-      <div
-        class="flex items-center mb-4 p-2 rounded-[10px] border border-gray-600"
-      >
-        <div class="mr-4">
-          <button
-            class="inline-flex items-center justify-center w-14 h-14 text-blue-100 bg-gray-700 rounded-full"
-          >
-            gg
-          </button>
-        </div>
-        <div>
-          <p class="font-semibold dark:text-gray-50 text-gray-800">
-            You received a payment of
-            <span class="text-blue-500 font-bold">{{
-              notification.amount
-            }}</span>
-            from {{ notification.sender }}
-          </p>
-          <span class="text-xs dark:text-gray-500 text-gray-800"
-            >12 min ago</span
-          >
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { useAuthStore } from "../store/auth";
-import { ref, watchEffect } from "vue";
-import TransactionCard from "../components/TransactionCard.vue";
-const authStore = useAuthStore();
-let notifications = ref([]);
-
-watchEffect(async () => {
-  const res = await authStore.whoamiActor?.getNotifications();
-  notifications.value = await res;
-  console.log(res);
-});
-</script>
diff --git a/frontend/views/Payroll.vue b/frontend/views/Payroll.vue
deleted file mode 100644
index aa47d8dc..00000000
--- a/frontend/views/Payroll.vue
+++ /dev/null
@@ -1,264 +0,0 @@
-<script setup>
-import TableComponent from "../components/TableComponent.vue";
-import Searchbar from "../components/Searchbar.vue";
-import { ref, watchEffect } from "vue";
-import { useAuthStore } from "../store/auth";
-const authStore = useAuthStore();
-
-let isRunning = ref(false);
-let isOpen = ref(true);
-let response = ref("");
-let payrollItems = ref([]);
-import {
-  Dialog,
-  DialogPanel,
-  DialogTitle,
-  TransitionChild,
-  TransitionRoot,
-} from "@headlessui/vue";
-let address = ref("");
-let amount = ref("");
-
-const openModal = () => {
-  isOpen.value = true;
-};
-
-const closeModal = () => {
-  isOpen.value = false;
-};
-
-const addPayment = () => {
-  // Handle adding payment logic here
-
-  //add item to payrollItems
-  payrollItems.value.push({
-    id: payrollItems.value.length + 1,
-    address: address.value,
-    amount: amount.value,
-  });
-  console.log("Adding payment:", address.value, amount.value);
-  closeModal();
-};
-
-const deletePayment = (index) => {
-  payrollItems.value.splice(index, 1);
-};
-const runPayroll = async () => {
-  try {
-    isRunning.value = true;
-    console.log("wtf");
-    const res = await authStore.whoamiActor?.runpayroll([
-      {
-        id: 500,
-        creator: "Cosmas",
-        destination:
-          "frmzq-vsyar-77di6-mjado-ej6nq-xlxox-o32rv-p7s76-2nkcs-d3tcu-cae",
-        created_at: 1400,
-        amount: 1500,
-        successful: true,
-      },
-      {
-        id: 2500,
-        creator: "Cosmas",
-        destination:
-          "5lnja-ztbzy-c4kyn-telka-nwtuk-5h2jn-fcesl-tovut-2ytto-5stlw-pae",
-        created_at: 1400,
-        amount: 1500,
-        successful: true,
-      },
-    ]);
-    response = await res;
-
-    console.log(response);
-  } catch (e) {
-    console.log("Error fetching data");
-  } finally {
-    isRunning.value = false;
-  }
-};
-</script>
-<template>
-  <div class="p-5">
-    <div class="bg-white dark:bg-transparent">
-      <div class="flex flex-row justify-between">
-        <Searchbar />
-        <div class="flex flex-row space-x-5">
-          <div
-            @click="openModal"
-            class="rounded-[10px] cursor-pointer flex flex-row p-5 bg-[#7152F3] h-[50px] items-center space-x-[10px]"
-          >
-            <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-            <p class="text-base font-light text-white">Add Payment</p>
-          </div>
-          <div
-            @click="runPayroll"
-            class="rounded-[10px] cursor-pointer flex flex-row p-5 bg-[#7152F3] h-[50px] items-center space-x-[10px]"
-          >
-            <img src="../assets/add-circle.png" alt="" class="w-6 h-6" />
-            <p class="text-base font-light text-white">Run Payroll</p>
-          </div>
-        </div>
-      </div>
-
-      <!-- table section -->
-      <!-- Conditional rendering for payroll items -->
-      <div v-if="payrollItems.length > 0">
-        <table class="divide-y divide-gray-500 w-full">
-          <thead class="bg-white dark:bg-transparent">
-            <tr>
-              <th
-                scope="col"
-                class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-              >
-                ID
-              </th>
-              <th
-                scope="col"
-                class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-              >
-                Address
-              </th>
-              <th
-                scope="col"
-                class="py-[10px] pr-[10px] text-left text-base font-light text-[#A2A1A8]"
-              >
-                Amount
-              </th>
-            </tr>
-          </thead>
-          <tbody class="space-y-2 ">
-            <tr v-for="(item, index) in payrollItems" :key="item.id" class="border border-black rounded-[10px]">
-              <td class="whitespace-nowrap py-[10px] pr-[10px] text-base rounded-[10px] ">
-                <p class="font-light dark:text-white text-[#16151C]">
-                  {{ item.id }}
-                </p>
-              </td>
-              <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-                <p class="font-light dark:text-white text-[#16151C]">
-                  {{ item.address }}
-                </p>
-              </td>
-              <td class="whitespace-nowrap py-[10px] pr-[10px] text-base">
-                <p class="font-light dark:text-white text-[#16151C]">
-                  {{ item.amount }}
-                </p>
-              </td>
-
-              <td
-                class="pr-[10px] py-[10px] text-left text-base text-[#16151C] dark:text-white font-light"
-              >
-                <div class="flex flex-row space-x-[10px]">
-                  <div @click="deletePayment(index)" class="cursor-pointer">
-                    <img src="../assets/trash.png" alt="" class="w-6 h-6" />
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-        <button
-          v-if="payrollItems.length > 0"
-          @click=""
-          class="text-right rounded-[10px] cursor-pointer flex flex-row p-5 bg-[#7152F3] h-[50px] items-center space-x-[10px]"
-        >
-          <p class="text-base font-light text-white">Save</p>
-        </button>
-      </div>
-      <div v-else>
-        <p>No payroll items available.</p>
-      </div>
-      <!-- table section -->
-      <!-- loop through payroll items -->
-    </div>
-    <TransitionRoot as="template" :show="isOpen">
-      <Dialog
-        as="div"
-        class="fixed inset-0 z-10 overflow-y-auto flex items-center justify-center"
-        @close="closeModal"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div
-            class="flex items-center justify-center min-h-screen text-center sm:flex sm:p-0"
-          >
-            <TransitionChild
-              as="template"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel
-                as="div"
-                class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
-              >
-                <div
-                  class="bg-gray-500 mx-auto my-auto px-4 pt-5 pb-4 sm:p-6 sm:pb-4"
-                >
-                  <div class="sm:flex sm:items-start">
-                    <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                      <DialogTitle
-                        as="h3"
-                        class="text-lg leading-6 font-medium text-gray-900"
-                        >Add Payment</DialogTitle
-                      >
-                      <div class="mt-2">
-                        <form @submit.prevent="addPayment">
-                          <div>
-                            <label
-                              for="address"
-                              class="block text-sm font-medium text-gray-700"
-                              >Address:</label
-                            >
-                            <input
-                              type="text"
-                              id="address"
-                              v-model="address"
-                              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                              required
-                            />
-                          </div>
-                          <div class="mt-3">
-                            <label
-                              for="amount"
-                              class="block text-sm font-medium text-gray-700"
-                              >Amount:</label
-                            >
-                            <input
-                              type="number"
-                              id="amount"
-                              v-model="amount"
-                              class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
-                              required
-                            />
-                          </div>
-                          <div class="mt-4">
-                            <button
-                              type="submit"
-                              class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"
-                            >
-                              Add
-                            </button>
-                          </div>
-                        </form>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </TransitionChild>
-      </Dialog>
-    </TransitionRoot>
-  </div>
-</template>
diff --git a/frontend/views/Profile.vue b/frontend/views/Profile.vue
deleted file mode 100644
index 51db92ff..00000000
--- a/frontend/views/Profile.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <div>
-    <p>Name:</p>
-    <p>Email:</p>
-    <p>Name:</p>
-    <p>Phone:</p>
-    <button @click="proceed" class="btn btn-primary">Proceed</button>
-  </div>
-</template>
-
-<script setup>
-import router from "../router";
-
-const proceed = () => {
-  router.push("/home/dashboard");
-};
-</script>
-
-<style scoped>
-/* Add your styles here */
-</style>
diff --git a/frontend/views/Settings.vue b/frontend/views/Settings.vue
deleted file mode 100644
index 941ff8c4..00000000
--- a/frontend/views/Settings.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup>
-import SettingsCard from "../components/SettingsCard.vue";
-import NotificationCard from "../components/NotificationCard.vue";
-import { useAuthStore } from "../store/auth";
-import { ref, watchEffect } from "vue";
-
-const authStore = useAuthStore();
-
-let editing = ref(false);
-let originalUser = ref(null);
-let email = ref("");
-let phone = ref("");
-let name = ref("");
-let phoneNotifications = ref(false);
-let emailNotifications = ref(false);
-let user = ref({
-  name: "John Doe",
-  email: "Johndoe@gmail.com",
-  email_notifications: true,
-  phone: "09876543123",
-  phone_notifications: false,
-  wallet: "0x1234567890",
-});
-
-const edit = () => {
-  // Save a copy of the original user object before editing
-  originalUser.value = JSON.parse(JSON.stringify(user));
-  editing = true;
-};
-
-const save = () => {
-  // Save changes
-  editing = false;
-};
-const getTime = () => {
-  const date = new Date();
-  const time = date.getTime();
-  return time;
-};
-
-const registrationData = {
-  first_name: "",
-  last_name: "",
-  created_at: getTime(),
-  email: "",
-  phone_number: "",
-  wallet_address: "",
-};
-
-watchEffect(async () => {
-  const user = await authStore.whoamiActor?.getUser();
-  if (user.status === 200) {
-    console.log("User:", user.data);
-    email.value = await user.data[0].email_address;
-    phone.value = await user.data[0].phone_number;
-    name.value = await user.data[0].name;
-    phoneNotifications.value = await user.data[0].phone_notifications;
-    emailNotifications.value = await user.data[0].email_notifications;
-
-    // console.log("Email:", email);
-    // console.log("Phone:", phone);
-    // console.log("Name:", name);
-  }
-});
-
-const cancel = () => {
-  // Restore the original user object and cancel editing
-};
-</script>
-<template>
-  <div class="card bg-base-100 shadow-xl self-center">
-    <div class="mx-auto">
-      <div class="avatar online">
-        <div class="w-24 rounded-full bg-gray-500"></div>
-      </div>
-    </div>
-
-    <div class="card-body">
-      <div>
-        <h2 class="card-title">Profile</h2>
-        <p class="uppercase tracking-widest text-gray-800 font-semibold">
-          Name: {{ name }}
-        </p>
-        <p class="uppercase tracking-widest text-gray-800 font-semibold">
-          Email: {{ email }}
-        </p>
-        <p class="uppercase tracking-widest text-gray-800 font-semibold">
-          Phone: {{ phone }}
-        </p>
-
-        <!--div class="card-actions justify-end">
-          <button class="btn btn-primary">Okay</button>
-        </div-->
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/Transactions.vue b/frontend/views/Transactions.vue
deleted file mode 100644
index 16b93275..00000000
--- a/frontend/views/Transactions.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="space-y-2 p-5">
-    <h1 class="text-3xl text-[#16151C] dark:text-white font-semibold ">
-        Transaction History 
-      </h1>
-    
-    <div class="p-2" v-for="transaction in transactions" :key="transaction.id">
-      <TransactionCard
-        :sender="transaction.creator"
-        :id="transaction.id"
-        :receiver="transaction.destination"
-        :amount="transaction.amount"
-      />
-    </div>
-  </div>
-</template>
-<script setup>
-import { useAuthStore } from "../store/auth";
-import { ref, watchEffect } from "vue";
-import TransactionCard from "../components/TransactionCard.vue";
-const authStore = useAuthStore();
-let transactions = ref([]);
-
-watchEffect(async () => {
-  const res = await authStore.whoamiActor?.get_transactions();
-  transactions.value = await res;
-});
-</script>
diff --git a/frontend/views/Transfer.vue b/frontend/views/Transfer.vue
deleted file mode 100644
index c41ac2b1..00000000
--- a/frontend/views/Transfer.vue
+++ /dev/null
@@ -1,252 +0,0 @@
-<template>
-  <div>
-    <div v-if="isTransferring == true">
-      <div class="flex justify-center items-center h-screen">
-        <div
-          class="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-gray-900"
-        ></div>
-      </div>
-    </div>
-    <div v-else class="p-5 flex flex-col space-y-4">
-      <div
-        v-show="showSuccess == true"
-        role="alert"
-        class="alert alert-success"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>Your transfer was successful! Go to transactions to view it</span>
-      </div>
-      <div v-show="showFailure == true" role="alert" class="alert alert-error">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="stroke-current shrink-0 h-6 w-6"
-          fill="none"
-          viewBox="0 0 24 24"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            stroke-width="2"
-            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-          />
-        </svg>
-        <span>Error! Transfer failed . Retry</span>
-      </div>
-
-      <h1 class="text-3xl text-[#16151C] dark:text-white font-semibold">
-        Transfer
-      </h1>
-
-      <div class="flex flex-col space-y-1">
-        <div class="flex flex-row justify-between">
-          <p
-            class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-          >
-            Enter AMount
-          </p>
-          <button
-            @click="transferArgs.amount = tradingbalance"
-            class="rounded-[10px] p-2 bg-slate-400"
-          >
-            <span
-              class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-              >Max</span
-            >
-          </button>
-        </div>
-
-        <div class="flex items-center space-x-2">
-          <div
-            class="select-none font-bold h-full bg-gray-200 rounded-md px-2 py-1 flex items-center justify-center text-gray-800 border border-gray-300"
-          >
-            KES
-          </div>
-          <input
-            v-model="transferArgs.amount"
-            type="text"
-            class="flex h-9 w-full border border-slate-200 px-3 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-800 focus-visible:border-gray-700 bg-gray-100 rounded-md py-2 text-md uppercase tracking-widest font-bold"
-            inputmode="numeric"
-            aria-label="Enter Amount"
-            placeholder="Enter Amount in ckSats"
-            value="0"
-          />
-        </div>
-        <div class="text-right text-sm text-black dark:text-white">
-          <div v-if="isRefreshing == true">
-            <span class="loading loading-spinner loading-xs"></span>
-          </div>
-          <div v-else>
-            <span
-              class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-            >
-              Available Balance:
-              {{
-                selectedAccountType === "main"
-                  ? BigInt(Math.round(authStore.fundingbalance))
-                  : authStore.tradingbalance
-              }}
-              ckSats
-            </span>
-          </div>
-        </div>
-      </div>
-
-      <div class="space-y-2">
-        <p
-          class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-        >
-          Wallet Address
-        </p>
-
-        <input
-          v-model="transferArgs.address"
-          type="text"
-          class="flex h-9 w-full border border-slate-200 px-3 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-800 focus-visible:border-gray-700 bg-gray-100 rounded-md py-2 text-md uppercase tracking-widest font-bold"
-          aria-label="Enter Wallet Address"
-          placeholder="Enter Wallet Address"
-          value="qcere-cvwig-oc5gc-rxklh-wmpwf-2ce5g-evkxy-zxi4q-bkvbh-spuf2-eae"
-        />
-      </div>
-
-      <div class="space-y-2">
-        <label
-          class="uppercase tracking-widest text-gray-800 dark:text-white font-semibold"
-        >
-          Memo (Optional)
-        </label>
-        <textarea
-          v-model="transferArgs.memo"
-          name="memo"
-          placeholder="Add Memo to Transaction"
-          class="w-full h-50 rounded-md border uppercase tracking-widest text-gray-800 dark:text-white font-semibold bg-transparent border-[#16151C] dark:border-white dark:bg-[#16151C] dark:text-white"
-        >
-Write something here</textarea
-        >
-      </div>
-
-      <div>
-        <button
-          @click="transfer"
-          type="button"
-          class="inline-flex w-1/5 items-center gap-x-1.5 justify-between rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
-        >
-          Send
-          <div class="-mr-0.5 h-5 w-5" aria-hidden="true">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              fill="none"
-            >
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M0 10C0 4.48609 4.48609 0 10 0C15.5143 0 20 4.48609 20 10C20 15.5143 15.5143 20 10 20C4.48609 20 0 15.5143 0 10ZM12.0465 13.7857L15.5243 10.3078C15.5648 10.2674 15.5965 10.2196 15.6187 10.1661C15.6626 10.06 15.6626 9.94 15.6187 9.83391C15.5965 9.78043 15.5648 9.73217 15.5243 9.69217L12.0465 6.21435C11.8765 6.04435 11.6017 6.04435 11.4317 6.21435C11.2617 6.38435 11.2617 6.65913 11.4317 6.82913L14.1678 9.56522H4.78261C4.54261 9.56522 4.34783 9.76 4.34783 10C4.34783 10.24 4.54261 10.4348 4.78261 10.4348H14.1678L11.4317 13.1709C11.2617 13.3409 11.2617 13.6157 11.4317 13.7857C11.5165 13.8704 11.6278 13.913 11.7391 13.913C11.8504 13.913 11.9617 13.8704 12.0465 13.7857Z"
-                fill="white"
-              />
-              <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
-                d="M13.6377 9.2429H4.24774C3.83478 9.2429 3.5 9.58178 3.5 9.99981C3.5 10.4178 3.83478 10.7567 4.24774 10.7567H13.6375L11.2162 13.2079C10.9243 13.5035 10.9243 13.9828 11.2163 14.2783C11.5083 14.5739 11.9818 14.5739 12.2738 14.2783L16.5 9.99984L12.2745 5.72175C11.9826 5.42613 11.5091 5.42608 11.2171 5.72164C10.925 6.0172 10.925 6.49645 11.217 6.79207L13.6377 9.2429Z"
-                fill="#FA7200"
-              />
-            </svg>
-          </div>
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup>
-import { ref, watchEffect } from "vue";
-import { useAuthStore } from "../store/auth";
-import router from "../router";
-let tradingbalance = ref("");
-let transferResult = ref("");
-const isTransferring = ref(false);
-const showSuccess = ref(false);
-const showFailure = ref(false);
-const isRefreshing = ref(false);
-const getTime = () => {
-  const date = new Date();
-  const time = date.getTime();
-  return time;
-};
-
-const authStore = useAuthStore();
-const transferArgs = {
-  address: "",
-  memo: "",
-  created_at: getTime(),
-  amount: "",
-};
-
-watchEffect(async () => {
-  tradingbalance.value = await authStore.tradingbalance;
-});
-
-const refreshBalance = async () => {
-  try {
-    isRefreshing.value = true;
-    const res = await authStore.refresh();
-    tradingbalance.value = await authStore.tradingbalance;
-    console.log(res);
-  } catch (e) {
-    console.log("Error fetching data");
-  } finally {
-    isLoading.value = false;
-  }
-};
-
-//set max amount on click
-// async setMax () => {
-//   maxAmount.value = await authStore.tradingbalance;
-// };
-
-const transfer = async () => {
-  isTransferring.value = true;
-  showFailure.value = false;
-  showSuccess.value = false;
-  authStore.updateTranferArgs(transferArgs);
-  const address = authStore.transferArgs.address;
-  const amount = authStore.transferArgs.amount;
-  const memo = authStore.transferArgs.memo;
-  const created_at = authStore.transferArgs.created_at;
-  let response = ref("");
-  try {
-    response = await authStore.whoamiActor?.transferFromSubAccountToSubAccount(
-      address,
-      BigInt(Math.round(amount))
-    );
-
-    console.log(response);
-  } catch (error) {
-    console.error("Error fetching data:", error);
-  } finally {
-    isTransferring.value = false;
-
-    if (response.status === 200) {
-      refreshBalance();
-      showSuccess.value = true;
-      transferArgs.address = "";
-      transferArgs.amount = "";
-      transferArgs.memo = "";
-    } else {
-      showFailure.value = true;
-    }
-  }
-};
-</script>
diff --git a/frontend/views/ViewContact.vue b/frontend/views/ViewContact.vue
deleted file mode 100644
index 54e286ee..00000000
--- a/frontend/views/ViewContact.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<script setup>
-import SettingsCard from "../components/SettingsCard.vue";
-import NotificationCard from "../components/NotificationCard.vue";
-import { useAuthStore } from "../store/auth";
-import { ref, watchEffect } from "vue";
-
-const authStore = useAuthStore();
-
-let editing = ref(false);
-let originalUser = ref(null);
-let email = ref("");
-let phone = ref("");
-let name = ref("");
-let phoneNotifications = ref(false);
-let emailNotifications = ref(false);
-let user = ref({
-  name: "John Doe",
-  email: "Johndoe@gmail.com",
-  email_notifications: true,
-  phone: "09876543123",
-  phone_notifications: false,
-  wallet: "0x1234567890",
-});
-
-const edit = () => {
-  // Save a copy of the original user object before editing
-  originalUser.value = JSON.parse(JSON.stringify(user));
-  editing = true;
-};
-
-const save = () => {
-  // Save changes
-  editing = false;
-};
-const getTime = () => {
-  const date = new Date();
-  const time = date.getTime();
-  return time;
-};
-
-const registrationData = {
-  first_name: "",
-  last_name: "",
-  created_at: getTime(),
-  email: "",
-  phone_number: "",
-  wallet_address: "",
-};
-
-watchEffect(async () => {
-  const user = await authStore.whoamiActor?.getUser();
-  if (user.status === 200) {
-    console.log("User:", user.data);
-    email.value = await user.data[0].email_address;
-    phone.value = await user.data[0].phone_number;
-    name.value = await user.data[0].name;
-    phoneNotifications.value = await user.data[0].phone_notifications;
-    emailNotifications.value = await user.data[0].email_notifications;
-  }
-});
-</script>
-<template>
-  <div class="card bg-base-100 shadow-xl self-center">
-    <div class="mx-auto">
-      <div class="avatar online">
-        <div class="w-24 rounded-full bg-gray-500"></div>
-      </div>
-    </div>
-
-    <div class="card-body">
-      <div>
-        <h2 class="card-title">Profile</h2>
-        <p class="uppercase tracking-widest text-gray-800 font-semibold">
-          Name: {{ name }}
-        </p>
-        <p class="uppercase tracking-widest text-gray-800 font-semibold">
-          Email: {{ email }}
-        </p>
-        <p class="uppercase tracking-widest text-gray-800 font-semibold">
-          Phone: {{ phone }}
-        </p>
-
-        <!--div class="card-actions justify-end">
-          <button class="btn btn-primary">Okay</button>
-        </div-->
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/frontend/views/ViewDepartments.vue b/frontend/views/ViewDepartments.vue
deleted file mode 100644
index e54b7c73..00000000
--- a/frontend/views/ViewDepartments.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <div class="bg-transparent"></div>
-</template>
-
-<script setup>
-import { HomeIcon } from "@heroicons/vue/20/solid";
-
-const pages = [
-  { name: "Projects", href: "#", current: false },
-  { name: "Project Nero", href: "#", current: true },
-];
-</script>
diff --git a/frontend/views/ViewEmployee.vue b/frontend/views/ViewEmployee.vue
deleted file mode 100644
index a6d4cfea..00000000
--- a/frontend/views/ViewEmployee.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<template>
-  <div class="flex flex-col">
-    <div class="flex flex-row justify-between">
-      <div class="flex flex-row">
-        <img src="../assets/attendance.png" />
-
-        <div class="flex flex-col">
-          <p>Brookline Simons</p>
-          <div class="flex flex-row">
-            <img src="../assets/add-circle.png" class="h-5 w-5" />
-            <p>Brookline Simons</p>
-          </div>
-          <div class="flex flex-row">
-            <img src="../assets/add-circle.png" class="h-5 w-5" />
-            <p>Brookline Simons</p>
-          </div>
-        </div>
-      </div>
-      <div>
-        <button class="bg-primary-500 rounded-[10px] p-5">Edit</button>
-      </div>
-    </div>
-
-    <div class="flex flex-row">
-      <div class="flex flex-col w-[242px] rounded-[10px]">
-        <router-link
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D]  text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer  text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/settings"
-        >
-          <span>Profile</span>
-        </router-link>
-        <router-link
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D]  text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer  text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/settings"
-        >
-          <span>Attendance</span>
-        </router-link>
-        <router-link
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D]  text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer  text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/settings"
-        >
-          <span>Projects</span>
-        </router-link>
-        <router-link
-          active-class="group router-link-exact-active cursor-pointer flex flex-row bg-[#7152F30D]  text-base text-[#7152F3] font-semibold py-[13px] pr-[10px] pl-[13px] space-x-4"
-          class="group flex flex-row bg-[#7152F30D] cursor-pointer  text-base text-[#16151C] dark:text-gray-400 font-light hover:bg-[#7152F30D] py-[13px] pr-[10px] pl-[13px] space-x-4"
-          to="/home/settings"
-        >
-          <span>Leave</span>
-        </router-link>
-      </div>
-      <div class="flex flex-col">
-        <div class="flex flex-row justify-between"></div>
-
-        <router-view></router-view>
-      </div>
-    </div>
-  </div>
-</template>
-<script setup></script>
diff --git a/frontend/wagmi/is-chain-id-supported.tsx b/frontend/wagmi/is-chain-id-supported.tsx
deleted file mode 100644
index 1054cf2f..00000000
--- a/frontend/wagmi/is-chain-id-supported.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { supportedChains } from "./wagmi.config";
-
-export function isChainIdSupported(id?: number) {
-  return supportedChains.find((c) => c.id === id) !== undefined;
-}
diff --git a/frontend/wagmi/wagmi.config.ts b/frontend/wagmi/wagmi.config.ts
deleted file mode 100644
index 6c25d895..00000000
--- a/frontend/wagmi/wagmi.config.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { arbitrum, base, mainnet, optimism, polygon, zora } from "wagmi/chains";
-import { configureChains, createConfig } from "wagmi";
-
-import { getDefaultWallets } from "@rainbow-me/rainbowkit";
-import { publicProvider } from "wagmi/providers/public";
-
-export const supportedChains = [
-  mainnet,
-  polygon,
-  optimism,
-  arbitrum,
-  base,
-  zora,
-];
-
-export const { chains, publicClient } = configureChains(supportedChains, [
-  publicProvider(),
-]);
-
-const { connectors } = getDefaultWallets({
-  appName: "ic-siwe-demo-react",
-  projectId: "3936b3795b20eea5fe9282a3a80be958",
-  chains,
-});
-
-export const wagmiConfig = createConfig({
-  autoConnect: true,
-  connectors,
-  publicClient,
-});