diff --git a/website/client/src/components/group-plans/groupPlanSelectionModal.vue b/website/client/src/components/group-plans/groupPlanSelectionModal.vue
index 125f8f05dc..4a5acd9464 100644
--- a/website/client/src/components/group-plans/groupPlanSelectionModal.vue
+++ b/website/client/src/components/group-plans/groupPlanSelectionModal.vue
@@ -1,466 +1,466 @@
-<template>
-  <b-modal
-    id="group-plan-selection"
-    :hide-footer="true"
-    :hide-header="true"
-    size="md"
-    @show="loadData"
-    @hide="onHide"
-  >
-    <div class="selection-modal">
-      <div class="modal-header-row">
-        <h2 class="title">
-          {{ $t('chooseAnOption') }}
-        </h2>
-        <div class="header-actions">
-          <span
-            class="cancel-text"
-            @click="close"
-          >
-            {{ $t('cancel') }}
-          </span>
-          <button
-            class="btn btn-primary next-button"
-            :class="{ disabled: !selectedOption }"
-            :disabled="!selectedOption"
-            @click="continueFlow"
-          >
-            {{ $t('next') }}
-          </button>
-        </div>
-      </div>
-
-      <div
-        v-if="loading"
-        class="loading-container"
-      >
-        <div class="spinner-border text-secondary"></div>
-      </div>
-
-      <template v-else>
-        <div
-          v-if="hasUpgradeableGroups"
-          class="section-header"
-        >
-          {{ $t('upgradeExistingGroup') }}
-        </div>
-
-        <selectable-card
-          v-for="group in upgradeableGuilds"
-          :key="group._id"
-          class="option-card"
-          :selected="isSelected(group)"
-          @click="selectOption(group)"
-        >
-          <div class="option-content">
-            <div class="option-info">
-              <div class="option-name">
-                {{ group.name }}
-              </div>
-              <div class="option-members">
-                {{ $t('membersCount', { count: group.memberCount }) }}
-              </div>
-              <div class="option-label previously-upgraded">
-                <div
-                  class="svg-icon sparkle-icon"
-                  v-html="icons.sparkles"
-                ></div>
-                {{ $t('previouslyUpgradedGroup') }}
-              </div>
-            </div>
-            <div class="option-price">
-              ${{ calculatePrice(group.memberCount) }}.00/mo
-            </div>
-          </div>
-        </selectable-card>
-
-        <selectable-card
-          v-if="upgradeableParty"
-          class="option-card"
-          :selected="isSelected(upgradeableParty)"
-          @click="selectOption(upgradeableParty)"
-        >
-          <div class="option-content">
-            <div class="option-info">
-              <div class="option-name">
-                {{ upgradeableParty.name }}
-              </div>
-              <div class="option-members">
-                {{ $t('membersCount', { count: upgradeableParty.memberCount }) }}
-              </div>
-              <div class="option-label your-party">
-                <div
-                  class="svg-icon member-icon"
-                  v-html="icons.member"
-                ></div>
-                {{ $t('yourParty') }}
-              </div>
-            </div>
-            <div class="option-price">
-              ${{ calculatePrice(upgradeableParty.memberCount) }}.00/mo
-            </div>
-          </div>
-        </selectable-card>
-
-        <div
-          v-if="hasUpgradeableGroups"
-          class="or-divider"
-        >
-          <div class="divider-line"></div>
-          <span class="or-text">{{ $t('or') }}</span>
-          <div class="divider-line"></div>
-        </div>
-
-        <selectable-card
-          class="option-card create-new"
-          :selected="selectedOption === 'new'"
-          @click="selectOption('new')"
-        >
-          <div class="option-content">
-            <div class="option-info">
-              <div class="option-name">
-                {{ $t('createNewGroup') }}
-              </div>
-              <div class="option-description">
-                {{ $t('inviteOthersForAdditional') }}
-                <span class="price-highlight">${{ perMemberPrice }}.00</span>
-                {{ $t('perMember') }}.
-              </div>
-            </div>
-            <div class="option-price">
-              ${{ basePrice }}.00/mo
-            </div>
-          </div>
-        </selectable-card>
-
-        <div class="footer-note">
-          {{ $t('additionalMembersProrated') }}
-        </div>
-      </template>
-    </div>
-  </b-modal>
-</template>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
-
-.selection-modal {
-  padding: 24px;
-}
-
-.modal-header-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.title {
-  font-family: 'Roboto Condensed', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 28px;
-  color: $purple-200;
-  margin: 0;
-}
-
-.header-actions {
-  display: flex;
-  align-items: center;
-}
-
-.cancel-text {
-  color: $blue-10;
-  font-size: 0.875rem;
-  margin-right: 16px;
-  cursor: pointer;
-}
-
-.next-button {
-  min-width: 64px;
-
-  &.disabled {
-    background-color: $gray-300;
-    border-color: $gray-300;
-    cursor: not-allowed;
-  }
-}
-
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 200px;
-}
-
-.section-header {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700;
-  font-size: 14px;
-  line-height: 24px;
-  color: $gray-10;
-  margin-bottom: 12px;
-}
-
-.option-card {
-  margin-bottom: 12px;
-
-  ::v-deep .option-name {
-    color: $gray-50;
-  }
-
-  &.selected ::v-deep .option-name {
-    color: $purple-200;
-  }
-}
-
-.option-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  padding-left: 48px;
-}
-
-.option-info {
-  flex: 1;
-}
-
-.option-name {
-  font-family: 'Roboto', sans-serif;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 24px;
-  margin-bottom: 4px;
-}
-
-.option-members {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: $gray-100;
-  margin-bottom: 8px;
-}
-
-.option-label {
-  display: flex;
-  align-items: center;
-  font-family: 'Roboto', sans-serif;
-  font-size: 12px;
-  line-height: 16px;
-  gap: 4px;
-
-  &.previously-upgraded {
-    font-weight: 700;
-    color: $blue-10;
-  }
-
-  &.your-party {
-    font-weight: 700;
-    color: $gray-100;
-  }
-
-  .svg-icon {
-    width: 14px;
-    height: 14px;
-  }
-
-  .sparkle-icon {
-    color: $blue-10;
-  }
-
-  .member-icon {
-    color: $gray-100;
-
-    ::v-deep path {
-      fill: $gray-100;
-      stroke: $gray-100;
-      stroke-width: 0.5px;
-    }
-  }
-}
-
-.option-description {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: $gray-100;
-
-  .price-highlight {
-    font-weight: 700;
-  }
-}
-
-.option-price {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 24px;
-  color: $purple-200;
-  white-space: nowrap;
-}
-
-.or-divider {
-  display: flex;
-  align-items: center;
-  margin: 20px 0;
-
-  .divider-line {
-    flex: 1;
-    height: 1px;
-    background-color: $gray-500;
-  }
-
-  .or-text {
-    padding: 0 16px;
-    font-family: 'Roboto', sans-serif;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.2em;
-    text-transform: uppercase;
-    color: $gray-100;
-  }
-}
-
-.create-new {
-  .option-name {
-    margin-bottom: 8px;
-  }
-}
-
-.footer-note {
-  font-family: 'Roboto', sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 16px;
-  color: $gray-100;
-  text-align: center;
-  margin-top: 16px;
-}
-</style>
-
-<style lang="scss">
-#group-plan-selection {
-  .modal-dialog {
-    max-width: 504px;
-  }
-
-  .modal-content {
-    border-radius: 8px;
-    box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
-  }
-
-  .modal-body {
-    padding: 0;
-  }
-}
-</style>
-
-<script>
-import axios from 'axios';
-import paymentsMixin from '@/mixins/payments';
-import { mapState } from '@/libs/store';
-import SelectableCard from '@/components/ui/selectableCard.vue';
-import svgSparkles from '@/assets/svg/sparkles.svg?raw';
-import svgMember from '@/assets/svg/member-icon.svg?raw';
-
-export default {
-  components: {
-    SelectableCard,
-  },
-  mixins: [paymentsMixin],
-  data () {
-    return {
-      selectedOption: null,
-      userGuilds: [],
-      userParty: null,
-      activeGroupPlanIds: [],
-      loading: true,
-      basePrice: 9,
-      perMemberPrice: 3,
-      icons: Object.freeze({
-        sparkles: svgSparkles,
-        member: svgMember,
-      }),
-    };
-  },
-  computed: {
-    ...mapState({ user: 'user.data' }),
-    upgradeableGuilds () {
-      return this.userGuilds.filter(group => {
-        const plan = group.purchased?.plan;
-        if (!plan?.customerId) return false;
-        if (this.activeGroupPlanIds.includes(group._id)) return false;
-        if (!plan.dateTerminated) return false;
-        return new Date(plan.dateTerminated) < new Date();
-      });
-    },
-    upgradeableParty () {
-      if (!this.userParty) return null;
-
-      const leaderId = this.userParty.leader?._id || this.userParty.leader;
-      if (leaderId !== this.user._id) return null;
-
-      if (this.activeGroupPlanIds.includes(this.userParty._id)) return null;
-
-      return this.userParty;
-    },
-    hasUpgradeableGroups () {
-      return this.upgradeableGuilds.length > 0 || this.upgradeableParty !== null;
-    },
-  },
-  methods: {
-    async loadData () {
-      this.loading = true;
-      this.selectedOption = null;
-
-      try {
-        const [guildsResponse, partyResponse] = await Promise.all([
-          axios.get('/api/v4/groups', { params: { type: 'guilds' } }),
-          axios.get('/api/v4/groups/party').catch(() => ({ data: { data: null } })),
-        ]);
-
-        this.userGuilds = guildsResponse.data.data || [];
-        this.userParty = partyResponse.data.data;
-
-        await this.$store.dispatch('guilds:getGroupPlans');
-        const groupPlans = this.$store.state.groupPlans?.data || [];
-        this.activeGroupPlanIds = groupPlans.map(g => g._id);
-      } catch (e) {
-        console.error('Error loading group data:', e);
-      }
-
-      this.loading = false;
-    },
-    selectOption (option) {
-      this.selectedOption = option;
-    },
-    isSelected (group) {
-      if (!this.selectedOption || this.selectedOption === 'new') return false;
-      return this.selectedOption._id === group._id;
-    },
-    calculatePrice (memberCount) {
-      return this.basePrice + (this.perMemberPrice * (memberCount - 1));
-    },
-    continueFlow () {
-      if (!this.selectedOption) return;
-
-      this.close();
-
-      if (this.selectedOption === 'new') {
-        this.$root.$emit('bv::show::modal', 'create-group');
-      } else {
-        this.stripeGroup({ group: this.selectedOption, upgrade: true });
-      }
-    },
-    close () {
-      this.$root.$emit('bv::hide::modal', 'group-plan-selection');
-    },
-    onHide () {
-      this.selectedOption = null;
-    },
-  },
-};
-</script>
+<template>
+  <b-modal
+    id="group-plan-selection"
+    :hide-footer="true"
+    :hide-header="true"
+    size="md"
+    @show="loadData"
+    @hide="onHide"
+  >
+    <div class="selection-modal">
+      <div class="modal-header-row">
+        <h2 class="title">
+          {{ $t('chooseAnOption') }}
+        </h2>
+        <div class="header-actions">
+          <span
+            class="cancel-text"
+            @click="close"
+          >
+            {{ $t('cancel') }}
+          </span>
+          <button
+            class="btn btn-primary next-button"
+            :class="{ disabled: !selectedOption }"
+            :disabled="!selectedOption"
+            @click="continueFlow"
+          >
+            {{ $t('next') }}
+          </button>
+        </div>
+      </div>
+
+      <div
+        v-if="loading"
+        class="loading-container"
+      >
+        <div class="spinner-border text-secondary"></div>
+      </div>
+
+      <template v-else>
+        <div
+          v-if="hasUpgradeableGroups"
+          class="section-header"
+        >
+          {{ $t('upgradeExistingGroup') }}
+        </div>
+
+        <selectable-card
+          v-for="group in upgradeableGuilds"
+          :key="group._id"
+          class="option-card"
+          :selected="isSelected(group)"
+          @click="selectOption(group)"
+        >
+          <div class="option-content">
+            <div class="option-info">
+              <div class="option-name">
+                {{ group.name }}
+              </div>
+              <div class="option-members">
+                {{ $t('membersCount', { count: group.memberCount }) }}
+              </div>
+              <div class="option-label previously-upgraded">
+                <div
+                  class="svg-icon sparkle-icon"
+                  v-html="icons.sparkles"
+                ></div>
+                {{ $t('previouslyUpgradedGroup') }}
+              </div>
+            </div>
+            <div class="option-price">
+              ${{ calculatePrice(group.memberCount) }}.00/mo
+            </div>
+          </div>
+        </selectable-card>
+
+        <selectable-card
+          v-if="upgradeableParty"
+          class="option-card"
+          :selected="isSelected(upgradeableParty)"
+          @click="selectOption(upgradeableParty)"
+        >
+          <div class="option-content">
+            <div class="option-info">
+              <div class="option-name">
+                {{ upgradeableParty.name }}
+              </div>
+              <div class="option-members">
+                {{ $t('membersCount', { count: upgradeableParty.memberCount }) }}
+              </div>
+              <div class="option-label your-party">
+                <div
+                  class="svg-icon member-icon"
+                  v-html="icons.member"
+                ></div>
+                {{ $t('yourParty') }}
+              </div>
+            </div>
+            <div class="option-price">
+              ${{ calculatePrice(upgradeableParty.memberCount) }}.00/mo
+            </div>
+          </div>
+        </selectable-card>
+
+        <div
+          v-if="hasUpgradeableGroups"
+          class="or-divider"
+        >
+          <div class="divider-line"></div>
+          <span class="or-text">{{ $t('or') }}</span>
+          <div class="divider-line"></div>
+        </div>
+
+        <selectable-card
+          class="option-card create-new"
+          :selected="selectedOption === 'new'"
+          @click="selectOption('new')"
+        >
+          <div class="option-content">
+            <div class="option-info">
+              <div class="option-name">
+                {{ $t('createNewGroup') }}
+              </div>
+              <div class="option-description">
+                {{ $t('inviteOthersForAdditional') }}
+                <span class="price-highlight">${{ perMemberPrice }}.00</span>
+                {{ $t('perMember') }}.
+              </div>
+            </div>
+            <div class="option-price">
+              ${{ basePrice }}.00/mo
+            </div>
+          </div>
+        </selectable-card>
+
+        <div class="footer-note">
+          {{ $t('additionalMembersProrated') }}
+        </div>
+      </template>
+    </div>
+  </b-modal>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/colors.scss';
+
+.selection-modal {
+  padding: 24px;
+}
+
+.modal-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.title {
+  font-family: 'Roboto Condensed', sans-serif;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 28px;
+  color: $purple-200;
+  margin: 0;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+}
+
+.cancel-text {
+  color: $blue-10;
+  font-size: 0.875rem;
+  margin-right: 16px;
+  cursor: pointer;
+}
+
+.next-button {
+  min-width: 64px;
+
+  &.disabled {
+    background-color: $gray-300;
+    border-color: $gray-300;
+    cursor: not-allowed;
+  }
+}
+
+.loading-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+}
+
+.section-header {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 24px;
+  color: $gray-10;
+  margin-bottom: 12px;
+}
+
+.option-card {
+  margin-bottom: 12px;
+
+  ::v-deep .option-name {
+    color: $gray-50;
+  }
+
+  &.selected ::v-deep .option-name {
+    color: $purple-200;
+  }
+}
+
+.option-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding-left: 48px;
+}
+
+.option-info {
+  flex: 1;
+}
+
+.option-name {
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 24px;
+  margin-bottom: 4px;
+}
+
+.option-members {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: $gray-100;
+  margin-bottom: 8px;
+}
+
+.option-label {
+  display: flex;
+  align-items: center;
+  font-family: 'Roboto', sans-serif;
+  font-size: 12px;
+  line-height: 16px;
+  gap: 4px;
+
+  &.previously-upgraded {
+    font-weight: 700;
+    color: $blue-10;
+  }
+
+  &.your-party {
+    font-weight: 700;
+    color: $gray-100;
+  }
+
+  .svg-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  .sparkle-icon {
+    color: $blue-10;
+  }
+
+  .member-icon {
+    color: $gray-100;
+
+    ::v-deep path {
+      fill: $gray-100;
+      stroke: $gray-100;
+      stroke-width: 0.5px;
+    }
+  }
+}
+
+.option-description {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: $gray-100;
+
+  .price-highlight {
+    font-weight: 700;
+  }
+}
+
+.option-price {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 24px;
+  color: $purple-200;
+  white-space: nowrap;
+}
+
+.or-divider {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+
+  .divider-line {
+    flex: 1;
+    height: 1px;
+    background-color: $gray-500;
+  }
+
+  .or-text {
+    padding: 0 16px;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: $gray-100;
+  }
+}
+
+.create-new {
+  .option-name {
+    margin-bottom: 8px;
+  }
+}
+
+.footer-note {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  color: $gray-100;
+  text-align: center;
+  margin-top: 16px;
+}
+</style>
+
+<style lang="scss">
+#group-plan-selection {
+  .modal-dialog {
+    max-width: 504px;
+  }
+
+  .modal-content {
+    border-radius: 8px;
+    box-shadow: 0 14px 28px 0 rgba(26, 24, 29, 0.24), 0 10px 10px 0 rgba(26, 24, 29, 0.28);
+  }
+
+  .modal-body {
+    padding: 0;
+  }
+}
+</style>
+
+<script>
+import axios from 'axios';
+import paymentsMixin from '@/mixins/payments';
+import { mapState } from '@/libs/store';
+import SelectableCard from '@/components/ui/selectableCard.vue';
+import svgSparkles from '@/assets/svg/sparkles.svg?raw';
+import svgMember from '@/assets/svg/member-icon.svg?raw';
+
+export default {
+  components: {
+    SelectableCard,
+  },
+  mixins: [paymentsMixin],
+  data () {
+    return {
+      selectedOption: null,
+      userGuilds: [],
+      userParty: null,
+      activeGroupPlanIds: [],
+      loading: true,
+      basePrice: 9,
+      perMemberPrice: 3,
+      icons: Object.freeze({
+        sparkles: svgSparkles,
+        member: svgMember,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({ user: 'user.data' }),
+    upgradeableGuilds () {
+      return this.userGuilds.filter(group => {
+        const plan = group.purchased?.plan;
+        if (!plan?.customerId) return false;
+        if (this.activeGroupPlanIds.includes(group._id)) return false;
+        if (!plan.dateTerminated) return false;
+        return new Date(plan.dateTerminated) < new Date();
+      });
+    },
+    upgradeableParty () {
+      if (!this.userParty) return null;
+
+      const leaderId = this.userParty.leader?._id || this.userParty.leader;
+      if (leaderId !== this.user._id) return null;
+
+      if (this.activeGroupPlanIds.includes(this.userParty._id)) return null;
+
+      return this.userParty;
+    },
+    hasUpgradeableGroups () {
+      return this.upgradeableGuilds.length > 0 || this.upgradeableParty !== null;
+    },
+  },
+  methods: {
+    async loadData () {
+      this.loading = true;
+      this.selectedOption = null;
+
+      try {
+        const [guildsResponse, partyResponse] = await Promise.all([
+          axios.get('/api/v4/groups', { params: { type: 'guilds' } }),
+          axios.get('/api/v4/groups/party').catch(() => ({ data: { data: null } })),
+        ]);
+
+        this.userGuilds = guildsResponse.data.data || [];
+        this.userParty = partyResponse.data.data;
+
+        await this.$store.dispatch('guilds:getGroupPlans');
+        const groupPlans = this.$store.state.groupPlans?.data || [];
+        this.activeGroupPlanIds = groupPlans.map(g => g._id);
+      } catch (e) {
+        console.error('Error loading group data:', e);
+      }
+
+      this.loading = false;
+    },
+    selectOption (option) {
+      this.selectedOption = option;
+    },
+    isSelected (group) {
+      if (!this.selectedOption || this.selectedOption === 'new') return false;
+      return this.selectedOption._id === group._id;
+    },
+    calculatePrice (memberCount) {
+      return this.basePrice + (this.perMemberPrice * (memberCount - 1));
+    },
+    continueFlow () {
+      if (!this.selectedOption) return;
+
+      this.close();
+
+      if (this.selectedOption === 'new') {
+        this.$root.$emit('bv::show::modal', 'create-group');
+      } else {
+        this.stripeGroup({ group: this.selectedOption, upgrade: true });
+      }
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'group-plan-selection');
+    },
+    onHide () {
+      this.selectedOption = null;
+    },
+  },
+};
+</script>
diff --git a/website/client/src/components/ui/selectableCard.vue b/website/client/src/components/ui/selectableCard.vue
index 401302f2f7..ac96288171 100644
--- a/website/client/src/components/ui/selectableCard.vue
+++ b/website/client/src/components/ui/selectableCard.vue
@@ -1,92 +1,92 @@
-<template>
-  <div
-    class="selectable-card"
-    :class="{ selected }"
-    @click="$emit('click')"
-  >
-    <div
-      v-if="selected"
-      class="checkmark-corner"
-    >
-      <div
-        class="svg-icon check-icon"
-        v-html="icons.check"
-      ></div>
-    </div>
-    <slot></slot>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/colors.scss';
-
-.selectable-card {
-  position: relative;
-  background: $white;
-  border: 1px solid $gray-400;
-  border-radius: 8px;
-  padding: 16px;
-  cursor: pointer;
-  box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
-
-  &:hover {
-    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
-  }
-
-  &.selected {
-    border: 2px solid $purple-300;
-    padding: 15px;
-    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
-  }
-}
-
-.checkmark-corner {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 48px;
-  height: 48px;
-  overflow: hidden;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    border-style: solid;
-    border-width: 48px 48px 0 0;
-    border-color: $purple-300 transparent transparent transparent;
-    border-radius: 8px 0 0 0;
-  }
-
-  .check-icon {
-    position: absolute;
-    top: 10px;
-    left: 8px;
-    width: 12px;
-    height: 10px;
-    color: $white;
-  }
-}
-</style>
-
-<script>
-import svgCheck from '@/assets/svg/check.svg?raw';
-
-export default {
-  props: {
-    selected: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ['click'],
-  data () {
-    return {
-      icons: Object.freeze({
-        check: svgCheck,
-      }),
-    };
-  },
-};
-</script>
+<template>
+  <div
+    class="selectable-card"
+    :class="{ selected }"
+    @click="$emit('click')"
+  >
+    <div
+      v-if="selected"
+      class="checkmark-corner"
+    >
+      <div
+        class="svg-icon check-icon"
+        v-html="icons.check"
+      ></div>
+    </div>
+    <slot></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/colors.scss';
+
+.selectable-card {
+  position: relative;
+  background: $white;
+  border: 1px solid $gray-400;
+  border-radius: 8px;
+  padding: 16px;
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
+
+  &:hover {
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
+  }
+
+  &.selected {
+    border: 2px solid $purple-300;
+    padding: 15px;
+    box-shadow: 0px 3px 6px 0px rgba(26, 24, 29, 0.16), 0px 3px 6px 0px rgba(26, 24, 29, 0.24);
+  }
+}
+
+.checkmark-corner {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 48px;
+  height: 48px;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-style: solid;
+    border-width: 48px 48px 0 0;
+    border-color: $purple-300 transparent transparent transparent;
+    border-radius: 8px 0 0 0;
+  }
+
+  .check-icon {
+    position: absolute;
+    top: 10px;
+    left: 8px;
+    width: 12px;
+    height: 10px;
+    color: $white;
+  }
+}
+</style>
+
+<script>
+import svgCheck from '@/assets/svg/check.svg?raw';
+
+export default {
+  props: {
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['click'],
+  data () {
+    return {
+      icons: Object.freeze({
+        check: svgCheck,
+      }),
+    };
+  },
+};
+</script>