diff --git a/website/client/src/assets/scss/index.scss b/website/client/src/assets/scss/index.scss
index 424cffb0e7..4dbdab2874 100644
--- a/website/client/src/assets/scss/index.scss
+++ b/website/client/src/assets/scss/index.scss
@@ -37,3 +37,4 @@
 @import './tiers';
 @import './payments';
 @import './spacing';
+@import './modal';
diff --git a/website/client/src/assets/scss/mixins.scss b/website/client/src/assets/scss/mixins.scss
new file mode 100644
index 0000000000..561be306ed
--- /dev/null
+++ b/website/client/src/assets/scss/mixins.scss
@@ -0,0 +1,9 @@
+@mixin centeredModal() {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+
+  header, footer {
+    border: 0;
+  }
+}
\ No newline at end of file
diff --git a/website/client/src/assets/scss/modal.scss b/website/client/src/assets/scss/modal.scss
index a595900747..883b17eeec 100644
--- a/website/client/src/assets/scss/modal.scss
+++ b/website/client/src/assets/scss/modal.scss
@@ -1,16 +1,5 @@
-
 @import '~@/assets/scss/colors.scss';
 
-@mixin centeredModal() {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-
-  header, footer {
-    border: 0;
-  }
-}
-
 .modal {
   z-index: 1350;
   padding-left: 0px !important;
diff --git a/website/client/src/components/achievements/genericAchievement.vue b/website/client/src/components/achievements/genericAchievement.vue
index 8ec5f908e8..22b9ba07d1 100644
--- a/website/client/src/components/achievements/genericAchievement.vue
+++ b/website/client/src/components/achievements/genericAchievement.vue
@@ -45,7 +45,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #generic-achievement {
     @include centeredModal();
diff --git a/website/client/src/components/inventory/equipment/equipGearModal.vue b/website/client/src/components/inventory/equipment/equipGearModal.vue
index e0c7a2c916..90406e66cc 100644
--- a/website/client/src/components/inventory/equipment/equipGearModal.vue
+++ b/website/client/src/components/inventory/equipment/equipGearModal.vue
@@ -71,7 +71,7 @@
 <style lang="scss">
 
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #equipgear-modal {
     @include centeredModal();
diff --git a/website/client/src/components/inventory/stable/hatchedPetDialog.vue b/website/client/src/components/inventory/stable/hatchedPetDialog.vue
index ea73ef7a8a..11a220b92c 100644
--- a/website/client/src/components/inventory/stable/hatchedPetDialog.vue
+++ b/website/client/src/components/inventory/stable/hatchedPetDialog.vue
@@ -46,7 +46,8 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
+  @import '~@/assets/scss/colors.scss';
 
   #hatchedPet-modal {
     @include centeredModal();
diff --git a/website/client/src/components/inventory/stable/hatchingModal.vue b/website/client/src/components/inventory/stable/hatchingModal.vue
index 22cd452c79..bf68909c42 100644
--- a/website/client/src/components/inventory/stable/hatchingModal.vue
+++ b/website/client/src/components/inventory/stable/hatchingModal.vue
@@ -46,7 +46,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #hatching-modal {
     @include centeredModal();
diff --git a/website/client/src/components/inventory/stable/index.vue b/website/client/src/components/inventory/stable/index.vue
index e62e8a8f60..3e68179c51 100644
--- a/website/client/src/components/inventory/stable/index.vue
+++ b/website/client/src/components/inventory/stable/index.vue
@@ -330,7 +330,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   .standard-page .clearfix .float-right {
     margin-right: 24px;
diff --git a/website/client/src/components/inventory/stable/mountRaisedModal.vue b/website/client/src/components/inventory/stable/mountRaisedModal.vue
index d5c9b07f7d..f035037791 100644
--- a/website/client/src/components/inventory/stable/mountRaisedModal.vue
+++ b/website/client/src/components/inventory/stable/mountRaisedModal.vue
@@ -38,7 +38,7 @@
 
 <style lang="scss" scoped>
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #mount-raised-modal {
     @include centeredModal();
diff --git a/website/client/src/components/inventory/stable/welcomeModal.vue b/website/client/src/components/inventory/stable/welcomeModal.vue
index 2fb1f49f9f..c3d3bb2bde 100644
--- a/website/client/src/components/inventory/stable/welcomeModal.vue
+++ b/website/client/src/components/inventory/stable/welcomeModal.vue
@@ -24,7 +24,7 @@
 </template>
 
 <style lang="scss" scoped>
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #welcome-modal {
     @include centeredModal();
diff --git a/website/client/src/components/payments/selectUserModal.vue b/website/client/src/components/payments/selectUserModal.vue
index dfb42a60ac..0a49146bd4 100644
--- a/website/client/src/components/payments/selectUserModal.vue
+++ b/website/client/src/components/payments/selectUserModal.vue
@@ -67,7 +67,7 @@
 </template>
 
 <style lang="scss">
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #select-user-modal {
     @include centeredModal();
diff --git a/website/client/src/components/shops/buyModal.vue b/website/client/src/components/shops/buyModal.vue
index 0d658f8a97..33c8c2a516 100644
--- a/website/client/src/components/shops/buyModal.vue
+++ b/website/client/src/components/shops/buyModal.vue
@@ -192,7 +192,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #buy-modal {
     @include centeredModal();
diff --git a/website/client/src/components/shops/market/sellModal.vue b/website/client/src/components/shops/market/sellModal.vue
index f8d7c1e08d..ba59ed6196 100644
--- a/website/client/src/components/shops/market/sellModal.vue
+++ b/website/client/src/components/shops/market/sellModal.vue
@@ -83,9 +83,8 @@
   </b-modal>
 </template>
 <style lang="scss">
-
-  @import '~@/assets/scss/modal.scss';
   @import '~@/assets/scss/colors.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #sell-modal {
     @include centeredModal();
diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue
index 6da0fc8a60..a11e3bc05c 100644
--- a/website/client/src/components/shops/quests/buyQuestModal.vue
+++ b/website/client/src/components/shops/quests/buyQuestModal.vue
@@ -111,7 +111,7 @@
 
 <style lang="scss">
   @import '~@/assets/scss/colors.scss';
-  @import '~@/assets/scss/modal.scss';
+  @import '~@/assets/scss/mixins.scss';
 
   #buy-quest-modal {
     @include centeredModal();