diff --git a/.gitignore b/.gitignore
index 4a0d7cf24..3aebbc2d8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 *.local
 *.log
 **/auto-imports.d.ts
+**/components.d.ts
 .DS_Store
 .eslintcache
 .idea/
diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
deleted file mode 100644
index eb3146264..000000000
--- a/apps/web/components.d.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable */
-/* prettier-ignore */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-export {}
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    Accordion: typeof import('./src/components/Accordion.vue')['default']
-    Ago: typeof import('./src/components/Ago.vue')['default']
-    AuthorList: typeof import('./src/components/AuthorList.vue')['default']
-    BAlert: typeof import('bootstrap-vue-next')['BAlert']
-    Banner: typeof import('./src/components/Banner.vue')['default']
-    Bare: typeof import('./src/layouts/bare.vue')['default']
-    BBadge: typeof import('bootstrap-vue-next')['BBadge']
-    BButton: typeof import('bootstrap-vue-next')['BButton']
-    BButtonGroup: typeof import('bootstrap-vue-next')['BButtonGroup']
-    BCard: typeof import('bootstrap-vue-next')['BCard']
-    BCardHeader: typeof import('bootstrap-vue-next')['BCardHeader']
-    BCarousel: typeof import('bootstrap-vue-next')['BCarousel']
-    BCarouselSlide: typeof import('bootstrap-vue-next')['BCarouselSlide']
-    BCol: typeof import('bootstrap-vue-next')['BCol']
-    BCollapse: typeof import('bootstrap-vue-next')['BCollapse']
-    BDropdown: typeof import('bootstrap-vue-next')['BDropdown']
-    BDropdownItem: typeof import('bootstrap-vue-next')['BDropdownItem']
-    BForm: typeof import('bootstrap-vue-next')['BForm']
-    BFormCheckbox: typeof import('bootstrap-vue-next')['BFormCheckbox']
-    BFormGroup: typeof import('bootstrap-vue-next')['BFormGroup']
-    BFormInput: typeof import('bootstrap-vue-next')['BFormInput']
-    BFormRow: typeof import('bootstrap-vue-next')['BFormRow']
-    BFormSelect: typeof import('bootstrap-vue-next')['BFormSelect']
-    BFormSelectOption: typeof import('bootstrap-vue-next')['BFormSelectOption']
-    BFormTextarea: typeof import('bootstrap-vue-next')['BFormTextarea']
-    BModal: typeof import('bootstrap-vue-next')['BModal']
-    BNavbarNav: typeof import('bootstrap-vue-next')['BNavbarNav']
-    BNavItem: typeof import('bootstrap-vue-next')['BNavItem']
-    Book: typeof import('./src/components/Book.vue')['default']
-    Bookcase: typeof import('./src/components/Bookcase.vue')['default']
-    BookcaseMenu: typeof import('./src/components/menus/BookcaseMenu.vue')['default']
-    BookcasePopover: typeof import('./src/components/BookcasePopover.vue')['default']
-    Bookstores: typeof import('./src/components/Bookstores.vue')['default']
-    BPagination: typeof import('bootstrap-vue-next')['BPagination']
-    BProgress: typeof import('bootstrap-vue-next')['BProgress']
-    BProgressBar: typeof import('bootstrap-vue-next')['BProgressBar']
-    BRow: typeof import('bootstrap-vue-next')['BRow']
-    BTab: typeof import('bootstrap-vue-next')['BTab']
-    BTable: typeof import('bootstrap-vue-next')['BTable']
-    BTabs: typeof import('bootstrap-vue-next')['BTabs']
-    CollectionMenu: typeof import('./src/components/menus/CollectionMenu.vue')['default']
-    Condition: typeof import('./src/components/Condition.vue')['default']
-    ContextMenuOnSaleByOthers: typeof import('./src/components/ContextMenuOnSaleByOthers.vue')['default']
-    ContextMenuOwnCollection: typeof import('./src/components/ContextMenuOwnCollection.vue')['default']
-    Counter: typeof import('./src/components/Counter.vue')['default']
-    Country: typeof import('./src/components/Country.vue')['default']
-    Default: typeof import('./src/layouts/default.vue')['default']
-    Edge: typeof import('./src/components/Edge.vue')['default']
-    EdgeContents: typeof import('./src/components/EdgeContents.vue')['default']
-    Event: typeof import('./src/components/Event.vue')['default']
-    'Event.story': typeof import('./src/components/Event.story.vue')['default']
-    ExpandMenu: typeof import('./src/components/menus/ExpandMenu.vue')['default']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-    IBiArrowBarRight: typeof import('~icons/bi/arrow-bar-right')['default']
-    IBiBookHalf: typeof import('~icons/bi/book-half')['default']
-    IBiBookmarkCheck: typeof import('~icons/bi/bookmark-check')['default']
-    IBiBookmarkX: typeof import('~icons/bi/bookmark-x')['default']
-    IBiCalendar: typeof import('~icons/bi/calendar')['default']
-    IBiCalendarX: typeof import('~icons/bi/calendar-x')['default']
-    IBiCapslockFill: typeof import('~icons/bi/capslock-fill')['default']
-    IBiCart: typeof import('~icons/bi/cart')['default']
-    IBiCartX: typeof import('~icons/bi/cart-x')['default']
-    IBiCash: typeof import('~icons/bi/cash')['default']
-    IBiCheck: typeof import('~icons/bi/check')['default']
-    IBiEyeFill: typeof import('~icons/bi/eye-fill')['default']
-    IBiEyeglasses: typeof import('~icons/bi/eyeglasses')['default']
-    IBiEyeSlashFill: typeof import('~icons/bi/eye-slash-fill')['default']
-    IBiGraphUp: typeof import('~icons/bi/graph-up')['default']
-    IBiHouseFill: typeof import('~icons/bi/house-fill')['default']
-    IBiList: typeof import('~icons/bi/list')['default']
-    IBiLock: typeof import('~icons/bi/lock')['default']
-    IBiPrinterFill: typeof import('~icons/bi/printer-fill')['default']
-    IBiStar: typeof import('~icons/bi/star')['default']
-    IBiStarFill: typeof import('~icons/bi/star-fill')['default']
-    IBiTrash: typeof import('~icons/bi/trash')['default']
-    IBiX: typeof import('~icons/bi/x')['default']
-    IBiXSquareFill: typeof import('~icons/bi/x-square-fill')['default']
-    InducksStory: typeof import('./src/components/InducksStory.vue')['default']
-    Issue: typeof import('./src/components/Issue.vue')['default']
-    IssueCopyEdit: typeof import('./src/components/IssueCopyEdit.vue')['default']
-    IssueDetailsPopover: typeof import('./src/components/IssueDetailsPopover.vue')['default']
-    IssueEdgePopover: typeof import('./src/components/IssueEdgePopover.vue')['default']
-    IssueList: typeof import('./src/components/IssueList.vue')['default']
-    'IssueList.story': typeof import('./src/components/IssueList.story.vue')['default']
-    LastPublishedEdges: typeof import('./src/components/LastPublishedEdges.vue')['default']
-    LastPurchases: typeof import('./src/components/LastPurchases.vue')['default']
-    LeftPanel: typeof import('./src/components/LeftPanel.vue')['default']
-    LinkToCollectionIfNoIssue: typeof import('./src/components/LinkToCollectionIfNoIssue.vue')['default']
-    Manage: typeof import('./src/components/Manage.vue')['default']
-    MarketplaceBuyerInfo: typeof import('./src/components/MarketplaceBuyerInfo.vue')['default']
-    MarketplaceSellerInfo: typeof import('./src/components/MarketplaceSellerInfo.vue')['default']
-    Medal: typeof import('./src/components/Medal.vue')['default']
-    MedalProgress: typeof import('./src/components/MedalProgress.vue')['default']
-    Menu: typeof import('./src/components/Menu.vue')['default']
-    Navigation: typeof import('./src/components/Navigation.vue')['default']
-    NavigationItem: typeof import('./src/components/NavigationItem.vue')['default']
-    NavigationItemGroup: typeof import('./src/components/NavigationItemGroup.vue')['default']
-    OtherIssues: typeof import('./src/components/OtherIssues.vue')['default']
-    Popover: typeof import('./src/components/Popover.vue')['default']
-    PrintHeader: typeof import('./src/components/PrintHeader.vue')['default']
-    Publication: typeof import('./src/components/Publication.vue')['default']
-    PublicationList: typeof import('./src/components/PublicationList.vue')['default']
-    PublicationSelect: typeof import('./src/components/PublicationSelect.vue')['default']
-    RecentEvents: typeof import('./src/components/RecentEvents.vue')['default']
-    RouterLink: typeof import('vue-router')['RouterLink']
-    RouterView: typeof import('vue-router')['RouterView']
-    ScopedErrorTeleport: typeof import('./src/components/ScopedErrorTeleport.vue')['default']
-    SharePage: typeof import('./src/components/SharePage.vue')['default']
-    ShortStats: typeof import('./src/components/ShortStats.vue')['default']
-    StarRating: typeof import('./src/components/StarRating.vue')['default']
-    StatsMenu: typeof import('./src/components/menus/StatsMenu.vue')['default']
-    StoryList: typeof import('./src/components/StoryList.vue')['default']
-    StorySearch: typeof import('./src/components/StorySearch.vue')['default']
-    Subscription: typeof import('./src/components/Subscription.vue')['default']
-    SuggestionList: typeof import('./src/components/SuggestionList.vue')['default']
-    SwitchLocale: typeof import('./src/components/SwitchLocale.vue')['default']
-    UploadableEdgesCarousel: typeof import('./src/components/UploadableEdgesCarousel.vue')['default']
-    UserPopover: typeof import('./src/components/UserPopover.vue')['default']
-    ViewBookcase: typeof import('./src/components/ViewBookcase.vue')['default']
-    Watch: typeof import('./src/components/Watch.vue')['default']
-  }
-  export interface ComponentCustomProperties {
-    vBToggle: typeof import('bootstrap-vue-next')['vBToggle']
-  }
-}
diff --git a/apps/web/src/components/MedalImage.vue b/apps/web/src/components/MedalImage.vue
index 1405d9545..5ac8a2ccd 100644
--- a/apps/web/src/components/MedalImage.vue
+++ b/apps/web/src/components/MedalImage.vue
@@ -21,8 +21,7 @@
           />
           <circle
             transform="rotate(270,0,0)"
-            class="bar"
-            :class="{ [medalColors[level]]: true }"
+            :class="`bar ${medalColors[level]}`"
             cx="-50"
             cy="50"
             :r="radius"