diff --git a/resources/js/views/EventList.vue b/resources/js/views/EventList.vue
index c62d4c9..c96e8e9 100644
--- a/resources/js/views/EventList.vue
+++ b/resources/js/views/EventList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-workshop-list">
+    <SMPage class="sm-page-workshop-list">
         <template #container>
             <h1>Workshops</h1>
             <SMToolbar>
@@ -227,7 +227,7 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.workshop-list {
+.sm-page-workshop-list {
     background-color: #f8f8f8;
 
     .toolbar {
@@ -251,7 +251,7 @@ handleLoad();
 }
 
 @media screen and (max-width: 768px) {
-    .sm-workshop-list .toolbar {
+    .sm-page-workshop-list .toolbar {
         flex-direction: column;
 
         & > * {
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index 4c91714..53c9fe7 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage full class="home">
+    <SMPage full class="sm-page-home">
         <SMCarousel>
             <SMCarouselSlide
                 v-for="(slide, index) in slides"
@@ -247,7 +247,7 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.home {
+.sm-page-home {
     margin-top: -3.25rem !important;
     background-color: #fff;
 
@@ -420,7 +420,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 1024px) {
-    .home {
+    .sm-page-home {
         .about {
             padding: 4rem;
         }
@@ -432,7 +432,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 896px) {
-    .home {
+    .sm-page-home {
         .support {
             .row {
                 flex-direction: column;
@@ -442,7 +442,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 768px) {
-    .home {
+    .sm-page-home {
         .about {
             margin-top: 2rem;
             margin-left: 0;
@@ -480,7 +480,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 640px) {
-    .home {
+    .sm-page-home {
         .about {
             padding: 2rem;
 
diff --git a/resources/js/views/Minecraft.vue b/resources/js/views/Minecraft.vue
index b5bcdf4..d9c0509 100644
--- a/resources/js/views/Minecraft.vue
+++ b/resources/js/views/Minecraft.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-minecraft">
+    <SMPage class="sm-page-minecraft">
         <template #container>
             <h1>Connecting to our Minecraft Server</h1>
             <ol>
@@ -39,7 +39,7 @@
 </template>
 
 <style lang="scss">
-.sm-minecraft {
+.sm-page-minecraft {
     h2 {
         margin-bottom: 0.5rem;
     }
diff --git a/resources/js/views/PostList.vue b/resources/js/views/PostList.vue
index 5dd6f23..8d65fa7 100644
--- a/resources/js/views/PostList.vue
+++ b/resources/js/views/PostList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-post-list" :loading="pageLoading">
+    <SMPage class="sm-page-post-list" :loading="pageLoading">
         <template #container>
             <SMMessage
                 v-if="message"
diff --git a/resources/js/views/Rules.vue b/resources/js/views/Rules.vue
index 175f19d..bc69178 100644
--- a/resources/js/views/Rules.vue
+++ b/resources/js/views/Rules.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-rules">
+    <SMPage class="sm-page-rules">
         <template #container>
             <h1>Rules</h1>
             <p>
@@ -81,7 +81,7 @@
 <script setup lang="ts"></script>
 
 <style lang="scss">
-.sm-rules {
+.sm-page-rules {
     h2 {
         margin-bottom: 0.5rem;
     }
diff --git a/resources/js/views/Terms.vue b/resources/js/views/Terms.vue
index eba6c0a..357d381 100644
--- a/resources/js/views/Terms.vue
+++ b/resources/js/views/Terms.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-terms">
+    <SMPage class="sm-page-terms">
         <template #container>
             <h1>Terms and Conditions</h1>
             <p>
diff --git a/resources/js/views/dashboard/Dashboard.vue b/resources/js/views/dashboard/Dashboard.vue
index fb3c430..2e9a620 100644
--- a/resources/js/views/dashboard/Dashboard.vue
+++ b/resources/js/views/dashboard/Dashboard.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage class="sm-dashboard">
+    <SMPage class="sm-page-dashboard">
         <template #container>
             <h1>Dashboard</h1>
             <div class="boxes">
@@ -70,7 +70,7 @@ const courseBoxTitle = computed(() => {
 </script>
 
 <style lang="scss">
-.sm-dashboard {
+.sm-page-dashboard {
     background-color: $secondary-background-color;
 
     .boxes {