diff --git a/src/App.vue b/src/App.vue
index 5a313fd..5b5e1a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -146,8 +146,8 @@
       <Loader />
     </div>
     <div v-else key="element2" class="flex">
-      <Sidebar class="hidden lg:block" />
-      <div class="flex flex-col w-full min-h-screen bg-gray-100">
+      <Sidebar class="hidden lg:block max-h-screen overflow-y-auto" />
+      <div class="flex flex-col w-full min-h-screen max-h-screen overflow-y-auto bg-gray-100">
         <Header />
         <router-view class="flex-grow" />
         <Footer />
diff --git a/src/components/profile/ActionLog.vue b/src/components/profile/ActionLog.vue
index 99c1659..d4fa82d 100644
--- a/src/components/profile/ActionLog.vue
+++ b/src/components/profile/ActionLog.vue
@@ -14,22 +14,22 @@
         <table class="w-full text-sm text-left rtl:text-right text-gray-500">
           <thead class="text-xs text-gray-700 uppercase bg-gray-100">
             <tr>
-              <th scope="col" class="px-6 py-3">Entry</th>
               <th scope="col" class="px-6 py-3">Date</th>
               <th scope="col" class="px-6 py-3">Added By</th>
+              <th scope="col" class="px-6 py-3">Entry</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="(ale, idx) in actionLogEntries" :key="idx" class="bg-white border-b">
-              <th scope="row" class="text-wrap px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-                {{ ale.entry }}
-              </th>
-              <td class="px-6 py-4">
+              <td class="px-6 py-2">
                 {{ new Date(ale.created_at).toLocaleDateString() }}
               </td>
-              <td class="px-6 py-4">
+              <td class="px-6 py-2">
                 {{ ale.created_by }}
               </td>
+              <th scope="row" class="text-wrap px-6 py-2 font-medium text-gray-900 whitespace-nowrap">
+                {{ ale.entry }}
+              </th>
             </tr>
           </tbody>
         </table>
@@ -51,7 +51,10 @@ const actionLogEntries = ref<ActionLog[]>([]);
 const fetching = ref<boolean>(true);
 
 onMounted(async () => {
-  actionLogEntries.value = await userStore.fetchActionLog(userStore.self.cid);
+  actionLogEntries.value = await userStore.fetchActionLog(userStore.self!.cid);
+  actionLogEntries.value.sort((a, b) => {
+    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime();
+  });
   fetching.value = false;
 });
 </script>
diff --git a/src/router/index.ts b/src/router/index.ts
index 1eebf5f..5019dd3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,37 +64,82 @@ const routes = [
       {
         path: "management",
         name: "Management",
-        component: () => import("@/views/controllers/Facility.vue"),
+        component: () => import("@/views/facility/Management.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA"],
+        },
       },
       {
         path: "roster",
         name: "Roster",
         component: () => import("@/views/facility/Roster.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA"],
+        },
+      },
+      {
+        path: "feedback",
+        name: "Feedback",
+        component: () => import("@/views/facility/Feedback.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA"],
+        },
       },
       {
         path: "engineering",
         name: "Engineering",
-        component: () => import("@/views/controllers/MyFeedback.vue"),
+        component: () => import("@/views/facility/Engineering.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA", "FE", "AFE"],
+        },
       },
       {
         path: "web-config",
         name: "Web Config",
-        component: () => import("@/views/controllers/MyFeedback.vue"),
+        component: () => import("@/views/facility/WebConfig.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA", "WM", "AWM"],
+        },
       },
       {
         path: "events",
         name: "ARTCC Events",
-        component: () => import("@/views/controllers/MyFeedback.vue"),
+        component: () => import("@/views/facility/Events.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA", "EC", "AEC"],
+        },
       },
       {
         path: "training/notes",
         name: "Training Notes",
-        component: () => import("@/views/controllers/MyFeedback.vue"),
+        component: () => import("@/views/facility/Engineering.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA", "MTR", "INS"],
+        },
       },
       {
         path: "training/calendar",
         name: "Training Calendar",
-        component: () => import("@/views/controllers/MyFeedback.vue"),
+        component: () => import("@/views/facility/Engineering.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA", "MTR", "INS"],
+        },
+      },
+    ],
+    meta: {
+      requiresAuth: true,
+    },
+  },
+  {
+    path: "/mgmt/",
+    children: [
+      {
+        path: "user/:cid",
+        name: "User",
+        component: () => import("@/views/management/User.vue"),
+        meta: {
+          requiresRole: ["ATM", "DATM", "TA"],
+        },
       },
     ],
     meta: {
@@ -151,10 +196,11 @@ router.beforeEach(async (to, from, next) => {
   const sidebarStore = useSidebarStore();
   if (!userStore.hasFetched) {
     if (userStore.loading === null || userStore.loading === undefined) {
-      console.log("fetching user");
-      userStore.loading = userStore.fetchUser();
+      userStore.loading = userStore.fetchSelf();
       await userStore.loading;
-      sidebarStore.updateSidebar(userStore.roles!);
+      if (userStore.roles) {
+        sidebarStore.updateSidebar(userStore.roles);
+      }
     }
     userStore.loading.then(() => {
       check(to, from, next);
diff --git a/src/stores/event.ts b/src/stores/event.ts
index c13a137..dce815a 100644
--- a/src/stores/event.ts
+++ b/src/stores/event.ts
@@ -32,6 +32,14 @@ const useEventStore = defineStore({
         this.fetching = false;
       }
     },
+    async fetchPreviousEvents(facility: string): Promise<Event[]> {
+      try {
+        const { data } = await API.get(`/v3/facility/${facility}/events/previous`);
+        return data;
+      } catch (e) {
+        return [];
+      }
+    },
     async fetchEvents(facility: string): Promise<Event[]> {
       try {
         const { data } = await API.get(`/v3/facility/${facility}/events`);
diff --git a/src/stores/facility.ts b/src/stores/facility.ts
index 3d2544a..bbd30ef 100644
--- a/src/stores/facility.ts
+++ b/src/stores/facility.ts
@@ -63,6 +63,15 @@ const useFacilityStore = defineStore({
         this.fetching = false;
       }
     },
+    async patchRosterRequest(facility: string, id: number, status: string): Promise<void> {
+      this.loading = API.patch(`/v3/facility/${facility}/roster-request/${id}`, { status });
+      await this.loading;
+      this.loading = null;
+    },
+    async regenerateApiKey(facility: string): Promise<string> {
+      const { data } = await API.post(`/v3/facility/${facility}/reset-api-key`);
+      return data.api_key;
+    },
   },
 });
 
diff --git a/src/stores/feedback.ts b/src/stores/feedback.ts
index 531d199..fb4be41 100644
--- a/src/stores/feedback.ts
+++ b/src/stores/feedback.ts
@@ -39,6 +39,10 @@ const useFeedbackStore = defineStore({
       await this.loading;
       this.loading = null;
     },
+    async fetchFeedbackForFacility(facility: string): Promise<Feedback[]> {
+      const { data } = await API.get(`/v3/facility/${facility}/feedback`);
+      return data;
+    },
   },
 });
 
diff --git a/src/stores/sidebar.ts b/src/stores/sidebar.ts
index 3796b8a..b8b110f 100644
--- a/src/stores/sidebar.ts
+++ b/src/stores/sidebar.ts
@@ -34,6 +34,68 @@ const useSidebarStore = defineStore({
         }, {});
 
         Object.keys(facilityRolesMap).forEach((facility: string) => {
+          const seniorStaff: Link[] = [
+            {
+              title: "Management",
+              icon: "fa-solid fa-gear",
+              to: { name: "Management", params: { facility_id: facility } },
+            },
+            {
+              title: "Roster",
+              icon: "fa-solid fa-users",
+              to: { name: "Roster", params: { facility_id: facility } },
+            },
+            {
+              title: "Feedback",
+              icon: "fa-solid fa-users",
+              to: { name: "Feedback", params: { facility_id: facility } },
+            },
+          ];
+
+          const fe: Link[] = [
+            {
+              title: "Engineering",
+              icon: "fa-solid fa-tools",
+              to: { name: "Engineering", params: { facility_id: facility } },
+            },
+          ];
+
+          const wm: Link[] = [
+            {
+              title: "Web Config",
+              icon: "fa-solid fa-cogs",
+              to: { name: "Web Config", params: { facility_id: facility } },
+            },
+          ];
+
+          const ec: Link[] = [
+            {
+              title: "Events",
+              icon: "fa-solid fa-calendar",
+              to: { name: "ARTCC Events", params: { facility_id: facility } },
+            },
+          ];
+
+          const training: Link[] = [
+            {
+              title: "Training Actions",
+              icon: "fa-solid fa-chalkboard-user",
+              subLinks: [
+                {
+                  title: "Calendar",
+                  icon: "fa-solid fa-calendar",
+                  to: { name: "Training Calendar", params: { facility_id: facility } },
+                },
+                {
+                  title: "Notes",
+                  icon: "fa-solid fa-book",
+                  to: { name: "Training-Notes", params: { facility_id: facility } },
+                },
+              ],
+              showSubLinks: true,
+            },
+          ];
+
           // If ZHQ
           if (facility === "ZHQ") {
             this.sidebar.push({
@@ -47,59 +109,20 @@ const useSidebarStore = defineStore({
             const facRoles: string[] = facilityRolesMap[facility];
             const temp: Link[] = [];
             if (facRoles.includes("ATM") || facRoles.includes("DATM") || facRoles.includes("TA")) {
-              temp.push(
-                {
-                  title: "Management",
-                  icon: "fa-solid fa-gear",
-                  to: { name: "Management", params: { facility_id: facility } },
-                },
-                {
-                  title: "Roster",
-                  icon: "fa-solid fa-users",
-                  to: { name: "Roster", params: { facility_id: facility } },
-                }
-              );
+              temp.push(...seniorStaff, ...fe, ...wm, ...ec, ...training);
             } else {
               if (facRoles.includes("FE") || facRoles.includes("AFE")) {
-                temp.push({
-                  title: "Engineering",
-                  icon: "fa-solid fa-tools",
-                  to: { name: "Engineering", params: { facility_id: facility } },
-                });
+                temp.push(...fe);
               }
               if (facRoles.includes("WM") || facRoles.includes("AWM")) {
-                temp.push({
-                  title: "Web Config",
-                  icon: "fa-solid fa-cogs",
-                  to: { name: "Web Config", params: { facility_id: facility } },
-                });
+                temp.push(...wm);
               }
               if (facRoles.includes("EC") || facRoles.includes("AEC")) {
-                temp.push({
-                  title: "Events",
-                  icon: "fa-solid fa-calendar",
-                  to: { name: "ARTCC Events", params: { facility_id: facility } },
-                });
+                temp.push(...ec);
               }
 
               if (facRoles.includes("MTR") || facRoles.includes("INS")) {
-                temp.push({
-                  title: "Training Actions",
-                  icon: "fa-solid fa-chalkboard-user",
-                  subLinks: [
-                    {
-                      title: "Calendar",
-                      icon: "fa-solid fa-calendar",
-                      to: { name: "Training Calendar", params: { facility_id: facility } },
-                    },
-                    {
-                      title: "Notes",
-                      icon: "fa-solid fa-book",
-                      to: { name: "Training-Notes", params: { facility_id: facility } },
-                    },
-                  ],
-                  showSubLinks: true,
-                });
+                temp.push(...training);
               }
             }
 
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 42c9f6d..9a8343b 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { API } from "@/utils/api";
-import { ActionLog, NotificationSettings, User, Role } from "@/types";
+import { ActionLog, NotificationSettings, User, Role, Roster } from "@/types";
 import { getControllerRating, getPilotRating } from "@/utils/rating";
 import { notify } from "notiwind";
 
@@ -33,7 +33,7 @@ const useUserStore = defineStore({
     },
   },
   actions: {
-    async fetchUser(): Promise<void> {
+    async fetchSelf(): Promise<void> {
       this.fetching = true;
       try {
         const { data } = await API.get("/v3/user");
@@ -50,8 +50,8 @@ const useUserStore = defineStore({
         this.fetching = false;
         this.hasFetched = true;
 
-        await this.fetchRoles();
-        await this.fetchRosters();
+        await this.fetchRolesSelf();
+        await this.fetchRosterSelf();
 
         if (this.isLoggedIn) {
           notify(
@@ -65,6 +65,21 @@ const useUserStore = defineStore({
         }
       }
     },
+    async fetchUser(cid: number): Promise<User | null> {
+      try {
+        const { data } = await API.get(`/v3/user/${cid}`);
+        if (data.controller_rating) {
+          data.controller_rating_string = getControllerRating(data.controller_rating);
+        }
+        if (data.pilot_rating) {
+          data.pilot_rating_string = getPilotRating(data.pilot_rating);
+        }
+        return data as User;
+      } catch (e) {
+        console.error(e);
+        return null;
+      }
+    },
     async patchUser(cid: number, body: { [p: string]: string }): Promise<void> {
       try {
         const { data } = await API.patch(`/v3/user/${cid}`, body);
@@ -94,7 +109,7 @@ const useUserStore = defineStore({
         );
       }
     },
-    async fetchRoles(): Promise<void> {
+    async fetchRolesSelf(): Promise<void> {
       if (!this.isLoggedIn) return;
       try {
         const { data } = await API.get(`/v3/user/${this.user?.cid}/roles`);
@@ -103,7 +118,16 @@ const useUserStore = defineStore({
         this.roles = [];
       }
     },
-    async fetchRosters(): Promise<void> {
+    async fetchRoles(cid: number): Promise<Role[]> {
+      try {
+        const { data } = await API.get(`/v3/user/${cid}/roles`);
+        return data as Role[];
+      } catch (e) {
+        console.error(e);
+        return [];
+      }
+    },
+    async fetchRosterSelf(): Promise<void> {
       if (!this.isLoggedIn) return;
       try {
         const { data } = await API.get(`/v3/user/${this.user?.cid}/roster`);
@@ -114,6 +138,15 @@ const useUserStore = defineStore({
         this.hasFetchedRosters = true;
       }
     },
+    async fetchRoster(cid: number): Promise<Roster[]> {
+      try {
+        const { data } = await API.get(`/v3/user/${cid}/roster`);
+        return data as Roster[];
+      } catch (e) {
+        console.error(e);
+        return [];
+      }
+    },
     async fetchActionLog(cid: number): Promise<ActionLog[]> {
       try {
         const { data } = await API.get(`/v3/user/${cid}/action-log`);
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 64ac83f..388acf4 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -44,6 +44,10 @@ export interface User {
 export interface Feedback {
   id: number;
   controller_cid: number;
+  controller_first_name: string;
+  controller_last_name: string;
+  callsign: string;
+  pilot_cid: number;
   facility: string;
   position: string;
   comment: string;
@@ -100,8 +104,10 @@ export interface Role {
 
 export interface Facility {
   id: string;
+  about: string;
   name: string;
   url: string;
+  webhook_url: string;
 }
 
 export interface ActionLog {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 1247a54..9cb96b7 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -24,7 +24,13 @@
                       {{ event.title }} <span class="font-normal">({{ event.fields.toString() }})</span>
                     </p>
                     <p class="text-gray-700">
-                      {{ new Date(event.start_date).toLocaleDateString() }}
+                      {{
+                        new Date(event.start_date).toLocaleDateString("en-US", {
+                          year: "numeric",
+                          month: "short",
+                          day: "numeric",
+                        })
+                      }}
                       {{ new Date(event.start_date).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }}
                       -
                       {{ new Date(event.end_date).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }}
@@ -33,6 +39,7 @@
                   <hr class="w-[15%] bg-usa-red h-0.5" />
                 </router-link>
               </button>
+              <p v-if="eventStore.upcoming_events.length === 0" class="text-gray-700 font-semibold">None Found.</p>
             </div>
           </div>
           <div class="pt-5 px-4">
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index 59af065..d530b60 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -75,7 +75,7 @@ watch(currentHashTab, (newTab) => {
 // Initial check on component mount
 onMounted(() => {
   selectedTab.value = currentHashTab.value;
-  if (!userStore.hasFetchedRosters) userStore.fetchRosters();
+  if (!userStore.hasFetchedRosters) userStore.fetchRosterSelf();
 
   // Check if an account was just linked
   const query = route.query;
diff --git a/src/views/controllers/Facility.vue b/src/views/controllers/Facility.vue
index 614286e..a9ae648 100644
--- a/src/views/controllers/Facility.vue
+++ b/src/views/controllers/Facility.vue
@@ -102,7 +102,7 @@ onMounted(() => {
     facilityStore.fetchFacilities();
   }
   if (!userStore.hasFetchedRosters) {
-    userStore.fetchRosters();
+    userStore.fetchRosterSelf();
   }
 });
 </script>
diff --git a/src/views/facility/Engineering.vue b/src/views/facility/Engineering.vue
new file mode 100644
index 0000000..6590bc3
--- /dev/null
+++ b/src/views/facility/Engineering.vue
@@ -0,0 +1,16 @@
+<template>
+  <Page title="Engineering"> </Page>
+</template>
+
+<script setup lang="ts">
+import Page from "@/components/Page.vue";
+import Card from "@/components/Card.vue";
+
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+const route = useRoute();
+const facilityId = computed(() => route.params.facility_id as string);
+</script>
+
+<style scoped></style>
diff --git a/src/views/facility/Events.vue b/src/views/facility/Events.vue
new file mode 100644
index 0000000..bd9f7f0
--- /dev/null
+++ b/src/views/facility/Events.vue
@@ -0,0 +1,157 @@
+<template>
+  <Page title="Events">
+    <div class="grid grid-cols-4 mx-10">
+      <div class="col-span-3 px-10">
+        <h3 class="text-2xl font-bold text-usa-grey">Upcoming Events</h3>
+      </div>
+      <div class="col-span-1 px-10">
+        <h3 class="text-2xl font-bold text-usa-grey">Past Events</h3>
+      </div>
+      <div class="col-span-3 grid grid-cols-2 gap-10 p-10">
+        <div v-if="fetchingEvents" class="m-5">
+          <Spinner />
+        </div>
+        <div
+          v-for="(event, idx) in events"
+          v-else
+          :key="idx"
+          class="hover:-translate-y-1 transition duration-500 hover:opacity-90 cursor-pointer"
+        >
+          <div class="bg-usa-white drop-shadow-sm rounded-xl">
+            <div class="px-10 pt-8">
+              <h5 class="font-bold text-2xl text-usa-grey">{{ event.title }}</h5>
+              <h6 class="font-semibold text-xl text-gray-600">Presented By {{ event.facilities.join(", ") }}</h6>
+
+              <div class="grid grid-cols-2 my-6 font-semibold gap-y-5">
+                <div>
+                  <p class="font-bold text-sm text-gray-700">Date:</p>
+                  <p class="text-lg text-gray-700">
+                    {{
+                      new Date(event.start_date).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      })
+                    }}
+                  </p>
+                </div>
+                <div>
+                  <p class="font-bold text-sm text-gray-700">Positions:</p>
+                  <p class="text-lg text-gray-700">
+                    {{ positionCount(event.positions)[1] }} Shifts Available ({{ positionCount(event.positions)[0] }}
+                    Total)
+                  </p>
+                </div>
+                <div>
+                  <p class="font-bold text-sm text-gray-700">Time:</p>
+                  <p class="text-lg text-gray-700">
+                    {{ new Date(event.start_date).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }}
+                    -
+                    {{ new Date(event.end_date).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) }}
+                  </p>
+                </div>
+                <div>
+                  <p class="font-bold text-sm text-gray-700">Routing:</p>
+                  <p class="text-lg text-gray-700">{{ event.routing.length }} Routes Entered</p>
+                </div>
+              </div>
+            </div>
+            <img class="rounded-b-xl h-auto mt-4 lg:mt-0" :src="event.banner_url" :alt="event.title" />
+          </div>
+        </div>
+      </div>
+      <div class="col-span-1 space-y-5 p-10">
+        <div
+          v-for="(event, idx) in previousEvents"
+          :key="idx"
+          class="hover:-translate-y-1 transition duration-500 hover:opacity-90 cursor-pointer"
+        >
+          <div class="bg-usa-white drop-shadow-sm rounded-xl">
+            <div class="px-10 pt-8">
+              <h5 class="font-bold text-2xl text-usa-grey">{{ event.title }}</h5>
+
+              <div class="grid grid-cols-2 my-3 font-semibold">
+                <div>
+                  <p class="font-bold text-sm text-gray-700">Date:</p>
+                  <p class="text-lg text-gray-700">
+                    {{
+                      new Date(event.start_date).toLocaleDateString("en-US", {
+                        year: "numeric",
+                        month: "short",
+                        day: "numeric",
+                      })
+                    }}
+                  </p>
+                </div>
+                <div>
+                  <p class="font-bold text-sm text-gray-700">Aircraft Seen:</p>
+                  <p class="text-lg text-gray-700">Future...</p>
+                </div>
+              </div>
+            </div>
+            <img class="rounded-b-xl h-auto mt-4 lg:mt-0" :src="event.banner_url" :alt="event.title" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </Page>
+</template>
+
+<script setup lang="ts">
+import Page from "@/components/Page.vue";
+
+import { useRoute } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { Event, EventPosition } from "@/types";
+import useEventStore from "@/stores/event";
+import Spinner from "@/components/animations/Spinner.vue";
+
+const route = useRoute();
+const eventStore = useEventStore();
+const facilityId = computed(() => route.params.facility_id as string);
+
+const fetchingEvents = ref<boolean>(false);
+const events = ref<Event[]>([]);
+const previousEvents = ref<Event[]>([]);
+
+// Returns [total, available]
+const positionCount = (positions: EventPosition[]): [number, number] => {
+  let total = 0;
+  let available = 0;
+  positions.forEach((pos) => {
+    if (pos.shifts) {
+      total += 2;
+      if (pos.assignee === 0) {
+        available += 1;
+      }
+      if (pos.secondary_assignee === 0) {
+        available += 1;
+      }
+    } else {
+      total += 1;
+      if (pos.assignee === 0) {
+        available += 1;
+      }
+    }
+  });
+
+  return [total, available];
+};
+
+async function fetchEvents(facId: string): Promise<void> {
+  fetchingEvents.value = true;
+  events.value = await eventStore.fetchEvents(facId);
+  previousEvents.value = await eventStore.fetchPreviousEvents(facId);
+  fetchingEvents.value = false;
+}
+
+watch(facilityId, async (newFacId) => {
+  await fetchEvents(newFacId);
+});
+
+onMounted(async () => {
+  await fetchEvents(facilityId.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/facility/Feedback.vue b/src/views/facility/Feedback.vue
new file mode 100644
index 0000000..826c999
--- /dev/null
+++ b/src/views/facility/Feedback.vue
@@ -0,0 +1,267 @@
+<template>
+  <Page title="Feedback">
+    <Card v-if="!fetchingFeedback && pendingFeedback.length > 0" class="-mx-12 md:mx-0">
+      <div class="mt-8 md:px-14">
+        <div class="flex justify-between mb-6 mx-4">
+          <div class="flex flex-col">
+            <p class="font-bold text-gray-600 text-lg">Pending Feedback</p>
+          </div>
+        </div>
+
+        <div class="relative overflow-x-auto">
+          <table class="w-full text-sm text-left rtl:text-right text-gray-500">
+            <thead class="text-xs text-gray-700 uppercase bg-gray-100">
+              <tr>
+                <th scope="col" class="px-6 py-3">CID</th>
+                <th scope="col" class="px-6 py-3">Name</th>
+                <th scope="col" class="px-6 py-3">Rating</th>
+                <th scope="col" class="px-6 py-3">Feedback</th>
+                <th scope="col" class="px-6 py-3">Position</th>
+                <th scope="col" class="px-6 py-3">Date</th>
+                <th scope="col" class="px-6 py-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(feedback, idx) in pendingFeedback" :key="idx" class="bg-white border-b">
+                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
+                  {{ feedback.controller_cid }}
+                </th>
+                <td class="px-6 py-4">{{ feedback.controller_first_name }} {{ feedback.controller_last_name }}</td>
+                <td class="px-6 py-4">
+                  {{ feedback.rating }}
+                </td>
+                <td class="px-6 py-4">
+                  {{ feedback.feedback }}
+                </td>
+                <td class="px-6 py-4">
+                  {{ feedback.position }}
+                </td>
+                <td class="px-6 py-4">
+                  {{ new Date(feedback.created_at).toLocaleDateString() }}
+                </td>
+                <td class="px-6 py-1 space-x-4">
+                  <button class="bg-emerald-500 text-white w-8 h-8 rounded hover:bg-opacity-80">
+                    <i class="fas fa-fw fa-check"></i>
+                  </button>
+                  <button class="bg-red-500 text-white w-8 h-8 rounded hover:bg-opacity-80">
+                    <i class="fas fa-fw fa-xmark"></i>
+                  </button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <h3 v-if="pendingFeedback.length === 0" class="text-center text-xl font-semibold m-5">No Feedback Found</h3>
+        </div>
+      </div>
+    </Card>
+
+    <Card class="-mx-12 md:mx-0">
+      <div v-if="fetchingFeedback" class="m-5">
+        <Spinner />
+      </div>
+      <div v-else class="mt-8 md:px-14">
+        <div class="flex justify-between mb-6 mx-4">
+          <div class="flex flex-col">
+            <p class="font-bold text-gray-600 text-sm">Search</p>
+            <input
+              v-model="search"
+              style="outline: 0"
+              class="my-1 py-1 border-b focus:border-b-usa-blue hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
+              placeholder="Search"
+            />
+          </div>
+        </div>
+
+        <div class="grid grid-cols-12 text-xs text-gray-700 uppercase bg-gray-100 font-bold p-4">
+          <div class="col-span-2">
+            <h5>Controller</h5>
+          </div>
+          <div class="col-span-4">
+            <h5>Feedback</h5>
+          </div>
+          <div class="col-span-2">
+            <h5>Position</h5>
+          </div>
+          <div class="col-span-1">
+            <h5>Date</h5>
+          </div>
+          <div class="col-span-1">
+            <h5>Status</h5>
+          </div>
+          <div class="col-span-1">
+            <h5>Rating</h5>
+          </div>
+          <div class="col-span-1 text-right">
+            <h5>Details</h5>
+          </div>
+        </div>
+
+        <div v-for="(feedback, idx) in filteredFeedback" :key="idx">
+          <div class="grid grid-cols-12 text-gray-700 py-4 border-b-gray-200 border-b">
+            <div class="col-span-2 my-auto ml-4">
+              <h5 class="font-bold">{{ feedback.controller_first_name }} {{ feedback.controller_last_name }}</h5>
+              <h5>{{ feedback.controller_cid }}</h5>
+            </div>
+            <div class="col-span-4 my-auto text-wrap">
+              <h5>{{ feedback.feedback }}</h5>
+            </div>
+            <div class="col-span-2 my-auto">
+              <h5>{{ feedback.position }}</h5>
+            </div>
+            <div class="col-span-1 my-auto">
+              <h5>{{ new Date(feedback.created_at).toLocaleDateString() }}</h5>
+            </div>
+            <div class="col-span-1 my-auto flex">
+              <h5
+                class="rounded px-1.5 py-1 text-sm"
+                :class="feedback.status === 'accepted' ? 'bg-green-200' : 'bg-red-200'"
+              >
+                {{ feedback.status }}
+              </h5>
+            </div>
+            <div class="col-span-1 my-auto">
+              <h5>
+                {{ feedback.rating }}
+              </h5>
+            </div>
+            <div class="col-span-1 text-right my-auto mr-4">
+              <button
+                v-if="selectedFeedback !== idx"
+                class="rounded-full hover:bg-gray-200 transition duration-200 px-2"
+                @click="selectFeedback(idx)"
+              >
+                <i class="fa-solid fa-chevron-right"></i>
+              </button>
+              <button
+                v-else
+                class="rounded-full hover:bg-gray-200 transition duration-200 px-1"
+                @click="selectFeedback(-1)"
+              >
+                <i class="fa-solid fa-chevron-down"></i>
+              </button>
+            </div>
+            <div v-if="selectedFeedback === idx" class="col-span-12 border-t px-4 border-t-gray-200 mt-4 py-4">
+              <div class="grid grid-cols-4 text-gray-700 gap-x-5">
+                <div class="col-span-1 border border-gray-200 rounded">
+                  <div class="bg-gray-100 rounded-t p-2">
+                    <h5 class="font-bold text-sm">Pilot Details</h5>
+                  </div>
+                  <div class="p-4 grid grid-cols-5 gap-y-5">
+                    <div class="col-span-1 text-gray-600">CID</div>
+                    <div class="col-span-4 font-semibold">{{ feedback.pilot_cid }}</div>
+                    <div class="col-span-1 text-gray-600">Callsign</div>
+                    <div class="col-span-4 font-semibold">{{ feedback.callsign }}</div>
+                    <div class="col-span-1 text-gray-600">Name</div>
+                    <div class="col-span-4 font-semibold">Coming soon...</div>
+                    <div class="col-span-1 text-gray-600">Email</div>
+                    <div class="col-span-4 font-semibold">Coming soon...</div>
+                    <div class="col-span-1 text-gray-600">Hours</div>
+                    <div class="col-span-4 font-semibold">Coming soon...</div>
+                  </div>
+                </div>
+
+                <div class="col-span-1 border border-gray-200 rounded">
+                  <div class="bg-gray-100 rounded-t p-2">
+                    <h5 class="font-bold text-sm">Controller Details</h5>
+                  </div>
+                  <div class="p-4 grid grid-cols-5 gap-y-5">
+                    <div class="col-span-1 text-gray-600">CID</div>
+                    <div class="col-span-4 font-semibold">{{ feedback.controller_cid }}</div>
+                    <div class="col-span-1 text-gray-600">Position</div>
+                    <div class="col-span-4 font-semibold">{{ feedback.position }}</div>
+                    <div class="col-span-1 text-gray-600">Name</div>
+                    <div class="col-span-4 font-semibold">
+                      {{ feedback.controller_first_name }} {{ feedback.controller_last_name }}
+                    </div>
+                    <div class="col-span-1 text-gray-600">Rating</div>
+                    <div class="col-span-4 font-semibold">Coming soon...</div>
+                    <div class="col-span-1 text-gray-600">Hours</div>
+                    <div class="col-span-4 font-semibold">Coming soon...</div>
+                  </div>
+                </div>
+
+                <div class="col-span-2 border border-gray-200 rounded">
+                  <div class="bg-gray-100 rounded-t p-2">
+                    <h5 class="font-bold text-sm">Feedback</h5>
+                  </div>
+                  <div class="p-4 grid grid-cols-5 gap-y-5">
+                    <div class="col-span-1 text-gray-600">Feedback</div>
+                    <div class="col-span-4 font-semibold text-wrap">{{ feedback.feedback }}</div>
+                    <div class="col-span-1 text-gray-600">Comments</div>
+                    <div class="col-span-4 font-semibold">{{ feedback.comment }}</div>
+                    <div class="col-span-1 text-gray-600">Actions</div>
+                    <div class="col-span-4 font-semibold">
+                      <button
+                        class="bg-usa-blue text-white text-sm px-2.5 py-1 rounded hover:opacity-75 transition duration-200"
+                      >
+                        Praise
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <h3 v-if="filteredFeedback.length === 0" class="text-center text-xl font-semibold m-5">No Feedback Found</h3>
+      </div>
+    </Card>
+  </Page>
+</template>
+
+<script lang="ts" setup>
+import { useRoute } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { Feedback } from "@/types";
+import Page from "@/components/Page.vue";
+import Spinner from "@/components/animations/Spinner.vue";
+import Card from "@/components/Card.vue";
+import useFeedbackStore from "@/stores/feedback";
+
+const route = useRoute();
+const feedbackStore = useFeedbackStore();
+const facilityId = computed(() => route.params.facility_id as string);
+
+const fetchingFeedback = ref<boolean>(true);
+const pastFeedback = ref<Feedback[]>([]);
+
+const selectedFeedback = ref<number>(-1);
+
+const selectFeedback = (index: number): void => {
+  selectedFeedback.value = index;
+};
+
+const search = ref<string>("");
+const filteredFeedback = computed(() => {
+  return pastFeedback.value.filter((feedback) => {
+    return (
+      (feedback.controller_last_name.toLowerCase().includes(search.value.toLowerCase()) ||
+        feedback.controller_first_name.toLowerCase().includes(search.value.toLowerCase()) ||
+        feedback.controller_cid.toString().includes(search.value) ||
+        feedback.rating.toLowerCase().includes(search.value.toLowerCase())) &&
+      feedback.status !== "pending"
+    );
+  });
+});
+
+const pendingFeedback = computed(() => {
+  return pastFeedback.value.filter((f) => f.status === "pending");
+});
+
+async function fetchFeedback(facId: string): Promise<void> {
+  fetchingFeedback.value = true;
+  pastFeedback.value = await feedbackStore.fetchFeedbackForFacility(facId);
+  fetchingFeedback.value = false;
+}
+
+watch(facilityId, async (newFacId) => {
+  await fetchFeedback(newFacId);
+});
+
+onMounted(async () => {
+  await fetchFeedback(facilityId.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/facility/Management.vue b/src/views/facility/Management.vue
new file mode 100644
index 0000000..a47e2e6
--- /dev/null
+++ b/src/views/facility/Management.vue
@@ -0,0 +1,16 @@
+<template>
+  <Page title="Management"> </Page>
+</template>
+
+<script setup lang="ts">
+import Page from "@/components/Page.vue";
+import Card from "@/components/Card.vue";
+
+import { useRoute } from "vue-router";
+import { computed } from "vue";
+
+const route = useRoute();
+const facilityId = computed(() => route.params.facility_id as string);
+</script>
+
+<style scoped></style>
diff --git a/src/views/facility/Roster.vue b/src/views/facility/Roster.vue
index 0ba81f6..ccf73b5 100644
--- a/src/views/facility/Roster.vue
+++ b/src/views/facility/Roster.vue
@@ -36,17 +36,25 @@
                   {{ new Date(rosterReq.created_at).toLocaleDateString() }}
                 </td>
                 <td class="px-6 py-1 space-x-4">
-                  <button class="bg-emerald-500 text-white w-8 h-8 rounded hover:bg-opacity-80">
+                  <button
+                    class="bg-emerald-500 text-white w-8 h-8 rounded hover:bg-opacity-80"
+                    @click="acceptRequest(rosterReq.id)"
+                  >
                     <i class="fas fa-fw fa-check"></i>
                   </button>
-                  <button class="bg-red-500 text-white w-8 h-8 rounded hover:bg-opacity-80">
+                  <button
+                    class="bg-red-500 text-white w-8 h-8 rounded hover:bg-opacity-80"
+                    @click="rejectRequest(rosterReq.id)"
+                  >
                     <i class="fas fa-fw fa-xmark"></i>
                   </button>
                 </td>
               </tr>
             </tbody>
           </table>
-          <h3 v-if="filteredRoster.length === 0" class="text-center text-xl font-semibold m-5">No Feedback Found</h3>
+          <h3 v-if="pendingRosterRequests.length === 0" class="text-center text-xl font-semibold m-5">
+            No Feedback Found
+          </h3>
         </div>
       </div>
     </Card>
@@ -61,6 +69,7 @@
             <p class="font-bold text-gray-600 text-sm">Search</p>
             <input
               v-model="search"
+              style="outline: 0"
               class="my-1 py-1 border-b focus:border-b-usa-blue hover:border-b-usa-blue outline-0 focus:border-transparent focus:ring-0 bg-transparent"
               placeholder="Search"
             />
@@ -104,7 +113,12 @@
                   {{ new Date(roster.created_at).toLocaleDateString() }}
                 </td>
                 <td class="px-6 py-1">
-                  <button class="bg-usa-blue text-white px-4 py-1 rounded hover:bg-opacity-80">Edit</button>
+                  <button
+                    class="bg-usa-blue text-white px-4 py-1 rounded hover:bg-opacity-80"
+                    @click="selectUser(roster.cid)"
+                  >
+                    Edit
+                  </button>
                 </td>
               </tr>
             </tbody>
@@ -119,7 +133,7 @@
 <script lang="ts" setup>
 import { useRoute } from "vue-router";
 import useFacilityStore from "@/stores/facility";
-import { computed, onMounted, ref } from "vue";
+import { computed, onMounted, ref, watch } from "vue";
 import { Roster, RosterRequest } from "@/types";
 import Page from "@/components/Page.vue";
 import Spinner from "@/components/animations/Spinner.vue";
@@ -127,7 +141,7 @@ import Card from "@/components/Card.vue";
 
 const route = useRoute();
 const facilityStore = useFacilityStore();
-const facilityId = ref<string>(route.params.facility_id as string);
+const facilityId = computed(() => route.params.facility_id as string);
 
 const fetchingRoster = ref<boolean>(true);
 const activeRoster = ref<Roster[]>([]);
@@ -146,11 +160,28 @@ const filteredRoster = computed(() => {
   });
 });
 
-onMounted(async () => {
-  pendingRosterRequests.value = await facilityStore.fetchRosterRequests(facilityId.value, "pending");
+function acceptRequest(reqId: number): void {
+  facilityStore.patchRosterRequest(facilityId.value, reqId, "accepted");
+}
+
+function rejectRequest(reqId: number): void {
+  facilityStore.patchRosterRequest(facilityId.value, reqId, "rejected");
+}
+
+async function fetchRosters(facId: string): Promise<void> {
+  fetchingRoster.value = true;
+  pendingRosterRequests.value = await facilityStore.fetchRosterRequests(facId, "pending");
   fetchingRosterRequests.value = false;
-  activeRoster.value = await facilityStore.fetchRoster(facilityId.value);
+  activeRoster.value = await facilityStore.fetchRoster(facId);
   fetchingRoster.value = false;
+}
+
+watch(facilityId, async (newFacId) => {
+  await fetchRosters(newFacId);
+});
+
+onMounted(async () => {
+  await fetchRosters(facilityId.value);
 });
 </script>
 
diff --git a/src/views/facility/WebConfig.vue b/src/views/facility/WebConfig.vue
new file mode 100644
index 0000000..a02b8b6
--- /dev/null
+++ b/src/views/facility/WebConfig.vue
@@ -0,0 +1,144 @@
+<template>
+  <Page title="Web Config">
+    <div class="grid grid-cols-3 mx-10">
+      <div class="col-span-1 text-usa-grey space-y-4 mr-10">
+        <h3 class="text-lg font-semibold mt-4 text-usa-blue">Configure {{ facilityId }}'s Web Config Here</h3>
+        <p class="">
+          Set up the web configuration for this facility. This includes the website URL, a short about, API Token, S3
+          configuration, and emails.
+        </p>
+
+        <div>
+          <h5 class="font-bold">API Token</h5>
+          <p>
+            Upon generating your API Token you will not be able to read it again. In order to 'read' your API token you
+            must reset it.
+          </p>
+        </div>
+
+        <div>
+          <h5 class="font-bold">S3 Configuration <span class="font-normal">(Optional)</span></h5>
+          <p>
+            Coming Soon...
+            <!--            If you would like to use S3 for your facility's web configuration, please fill out the following fields, you-->
+            <!--            will be able to upload images and files to your S3 bucket. The default bucket limit is 15GB, if you need-->
+            <!--            more space please contact USA6.-->
+          </p>
+        </div>
+
+        <div>
+          <h5 class="font-bold">Email Configuration <span class="font-normal">(Optional)</span></h5>
+          <p>Coming Soon...</p>
+        </div>
+
+        <div>
+          <h5 class="font-bold">Webhooks <span class="font-normal">(Optional)</span></h5>
+          <p>Coming Soon...</p>
+        </div>
+      </div>
+      <Card v-if="facility" class="col-span-2 -mx-12 md:mx-0">
+        <div class="p-8 space-y-8">
+          <div class="space-y-2">
+            <h5 class="font-semibold">Website URL</h5>
+            <div
+              class="flex items-center px-3 py-2 rounded ring-1 ring-gray-300 focus-within:ring-2 focus-within:ring-usa-blue"
+            >
+              <span class="text-gray-500">https://</span>
+              <input
+                v-model="facility.url"
+                style="outline: 0"
+                type="text"
+                class="flex-1 ml-1 outline-none"
+                placeholder="zdvartcc.org"
+              />
+            </div>
+          </div>
+
+          <div class="space-y-3">
+            <h5 class="font-semibold">About</h5>
+            <textarea
+              type="text"
+              style="outline: 0"
+              class="rounded ring-1 ring-gray-300 drop-shadow-sm px-4 py-2 w-full focus:ring-2 focus:ring-usa-blue"
+              placeholder="A few words about your facility..."
+            />
+          </div>
+
+          <div class="space-y-2">
+            <h5 class="font-semibold">API Key</h5>
+            <div class="flex gap-x-5">
+              <input
+                v-model="apiKey"
+                style="outline: 0"
+                type="text"
+                class="cursor-pointer w-full ml-1 outline-none px-3 py-2 rounded ring-1 ring-gray-300 focus:ring-2 focus:ring-usa-blue"
+                disabled
+                placeholder="*********"
+                @click="copyApiKey()"
+              />
+              <Primary text="Regenerate" color="blue" @click="regenerateApiKey()" />
+            </div>
+            <p class="text-sm text-gray-500">Note: Only viewable after regeneration</p>
+          </div>
+        </div>
+      </Card>
+      <Loader v-else />
+    </div>
+  </Page>
+</template>
+
+<script setup lang="ts">
+import Page from "@/components/Page.vue";
+import Card from "@/components/Card.vue";
+import Primary from "@/components/buttons/Primary.vue";
+
+import { useRoute } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { notify } from "notiwind";
+import useFacilityStore from "@/stores/facility";
+import { Facility } from "@/types";
+import Loader from "@/components/animations/Loader.vue";
+
+const route = useRoute();
+const facilityStore = useFacilityStore();
+const facilityId = computed(() => route.params.facility_id as string);
+
+const facility = ref<Facility | null>(null);
+
+const apiKey = ref<string>("********************************");
+const copyApiKey = (): void => {
+  navigator.clipboard.writeText(apiKey.value);
+  notify(
+    {
+      group: "br-success",
+      title: "API Key Copied",
+      text: "API Key has been copied to your clipboard.",
+    },
+    4000
+  );
+};
+
+const regenerateApiKey = async (): Promise<void> => {
+  const newApiKey = await facilityStore.regenerateApiKey(facilityId.value);
+  apiKey.value = newApiKey;
+  copyApiKey();
+};
+
+async function fetchWebConfig(facId: string): Promise<void> {
+  facility.value = facilityStore.facilities.find((f) => f.id === facId) || null;
+}
+
+watch(facilityId, (newFacId) => {
+  fetchWebConfig(newFacId.toUpperCase());
+});
+
+onMounted(async () => {
+  if (!facilityStore.hasFetched) {
+    await facilityStore.fetchFacilities();
+  }
+
+  await fetchWebConfig(facilityId.value.toUpperCase());
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/management/User.vue b/src/views/management/User.vue
new file mode 100644
index 0000000..9f93637
--- /dev/null
+++ b/src/views/management/User.vue
@@ -0,0 +1,68 @@
+<template>
+  <Page v-if="user" :title="`${user.first_name} ${user.last_name}`">
+    <h3 class="-mt-10 text-xl text-usa-grey font-semibold">{{ user.cid }} - {{ user.controller_rating_string }}</h3>
+    <Card>
+      <div class="flex border-b gap-x-2">
+        <div class="flex px-4 gap-x-2 overflow-y-scroll">
+          <p
+            v-for="(tab, index) in tabs"
+            :key="index"
+            class="py-3 my-auto px-3.5 text-md text-gray-500 cursor-pointer border-b-2 hover:border-usa-red transition"
+            :class="selectedTab == index ? 'border-usa-red text-usa-red font-semibold' : 'border-b-transparent'"
+            @click="changeTab(index)"
+          >
+            {{ tab }}
+          </p>
+        </div>
+      </div>
+      <div class="m-10">
+        <transition mode="out-in">
+          <div v-if="selectedTab == 0" key="0" class="">
+            <div class="grid-cols-5">
+              <div class="col-span-5 flex justify-between mx-24">
+                <h3><strong>Email:</strong> {{ user.email }}</h3>
+                <h3><strong>Rating:</strong> {{ user.controller_rating_string }} ()</h3>
+                <h3><strong>Home Facility:</strong> {{ user.controller_rating_string }} ()</h3>
+                <h3><strong>Visiting:</strong> {{ user.controller_rating_string }} ()</h3>
+              </div>
+            </div>
+          </div>
+          <div v-else-if="selectedTab == 1" key="1"></div>
+          <div v-else-if="selectedTab == 2" key="2"></div>
+          <div v-else-if="selectedTab == 3" key="3"></div>
+        </transition>
+      </div>
+    </Card>
+  </Page>
+  <Loader v-else />
+</template>
+<script lang="ts" setup>
+import Card from "@/components/Card.vue";
+import Page from "@/components/Page.vue";
+
+import { onMounted, ref } from "vue";
+import { User } from "@/types";
+import useUserStore from "@/stores/user";
+import { useRoute } from "vue-router";
+import Loader from "@/components/animations/Loader.vue";
+
+const userStore = useUserStore();
+const route = useRoute();
+
+const cid = ref<number>(parseInt(route.params.cid as string, 10));
+const user = ref<User | null>(null);
+
+const tabs = ref<string[]>(["Overview", "Rating", "Action Log", "Disciplinary Log"]);
+const selectedTab = ref<number>(0);
+
+const changeTab = (tab: number): void => {
+  selectedTab.value = tab;
+  window.location.hash = tabs.value[tab].toLowerCase();
+};
+
+onMounted(async () => {
+  user.value = await userStore.fetchUser(cid.value);
+});
+</script>
+
+<style scoped></style>
diff --git a/src/views/partials/Sidebar.vue b/src/views/partials/Sidebar.vue
index ce96b66..9d8decc 100644
--- a/src/views/partials/Sidebar.vue
+++ b/src/views/partials/Sidebar.vue
@@ -30,7 +30,7 @@
           v-if="link.subLinks"
           class="flex rounded p-3 hover:bg-white text-usa-white hover:bg-opacity-20 hover:text-usa-red items-center justify-between my-0.5 w-full"
           active-class="bg-white bg-opacity-10 font-bold text-usa-red"
-          @click="toggleSubLink(link.title)"
+          @click="toggleSubLink(link.title + idx)"
         >
           <div class="flex items-center gap-x-4">
             <span class="w-4 mx-auto text-center">
@@ -42,7 +42,7 @@
           <span v-show="!showSubLinks.includes(link.title)"><i class="fas fa-chevron-up"></i></span>
         </button>
       </div>
-      <div v-if="showSubLinks.includes(link.title)">
+      <div v-if="showSubLinks.includes(link.title + idx)">
         <div
           v-for="(subLink, index) in link.subLinks"
           :key="index"