diff --git a/app/training_api.py b/app/training_api.py
index 2512852..d2fdd79 100644
--- a/app/training_api.py
+++ b/app/training_api.py
@@ -81,6 +81,11 @@ async def retrieve_flags(self, request):
                 logging.error(e)
         return web.json_response(dict(badges=[b.display for b in badges]))
 
+    async def retrieve_certs(self, request):
+        access = dict(access=tuple(await self.auth_svc.get_permissions(request)))
+        certifications = await self.data_svc.locate('certifications', match=access)
+        return web.json_response(dict(certificates=[cert.display for cert in certifications]))
+
     async def reset_flag(self, request):
         """
         Allows cert takers to reset the latest flag if something went wrong with running the automatic operation.
diff --git a/gui/views/training.vue b/gui/views/training.vue
new file mode 100644
index 0000000..83013ad
--- /dev/null
+++ b/gui/views/training.vue
@@ -0,0 +1,531 @@
+<script setup>
+import { ref, watch, onMounted, inject, onBeforeUnmount } from "vue";
+const $api = inject("$api");
+
+const selectedCert = ref("");
+const selectedBadge = ref("");
+const badgeList = ref([]);
+const visibleFlagList = ref([]);
+const completedFlags = ref(0);
+const completedBadges = ref(0);
+const flagList = ref([]);
+const completedCertificate = ref(false);
+const certificateCode = ref("");
+const certificateCodeList = ref([]);
+const end = ref(0);
+const certificates = ref([
+  { name: "User Certificate" },
+  { name: "Blue Certificate" },
+]);
+let updateInterval = ref();
+
+// Simulating Alpine's initTraining with Vue's onMounted
+onBeforeUnmount(() => {
+  if (updateInterval) clearInterval(updateInterval);
+});
+
+onMounted(async () => {
+  const res = await $api.get("/plugin/training/certs");
+  certificates.value = res.data.certificates;
+  let confettiScript = document.createElement("script");
+  confettiScript.setAttribute(
+    "src",
+    "https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"
+  );
+  document.head.appendChild(confettiScript);
+  if (updateInterval) clearInterval(updateInterval);
+  updateInterval = setInterval(async () => {
+    getTraining();
+  }, "3000");
+});
+
+watch(selectedCert, (newValue) => {
+  getTraining();
+});
+
+watch(selectedBadge, (newValue) => {
+  updateVisibleFlags(newValue);
+});
+
+const getTraining = () => {
+  if (!selectedCert.value) return;
+  $api
+    .post("/plugin/training/flags", {
+      name: selectedCert.value,
+      answers: {},
+    })
+    .then((data) => {
+      getFlags(data.data);
+      updateVisibleFlags(selectedBadge.value);
+      checkCertificateCompletion();
+    })
+    .catch((e) => console.error(e));
+};
+
+function getEmptyDataObject() {
+  return {
+    flagList: [],
+    badgeList: [],
+    completedFlags: 0,
+    completedBadges: 0,
+    certificateCodeList: [],
+  };
+}
+
+const updateVisibleFlags = (badge) => {
+  if (badge) {
+    selectedBadge.value = badge;
+    visibleFlagList.value = flagList.value.filter(
+      (flag) => flag.badge_name === selectedBadge.value.name
+    );
+  } else {
+    visibleFlagList.value = flagList.value;
+  }
+};
+
+function isCardActive(index) {
+  if (selectedBadge.value) {
+    const badgeIndex = badgeList.value.findIndex(
+      (badge) => badge.name === selectedBadge.value.name
+    );
+    if (badgeIndex > 0) {
+      const earlierFlags = flagList.value.filter(
+        (flag) => flag.badge_name === badgeList.value[badgeIndex - 1].name
+      );
+      if (!earlierFlags[earlierFlags.length - 1].completed) {
+        return false;
+      }
+    }
+  }
+
+  return (
+    (index === 0 &&
+      visibleFlagList.value.length > 0 &&
+      !visibleFlagList.value[0].completed) ||
+    (visibleFlagList.value[index] &&
+      !visibleFlagList.value[index].completed &&
+      visibleFlagList.value[index - 1].completed)
+  );
+}
+
+function checkCertificateCompletion() {
+  if (completedBadges.value === badgeList.value.length) {
+    completedCertificate.value = true;
+    let code = certificateCodeList.value.sort(
+      (a, b) => a.toString().length - b.toString().length
+    );
+    code = code.join(" ");
+    certificateCode.value = btoa(code);
+
+    const duration = 10000;
+    if (end.value === 0) end.value = Date.now() + duration; // spray confetti for 10 seconds
+    playConfetti();
+  }
+}
+function compareFlags(currentBadge, iconSrc, flag, flagIndex) {
+  const updatedFlag = {
+    ...flag,
+    badge_name: currentBadge.name,
+    badge_icon: iconSrc,
+    cert_name: selectedCert.value,
+    showMore: false,
+  };
+  if (flagList.value[flagIndex]) {
+    const previousFlag = flagList.value[flagIndex];
+    if (previousFlag.name === updatedFlag.name) {
+      updatedFlag.showMore = previousFlag.showMore;
+    }
+  }
+  return updatedFlag;
+}
+function updateFlagData(newData) {
+  if (newData) {
+    flagList.value = newData.flagList;
+    badgeList.value = newData.badgeList;
+    completedFlags.value = newData.completedFlags;
+    completedBadges.value = newData.completedBadges;
+    certificateCodeList.value = newData.certificateCodeList;
+  }
+}
+
+async function getFlags(data) {
+  if (!data) return;
+  const newData = getEmptyDataObject();
+  let runningFlagIndex = 0;
+
+  // Fetch flag from API and compares it to previous data,
+  // rather than completely override (for variables like showMore)
+  data.badges.forEach((badge) => {
+    const iconSrc = `/plugin/training/assets/img/badges/${badge.name}.png`;
+    let isBadgeCompleted = false;
+    let badgeCompletedFlags = 0;
+
+    badge.flags.forEach((flag) => {
+      const currentFlag = compareFlags(badge, iconSrc, flag, runningFlagIndex);
+      if (currentFlag.completed) badgeCompletedFlags += 1;
+      newData.flagList.push(currentFlag);
+      newData.certificateCodeList.push(currentFlag.code);
+      runningFlagIndex += 1;
+    });
+
+    if (badgeCompletedFlags === badge.flags.length) {
+      newData.completedBadges += 1;
+      isBadgeCompleted = true;
+    }
+
+    newData.badgeList.push({
+      ...badge,
+      completed: isBadgeCompleted,
+      icon_src: iconSrc,
+    });
+    // Keep selected badge so it doesn't get overriden by new data
+    if (selectedBadge.value.name === badge.name) selectedBadge.value = badge;
+    newData.completedFlags += badgeCompletedFlags;
+  });
+  updateFlagData(newData);
+}
+function copyCode() {
+  document.getElementById("certificatecode").select();
+  document.execCommand("copy");
+  // toast('Code copied', true);
+}
+
+function playConfetti() {
+  const canvas = document.getElementById("confettiCanvas");
+  if (!canvas || !confetti) return;
+  // eslint-disable-next-line
+  const confettiCanon = confetti.create(canvas, {
+    resize: true,
+    useWorker: true,
+  });
+
+  const frame = () => {
+    // launch a few confetti from the left edge
+    confettiCanon({
+      particleCount: 100,
+      angle: 60,
+      spread: 55,
+      origin: { x: 0 },
+    });
+    // and launch a few from the right edge
+    confettiCanon({
+      particleCount: 100,
+      angle: 120,
+      spread: 55,
+      origin: { x: 1 },
+    });
+  };
+
+  // keep going until we are out of time
+  if (Date.now() < end.value) {
+    requestAnimationFrame(frame);
+  }
+}
+</script>
+
+<template lang="pug">
+#trainingPage.section-profile
+  template(v-if="completedCertificate")
+    canvas#confettiCanvas
+
+  .z-index-1
+    div
+      div
+        h2 Training
+      hr
+
+    form
+      #select-certificate.field.has-addons
+        label.label Select a certificate &nbsp;&nbsp;&nbsp;
+        .control.is-expanded
+          .select.is-small.is-fullwidth
+            select.has-text-centered(v-model="selectedCert")
+              option(disabled selected value="") Select a certificate 
+              option(v-for="cert in certificates" :value="cert.name" :key="cert.name") {{ cert.name }}
+
+    template(v-if="completedCertificate")
+      .content.is-flex.is-align-items-center.is-flex-direction-column.mt-4
+        h3 🎉 Certificate complete! 🎉
+        .field.has-addons
+          .control
+            input#certificatecode.input.is-small(type="text" readonly v-model="certificateCode" aria-label="Certificate code")
+          .control
+            a.button.is-small(@click="copyCode()")
+              span.icon
+                font-awesome-icon(icon="far fa-copy")
+              span Copy
+        p Congrats! Fill out the form to validate your code and get a certificate of completion.
+        a.button.fancy-button(href="https://forms.office.com/g/sYRNDuxCjC" target="_blank" rel="noopener") Get your certificate 🎓 
+
+    template(v-if="badgeList")
+      .is-flex.is-justify-content-space-evenly.mt-3
+        template(v-for="(badge, index) in badgeList" :key="index")
+          button.badge-container-button(@click="(selectedBadge === badge) ? selectedBadge = '' : selectedBadge = badge" :class="{ 'selected-badge': selectedBadge.name === badge.name }")
+            span.is-flex.is-flex-direction-column.is-justify-content-center.is-align-items-center.p-2
+              span.badge-icon-container(:class="badge.completed ? 'badge-completed' : ''")
+                svg(xmlns="http://www.w3.org/2000/svg" fill="current" viewBox="0 0 24 24" stroke="currentColor")
+                  path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z")
+              img(:alt="badge.name" class="badge-icon-img" onerror="this.src='/plugin/training/assets/img/badges/defaultlock.png'" :src="badge.icon_src")
+            span.badge-text.hover.bg-caldera-primary.rounded(:class="{ 'badge-completed-text': badge.completed }")  {{badge.name}}
+
+    .has-text-centered.mt-4.mb-4
+      template(v-for="(flag, index) in visibleFlagList" :key="index")
+        span.icon
+          font-awesome-icon(:icon="flag.completed ? 'fas fa-flag' : 'far fa-flag'")
+
+    .flag-card-container
+      template(v-for="(flag, index) in visibleFlagList" :key="flag.name")
+        .flag-card.is-flex.is-flex-direction-column.rounded
+          .flag-card-content.is-flex.is-flex-direction-column.overflow-hidden(:class="{ 'flag-card-content-active': isCardActive(index), 'flag-show-more': flag.showMore }")
+            .flag-card-title.is-flex.is-justify-content-space-evenly.is-align-items-center(:class="{ 'flag-card-title-active': flag.completed || isCardActive(index) }")
+              .is-flex.is-justify-content-start.is-align-items-center.flag-card-title-name
+                span.icon(:class="flag.completed ? 'flag-icon-completed' : ''")
+                  font-awesome-icon(:icon="flag.completed ? 'fas fa-flag' : 'far fa-flag'")
+                p {{ flag.name }}
+              a.icon.has-tooltip-left.solution-guide-link(:class="flag.has_solution_guide ? '' : 'hidden'" :href="`/plugin/training/solution-guides/certificates/${flag.cert_name}/badges/${flag.badge_name}/flags/${flag.name}`" target="_blank" data-tooltip="Solution Guide")
+                font-awesome-icon(icon="far fa-circle-question")
+              .is-flex.is-justify-content-center.is-align-items-center.flag-card-title-badge
+                span.flag-badge-icon-container
+                  svg(xmlns="http://www.w3.org/2000/svg" fill="current" viewBox="0 0 24 24" stroke="currentColor")
+                    path(stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z")
+                img(:alt="flag.badge_name" class="badge-icon-img" onerror="this.src='/plugin/training/assets/img/badges/defaultlock.png'" :src="flag.badge_icon")
+            .flag-card-text
+              div
+                .is-flex.is-flex-direction-column.is-justify-content-center.has-text-left
+                  p.has-text-weight-bold() {{ flag.challenge }}
+                  p {{ flag.extra_info }}
+                  template(v-if="flag.code.includes('text-entry')")
+                    span
+                      label(:for="flag.code") Write text here:
+                      input(:disabled="flag.completed" class="text-colors-black pl-1 pr-2" :id="flag.code" placeholder="type here" @input="onTextInput")
+          .flag-show-more-button.is-flex.is-justify-content-center(@click="flag.showMore = !flag.showMore" :class="{ 'flag-show-more-active': isCardActive(index) }")
+            span.icon.is-small
+              font-awesome-icon(:icon="flag.showMore ? 'fas fa-chevron-up' : 'fas fa-chevron-down'")
+</template>
+
+<style scoped>
+#select-certificate {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+#trainingPage .z-index-1 * {
+  z-index: 1;
+}
+
+#trainingPage canvas {
+  position: fixed;
+  z-index: 0;
+  width: 85%;
+  height: 100%;
+  top: 0;
+}
+
+#trainingPage .overflow-hidden {
+  overflow: hidden;
+}
+
+#trainingPage .hover\:bg-caldera-primary:hover {
+  background-color: var(--primary-color);
+}
+
+#trainingPage .rounded {
+  border-radius: 4px !important;
+}
+
+#trainingPage .solution-guide-link {
+  color: white;
+  cursor: pointer;
+}
+
+#trainingPage .hidden {
+  pointer-events: none;
+  color: grey;
+}
+
+#trainingPage .badge-container {
+  margin: 0.75rem 0;
+}
+
+#trainingPage .badge-container-button {
+  color: var(--color-white);
+  width: 5rem !important;
+  padding: 0.85rem 0.25rem 0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  cursor: pointer;
+  background-color: initial;
+  border: none;
+}
+
+#trainingPage .badge-container-button:hover {
+  background-color: var(--primary-color);
+}
+
+#trainingPage .badge-icon-container {
+  z-index: 0;
+  width: 3.5rem !important;
+  fill: currentColor;
+  position: absolute;
+  opacity: 0.8;
+}
+
+#trainingPage .badge-icon-img {
+  /*Important styles to override those from shared.css*/
+  width: 20px !important;
+  height: auto !important;
+  border: none !important;
+  background-color: initial !important;
+  z-index: 10;
+  max-width: 100%;
+  display: block;
+  border-radius: 0;
+  margin-bottom: 0;
+}
+
+#trainingPage .badge-completed-text {
+  background-color: var(--color-complete);
+  color: var(--color-gray) !important;
+}
+
+#trainingPage .badge-text {
+  text-decoration: none;
+  color: var(--color-white);
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  margin-top: 1rem;
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+#trainingPage .selected-badge {
+  font-weight: bold;
+  background-color: var(--primary-color);
+  border-radius: 5px;
+}
+
+#trainingPage .flag-card-container {
+  display: flex;
+  justify-content: space-evenly;
+  flex-flow: row wrap;
+  box-sizing: border-box;
+}
+
+#trainingPage .flag-card {
+  box-sizing: border-box;
+  margin: 0.25rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  background-color: initial !important;
+}
+
+@media (min-width: 640px) {
+  #trainingPage .flag-card {
+    width: 100%;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+@media (min-width: 768px) {
+  #trainingPage .flag-card {
+    width: 33.333333%;
+    font-size: 1rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  #trainingPage .flag-card {
+    width: 24%;
+    font-size: 0.9rem;
+    line-height: 2rem;
+  }
+}
+
+#trainingPage .flag-icon-completed {
+  color: gold;
+}
+
+#trainingPage .flag-card-content {
+  height: 18rem;
+  width: 100%;
+  background-color: #272727;
+  border-radius: 4px 4px 0 0;
+}
+
+#trainingPage .flag-show-more {
+  min-height: 18rem;
+  height: auto;
+}
+
+#trainingPage .flag-card-title {
+  padding: 5px;
+  background-color: #202020;
+  color: var(--color-white);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  text-align: left;
+}
+
+#trainingPage .flag-card-title-active {
+  background-color: var(--primary-color);
+}
+
+#trainingPage .flag-card-title div:first-child span {
+  width: 1.5rem;
+  margin-right: 0.5rem;
+}
+
+#trainingPage .flag-card:not(.flag-card-completed) .flag-card-title svg {
+  opacity: 0.5;
+}
+
+#trainingPage .flag-card-title-name {
+  width: 83.333333%;
+}
+
+#trainingPage .flag-card-title-badge {
+  width: 16.666667%;
+}
+
+#trainingPage .flag-badge-icon-container {
+  z-index: 0;
+  fill: currentColor;
+  position: absolute;
+  width: 35px;
+  padding-top: 6px;
+}
+
+#trainingPage .flag-card-text {
+  overflow-wrap: break-word;
+  padding: 0 0.5rem;
+  background-color: #272727;
+}
+
+#trainingPage .flag-card-content-active {
+  border: 2px solid var(--primary-color);
+  border-bottom: none;
+}
+
+#trainingPage .flag-show-more-button {
+  padding: 0.5rem;
+  cursor: pointer;
+  background-color: #272727;
+  border-radius: 0 0 4px 4px;
+}
+
+#trainingPage .flag-show-more-active {
+  border: 2px solid var(--primary-color);
+  border-top: none;
+}
+
+#trainingPage .flag-show-more-button span {
+  width: 1rem;
+}
+</style>
diff --git a/hook.py b/hook.py
index d809b33..e87c11d 100644
--- a/hook.py
+++ b/hook.py
@@ -21,8 +21,9 @@ async def enable(services):
 
     training_api = TrainingApi(services)
     app = services.get('app_svc').application
-    app.router.add_static('/training', 'plugins/training/static/', append_version=True)
+    app.router.add_static('/plugin/training/assets', 'plugins/training/static/', append_version=True)
     app.router.add_route('GET', '/plugin/training/gui', training_api.splash)
+    app.router.add_route('GET', '/plugin/training/certs', training_api.retrieve_certs)
     app.router.add_route('POST', '/plugin/training/flags', training_api.retrieve_flags)
     app.router.add_route('POST', '/plugin/training/reset_flag', training_api.reset_flag)