diff --git a/back/db/api-db.ts b/back/db/api-db.ts
index cbe37b4..430f552 100644
--- a/back/db/api-db.ts
+++ b/back/db/api-db.ts
@@ -53,7 +53,7 @@ export async function getRooms(mailboxId) {
                     INNER JOIN flag ON flag.flag_id = flag_name.flag_id AND flag.message_id = app_room_message.message_id
                     WHERE flag_name.flag_id = flag.flag_id
                 )
-        ) notSeenRoom ON notSeenThreads.room_id = room.room_id
+        ) notSeenRoom ON notSeenRoom.room_id = room.room_id
 
         LEFT JOIN (
             SELECT app_room_message.message_id, app_thread.parent_id
diff --git a/front/src/components/modals/MessageViewModal.vue b/front/src/components/modals/MessageViewModal.vue
index 20a4854..c8c85ef 100644
--- a/front/src/components/modals/MessageViewModal.vue
+++ b/front/src/components/modals/MessageViewModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Message } from "@/store/models/model";
 import { ref, watch, defineProps, PropType } from "vue";
+import Content from "../structure/message/Content.vue";
 import Modal from "./Modal.vue";
 
 const props = defineProps({ messageId: { type: Number, require: true }, message: Object as PropType<Message> });
@@ -16,11 +17,23 @@ watch(
 </script>
 
 <template>
-    <div>
-        <Modal v-if="messageId != -1" :title="props.message?.subject" @close-modal="() => $emit('close')">
-            <template v-slot:body> yep </template>
+    <div class="main">
+        <Modal v-if="messageId != -1" @close-modal="() => $emit('close')">
+            <template v-slot:body>
+                <div>{{ props.message?.subject ?? "No Object" }}</div>
+                <Content type="large" :content="props.message?.content" class="content" />
+            </template>
         </Modal>
     </div>
 </template>
 
-<style></style>
+<style scoped>
+.main {
+    min-width: 700px;
+}
+/* todo */
+.content {
+    width: 700px;
+    height: 700px;
+}
+</style>
diff --git a/front/src/components/structure/message/Content.vue b/front/src/components/structure/message/Content.vue
new file mode 100644
index 0000000..db3af9f
--- /dev/null
+++ b/front/src/components/structure/message/Content.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { defineProps, onMounted, ref, watch } from "vue";
+import DOMPurify from "dompurify";
+
+const props = defineProps({
+    content: String,
+    type: String,
+});
+
+const iframe = ref<HTMLIFrameElement>();
+
+// todo dompurify
+// background vs color
+const htmlDefault = (html: string) => {
+    return `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+            <meta charset="UTF-8">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+            <title>Document</title>
+        </head>
+        <body style="margin: 0;">
+            ${html}
+        </body>
+        </html>
+    `;
+};
+
+function setIframeContent(content: string | undefined) {
+    if (!iframe.value) return;
+    if (!content) return;
+    const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
+    if (!doc) return;
+    const html = DOMPurify.sanitize(content);
+    doc.open();
+    doc.write(htmlDefault(html));
+    doc.close();
+}
+
+watch(
+    () => props.content,
+    (content: string | undefined) => {
+        setIframeContent(content);
+    },
+);
+
+onMounted(() => {
+    setIframeContent(props.content);
+});
+</script>
+<template>
+    <iframe :class="type" ref="iframe"></iframe>
+</template>
+
+<style scoped>
+iframe {
+    overflow-y: auto;
+    max-height: 300px;
+    flex-basis: 100%;
+    border: none;
+    max-width: 640px; /* template width being 600px to 640px up to 750px (experiment and test) */
+    background-color: rgb(234, 234, 234);
+}
+
+.large {
+    max-height: 700px;
+}
+</style>
diff --git a/front/src/views/room/Message.vue b/front/src/components/structure/message/Message.vue
similarity index 64%
rename from front/src/views/room/Message.vue
rename to front/src/components/structure/message/Message.vue
index 0fccc68..fc1e798 100644
--- a/front/src/views/room/Message.vue
+++ b/front/src/components/structure/message/Message.vue
@@ -1,57 +1,14 @@
 <script setup lang="ts">
-import { defineProps, onMounted, ref, watch, PropType } from "vue";
-import { decodeEmojis } from "../../utils/string";
-import { removeDuplicates } from "../../utils/array";
-import DOMPurify from "dompurify";
+import { defineProps, ref, PropType } from "vue";
+import { decodeEmojis } from "../../../utils/string";
+import { removeDuplicates } from "../../../utils/array";
 import { Address, Message } from "@/store/models/model";
+import Content from "./Content.vue";
 
 const props = defineProps({
     msg: Object as PropType<Message>,
     members: Array as PropType<Address[]>,
 });
-console.log(props.msg);
-const iframe = ref<HTMLIFrameElement>();
-
-// todo dompurify
-// background vs color
-const htmlDefault = (html: string) => {
-    return `
-        <!DOCTYPE html>
-        <html lang="en">
-        <head>
-            <meta charset="UTF-8">
-            <meta http-equiv="X-UA-Compatible" content="IE=edge">
-            <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <title>Document</title>
-        </head>
-        <body style="margin: 0;">
-            ${html}
-        </body>
-        </html>
-    `;
-};
-
-function setIframeContent(content: string | undefined) {
-    if (!iframe.value) return;
-    if (!content) return;
-    const doc = iframe.value.contentDocument || iframe.value.contentWindow?.document;
-    if (!doc) return;
-    const html = DOMPurify.sanitize(content);
-    doc.open();
-    doc.write(htmlDefault(html));
-    doc.close();
-}
-
-watch(
-    () => props.msg,
-    (newData: Message | undefined) => {
-        setIframeContent(newData?.content);
-    },
-);
-
-onMounted(() => {
-    setIframeContent(props.msg?.content);
-});
 
 const displayAddresses = (addressIds: string[] | undefined): string => {
     if (!addressIds) return "";
@@ -106,7 +63,7 @@ const classes = (): string => {
             </div>
         </div>
         <div class="content" :class="[classes()]">
-            <iframe ref="iframe"></iframe>
+            <Content :content="props.msg?.content" />
             <div class="options">options {{ props?.msg?.flags }}</div>
         </div>
     </div>
@@ -156,15 +113,6 @@ const classes = (): string => {
     background-color: var(--tertiary-background);
 }
 
-iframe {
-    overflow-y: auto;
-    max-height: 300px;
-    flex-basis: 100%;
-    border: none;
-    max-width: 640px; /* template width being 600px to 640px up to 750px (experiment and test) */
-    background-color: rgb(234, 234, 234);
-}
-
 .options {
     flex: 1;
     text-align: center;
diff --git a/front/src/components/structure/message/Options.vue b/front/src/components/structure/message/Options.vue
new file mode 100644
index 0000000..b7a089f
--- /dev/null
+++ b/front/src/components/structure/message/Options.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { defineProps, onMounted, ref, watch, PropType } from "vue";
+import { decodeEmojis } from "../../../utils/string";
+import { removeDuplicates } from "../../../utils/array";
+import DOMPurify from "dompurify";
+import { Address, Message } from "@/store/models/model";
+
+const props = defineProps({
+    msg: Object as PropType<Message>,
+});
+</script>
+<template>
+    <div>
+        <div>mark as not read</div>
+        <div>flag favorite</div>
+        <div>reply</div>
+        <div>delete from all</div>
+        <div>delete from remote</div>
+        <div>transfer</div>
+        <div>see source</div>
+    </div>
+</template>
+
+<style scoped>
+div {
+    text-align: center;
+}
+</style>
diff --git a/front/src/views/room/RoomView.vue b/front/src/views/room/RoomView.vue
index 8c70699..3740044 100644
--- a/front/src/views/room/RoomView.vue
+++ b/front/src/views/room/RoomView.vue
@@ -3,7 +3,7 @@ import { useStore } from "vuex";
 import { useRoute, onBeforeRouteUpdate } from "vue-router";
 import { onBeforeMount, ref } from "vue";
 import Header from "./Header.vue";
-import Message from "./Message.vue";
+import Message from "../../components/structure/message/Message.vue";
 import { Room, RoomType } from "@/store/models/model";
 import MessageViewModal from "@/components/modals/MessageViewModal.vue";
 
