diff --git a/components/Modal.vue b/components/Modal.vue
index ef96311..041dd1a 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -1,25 +1,32 @@
 <template>
-  <dialog ref="dialog" class="modal">
-    <h1 class="modal-title">{{ title }}</h1>
-    <slot />
+  <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
+	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
+		<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
+	</span>
+	<div class="modal-content">
+		<h1 class="modal-title">{{ title }}</h1>
+		<slot />
+	</div>
   </dialog>
 </template>
 
 <script lang="ts" setup>
 import type { ModalProps } from '~/types/interfaces';
-
+import Button from './UserInterface/Button.vue';
 
 const props = defineProps<ModalProps>();
 const dialog = ref<HTMLDialogElement>();
 
+console.log("props:", props);
+
 onMounted(() => {
-  if (dialog) {
-    dialog.value?.showModal();
+  if (dialog.value) {
+    dialog.value.showModal();
     if (props.onClose) {
-      dialog.value?.addEventListener("close", props.onClose);
+      dialog.value.addEventListener("close", props.onClose);
     }
     if (props.onCancel) {
-      dialog.value?.addEventListener("cancel", props.onCancel);
+      dialog.value.addEventListener("cancel", props.onCancel);
     }
   }
 });
@@ -33,15 +40,22 @@ onMounted(() => {
   justify-content: center;
   align-items: center;
   flex-direction: column;
+  gap: 1em;
   opacity: 100%;
   padding: 1%;
-  background-color: var(--background-color);
-  color: var(--main-text-color);
+  background-color: var(--sidebar-highlighted-background-color);
+  color: var(--text-color);
+  overflow: hidden;
 }
 
-.modal::backdrop {
-  background-color: rgb(50, 50, 50);
-  opacity: 70%;
+.modal-regular::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 0%;
+}
+
+.modal-obscure::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 80%;
 }
 
 .modal-top-container {
@@ -55,5 +69,16 @@ onMounted(() => {
 
 .modal-title {
   font-size: 1.5rem;
+  padding: 0;
 }
+
+.modal-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1em;
+	margin: 1em;
+	width: 100%;
+}
+
 </style>
\ No newline at end of file