diff --git a/.gitignore b/.gitignore
index df708e2..cefc70d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 .env
 /certs/*
+/vite.config.d.ts
+/vite.config.js
diff --git a/Dockerfile b/Dockerfile
index 4a2cd8d..67cf067 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -3,6 +3,8 @@ ARG build_cmd="build"
 FROM node:lts-alpine as build
 ARG build_cmd
 
+ENV VITE_API_URL=https://api.vatusa.dev
+
 WORKDIR /app
 COPY package*.json ./
 COPY . .
diff --git a/src/App.vue b/src/App.vue
index 2d17720..a314aa5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,29 @@
 <template>
-  <div class="flex">
-    <Sidebar class="hidden lg:block" />
-    <div class="w-full h-screen bg-gray-100">
-      <Header />
-      <router-view />
+  <FadeOut>
+    <div v-if="!userStore.isLoggedIn" key="element1" class="flex items-center justify-center h-screen bg-usa-blue">
+      <Loader />
     </div>
-  </div>
+    <div v-else key="element2" class="flex">
+      <Sidebar class="hidden lg:block" />
+      <div class="w-full h-screen bg-gray-100">
+        <Header />
+        <router-view />
+      </div>
+    </div>
+  </FadeOut>
 </template>
 
 <script setup lang="ts">
 import apiUrl from "@/utils/api";
-import Header from "@/views/partials/Header.vue";
-import Sidebar from "@/views/partials/Sidebar.vue";
 import useUserStore from "@/stores/user";
 import { onMounted } from "vue";
 
+// Components
+import FadeOut from "@/components/animations/FadeOut.vue";
+import Header from "@/views/partials/Header.vue";
+import Loader from "@/components/animations/Loader.vue";
+import Sidebar from "@/views/partials/Sidebar.vue";
+
 const userStore = useUserStore();
 
 onMounted(async () => {
diff --git a/src/assets/logo-circle.png b/src/assets/logo-circle.png
new file mode 100644
index 0000000..a10d127
Binary files /dev/null and b/src/assets/logo-circle.png differ
diff --git a/src/components/animations/FadeIn.vue b/src/components/animations/FadeIn.vue
new file mode 100644
index 0000000..f3d6b22
--- /dev/null
+++ b/src/components/animations/FadeIn.vue
@@ -0,0 +1,56 @@
+<template>
+  <div
+    ref="viewableTarget"
+    class="w-full"
+    :class="['transition-opacity duration-500 ease-in', isViewable ? 'opacity-100' : 'opacity-0']"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+
+interface Props {
+  threshold?: number;
+  delay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  threshold: 0.25,
+  delay: 0,
+});
+
+const isViewable = ref(false);
+const viewableTarget = ref<HTMLElement | null>(null);
+
+const onIntersection: IntersectionObserverCallback = (entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      setTimeout(
+        () => {
+          isViewable.value = true;
+        },
+        (props.delay + 0.05) * 1000
+      );
+    }
+  });
+};
+
+const setupObserver = (): void => {
+  const options: IntersectionObserverInit = {
+    root: null,
+    rootMargin: "0px",
+    threshold: props.threshold,
+  };
+
+  const observer = new IntersectionObserver(onIntersection, options);
+  if (viewableTarget.value) {
+    observer.observe(viewableTarget.value);
+  }
+};
+
+onMounted(() => {
+  setupObserver();
+});
+</script>
diff --git a/src/components/animations/FadeOut.vue b/src/components/animations/FadeOut.vue
new file mode 100644
index 0000000..4aee051
--- /dev/null
+++ b/src/components/animations/FadeOut.vue
@@ -0,0 +1,19 @@
+<template>
+  <transition name="fade" mode="out-in">
+    <slot></slot>
+  </transition>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/animations/Loader.vue b/src/components/animations/Loader.vue
new file mode 100644
index 0000000..9b4cc4b
--- /dev/null
+++ b/src/components/animations/Loader.vue
@@ -0,0 +1,24 @@
+<template>
+  <div
+    class="flex justify-center items-center"
+    :style="{ width: `${props.width}px`, height: `${props.height}px`, background: props.background }"
+  >
+    <img src="@/assets/logo-circle.png" class="w-20 animate-spin" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface Props {
+  width?: number;
+  height?: number;
+  background?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: 200,
+  height: 200,
+  background: "#052344",
+});
+</script>
+
+<style scoped></style>
diff --git a/src/components/animations/Spinner.vue b/src/components/animations/Spinner.vue
new file mode 100644
index 0000000..b2204ef
--- /dev/null
+++ b/src/components/animations/Spinner.vue
@@ -0,0 +1,26 @@
+<template>
+  <svg
+    class="animate-spin -ml-1 mr-3 h-5 w-5"
+    :class="props.dark ? 'text-white' : 'text-gray-500'"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { defineProps } from "vue";
+
+const props = defineProps<{
+  dark?: boolean;
+}>();
+</script>
+
+<style scoped></style>
diff --git a/src/components/profile/Profile.vue b/src/components/profile/Profile.vue
index 7a6c2a7..60f01db 100644
--- a/src/components/profile/Profile.vue
+++ b/src/components/profile/Profile.vue
@@ -70,7 +70,7 @@
   <div class="mt-20 border-b">
     <h3 class="font-bold">Facility Details</h3>
   </div>
-  <div v-if="!!rosters" class="m-5">
+  <div v-if="!!user?.rosters" class="m-5">
     <div class="grid grid-cols-4 gap-x-5 border-b font-semibold">
       <div class="col-span-1 flex">Facility</div>
       <div class="col-span-1 flex">Type</div>
@@ -78,7 +78,7 @@
       <div class="col-span-1 flex">Exit Date</div>
     </div>
     <div
-      v-for="(roster, idx) in rosters"
+      v-for="(roster, idx) in user.rosters"
       :key="idx"
       class="grid grid-cols-4 gap-x-5 gap-y-10"
       :class="idx % 2 == 0 ? 'bg-usa-white' : 'bg-white'"
@@ -102,11 +102,10 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-import { User, Roster } from "@/types";
+import { User } from "@/types";
 
 const props = defineProps<{
   user: User | null;
-  rosters: Roster[] | null;
 }>();
 
 const editableUser = ref<User | null>(props.user);
diff --git a/src/data/facilities.ts b/src/data/facilities.ts
deleted file mode 100644
index f88d224..0000000
--- a/src/data/facilities.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Facility } from "@/types";
-
-const Facilities: Facility[] = [
-  {
-    id: "ZAB",
-    name: "Albuquerque ARTCC",
-  },
-  {
-    id: "ZDV",
-    name: "Denver ARTCC",
-  },
-  {
-    id: "ZLC",
-    name: "Salt Lake ARTCC",
-  },
-];
-
-export default Facilities;
diff --git a/src/stores/facility.ts b/src/stores/facility.ts
new file mode 100644
index 0000000..71a63e9
--- /dev/null
+++ b/src/stores/facility.ts
@@ -0,0 +1,44 @@
+import { defineStore } from "pinia";
+import { API } from "@/utils/api";
+import { Facility } from "@/types";
+
+interface FacilityState {
+  facilities: Facility[] | null;
+  error: string | null;
+  fetching: boolean;
+  hasFetched: boolean;
+  loading: Promise<void> | null;
+}
+
+const useFacilityStore = defineStore({
+  id: "facility",
+  state: () =>
+    ({
+      facilities: null,
+      error: null,
+      fetching: false,
+      hasFetched: false,
+    }) as FacilityState,
+  getters: {
+    getFacility: (state) => (id: string) => {
+      if (!state.facilities) return null;
+      return state.facilities.find((facility) => facility.id === id) || null;
+    },
+  },
+  actions: {
+    async fetchFacilities(): Promise<void> {
+      this.fetching = true;
+      try {
+        const { data } = await API.get("/v3/facility");
+        this.facilities = data;
+      } catch (e) {
+        this.facilities = [];
+      } finally {
+        this.fetching = false;
+        this.hasFetched = true;
+      }
+    },
+  },
+});
+
+export default useFacilityStore;
diff --git a/src/stores/user.ts b/src/stores/user.ts
index fe3a184..92d7491 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -8,16 +8,19 @@ interface UserState {
   error: string | null;
   fetching: boolean;
   hasFetched: boolean;
+  hasFetchedRosters: boolean;
   loading: Promise<void> | null;
 }
 
-const useUserStore = defineStore("user", {
+const useUserStore = defineStore({
+  id: "user",
   state: () =>
     ({
       user: null,
       error: null,
       fetching: false,
       hasFetched: false,
+      hasFetchedRosters: false,
     }) as UserState,
   getters: {
     isLoggedIn: (state) => !!state.user,
@@ -27,7 +30,7 @@ const useUserStore = defineStore("user", {
     },
   },
   actions: {
-    async fetchUser() {
+    async fetchUser(): Promise<void> {
       this.fetching = true;
       try {
         const { data } = await API.get("/v3/user");
@@ -45,6 +48,32 @@ const useUserStore = defineStore("user", {
         this.hasFetched = true;
       }
     },
+    async fetchRosters(): Promise<void> {
+      if (!this.isLoggedIn) return;
+      try {
+        const { data } = await API.get(`/v3/user/${this.user?.cid}/roster`);
+        this.user!.rosters = data;
+      } catch (e) {
+        this.user!.rosters = [];
+      } finally {
+        this.hasFetchedRosters = true;
+      }
+    },
+    async logout(): Promise<void> {
+      this.fetching = true;
+      try {
+        await API.get("/v3/user/logout");
+        this.user = null;
+        this.hasFetched = false;
+        this.hasFetchedRosters = false;
+        window.location.href = "https://vatusa.net";
+      } catch (e) {
+        // TODO - throw error notification
+        console.log(e);
+      } finally {
+        this.fetching = false;
+      }
+    },
   },
 });
 
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 3061158..b5667f1 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -49,11 +49,20 @@ export interface Roster {
   home: boolean;
   visiting: boolean;
   status: string;
+  roles: Role[];
   created_at: string;
   deleted_at?: string;
 }
 
+export interface Role {
+  role: string;
+  facility_id: string;
+  roster_id: number;
+  created_at: string;
+}
+
 export interface Facility {
   id: string;
   name: string;
+  url: string;
 }
diff --git a/src/utils/facility.ts b/src/utils/facility.ts
deleted file mode 100644
index 4777d1e..0000000
--- a/src/utils/facility.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Facilities from "@/data/facilities";
-import type { Facility } from "@/types";
-
-const getFacility = (id: string): Facility | undefined => {
-  return Facilities.find((facility) => facility.id === id);
-};
-
-export default getFacility;
diff --git a/src/views/Facility.vue b/src/views/Facility.vue
index ba85f46..7d2e317 100644
--- a/src/views/Facility.vue
+++ b/src/views/Facility.vue
@@ -4,16 +4,27 @@
       <div class="px-4 border-b">
         <h3 class="font-bold">Facilities you've joined</h3>
       </div>
-      <div class="m-5">
-        <p v-if="rosters.length == 0" class="text-gray-500">You haven't joined any facilities yet.</p>
+      <div v-if="!userStore.hasFetchedRosters || !facilityStore.hasFetched" class="m-5">
+        <Spinner />
+      </div>
+      <div v-else class="m-5">
+        <p v-if="!userStore.user?.rosters" class="text-gray-500">You haven't joined any facilities yet.</p>
         <div v-else class="grid gap-y-5 lg:grid-cols-2 gap-x-20">
-          <div v-for="(roster, idx) in rosters" :key="idx" class="border-b">
+          <div v-for="(roster, idx) in userStore.user!.rosters" :key="idx" class="border-b">
             <div class="flex justify-between">
               <div>
                 <div>
                   <span class="font-semibold text-xl">{{ roster.facility }}</span>
                   <span v-if="roster.status == 'loa'" class="font-semibold text-xl text-yellow-500 ml-2">(LOA)</span>
-                  - {{ getFacility(roster.facility)?.name }}
+                  - {{ facilityStore.getFacility(roster.facility)?.name }}
+                  <a
+                    v-if="facilityStore.getFacility(roster.facility)?.url"
+                    class="mx-1"
+                    :href="facilityStore.getFacility(roster.facility)?.url"
+                    target="blank"
+                  >
+                    <i class="fa-solid fa-arrow-up-right-from-square text-gray-500"></i>
+                  </a>
                 </div>
                 <p v-if="roster.home" class="text-sm text-green-500">Home</p>
                 <p v-else-if="roster.visiting" class="text-sm text-blue-500">Visiting</p>
@@ -24,7 +35,10 @@
             <div class="my-2 space-y-1">
               <div>
                 <h5 class="font-semibold">Roles:</h5>
-                <p class="">TA, AWM</p>
+                <div class="flex gap-x-2">
+                  <span v-if="roster.roles.length == 0" class="text-gray-700">No roles</span>
+                  <span v-for="(role, idx) in roster.roles" :key="idx" class="text-gray-700"> {{ role.role }} </span>
+                </div>
               </div>
               <div>
                 <h5 class="font-semibold">Actions:</h5>
@@ -48,47 +62,26 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
-import { Roster } from "@/types";
+import { onMounted } from "vue";
+import useFacilityStore from "@/stores/facility.ts";
+import useUserStore from "@/stores/user.ts";
 
 // Components
 import Page from "@/components/Page.vue";
 import Card from "@/components/Card.vue";
+import Spinner from "@/components/animations/Spinner.vue";
 
-import getFacility from "../utils/facility";
+const facilityStore = useFacilityStore();
+const userStore = useUserStore();
 
-const rosters = ref<Roster[]>([
-  {
-    id: 1,
-    cid: 1,
-    facility: "ZAB",
-    operating_initials: "RP",
-    home: true,
-    visiting: false,
-    status: "active",
-    created_at: "2021-08-01T00:00:00.000Z",
-  },
-  {
-    id: 2,
-    cid: 1,
-    facility: "ZDV",
-    operating_initials: "RP",
-    home: false,
-    visiting: true,
-    status: "active",
-    created_at: "2021-08-01T00:00:00.000Z",
-  },
-  {
-    id: 3,
-    cid: 1,
-    facility: "ZLC",
-    operating_initials: "RO",
-    home: false,
-    visiting: true,
-    status: "loa",
-    created_at: "2021-08-01T00:00:00.000Z",
-  },
-]);
+onMounted(() => {
+  if (!facilityStore.hasFetched) {
+    facilityStore.fetchFacilities();
+  }
+  if (!userStore.hasFetchedRosters) {
+    userStore.fetchRosters();
+  }
+});
 </script>
 
 <style scoped></style>
diff --git a/src/views/Profile.vue b/src/views/Profile.vue
index bd5c595..8f0ec08 100644
--- a/src/views/Profile.vue
+++ b/src/views/Profile.vue
@@ -69,8 +69,8 @@ watch(currentHashTab, (newTab) => {
 
 // Initial check on component mount
 onMounted(() => {
-  console.log(currentHashTab.value);
   selectedTab.value = currentHashTab.value;
+  userStore.fetchRosters();
 });
 </script>
 
diff --git a/src/views/partials/Header.vue b/src/views/partials/Header.vue
index c8f852f..17167bf 100644
--- a/src/views/partials/Header.vue
+++ b/src/views/partials/Header.vue
@@ -66,7 +66,7 @@
             <a class="cursor-pointer">
               <p class="font-bold text-md py-2.5 px-4 hover:bg-gray-100 text-gray-600">Help Center</p>
             </a>
-            <a class="cursor-pointer">
+            <a class="cursor-pointer" @click="userStore.logout()">
               <p class="font-bold text-md py-2.5 px-4 hover:bg-gray-100 text-gray-600">Sign Out</p>
             </a>
           </ul>