diff --git a/resources/js/components/SMDialog.vue b/resources/js/components/SMFormCard.vue
similarity index 83%
rename from resources/js/components/SMDialog.vue
rename to resources/js/components/SMFormCard.vue
index e6b556e..055f862 100644
--- a/resources/js/components/SMDialog.vue
+++ b/resources/js/components/SMFormCard.vue
@@ -1,14 +1,14 @@
 <template>
     <div
         :class="[
-            'sm-dialog',
-            { 'sm-dialog-narrow': narrow },
-            { 'sm-dialog-full': full },
-            { 'sm-dialog-noshadow': noShadow },
+            'sm-form-card',
+            { 'sm-form-card-narrow': narrow },
+            { 'sm-form-card-full': full },
+            { 'sm-form-card-noshadow': noShadow },
         ]">
         <transition name="fade">
-            <div v-if="loading" class="sm-dialog-loading-cover">
-                <div class="sm-dialog-loading">
+            <div v-if="loading" class="sm-form-card-loading-cover">
+                <div class="sm-form-card-loading">
                     <SMLoadingIcon />
                     <span>{{ loadingMessage }}</span>
                 </div>
@@ -46,7 +46,7 @@ defineProps({
 </script>
 
 <style lang="scss">
-.sm-dialog {
+.sm-form-card {
     flex-direction: column;
     margin: 0 auto;
     background-color: #eee;
@@ -58,7 +58,7 @@ defineProps({
     min-width: map-get($spacer, 5) * 12;
     box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.5);
 
-    &.sm-dialog-noshadow {
+    &.sm-form-card-noshadow {
         box-shadow: none !important;
     }
 
@@ -70,16 +70,16 @@ defineProps({
         font-size: 90%;
     }
 
-    &.sm-dialog-narrow {
+    &.sm-form-card-narrow {
         min-width: auto;
         max-width: map-get($spacer, 5) * 10;
     }
 
-    &.sm-dialog-full {
+    &.sm-form-card-full {
         width: 100%;
     }
 
-    .sm-dialog-loading-cover {
+    .sm-form-card-loading-cover {
         position: fixed;
         display: flex;
         justify-content: center;
@@ -93,7 +93,7 @@ defineProps({
         background-color: rgba(255, 255, 255, 0.5);
         z-index: 19000;
 
-        .sm-dialog-loading {
+        .sm-form-card-loading {
             display: flex;
             flex-direction: column;
             padding: map-get($spacer, 5) calc(map-get($spacer, 5) * 2);
@@ -115,15 +115,15 @@ defineProps({
 }
 
 @media only screen and (max-width: 640px) {
-    .sm-container .sm-dialog {
+    .sm-container .sm-form-card {
         margin: 0 -1rem;
 
-        &.sm-dialog-full {
+        &.sm-form-card-full {
             width: auto;
         }
     }
 
-    .sm-dialog {
+    .sm-form-card {
         padding: map-get($spacer, 5) map-get($spacer, 4) map-get($spacer, 4)
             map-get($spacer, 4);
         min-width: auto;
diff --git a/resources/js/components/dialogs/SMDialogChangePassword.vue b/resources/js/components/dialogs/SMDialogChangePassword.vue
index 373264f..0a4769d 100644
--- a/resources/js/components/dialogs/SMDialogChangePassword.vue
+++ b/resources/js/components/dialogs/SMDialogChangePassword.vue
@@ -1,6 +1,6 @@
 <template>
     <SMModal>
-        <SMDialog :loading="dialogLoading">
+        <SMFormCard :loading="dialogLoading">
             <h1>Change Password</h1>
             <p class="text-center">Enter your new password below</p>
             <SMForm :model-value="form" @submit="handleSubmit">
@@ -20,7 +20,7 @@
                     </template>
                 </SMFormFooter>
             </SMForm>
-        </SMDialog>
+        </SMFormCard>
     </SMModal>
 </template>
 
@@ -34,7 +34,7 @@ import { useApplicationStore } from "../../store/ApplicationStore";
 import { useToastStore } from "../../store/ToastStore";
 import { useUserStore } from "../../store/UserStore";
 import SMButton from "../SMButton.vue";
-import SMDialog from "../SMDialog.vue";
+import SMFormCard from "../SMFormCard.vue";
 import SMForm from "../SMForm.vue";
 import SMFormFooter from "../SMFormFooter.vue";
 import SMInput from "../SMInput.vue";
diff --git a/resources/js/components/dialogs/SMDialogConfirm.vue b/resources/js/components/dialogs/SMDialogConfirm.vue
index c81e243..8bca187 100644
--- a/resources/js/components/dialogs/SMDialogConfirm.vue
+++ b/resources/js/components/dialogs/SMDialogConfirm.vue
@@ -1,6 +1,6 @@
 <template>
     <SMModal>
-        <SMDialog>
+        <SMFormCard>
             <h1>{{ props.title }}</h1>
             <p v-html="computedSanitizedText"></p>
             <SMFormFooter>
@@ -17,7 +17,7 @@
                         @click="handleClickConfirm()" />
                 </template>
             </SMFormFooter>
-        </SMDialog>
+        </SMFormCard>
     </SMModal>
 </template>
 
@@ -27,7 +27,7 @@ import { computed, onMounted, onUnmounted } from "vue";
 import { closeDialog } from "vue3-promise-dialog";
 import { useApplicationStore } from "../../store/ApplicationStore";
 import SMButton from "../SMButton.vue";
-import SMDialog from "../SMDialog.vue";
+import SMFormCard from "../SMFormCard.vue";
 import SMFormFooter from "../SMFormFooter.vue";
 import SMModal from "../SMModal.vue";
 
diff --git a/resources/js/components/dialogs/SMDialogMedia.vue b/resources/js/components/dialogs/SMDialogMedia.vue
index f299031..8f202d4 100644
--- a/resources/js/components/dialogs/SMDialogMedia.vue
+++ b/resources/js/components/dialogs/SMDialogMedia.vue
@@ -1,6 +1,6 @@
 <template>
     <SMModal>
-        <SMDialog
+        <SMFormCard
             :loading="dialogLoading"
             full
             :loading-message="dialogLoadingMessage"
@@ -96,7 +96,7 @@
                 style="display: none"
                 :accept="computedAccepts"
                 @change="handleChangeUpload" />
-        </SMDialog>
+        </SMFormCard>
     </SMModal>
 </template>
 
@@ -109,7 +109,7 @@ import { bytesReadable } from "../../helpers/types";
 import { getFilePreview } from "../../helpers/utils";
 import { useApplicationStore } from "../../store/ApplicationStore";
 import SMButton from "../SMButton.vue";
-import SMDialog from "../SMDialog.vue";
+import SMFormCard from "../SMFormCard.vue";
 import SMFormFooter from "../SMFormFooter.vue";
 import SMLoadingIcon from "../SMLoadingIcon.vue";
 import SMMessage from "../SMMessage.vue";
diff --git a/resources/js/views/Contact.vue b/resources/js/views/Contact.vue
index b7f5792..cf4ae28 100644
--- a/resources/js/views/Contact.vue
+++ b/resources/js/views/Contact.vue
@@ -85,7 +85,7 @@
                 </SMColumn>
                 <SMColumn>
                     <div>
-                        <SMDialog narrow>
+                        <SMFormCard narrow>
                             <template v-if="!formSubmitted">
                                 <SMForm v-model="form" @submit="handleSubmit">
                                     <SMInput control="name" />
@@ -111,7 +111,7 @@
                                     :to="{ name: 'home' }"
                                     label="Home" />
                             </template>
-                        </SMDialog>
+                        </SMFormCard>
                     </div>
                 </SMColumn>
             </SMRow>
@@ -123,7 +123,7 @@
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMInput from "../components/SMInput.vue";
 import { api } from "../helpers/api";
diff --git a/resources/js/views/EmailVerify.vue b/resources/js/views/EmailVerify.vue
index b8eb9d7..f267ebc 100644
--- a/resources/js/views/EmailVerify.vue
+++ b/resources/js/views/EmailVerify.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog class="mt-5" narrow>
+            <SMFormCard class="mt-5" narrow>
                 <template v-if="!formDone">
                     <h1>Email Verify</h1>
                     <p>
@@ -34,7 +34,7 @@
                         </template>
                     </SMFormFooter>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -44,7 +44,7 @@ import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import { useRoute } from "vue-router";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/ForgotPassword.vue b/resources/js/views/ForgotPassword.vue
index b5a5d0c..8a9f18d 100644
--- a/resources/js/views/ForgotPassword.vue
+++ b/resources/js/views/ForgotPassword.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog class="mt-5">
+            <SMFormCard class="mt-5">
                 <template v-if="!formDone">
                     <h1>Forgot Password</h1>
                     <p>
@@ -41,7 +41,7 @@
                         </SMColumn>
                     </SMRow>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -50,7 +50,7 @@
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/ForgotUsername.vue b/resources/js/views/ForgotUsername.vue
index aead105..a60a843 100644
--- a/resources/js/views/ForgotUsername.vue
+++ b/resources/js/views/ForgotUsername.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog class="mt-5">
+            <SMFormCard class="mt-5">
                 <template v-if="!formDone">
                     <h1>Forgot Username</h1>
                     <p>
@@ -40,7 +40,7 @@
                         </SMColumn>
                     </SMRow>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -49,7 +49,7 @@
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/Home.vue b/resources/js/views/Home.vue
index 9854054..d15dd7c 100644
--- a/resources/js/views/Home.vue
+++ b/resources/js/views/Home.vue
@@ -110,14 +110,14 @@
                 Sign up for our mailing list to receive expert tips and tricks,
                 as well as updates on upcoming workshops.
             </p>
-            <SMDialog class="p-0" no-shadow>
+            <SMFormCard class="p-0" no-shadow>
                 <SMForm v-model="form" @submit="handleSubscribe">
                     <div class="form-row">
                         <SMInput control="email" />
                         <SMButton type="submit" label="Subscribe" />
                     </div>
                 </SMForm>
-            </SMDialog>
+            </SMFormCard>
         </SMContainer>
     </SMPage>
 </template>
@@ -128,7 +128,7 @@ import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
 import SMCarousel from "../components/SMCarousel.vue";
 import SMCarouselSlide from "../components/SMCarouselSlide.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMInput from "../components/SMInput.vue";
 
diff --git a/resources/js/views/Login.vue b/resources/js/views/Login.vue
index 9cc646e..e7af579 100644
--- a/resources/js/views/Login.vue
+++ b/resources/js/views/Login.vue
@@ -1,6 +1,6 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
-        <SMDialog class="mt-5">
+        <SMFormCard class="mt-5">
             <h1>Log in</h1>
             <SMForm v-model="form" @submit="handleSubmit">
                 <SMInput control="username">
@@ -28,7 +28,7 @@
                     </template>
                 </SMFormFooter>
             </SMForm>
-        </SMDialog>
+        </SMFormCard>
     </SMPage>
 </template>
 
@@ -36,7 +36,7 @@
 import { reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/Register.vue b/resources/js/views/Register.vue
index 0d01b3e..559f567 100644
--- a/resources/js/views/Register.vue
+++ b/resources/js/views/Register.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <template #container>
-            <SMDialog full class="mt-5" :narrow="formDone">
+            <SMFormCard full class="mt-5" :narrow="formDone">
                 <template v-if="!formDone">
                     <h1>Register</h1>
                     <SMForm v-model="form" @submit="handleSubmit">
@@ -64,7 +64,7 @@
                         </template>
                     </SMFormFooter>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </template>
     </SMPage>
 </template>
@@ -73,7 +73,7 @@
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/ResendEmailVerify.vue b/resources/js/views/ResendEmailVerify.vue
index 499b7a7..2b6006c 100644
--- a/resources/js/views/ResendEmailVerify.vue
+++ b/resources/js/views/ResendEmailVerify.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog class="mt-5" narrow>
+            <SMFormCard class="mt-5" narrow>
                 <template v-if="!formDone">
                     <h1>Resend Verify Email</h1>
                     <SMForm v-model="form" @submit="handleSubmit">
@@ -37,7 +37,7 @@
                         </template>
                     </SMFormFooter>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -46,7 +46,7 @@
 import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/ResetPassword.vue b/resources/js/views/ResetPassword.vue
index 5ea504b..95a0b4d 100644
--- a/resources/js/views/ResetPassword.vue
+++ b/resources/js/views/ResetPassword.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow>
+            <SMFormCard narrow>
                 <template v-if="!formDone">
                     <h1>Reset Password</h1>
                     <SMForm v-model="form" @submit="handleSubmit">
@@ -36,7 +36,7 @@
                         </template>
                     </SMFormFooter>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -46,7 +46,7 @@ import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import { useRoute } from "vue-router";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/Unsubscribe.vue b/resources/js/views/Unsubscribe.vue
index 804acfc..8f87f06 100644
--- a/resources/js/views/Unsubscribe.vue
+++ b/resources/js/views/Unsubscribe.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage no-breadcrumbs background="/img/background.jpg">
         <SMRow>
-            <SMDialog narrow>
+            <SMFormCard narrow>
                 <template v-if="!formDone">
                     <h1>Unsubscribe</h1>
                     <p>
@@ -28,7 +28,7 @@
                         </SMColumn>
                     </SMRow>
                 </template>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -38,7 +38,7 @@ import { reactive, ref } from "vue";
 import { useReCaptcha } from "vue-recaptcha-v3";
 import { useRoute } from "vue-router";
 import SMButton from "../components/SMButton.vue";
-import SMDialog from "../components/SMDialog.vue";
+import SMFormCard from "../components/SMFormCard.vue";
 import SMForm from "../components/SMForm.vue";
 import SMFormFooter from "../components/SMFormFooter.vue";
 import SMInput from "../components/SMInput.vue";
diff --git a/resources/js/views/dashboard/MediaEdit.vue b/resources/js/views/dashboard/MediaEdit.vue
index 9570175..9c52541 100644
--- a/resources/js/views/dashboard/MediaEdit.vue
+++ b/resources/js/views/dashboard/MediaEdit.vue
@@ -1,7 +1,7 @@
 <template>
     <SMPage :page-error="pageError" permission="admin/media">
         <SMRow>
-            <SMDialog>
+            <SMFormCard>
                 <h1>{{ page_title }}</h1>
                 <SMForm
                     :model-value="form"
@@ -56,7 +56,7 @@
                         </SMColumn>
                     </SMRow>
                 </SMForm>
-            </SMDialog>
+            </SMFormCard>
         </SMRow>
     </SMPage>
 </template>
@@ -65,7 +65,7 @@
 import { computed, reactive, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import SMButton from "../../components/SMButton.vue";
-import SMDialog from "../../components/SMDialog.vue";
+import SMFormCard from "../../components/SMFormCard.vue";
 import SMForm from "../../components/SMForm.vue";
 import SMInput from "../../components/SMInput.vue";