diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index a8cfe737..84165b6c 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -1,21 +1,35 @@
 <template>
-  <div class="flex gap-1.5 border-t px-10 py-2.5">
-    <Button
-      ref="sendEmailRef"
-      variant="ghost"
-      :class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
-      label="Reply"
-      @click="showCommunicationBox = !showCommunicationBox"
-    >
-      <template #prefix>
-        <EmailIcon class="h-4" />
-      </template>
-    </Button>
-    <!-- <Button variant="ghost" label="Comment">
-      <template #prefix>
-        <CommentIcon class="h-4" />
-      </template>
-    </Button> -->
+  <div class="flex justify-between gap-3 border-t px-10 py-2.5">
+    <div class="flex gap-1.5">
+      <Button
+        ref="sendEmailRef"
+        variant="ghost"
+        :class="[showCommunicationBox ? '!bg-gray-300 hover:!bg-gray-200' : '']"
+        label="Reply"
+        @click="showCommunicationBox = !showCommunicationBox"
+      >
+        <template #prefix>
+          <EmailIcon class="h-4" />
+        </template>
+      </Button>
+      <!-- <Button variant="ghost" label="Comment">
+        <template #prefix>
+          <CommentIcon class="h-4" />
+        </template>
+      </Button> -->
+    </div>
+    <div v-if="showCommunicationBox" class="flex gap-1.5">
+      <Button
+        label="CC"
+        @click="newEmailEditor.cc = !newEmailEditor.cc"
+        :class="[newEmailEditor.cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+      />
+      <Button
+        label="BCC"
+        @click="newEmailEditor.bcc = !newEmailEditor.bcc"
+        :class="[newEmailEditor.bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+      />
+    </div>
   </div>
   <div
     v-show="showCommunicationBox"
@@ -71,7 +85,7 @@ const showCommunicationBox = ref(false)
 const newEmail = ref('')
 const newEmailEditor = ref(null)
 const sendEmailRef = ref(null)
-const attachments = ref([]);
+const attachments = ref([])
 
 watch(
   () => showCommunicationBox.value,
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index d1437538..5a2eeeae 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -9,7 +9,7 @@
     :editable="editable"
   >
     <template #top>
-      <div class="mx-10 border-b border-t py-2.5">
+      <div class="mx-10 border-t py-2.5" :class="[cc || bcc ? '' : 'border-b']">
         <span class="text-xs text-gray-500">TO:</span>
         <span
           v-if="modelValue.email"
@@ -18,6 +18,24 @@
           {{ modelValue.email }}
         </span>
       </div>
+      <div v-if="cc" class="mx-10 py-2.5" :class="bcc ? '' : 'border-b'">
+        <span class="text-xs text-gray-500">CC:</span>
+        <span
+          v-if="modelValue.email"
+          class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
+        >
+          {{ modelValue.email }}
+        </span>
+      </div>
+      <div v-if="bcc" class="mx-10 border-b py-2.5">
+        <span class="text-xs text-gray-500">BCC:</span>
+        <span
+          v-if="modelValue.email"
+          class="ml-2 cursor-pointer rounded-md bg-gray-100 px-2 py-1 text-sm text-gray-800"
+        >
+          {{ modelValue.email }}
+        </span>
+      </div>
     </template>
     <template v-slot:editor="{ editor }">
       <EditorContent
@@ -42,10 +60,12 @@
             </template>
           </AttachmentItem>
         </div>
-        <div class="flex justify-between border-t px-10 py-2.5">
-          <div class="flex items-center">
+        <div
+          class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
+        >
+          <div class="flex items-center overflow-x-auto">
             <TextEditorFixedMenu
-              class="-ml-1 overflow-x-auto"
+              class="-ml-1"
               :buttons="textEditorMenuButtons"
             />
             <FileUploader
@@ -70,10 +90,12 @@
             </FileUploader>
           </div>
           <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
-            <Button v-bind="discardButtonProps || {}"> Discard </Button>
-            <Button variant="solid" v-bind="submitButtonProps || {}">
-              Submit
-            </Button>
+            <Button v-bind="discardButtonProps || {}" label="Discard" />
+            <Button
+              variant="solid"
+              v-bind="submitButtonProps || {}"
+              label="Submit"
+            />
           </div>
         </div>
       </div>
@@ -129,6 +151,8 @@ const modelValue = defineModel()
 const attachments = defineModel('attachments')
 
 const textEditor = ref(null)
+const cc = ref(false)
+const bcc = ref(false)
 
 const editor = computed(() => {
   return textEditor.value.editor
@@ -138,7 +162,7 @@ function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment)
 }
 
-defineExpose({ editor })
+defineExpose({ editor, cc, bcc })
 
 const textEditorMenuButtons = [
   'Paragraph',