diff --git a/resources/css/app.scss b/resources/css/app.scss
index 6098d19..f332a46 100644
--- a/resources/css/app.scss
+++ b/resources/css/app.scss
@@ -136,30 +136,6 @@ code {
     margin-bottom: 1rem;
 }
 
-/* Dialog */
-.modal {
-    position: fixed;
-    display: flex;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(2px);
-    -webkit-backdrop-filter: blur(2px);
-    z-index: 1000;
-    padding: 1rem;
-
-    .dialog {
-        flex: 0 0 auto;
-        margin: 0;
-        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.2);
-    }
-}
-
 /* Page Errors */
 .page-error {
     display: flex;
diff --git a/resources/js/components/SMModal.vue b/resources/js/components/SMModal.vue
index 19ccbf8..7e8ab6c 100644
--- a/resources/js/components/SMModal.vue
+++ b/resources/js/components/SMModal.vue
@@ -15,3 +15,22 @@ onUnmounted(() => {
     document.getElementsByTagName("body")[0].style.overflow = "auto";
 });
 </script>
+
+<style lang="scss">
+.sm-modal {
+    position: fixed;
+    display: flex;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(2px);
+    -webkit-backdrop-filter: blur(2px);
+    z-index: 1000;
+    padding: 1rem;
+}
+</style>