diff --git a/resources/js/components/SMCaptchaNotice.vue b/resources/js/components/SMCaptchaNotice.vue
index 8707c5e..c60152d 100644
--- a/resources/js/components/SMCaptchaNotice.vue
+++ b/resources/js/components/SMCaptchaNotice.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sm-captcha-notice">
+    <div class="captcha-notice">
         This site is protected by reCAPTCHA and the Google
         <a href="https://policies.google.com/privacy">Privacy Policy</a> and
         <a href="https://policies.google.com/terms">Terms of Service</a> apply.
@@ -7,7 +7,7 @@
 </template>
 
 <style lang="scss">
-.sm-captcha-notice {
+.captcha-notice {
     color: $secondary-color;
     font-size: 65%;
     line-height: 1.2rem;
diff --git a/resources/js/components/SMEditor.vue b/resources/js/components/SMEditor.vue
index e970a6a..fff595f 100644
--- a/resources/js/components/SMEditor.vue
+++ b/resources/js/components/SMEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sm-editor">
+    <div class="editor">
         <Editor
             ref="tinyeditor"
             v-model="editorContent"
@@ -80,7 +80,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
     editor.on("PreInit", function () {
         var contentStyle = editor.options.get("content_style") || "";
         contentStyle += `
-          .tinymce-sm-gallery {
+          .tinymce-gallery {
             position: relative;
             overflow: hidden;
             margin: 20px auto;
@@ -90,7 +90,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
             white-space: nowrap;
         }
 
-        .tinymce-sm-gallery::before {
+        .tinymce-gallery::before {
             position: absolute;
             content: "";
             top: 0;
@@ -100,7 +100,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
             background-color: rgba(255, 255, 255, 0.5);
         }
 
-        .tinymce-sm-gallery::after {
+        .tinymce-gallery::after {
             position: absolute;
             content: "Image Gallery";
             top: 50%;
@@ -116,7 +116,7 @@ tinymce.PluginManager.add("gallery", function (editor) {
             border-radius: 12px;
         }
 
-        .tinymce-sm-gallery-item {
+        .tinymce-gallery-item {
             display: inline-block;
             width: 355px;
             height: 200px;
@@ -132,11 +132,11 @@ tinymce.PluginManager.add("gallery", function (editor) {
         var node = editor.selection.getNode();
 
         if (node) {
-            if (!editor.dom.hasClass(node, "tinymce-sm-gallery")) {
+            if (!editor.dom.hasClass(node, "tinymce-gallery")) {
                 // Check if node is a descendant of a gallery node
                 var galleryNode = editor.dom.getParent(
                     node,
-                    ".tinymce-sm-gallery"
+                    ".tinymce-gallery"
                 );
                 if (!galleryNode) {
                     node = null;
@@ -162,10 +162,10 @@ tinymce.PluginManager.add("gallery", function (editor) {
                 let galleryContent = "";
                 if (url.length > 0) {
                     url.forEach((item) => {
-                        galleryContent += `<div class="tinymce-sm-gallery-item" style="background-image:url('${item}');"></div>`;
+                        galleryContent += `<div class="tinymce-gallery-item" style="background-image:url('${item}');"></div>`;
                     });
 
-                    galleryContent = `<div contentEditable="false" class="tinymce-sm-gallery">${galleryContent}</div>`;
+                    galleryContent = `<div contentEditable="false" class="tinymce-gallery">${galleryContent}</div>`;
                 }
 
                 const selection = editor.selection;
@@ -194,11 +194,11 @@ tinymce.PluginManager.add("gallery", function (editor) {
 
                 api.setActive(
                     node &&
-                        (editor.dom.hasClass(node, "tinymce-sm-gallery") ||
+                        (editor.dom.hasClass(node, "tinymce-gallery") ||
                             (node.parentNode &&
                                 editor.dom.hasClass(
                                     node.parentNode,
-                                    "tinymce-sm-gallery"
+                                    "tinymce-gallery"
                                 )))
                 );
             };
diff --git a/resources/js/components/SMHTML.vue b/resources/js/components/SMHTML.vue
index 21b2544..d8f7ffb 100644
--- a/resources/js/components/SMHTML.vue
+++ b/resources/js/components/SMHTML.vue
@@ -36,7 +36,7 @@ const computedContent = computed(() => {
 
     // Convert image galleries to SMImageGallery component
     const regexGallery =
-        /<div.*?class="tinymce-sm-gallery".*?>\s*((?:<div class="tinymce-sm-gallery-item" style="background-image: url\('.*?'\);">.*?<\/div>\s*)*)<\/div>/gi;
+        /<div.*?class="tinymce-gallery".*?>\s*((?:<div class="tinymce-gallery-item" style="background-image: url\('.*?'\);">.*?<\/div>\s*)*)<\/div>/gi;
 
     const matches = [...html.matchAll(regexGallery)];
     for (const match of matches) {
diff --git a/resources/js/components/SMImageGallery.vue b/resources/js/components/SMImageGallery.vue
index 1c933f3..3bcc5af 100644
--- a/resources/js/components/SMImageGallery.vue
+++ b/resources/js/components/SMImageGallery.vue
@@ -1,21 +1,21 @@
 <template>
-    <div class="sm-image-gallery" ref="gallery">
+    <div class="image-gallery" ref="gallery">
         <div
-            class="sm-image-gallery-inner"
+            class="image-gallery-inner"
             :style="{ transform: `translateX(-${sliderOffset}px)` }">
             <div
-                class="sm-image-gallery-slide"
+                class="image-gallery-slide"
                 v-for="(image, index) in images"
                 :key="index">
                 <img
                     :src="imageSize('small', image as string)"
-                    class="sm-image-gallery-image"
+                    class="image-gallery-image"
                     @click="showModal(index)" />
             </div>
         </div>
         <div
             v-if="!hidePrevArrow"
-            class="sm-image-gallery-arrow sm-image-gallery-arrow-left"
+            class="image-gallery-arrow image-gallery-arrow-left"
             @click="prevSlide">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -27,7 +27,7 @@
         </div>
         <div
             v-if="!hideNextArrow"
-            class="sm-image-gallery-arrow sm-image-gallery-arrow-right"
+            class="image-gallery-arrow image-gallery-arrow-right"
             @click="nextSlide">
             <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <path
@@ -39,12 +39,12 @@
         </div>
         <div
             v-if="showModalImage !== null"
-            class="sm-image-gallery-modal"
+            class="image-gallery-modal"
             @click="hideModal">
             <img
                 :src="images[showModalImage]"
-                class="sm-image-gallery-modal-image" />
-            <div class="sm-image-gallery-modal-close" @click="hideModal">
+                class="image-gallery-modal-image" />
+            <div class="image-gallery-modal-close" @click="hideModal">
                 &times;
             </div>
         </div>
@@ -103,7 +103,7 @@ const handleTouchEnd = () => {
 
 const handleResize = () => {
     const slides = gallery.value.querySelectorAll(
-        ".sm-image-gallery-slide"
+        ".image-gallery-slide"
     ) as HTMLElement[];
     slideWidths.value = Array.from(slides).map((slide) => {
         const computedStyle = window.getComputedStyle(slide);
@@ -120,7 +120,7 @@ const handleResize = () => {
         );
     });
     sliderWidth.value = gallery.value.querySelector(
-        ".sm-image-gallery-inner"
+        ".image-gallery-inner"
     ).offsetWidth;
 
     let visibleWidth = 0;
@@ -228,7 +228,7 @@ const hideNextArrow = computed(() => {
 </script>
 
 <style lang="scss">
-.sm-image-gallery {
+.image-gallery {
     position: relative;
     overflow: hidden;
     margin: 20px auto;
@@ -237,13 +237,13 @@ const hideNextArrow = computed(() => {
     justify-content: center;
 }
 
-.sm-image-gallery-inner {
+.image-gallery-inner {
     display: flex;
     transition: transform 0.3s ease-in-out;
     // height: 100%;
 }
 
-.sm-image-gallery-slide {
+.image-gallery-slide {
     // display: flex;
     // justify-content: center;
     // align-items: center;
@@ -261,14 +261,14 @@ const hideNextArrow = computed(() => {
     }
 }
 
-.sm-image-gallery-image {
+.image-gallery-image {
     cursor: pointer;
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
 }
 
-.sm-image-gallery-arrow {
+.image-gallery-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -284,33 +284,33 @@ const hideNextArrow = computed(() => {
     transition: transform 0.2s ease-in-out;
 }
 
-.sm-image-gallery-arrow.disabled {
+.image-gallery-arrow.disabled {
     pointer-events: none;
 }
 
-.sm-image-gallery-arrow:hover {
+.image-gallery-arrow:hover {
     transform: translateY(-50%) scale(1.25);
 }
 
-.sm-image-gallery-arrow-left {
+.image-gallery-arrow-left {
     left: 0;
 }
 
-.sm-image-gallery-arrow-right {
+.image-gallery-arrow-right {
     right: 0;
 }
 
-.sm-image-gallery-arrow svg {
+.image-gallery-arrow svg {
     width: 100%;
     height: 100%;
     fill: none;
 }
 
-.sm-image-gallery-arrow svg path {
+.image-gallery-arrow svg path {
     stroke-width: 2;
 }
 
-.sm-image-gallery-modal {
+.image-gallery-modal {
     position: fixed;
     top: 0;
     left: 0;
@@ -327,7 +327,7 @@ const hideNextArrow = computed(() => {
     z-index: 1000;
 }
 
-.sm-image-gallery-modal * {
+.image-gallery-modal * {
     pointer-events: auto;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -335,13 +335,13 @@ const hideNextArrow = computed(() => {
     user-select: none;
 }
 
-.sm-image-gallery-modal-image {
+.image-gallery-modal-image {
     max-width: 90%;
     max-height: 90%;
     object-fit: contain;
 }
 
-.sm-image-gallery-modal-close {
+.image-gallery-modal-close {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -357,7 +357,7 @@ const hideNextArrow = computed(() => {
     transition: color 0.3s ease-in-out;
 }
 
-.sm-image-gallery-modal-close:hover {
+.image-gallery-modal-close:hover {
     color: rgba(255, 255, 255, 0.7);
 }
 </style>
diff --git a/resources/js/components/SMInputAttachments.vue b/resources/js/components/SMInputAttachments.vue
index e150a1c..d7b8379 100644
--- a/resources/js/components/SMInputAttachments.vue
+++ b/resources/js/components/SMInputAttachments.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="sm-input-group sm-input-attachments">
-        <label>Attachments</label>
+    <div class="input-attachments">
+        <label>Files</label>
         <ul>
             <li v-if="mediaItems.length == 0" class="attachments-none">
                 <ion-icon name="sad-outline"></ion-icon>
@@ -137,7 +137,7 @@ handleLoad();
 </script>
 
 <style lang="scss">
-.sm-input-group.sm-input-attachments {
+.input-attachments {
     display: block;
 
     label {
diff --git a/resources/js/components/SMLoadingIcon.vue b/resources/js/components/SMLoadingIcon.vue
index 34e1bac..6e29fe3 100644
--- a/resources/js/components/SMLoadingIcon.vue
+++ b/resources/js/components/SMLoadingIcon.vue
@@ -35,22 +35,22 @@ const props = defineProps({
     }
     div:nth-child(1) {
         left: 0em;
-        animation: sm-loading-icon1 0.6s infinite;
+        animation: loading-icon1 0.6s infinite;
     }
     div:nth-child(2) {
         left: 0em;
-        animation: sm-loading-icon2 0.6s infinite;
+        animation: loading-icon2 0.6s infinite;
     }
     div:nth-child(3) {
         left: 1em;
-        animation: sm-loading-icon2 0.6s infinite;
+        animation: loading-icon2 0.6s infinite;
     }
     div:nth-child(4) {
         left: 2em;
-        animation: sm-loading-icon3 0.6s infinite;
+        animation: loading-icon3 0.6s infinite;
     }
 
-    @keyframes sm-loading-icon1 {
+    @keyframes loading-icon1 {
         0% {
             transform: scale(0);
         }
@@ -58,7 +58,7 @@ const props = defineProps({
             transform: scale(1);
         }
     }
-    @keyframes sm-loading-icon3 {
+    @keyframes loading-icon3 {
         0% {
             transform: scale(1);
         }
@@ -66,7 +66,7 @@ const props = defineProps({
             transform: scale(0);
         }
     }
-    @keyframes sm-loading-icon2 {
+    @keyframes loading-icon2 {
         0% {
             transform: translate(0, 0);
         }
@@ -85,17 +85,17 @@ const props = defineProps({
         }
 
         div:nth-child(2) {
-            animation: sm-loading-large-icon2 0.6s infinite;
+            animation: loading-large-icon2 0.6s infinite;
         }
         div:nth-child(3) {
             left: 3em;
-            animation: sm-loading-large-icon2 0.6s infinite;
+            animation: loading-large-icon2 0.6s infinite;
         }
         div:nth-child(4) {
             left: 6em;
         }
 
-        @keyframes sm-loading-large-icon2 {
+        @keyframes loading-large-icon2 {
             0% {
                 transform: translate(0, 0);
             }
diff --git a/resources/js/components/SMMessage.vue b/resources/js/components/SMMessage.vue
index 7978d3a..369c295 100644
--- a/resources/js/components/SMMessage.vue
+++ b/resources/js/components/SMMessage.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="sm-message-container">
-        <div :class="['sm-message', type]">
+    <div class="message-container">
+        <div :class="['message', type]">
             <ion-icon v-if="icon" :name="icon"></ion-icon>
             <p>{{ message }}</p>
         </div>
@@ -25,11 +25,11 @@ defineProps({
 </script>
 
 <style lang="scss">
-.sm-message-container {
+.message-container {
     justify-content: center;
     align-self: center;
 
-    .sm-message {
+    .message {
         display: flex;
         padding: map-get($spacer, 2) map-get($spacer, 3);
         margin-bottom: map-get($spacer, 4);
diff --git a/resources/js/components/SMTab.vue b/resources/js/components/SMTab.vue
index 251dfc9..2d2e9bc 100644
--- a/resources/js/components/SMTab.vue
+++ b/resources/js/components/SMTab.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-show="label == selectedLabel" class="sm-tab-content">
+    <div v-show="label == selectedLabel" class="tab-content">
         <slot></slot>
     </div>
 </template>
@@ -18,7 +18,7 @@ const selectedLabel = inject("selectedLabel");
 </script>
 
 <style lang="scss">
-.sm-tab-content {
+.tab-content {
     padding: map-get($spacer, 3);
     background-color: #fff;
     border: 1px solid $border-color;
diff --git a/resources/js/components/SMTabGroup.vue b/resources/js/components/SMTabGroup.vue
index e0111ed..861ce04 100644
--- a/resources/js/components/SMTabGroup.vue
+++ b/resources/js/components/SMTabGroup.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="sm-tab-group">
-        <ul class="sm-tab-header">
+    <div class="tab-group">
+        <ul class="tab-header">
             <li
                 v-for="label in tabLabels"
                 :key="label"
-                :class="['sm-tab-item', { selected: selectedLabel == label }]"
+                :class="['tab-item', { selected: selectedLabel == label }]"
                 @click="selectedLabel = label">
                 {{ label }}
             </li>
@@ -24,17 +24,17 @@ provide("selectedLabel", selectedLabel);
 </script>
 
 <style lang="scss">
-.sm-tab-group {
+.tab-group {
     margin-bottom: map-get($spacer, 4);
 
-    .sm-tab-header {
+    .tab-header {
         // border-bottom: 1px solid $border-color;
         list-style-type: none;
         margin: 0;
         padding: 0;
     }
 
-    .sm-tab-item {
+    .tab-item {
         display: inline-block;
         padding: map-get($spacer, 2) map-get($spacer, 3);
         border: 1px solid transparent;
diff --git a/resources/js/views/Article.vue b/resources/js/views/Article.vue
index 15a1378..8020c3e 100644
--- a/resources/js/views/Article.vue
+++ b/resources/js/views/Article.vue
@@ -140,7 +140,7 @@ handleLoad();
 }
 
 @media only screen and (max-width: 768px) {
-    .sm-page-post-view .sm-heading-image {
+    .page-post-view .heading-image {
         height: 10rem;
     }
 }
diff --git a/resources/js/views/Minecraft.vue b/resources/js/views/Minecraft.vue
index 03e295e..a62f00c 100644
--- a/resources/js/views/Minecraft.vue
+++ b/resources/js/views/Minecraft.vue
@@ -96,7 +96,7 @@ const downloads = [
 </script>
 
 <style lang="scss">
-.sm-page-minecraft {
+.page-minecraft {
     h3 {
         margin-bottom: 0.5rem;
     }
diff --git a/resources/js/views/MinecraftCurve.vue b/resources/js/views/MinecraftCurve.vue
index 882d7da..ae52a3a 100644
--- a/resources/js/views/MinecraftCurve.vue
+++ b/resources/js/views/MinecraftCurve.vue
@@ -1055,7 +1055,7 @@ window.onload = function () {
 </script>
 
 <style lang="scss">
-.sm-page-minecraft-curve {
+.page-minecraft-curve {
     path {
         stroke-width: 4;
         stroke: #000;
diff --git a/resources/js/views/dashboard/EventEdit.vue b/resources/js/views/dashboard/EventEdit.vue
index 3d85b54..a2dcea5 100644
--- a/resources/js/views/dashboard/EventEdit.vue
+++ b/resources/js/views/dashboard/EventEdit.vue
@@ -409,7 +409,7 @@ loadData();
 </script>
 
 <style lang="scss">
-.sm-page-event-edit {
+.page-event-edit {
     background-color: #f8f8f8;
 }
 </style>
diff --git a/resources/js/views/dashboard/PostEdit.vue b/resources/js/views/dashboard/PostEdit.vue
index 7a4537c..1ce92a2 100644
--- a/resources/js/views/dashboard/PostEdit.vue
+++ b/resources/js/views/dashboard/PostEdit.vue
@@ -1,6 +1,6 @@
 <template>
     <SMPage
-        class="sm-page-post-edit"
+        class="page-post-edit"
         :page-error="pageError"
         permission="admin/posts">
         <template #container>
@@ -326,7 +326,7 @@ loadData();
 </script>
 
 <style lang="scss">
-.sm-page-post-edit {
+.page-post-edit {
     background-color: #f8f8f8;
 }
 </style>
diff --git a/resources/js/views/dashboard/PostList.vue b/resources/js/views/dashboard/PostList.vue
index a9e24cf..169a2ec 100644
--- a/resources/js/views/dashboard/PostList.vue
+++ b/resources/js/views/dashboard/PostList.vue
@@ -1,5 +1,5 @@
 <template>
-    <SMPage permission="admin/posts" class="sm-page-post-list">
+    <SMPage permission="admin/posts" class="page-post-list">
         <template #container>
             <SMMessage v-if="formMessage" type="error" :message="formMessage" />
             <SMToolbar>
@@ -303,7 +303,7 @@ const handleDelete = async (item) => {
 </script>
 
 <style lang="scss">
-.sm-page-post-list {
+.page-post-list {
     background-color: #f8f8f8;
 }
 </style>