diff --git a/frontend/src/components/note/NoteDetail.vue b/frontend/src/components/note/NoteDetail.vue
index 6633677..3d7cc25 100644
--- a/frontend/src/components/note/NoteDetail.vue
+++ b/frontend/src/components/note/NoteDetail.vue
@@ -12,21 +12,8 @@
         </PText>
       </div>
 
-      <div
-        v-if="note.access_level.can_edit"
-        class="flex flex-col items-center gap-4 md:mt-2 md:flex-row"
-      >
-        <PIconButton
-          class="shrink-0"
-          :icon="PeyEditIcon"
-          type="button"
-          @click="navigateTo({ name: 'note-edit' })"
-        />
-
-        <NoteDeleteButton
-          :note-id="note.uuid"
-          @success="navigateTo({ name: 'notes' })"
-        />
+      <div class="flex flex-col items-center gap-4 md:mt-2 md:flex-row">
+        <slot name="actions" />
       </div>
     </div>
 
@@ -106,25 +93,17 @@
       </div>
     </div>
 
-    <div v-if="linkedNotes?.length" class="mt-8">
+    <div v-if="note.linked_notes.length" class="mt-8">
       <PHeading :lvl="4" responsive>
         {{ t('note.relatedNotes') }}
       </PHeading>
 
       <div class="mt-4 flex flex-wrap gap-2">
-        <NuxtLink
-          v-for="linkedNote in linkedNotes"
-          :key="linkedNote.uuid"
-          class="*:cursor-pointer"
-          :to="linkedNote.to"
-        >
-          <PChip
-            color="primary"
-            :icon="PeyLinkIcon"
-            :label="linkedNote.title"
-            size="small"
-          />
-        </NuxtLink>
+        <NoteLinkChip
+          v-for="linkedNoteId in note.linked_notes"
+          :key="linkedNoteId"
+          :note-id="linkedNoteId"
+        />
       </div>
     </div>
 
@@ -139,57 +118,22 @@
     </div>
 
     <div class="mt-8">
-      <NoteFeedbacks :note="note" />
+      <NoteFeedback :note="note" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PChip, PHeading, PIconButton, PText, PTooltip } from '@pey/core';
-import { PeyEditIcon, PeyLinkIcon } from '@pey/icons';
+import { PChip, PHeading, PText, PTooltip } from '@pey/core';
 
 const props = defineProps<{ note: Note }>();
 
 const { t } = useI18n();
 const { data: users } = useGetUsers();
-const { data: myNotes } = useGetNotes();
-const { data: mentionedNotes } = useGetNotes({ retrieveMentions: true });
 
 const mentionedUsers = computed(() =>
   users.value?.filter(({ email }) =>
     props.note.mentioned_users.includes(email),
   ),
 );
-const linkedNotes = computed(() => [
-  ...(myNotes.value
-    ?.filter(({ uuid }) => props.note.linked_notes.includes(uuid))
-    .map((note) => ({
-      ...note,
-      to:
-        note.type === NOTE_TYPE.template
-          ? {
-              name: 'template',
-              params: { id: note.uuid },
-            }
-          : {
-              name: 'note',
-              params: {
-                type: NOTE_TYPE_ROUTE_PARAM[note.type],
-                id: note.uuid,
-              },
-            },
-    })) || []),
-  ...(mentionedNotes.value
-    ?.filter(({ uuid }) => props.note.linked_notes.includes(uuid))
-    .map((note) => ({
-      ...note,
-      to: {
-        name: 'note',
-        params: {
-          type: '-',
-          id: note.uuid,
-        },
-      },
-    })) || []),
-]);
 </script>
diff --git a/frontend/src/components/note/NoteFeedbackList.vue b/frontend/src/components/note/NoteFeedbackList.vue
deleted file mode 100644
index ecc8f6d..0000000
--- a/frontend/src/components/note/NoteFeedbackList.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <ul class="grid grid-cols-1 gap-2 py-4 lg:gap-3">
-    <li v-for="feedback in feedbacks" :key="feedback.uuid">
-      <PCard header-variant="primary" :title="feedback.owner_name">
-        <article>
-          <EditorContent :content="feedback.content" />
-        </article>
-
-        <template #toolbar>
-          <PIconButton
-            v-if="feedback.owner === profile?.email"
-            :icon="PeyEditIcon"
-            variant="ghost"
-            @click="
-              navigateTo({
-                name: 'note-feedback',
-                query: { owner: feedback.owner },
-              })
-            "
-          />
-        </template>
-      </PCard>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-import { PCard, PIconButton } from '@pey/core';
-import { PeyEditIcon } from '@pey/icons';
-
-defineProps<{ feedbacks: NoteFeedback[] }>();
-
-const { data: profile } = useGetProfile();
-</script>
diff --git a/frontend/src/components/note/NoteFeedbacks.vue b/frontend/src/components/note/NoteFeedbacks.vue
deleted file mode 100644
index a390c0d..0000000
--- a/frontend/src/components/note/NoteFeedbacks.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <PLoading v-if="pending" class="text-primary" />
-
-  <div v-else-if="error" class="flex flex-col items-center gap-4 py-8">
-    <PText as="p" class="text-center text-danger" responsive>
-      {{ t('note.getFeedbacksError') }}
-    </PText>
-
-    <PButton color="gray" :icon-start="PeyRetryIcon" @click="refresh">
-      {{ t('common.retry') }}
-    </PButton>
-  </div>
-
-  <template v-else-if="feedbacks?.length">
-    <div
-      class="flex items-center justify-between gap-4 border-b border-gray-10 pb-4"
-    >
-      <PHeading :lvl="3" responsive>
-        {{ t('note.feedbacks') }}
-      </PHeading>
-
-      <PIconButton
-        v-if="note.access_level.can_write_feedback"
-        class="shrink-0"
-        :icon="userHasWrittenFeedback ? PeyEditIcon : PeyPlusIcon"
-        type="button"
-        @click="
-          navigateTo({
-            name: 'note-feedback',
-            query: {
-              owner: userHasWrittenFeedback ? profile?.email : undefined,
-            },
-          })
-        "
-      />
-    </div>
-
-    <div class="p-4">
-      <NoteFeedbackList :feedbacks="feedbacks" />
-    </div>
-  </template>
-
-  <PButton
-    v-else-if="note.access_level.can_write_feedback"
-    :icon-start="PeyPlusIcon"
-    variant="ghost"
-    @click="navigateTo({ name: 'note-feedback' })"
-  >
-    {{ t('note.writeFeedback') }}
-  </PButton>
-</template>
-
-<script lang="ts" setup>
-import { PButton, PHeading, PIconButton, PLoading, PText } from '@pey/core';
-import { PeyEditIcon, PeyPlusIcon, PeyRetryIcon } from '@pey/icons';
-
-const props = defineProps<{ note: Note }>();
-
-const { t } = useI18n();
-const {
-  data: feedbacks,
-  pending,
-  error,
-  refresh,
-} = useGetNoteFeedbacks({
-  noteId: props.note.uuid,
-});
-const { data: profile } = useGetProfile();
-
-const userHasWrittenFeedback = computed(() =>
-  feedbacks.value?.some((feedback) => feedback.owner === profile.value?.email),
-);
-</script>
diff --git a/frontend/src/components/note/NoteLinkChip.vue b/frontend/src/components/note/NoteLinkChip.vue
new file mode 100644
index 0000000..dfe5f31
--- /dev/null
+++ b/frontend/src/components/note/NoteLinkChip.vue
@@ -0,0 +1,47 @@
+<template>
+  <NuxtLink v-if="note" class="*:cursor-pointer" :to="noteLinkTo">
+    <PChip
+      color="primary"
+      :icon="PeyLinkIcon"
+      :label="note.title"
+      size="small"
+    />
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import { PChip } from '@pey/core';
+import { PeyLinkIcon } from '@pey/icons';
+
+const props = defineProps<{ noteId: string }>();
+
+const { data: note } = useGetNote({ id: props.noteId });
+
+const noteLinkTo = computed(() => {
+  if (!note.value) {
+    return undefined;
+  }
+
+  if (note.value.type === NOTE_TYPE.template) {
+    return {
+      name: 'template',
+      params: { id: note.value.uuid },
+    };
+  }
+
+  if (note.value.type === NOTE_TYPE.message) {
+    return {
+      name: 'feedback',
+      params: { type: note.value.feedbackType, id: note.value.uuid },
+    };
+  }
+
+  return {
+    name: 'note',
+    params: {
+      type: NOTE_TYPE_ROUTE_PARAM[note.value.type],
+      id: note.value.uuid,
+    },
+  };
+});
+</script>
diff --git a/frontend/src/components/note/NoteList.vue b/frontend/src/components/note/NoteList.vue
deleted file mode 100644
index 952770a..0000000
--- a/frontend/src/components/note/NoteList.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <ul class="mt-4 grid grid-cols-1 gap-2 py-4 xl:grid-cols-2 xl:gap-3">
-    <li v-for="note in notes" :key="note.uuid">
-      <NuxtLink
-        :to="
-          note.type === 'Template'
-            ? {
-                name: 'template',
-                params: {
-                  id: note.uuid,
-                },
-              }
-            : {
-                name: 'note',
-                params: {
-                  type: route.params.type || '-',
-                  id: note.uuid,
-                },
-                query: {
-                  read:
-                    displayReadStatus && !note.read_status ? 'true' : undefined,
-                },
-              }
-        "
-      >
-        <NoteCard
-          :note="note"
-          :display-writer="displayWriter"
-          :display-type="displayType"
-          :display-read-status="displayReadStatus"
-        />
-      </NuxtLink>
-    </li>
-  </ul>
-</template>
-
-<script lang="ts" setup>
-defineProps<{
-  notes: Note[];
-  displayWriter?: boolean;
-  displayType?: boolean;
-  displayReadStatus?: boolean;
-}>();
-
-const route = useRoute();
-</script>
diff --git a/frontend/src/components/note/feedback/NoteFeedback.vue b/frontend/src/components/note/feedback/NoteFeedback.vue
new file mode 100644
index 0000000..1a0e536
--- /dev/null
+++ b/frontend/src/components/note/feedback/NoteFeedback.vue
@@ -0,0 +1,96 @@
+<template>
+  <PLoading v-if="pending" class="text-primary" />
+
+  <div v-else-if="error" class="flex flex-col items-center gap-4 py-8">
+    <PText as="p" class="text-center text-danger" responsive>
+      {{
+        noteIsFeedback
+          ? t('note.getResponsesError')
+          : t('note.getFeedbacksError')
+      }}
+    </PText>
+
+    <PButton color="gray" :icon-start="PeyRetryIcon" @click="refresh">
+      {{ t('common.retry') }}
+    </PButton>
+  </div>
+
+  <template v-else-if="feedbacks?.length">
+    <div
+      class="flex items-center justify-between gap-4 border-b border-gray-10 pb-4"
+    >
+      <PHeading :lvl="3" responsive>
+        {{ noteIsFeedback ? t('note.responses') : t('note.feedbacks') }}
+      </PHeading>
+
+      <PIconButton
+        v-if="note.access_level.can_write_feedback"
+        class="shrink-0"
+        :icon="userFeedbacks?.length ? PeyEditIcon : PeyPlusIcon"
+        type="button"
+        @click="handleShowForm"
+      />
+    </div>
+
+    <div class="px-4">
+      <NoteFeedbackList :note="note" :feedbacks="feedbacks" />
+    </div>
+  </template>
+
+  <div v-if="note.access_level.can_write_feedback">
+    <div v-if="showForm" ref="formRef" class="p-4">
+      <NoteFeedbackForm
+        v-model:visible="showForm"
+        :note="note"
+        :feedback="userFeedbacks?.length ? userFeedbacks?.[0] : undefined"
+      />
+    </div>
+
+    <PButton
+      v-else-if="!userFeedbacks?.length"
+      type="button"
+      :icon-start="PeyPlusIcon"
+      variant="ghost"
+      @click="handleShowForm"
+    >
+      {{ noteIsFeedback ? t('note.writeResponse') : t('note.writeFeedback') }}
+    </PButton>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PButton, PHeading, PIconButton, PLoading, PText } from '@pey/core';
+import { PeyEditIcon, PeyPlusIcon, PeyRetryIcon } from '@pey/icons';
+
+const props = defineProps<{ note: Note }>();
+
+const formRef = ref<HTMLElement | null>(null);
+const showForm = ref(false);
+
+const { t } = useI18n();
+const {
+  data: feedbacks,
+  pending,
+  error,
+  refresh,
+} = useGetNoteFeedbacks({
+  noteId: props.note.uuid,
+});
+const { data: profile } = useGetProfile();
+
+const noteIsFeedback = computed(
+  () => props.note.feedbackType === FEEDBACK_TYPE.Send,
+);
+const userFeedbacks = computed(() =>
+  feedbacks.value?.filter(
+    (feedback) => feedback.owner === profile.value?.email,
+  ),
+);
+
+const handleShowForm = () => {
+  showForm.value = true;
+  nextTick(() => {
+    formRef.value?.scrollIntoView({ behavior: 'smooth' });
+  });
+};
+</script>
diff --git a/frontend/src/components/note/feedback/NoteFeedbackCard.vue b/frontend/src/components/note/feedback/NoteFeedbackCard.vue
new file mode 100644
index 0000000..ed68c38
--- /dev/null
+++ b/frontend/src/components/note/feedback/NoteFeedbackCard.vue
@@ -0,0 +1,46 @@
+<template>
+  <PCard header-variant="primary" :title="feedback.owner_name">
+    <article>
+      <EditorContent :content="feedback.content" />
+    </article>
+
+    <template v-if="feedback.owner === profile?.email" #toolbar>
+      <div class="flex items-center justify-end gap-3 sm:ms-4">
+        <div class="flex h-8 w-8 items-center justify-center">
+          <PLoading v-if="isDeleteLoading" class="text-primary" />
+
+          <PInlineConfirm
+            v-else
+            :confirm-button-text="t('common.delete')"
+            :message="t('note.confirmDeleteMessage')"
+            @confirm="deleteNoteFeedback"
+          >
+            <PIconButton color="danger" :icon="PeyTrashIcon" variant="ghost" />
+          </PInlineConfirm>
+        </div>
+
+        <PIconButton
+          :icon="PeyEditIcon"
+          variant="ghost"
+          @click="emit('edit')"
+        />
+      </div>
+    </template>
+  </PCard>
+</template>
+
+<script lang="ts" setup>
+import { PCard, PIconButton, PInlineConfirm, PLoading } from '@pey/core';
+import { PeyEditIcon, PeyTrashIcon } from '@pey/icons';
+
+const props = defineProps<{ note: Note; feedback: NoteFeedback }>();
+const emit = defineEmits<{ edit: [] }>();
+
+const { t } = useI18n();
+const { data: profile } = useGetProfile();
+const { execute: deleteNoteFeedback, pending: isDeleteLoading } =
+  useDeleteNoteFeedback({
+    noteId: props.note.uuid,
+    feedbackId: props.feedback.uuid,
+  });
+</script>
diff --git a/frontend/src/components/note/NoteFeedbackForm.vue b/frontend/src/components/note/feedback/NoteFeedbackForm.vue
similarity index 63%
rename from frontend/src/components/note/NoteFeedbackForm.vue
rename to frontend/src/components/note/feedback/NoteFeedbackForm.vue
index 39deb75..14110d1 100644
--- a/frontend/src/components/note/NoteFeedbackForm.vue
+++ b/frontend/src/components/note/feedback/NoteFeedbackForm.vue
@@ -1,20 +1,20 @@
 <template>
-  <form class="space-y-4" @submit="onSubmit">
+  <form v-if="visible" class="space-y-4" @submit="onSubmit">
     <VeeField v-slot="{ value, handleChange }" name="content">
       <Editor
         :model-value="value"
-        :placeholder="t('note.writeFeedbackContent')"
+        :placeholder="t('note.writeMessageContent')"
         @update:model-value="handleChange"
       />
     </VeeField>
 
-    <div class="flex flex-wrap items-center justify-end gap-4 pt-8">
+    <div class="flex flex-wrap items-center justify-end gap-4">
       <PButton
         class="shrink-0"
         color="gray"
         type="button"
         variant="light"
-        @click="emit('cancel')"
+        @click="onCancel"
       >
         {{ t('common.cancel') }}
       </PButton>
@@ -34,29 +34,35 @@
 
 <script lang="ts" setup>
 import { PButton } from '@pey/core';
-import type { SubmissionContext } from 'vee-validate';
 
 const props = defineProps<{
+  note: Note;
   feedback?: NoteFeedback;
-  isSubmitting?: boolean;
-}>();
-const emit = defineEmits<{
-  submit: [
-    values: NoteFeedbackFormValues,
-    ctx: SubmissionContext<NoteFeedbackFormValues>,
-  ];
-  cancel: [];
 }>();
+const visible = defineModel<boolean>('visible');
 
 const { t } = useI18n();
 const { meta, handleSubmit } = useForm<NoteFeedbackFormValues>({
   initialValues: {
     content: props.feedback?.content || '',
   },
+  keepValuesOnUnmount: true,
 });
 useUnsavedChangesGuard({ disabled: () => !meta.value.dirty });
+const { execute: createNoteFeedback, pending: isSubmitting } =
+  useCreateNoteFeedback({ noteId: props.note.uuid });
 
 const onSubmit = handleSubmit((values, ctx) => {
-  emit('submit', values, ctx);
+  createNoteFeedback({
+    body: values,
+    onSuccess: () => {
+      ctx.resetForm();
+      visible.value = false;
+    },
+  });
 });
+
+const onCancel = () => {
+  visible.value = false;
+};
 </script>
diff --git a/frontend/src/components/note/feedback/NoteFeedbackList.vue b/frontend/src/components/note/feedback/NoteFeedbackList.vue
new file mode 100644
index 0000000..53b6f62
--- /dev/null
+++ b/frontend/src/components/note/feedback/NoteFeedbackList.vue
@@ -0,0 +1,25 @@
+<template>
+  <ul class="grid grid-cols-1 gap-2 py-4 lg:gap-3">
+    <li v-for="feedback in feedbacks" :key="feedback.uuid">
+      <NoteFeedbackForm
+        :note="note"
+        :feedback="feedback"
+        :visible="showFormId === feedback.uuid"
+        @update:visible="showFormId = null"
+      />
+
+      <NoteFeedbackCard
+        v-if="showFormId !== feedback.uuid"
+        :note="note"
+        :feedback="feedback"
+        @edit="showFormId = feedback.uuid"
+      />
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ note: Note; feedbacks: NoteFeedback[] }>();
+
+const showFormId = ref<string | null>(null);
+</script>
diff --git a/frontend/src/components/note/list/NoteList.vue b/frontend/src/components/note/list/NoteList.vue
new file mode 100644
index 0000000..8d5ac45
--- /dev/null
+++ b/frontend/src/components/note/list/NoteList.vue
@@ -0,0 +1,56 @@
+<template>
+  <ul class="mt-4 grid grid-cols-1 gap-2 py-4 xl:grid-cols-2 xl:gap-3">
+    <li v-for="note in notes" :key="note.uuid">
+      <NuxtLink :to="getNoteLink(note)">
+        <NoteCard
+          :note="note"
+          :display-writer="displayWriter"
+          :display-type="displayType"
+          :display-read-status="displayReadStatus"
+        />
+      </NuxtLink>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  notes: Note[];
+  displayWriter?: boolean;
+  displayType?: boolean;
+  displayReadStatus?: boolean;
+}>();
+
+const route = useRoute();
+
+const getNoteLink = (note: Note) => {
+  if (note.type === NOTE_TYPE.template) {
+    return {
+      name: 'template',
+      params: {
+        id: note.uuid,
+      },
+    };
+  }
+
+  const read =
+    props.displayReadStatus && !note.read_status ? 'true' : undefined;
+
+  if (note.type === NOTE_TYPE.message) {
+    return {
+      name: 'feedback',
+      params: { type: note.feedbackType, id: note.uuid },
+      query: { read },
+    };
+  }
+
+  return {
+    name: 'note',
+    params: {
+      type: route.params.type || '-',
+      id: note.uuid,
+    },
+    query: { read },
+  };
+};
+</script>
diff --git a/frontend/src/components/note/NoteListControls.vue b/frontend/src/components/note/list/NoteListControls.vue
similarity index 100%
rename from frontend/src/components/note/NoteListControls.vue
rename to frontend/src/components/note/list/NoteListControls.vue
diff --git a/frontend/src/components/note/NotePeriodFilter.vue b/frontend/src/components/note/list/NoteListPeriodFilter.vue
similarity index 100%
rename from frontend/src/components/note/NotePeriodFilter.vue
rename to frontend/src/components/note/list/NoteListPeriodFilter.vue
diff --git a/frontend/src/components/note/NoteReadStatusFilter.vue b/frontend/src/components/note/list/NoteListReadStatusFilter.vue
similarity index 100%
rename from frontend/src/components/note/NoteReadStatusFilter.vue
rename to frontend/src/components/note/list/NoteListReadStatusFilter.vue
diff --git a/frontend/src/components/note/NoteSortControl.vue b/frontend/src/components/note/list/NoteListSortControl.vue
similarity index 100%
rename from frontend/src/components/note/NoteSortControl.vue
rename to frontend/src/components/note/list/NoteListSortControl.vue
diff --git a/frontend/src/components/note/NoteTypeFilter.vue b/frontend/src/components/note/list/NoteListTypeFilter.vue
similarity index 96%
rename from frontend/src/components/note/NoteTypeFilter.vue
rename to frontend/src/components/note/list/NoteListTypeFilter.vue
index c8d8ca1..f122ebc 100644
--- a/frontend/src/components/note/NoteTypeFilter.vue
+++ b/frontend/src/components/note/list/NoteListTypeFilter.vue
@@ -43,7 +43,7 @@ const typeOptions = computed(() => [
   { label: t('noteType.task'), value: NOTE_TYPE.task },
   { label: t('noteType.meeting'), value: NOTE_TYPE.meeting },
   { label: t('noteType.proposal'), value: NOTE_TYPE.proposal },
-  { label: t('noteType.message'), value: NOTE_TYPE.message },
+  { label: t('common.feedback'), value: NOTE_TYPE.message },
 ]);
 const selectedTab = computed({
   get() {
diff --git a/frontend/src/components/note/NoteWriterFilter.vue b/frontend/src/components/note/list/NoteListWriterFilter.vue
similarity index 100%
rename from frontend/src/components/note/NoteWriterFilter.vue
rename to frontend/src/components/note/list/NoteListWriterFilter.vue
diff --git a/frontend/src/components/note/NoteSummary.vue b/frontend/src/components/note/summary/NoteSummary.vue
similarity index 100%
rename from frontend/src/components/note/NoteSummary.vue
rename to frontend/src/components/note/summary/NoteSummary.vue
diff --git a/frontend/src/components/note/NoteSummaryForm.vue b/frontend/src/components/note/summary/NoteSummaryForm.vue
similarity index 100%
rename from frontend/src/components/note/NoteSummaryForm.vue
rename to frontend/src/components/note/summary/NoteSummaryForm.vue
diff --git a/frontend/src/components/note/NoteTemplateForm.vue b/frontend/src/components/note/template/NoteTemplateForm.vue
similarity index 100%
rename from frontend/src/components/note/NoteTemplateForm.vue
rename to frontend/src/components/note/template/NoteTemplateForm.vue
diff --git a/frontend/src/components/note/NoteTemplateSelect.vue b/frontend/src/components/note/template/NoteTemplateSelect.vue
similarity index 100%
rename from frontend/src/components/note/NoteTemplateSelect.vue
rename to frontend/src/components/note/template/NoteTemplateSelect.vue
diff --git a/frontend/src/components/sidebar/Sidebar.vue b/frontend/src/components/sidebar/Sidebar.vue
index 173571d..eba64a6 100644
--- a/frontend/src/components/sidebar/Sidebar.vue
+++ b/frontend/src/components/sidebar/Sidebar.vue
@@ -17,6 +17,26 @@
             </SidebarLinkGroup>
           </li>
 
+          <li>
+            <SidebarLinkGroup :title="t('common.feedback')">
+              <li>
+                <SidebarLink
+                  icon="i-mdi-feedback"
+                  :label="t('common.sendFeedback')"
+                  :to="{ name: 'feedbacks', params: { type: FEEDBACK_TYPE.Send  } }"
+                />
+              </li>
+
+              <li>
+                <SidebarLink
+                  icon="i-mdi-comment-question"
+                  :label="t('common.requestFeedback')"
+                  :to="{ name: 'feedbacks', params: { type: FEEDBACK_TYPE.Request  } }"
+                />
+              </li>
+            </SidebarLinkGroup>
+          </li>
+
           <li>
             <SidebarLinkGroup :title="t('common.personal')">
               <li>
diff --git a/frontend/src/components/sidebar/SidebarLinks.ts b/frontend/src/components/sidebar/SidebarLinks.ts
index 14c5494..e0a163e 100644
--- a/frontend/src/components/sidebar/SidebarLinks.ts
+++ b/frontend/src/components/sidebar/SidebarLinks.ts
@@ -39,14 +39,6 @@ export const getNotesLinks = (t: (key: string) => string): SidebarLink[] => [
       params: { type: NOTE_TYPE_ROUTE_PARAM[NOTE_TYPE.proposal] },
     },
   },
-  {
-    icon: NOTE_TYPE_ICON[NOTE_TYPE.message],
-    label: t('common.messageToOthers'),
-    to: {
-      name: 'notes',
-      params: { type: NOTE_TYPE_ROUTE_PARAM[NOTE_TYPE.message] },
-    },
-  },
   {
     icon: NOTE_TYPE_ICON[NOTE_TYPE.personal],
     label: t('common.personalNotes'),
diff --git a/frontend/src/composables/notes/useDeleteNoteFeedback.ts b/frontend/src/composables/notes/useDeleteNoteFeedback.ts
new file mode 100644
index 0000000..ca8a210
--- /dev/null
+++ b/frontend/src/composables/notes/useDeleteNoteFeedback.ts
@@ -0,0 +1,22 @@
+interface UseDeleteNoteFeedbackOptions {
+  noteId: string;
+  feedbackId: string;
+}
+
+interface DeleteNoteFeedbackError {
+  detail?: string;
+}
+
+export const useDeleteNoteFeedback = ({
+  noteId,
+  feedbackId,
+}: UseDeleteNoteFeedbackOptions) =>
+  useApiMutation<never, DeleteNoteFeedbackError, never>(
+    `/notes/${noteId}/feedbacks/${feedbackId}/`,
+    {
+      method: 'DELETE',
+      onSuccess: () => {
+        invalidateNuxtData(['note-feedbacks', noteId]);
+      },
+    },
+  );
diff --git a/frontend/src/composables/notes/useGetNote.ts b/frontend/src/composables/notes/useGetNote.ts
index ebb1814..4764203 100644
--- a/frontend/src/composables/notes/useGetNote.ts
+++ b/frontend/src/composables/notes/useGetNote.ts
@@ -1,4 +1,4 @@
-type GetNoteResponse = Note | null;
+type GetNoteResponse = Note;
 
 interface UseGetNoteOptions {
   id: string;
@@ -8,7 +8,8 @@ export const useGetNote = (
   { id }: UseGetNoteOptions,
   fetchOptions: UseApiFetchOptions<GetNoteResponse> = {},
 ) =>
-  useApiFetch<GetNoteResponse>(`/notes/${id}`, {
-    key: createNuxtDataKey(['note', id]),
+  useApiFetch<GetNoteResponse>(`/notes/${id}/`, {
     ...fetchOptions,
+    key: createNuxtDataKey(['note', id]),
+    transform: transformNoteResponse,
   });
diff --git a/frontend/src/composables/notes/useGetNotes.ts b/frontend/src/composables/notes/useGetNotes.ts
index 91a346b..87816b0 100644
--- a/frontend/src/composables/notes/useGetNotes.ts
+++ b/frontend/src/composables/notes/useGetNotes.ts
@@ -6,16 +6,21 @@ interface UseGetNotesOptions {
   retrieveMentions?: boolean;
 }
 
-export const useGetNotes = ({
-  type,
-  user,
-  retrieveMentions,
-}: UseGetNotesOptions = {}) =>
-  useApiFetch<GetNotesResponse>('/notes/', {
+export const useGetNotes = (
+  { type, user, retrieveMentions }: UseGetNotesOptions = {},
+  fetchOptions: UseApiFetchOptions<GetNotesResponse> = {},
+) => {
+  const transform =
+    fetchOptions.transform || ((data: GetNotesResponse) => data);
+
+  return useApiFetch<GetNotesResponse>('/notes/', {
+    ...fetchOptions,
     key: createNuxtDataKey(['notes', type, user, retrieveMentions]),
     query: {
       type,
       user,
       retrieve_mentions: retrieveMentions,
     },
+    transform: (notes) => transform(notes.map(transformNoteResponse)),
   });
+};
diff --git a/frontend/src/constants/feedback.ts b/frontend/src/constants/feedback.ts
new file mode 100644
index 0000000..edc6758
--- /dev/null
+++ b/frontend/src/constants/feedback.ts
@@ -0,0 +1,6 @@
+export const FEEDBACK_REQUEST_PREFIX = 'request:';
+
+export const FEEDBACK_TYPE = {
+  Send: 'send',
+  Request: 'request',
+} as const;
diff --git a/frontend/src/constants/note.ts b/frontend/src/constants/note.ts
index 9aa4156..bb5ecc1 100644
--- a/frontend/src/constants/note.ts
+++ b/frontend/src/constants/note.ts
@@ -11,7 +11,6 @@ export const NOTE_TYPE = {
 export const NOTE_TYPE_ROUTE_PARAM = {
   [NOTE_TYPE.goal]: 'goal',
   [NOTE_TYPE.meeting]: 'meeting',
-  [NOTE_TYPE.message]: 'message',
   [NOTE_TYPE.personal]: 'personal',
   [NOTE_TYPE.proposal]: 'proposal',
   [NOTE_TYPE.task]: 'task',
@@ -20,7 +19,7 @@ export const NOTE_TYPE_ROUTE_PARAM = {
 export const NOTE_TYPE_ICON = {
   [NOTE_TYPE.goal]: 'i-mdi-target-arrow',
   [NOTE_TYPE.meeting]: 'i-mdi-calendar',
-  [NOTE_TYPE.message]: 'i-mdi-email-fast',
+  [NOTE_TYPE.message]: 'i-mdi-comment',
   [NOTE_TYPE.personal]: 'i-mdi-folder-lock',
   [NOTE_TYPE.proposal]: 'i-mdi-chart-line',
   [NOTE_TYPE.task]: 'i-mdi-check-circle',
diff --git a/frontend/src/locales/fa.json b/frontend/src/locales/fa.json
index 4affdc1..5361099 100644
--- a/frontend/src/locales/fa.json
+++ b/frontend/src/locales/fa.json
@@ -7,6 +7,7 @@
     "content": "متن",
     "date": "تاریخ",
     "delete": "حذف",
+    "feedback": "فیدبک",
     "goals": "اهداف",
     "logout": "خروج",
     "meetings": "جلسه‌ها",
@@ -18,12 +19,17 @@
     "personal": "شخصی",
     "personalNotes": "یادداشت‌های شخصی",
     "proposal": "پروپوزال",
+    "requestFeedback": "درخواست فیدبک",
     "retry": "تلاش مجدد",
     "save": "ذخیره",
+    "sendFeedback": "ارسال فیدبک",
     "sort": "مرتب سازی",
     "tasks": "فعالیت‌ها",
     "templates": "قالب‌ها"
   },
+  "feedback": {
+    "feedbackFormHint": "نام مخاطب فیدبک را در عنوان ذکر کنید و تمام افرادی را که می‌خواهید فیدبک را ببینند، منشن کنید."
+  },
   "guide": {
     "docsFolder": "فولدر مستندات",
     "notifyMessage": "مستندات راهنمای مربوط به فرآیند مدیریت عملکرد؛ از هدف‌گذاری، پروپوزال‌نویسی، کار با مرلین و... در این فولدر قرار داده‌شده. لطفاً مطالعه کنید."
@@ -41,6 +47,7 @@
   "note": {
     "append": "اضافه",
     "committeeDate": "تاریخ کمیته",
+    "confirmDeleteMessage": "آیا می‌خواهید این پیام را حذف کنید؟",
     "confirmDeleteNote": "آیا می‌خواهید این یادداشت را حذف کنید؟",
     "createNewX": "ایجاد {0} جدید",
     "editTemplate": "ویرایش قالب",
@@ -51,6 +58,7 @@
     "getFeedbacksError": "خطا در دریافت فیدبک‌ها",
     "getNoteError": "خطا در دریافت یادداشت",
     "getNotesError": "خطا در دریافت یادداشت‌ها",
+    "getResponsesError": "خطا در دریافت پاسخ‌ها",
     "getSummaryError": "خطا در دریافت جمع‌بندی",
     "getTemplatesError": "خطا در دریافت قالب‌ها",
     "ladderChange": "تغییر در سطح لدر",
@@ -68,6 +76,7 @@
     "period": "دوره",
     "relatedNotes": "یادداشت‌های مرتبط",
     "replace": "جایگزین",
+    "responses": "پاسخ‌ها",
     "salaryChange": "تغییر پله‌ی حقوقی",
     "selectTemplate": "انتخاب قالب",
     "share": "اشتراک گذاری",
@@ -79,10 +88,10 @@
     "useTemplate": "استفاده از قالب \"{title}\"",
     "useTemplateConfirmMessage": "آیا می‌خواهید این قالب به یادداشت اضافه شود یا جایگزین آن شود؟",
     "writeFeedback": "نوشتن فیدبک",
-    "writeFeedbackContent": "متن فیدبک را بنویسید...",
-    "writeFeedbackFor": "نوشتن فیدبک برای \"{title}\"",
+    "writeMessageContent": "متن پیام را بنویسید...",
     "writeNoteContent": "متن یادداشت را بنویسید...",
     "writer": "نویسنده",
+    "writeResponse": "نوشتن پاسخ",
     "writeSummary": "نوشتن جمع‌بندی",
     "writeSummaryContent": "متن جمع‌بندی را بنویسید...",
     "writeSummaryFor": "نوشتن جمع‌بندی برای \"{title}\"",
diff --git a/frontend/src/pages/index/feedbacks.vue b/frontend/src/pages/index/feedbacks.vue
new file mode 100644
index 0000000..20e8eef
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks.vue
@@ -0,0 +1,12 @@
+<template>
+  <NuxtPage />
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  redirect: {
+    name: 'feedbacks',
+    params: { type: FEEDBACK_TYPE.Send },
+  },
+});
+</script>
diff --git a/frontend/src/pages/index/feedbacks/[type].vue b/frontend/src/pages/index/feedbacks/[type].vue
new file mode 100644
index 0000000..73894e8
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks/[type].vue
@@ -0,0 +1,30 @@
+<template>
+  <NuxtPage :type="feedbackType || undefined" />
+</template>
+
+<script lang="ts" setup>
+const route = useRoute();
+
+const feedbackType = computed(() => {
+  if (
+    typeof route.params.type === 'string' &&
+    (Object.values(FEEDBACK_TYPE) as string[]).includes(route.params.type)
+  ) {
+    return route.params.type;
+  }
+
+  return null;
+});
+
+onMounted(() => {
+  if (feedbackType.value) {
+    return;
+  }
+
+  navigateTo({
+    name: 'feedbacks',
+    params: { type: FEEDBACK_TYPE.Send },
+    replace: true,
+  });
+});
+</script>
diff --git a/frontend/src/pages/index/feedbacks/[type]/[id].vue b/frontend/src/pages/index/feedbacks/[type]/[id].vue
new file mode 100644
index 0000000..19bebc3
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks/[type]/[id].vue
@@ -0,0 +1,61 @@
+<template>
+  <PBox class="mx-auto max-w-3xl bg-white px-4 py-8 lg:px-8 lg:pt-10">
+    <PLoading v-if="pending" class="text-primary" :size="20" />
+
+    <div v-else-if="error" class="flex flex-col items-center gap-4 py-8">
+      <PText as="p" class="text-center text-danger" responsive>
+        {{
+          error.statusCode === 404
+            ? t('note.noteNotFound')
+            : t('note.getNoteError')
+        }}
+      </PText>
+
+      <PButton
+        v-if="error.statusCode !== 404"
+        color="gray"
+        :icon-start="PeyRetryIcon"
+        @click="refresh"
+      >
+        {{ t('common.retry') }}
+      </PButton>
+    </div>
+
+    <NuxtPage v-else-if="note" :note="note" />
+
+    <PText v-else as="p" class="py-8 text-center text-gray-80" responsive>
+      {{ t('note.noteNotFound') }}
+    </PText>
+  </PBox>
+</template>
+
+<script lang="ts" setup>
+import { PBox, PButton, PLoading, PText } from '@pey/core';
+import { PeyRetryIcon } from '@pey/icons';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const noteId = computed(() => {
+  if (typeof route.params.id === 'string') {
+    return route.params.id;
+  }
+
+  return '';
+});
+
+const { execute: updateNoteReadStatus } = useUpdateNoteReadStatus({
+  id: noteId.value,
+});
+const {
+  data: note,
+  pending,
+  error,
+  refresh,
+} = useGetNote(
+  { id: noteId.value },
+  {
+    onResponse: route.query.read ? () => updateNoteReadStatus(true) : undefined,
+  },
+);
+</script>
diff --git a/frontend/src/pages/index/feedbacks/[type]/[id]/edit.vue b/frontend/src/pages/index/feedbacks/[type]/[id]/edit.vue
new file mode 100644
index 0000000..b8662cb
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks/[type]/[id]/edit.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="mb-4 flex items-center gap-4 border-b border-gray-10 pb-4">
+      <i class="text-h1 text-primary" :class="pageIcon" />
+
+      <PHeading level="h1" responsive>
+        {{ pageTitle }}
+      </PHeading>
+    </div>
+
+    <NoteForm
+      :note="note"
+      :note-type="note.type"
+      :is-submitting="pending"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PHeading } from '@pey/core';
+import type { SubmissionContext } from 'vee-validate';
+
+definePageMeta({ name: 'feedback-edit' });
+const props = defineProps<{ note: Note }>();
+
+const { t } = useI18n();
+const route = useRoute();
+const { execute: updateNote, pending } = useUpdateNote({ id: props.note.uuid });
+
+const isRequestType = computed(
+  () => route.params.type === FEEDBACK_TYPE.Request,
+);
+const pageTitle = computed(() =>
+  isRequestType.value
+    ? t('note.editX', [t('common.requestFeedback')])
+    : t('note.editX', [t('common.feedback')]),
+);
+const pageIcon = computed(() =>
+  isRequestType.value ? 'i-mdi-comment-question' : 'i-mdi-feedback',
+);
+
+const handleSubmit = (
+  values: NoteFormValues,
+  ctx: SubmissionContext<NoteFormValues>,
+) => {
+  const title = `${route.params.type === FEEDBACK_TYPE.Request ? FEEDBACK_REQUEST_PREFIX : ''}${values.title}`;
+  const dateString =
+    values.date &&
+    `${values.date.getFullYear()}-${values.date.getMonth() + 1}-${values.date.getDate()}`;
+
+  updateNote({
+    body: { ...values, title, date: dateString },
+    onSuccess: () => {
+      navigateTo({ name: 'feedback' });
+      ctx.resetForm();
+    },
+  });
+};
+
+const handleCancel = () => {
+  navigateTo({ name: 'note' });
+};
+</script>
diff --git a/frontend/src/pages/index/feedbacks/[type]/[id]/index.vue b/frontend/src/pages/index/feedbacks/[type]/[id]/index.vue
new file mode 100644
index 0000000..a2c98d6
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks/[type]/[id]/index.vue
@@ -0,0 +1,25 @@
+<template>
+  <NoteDetail :note="note">
+    <template v-if="note.access_level.can_edit" #actions>
+      <PIconButton
+        class="shrink-0"
+        :icon="PeyEditIcon"
+        type="button"
+        @click="navigateTo({ name: 'feedback-edit' })"
+      />
+
+      <NoteDeleteButton
+        :note-id="note.uuid"
+        @success="navigateTo({ name: 'feedbacks' })"
+      />
+    </template>
+  </NoteDetail>
+</template>
+
+<script lang="ts" setup>
+import { PIconButton } from '@pey/core';
+import { PeyEditIcon } from '@pey/icons';
+
+definePageMeta({ name: 'feedback' });
+defineProps<{ note: Note }>();
+</script>
diff --git a/frontend/src/pages/index/feedbacks/[type]/index.vue b/frontend/src/pages/index/feedbacks/[type]/index.vue
new file mode 100644
index 0000000..84b3370
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks/[type]/index.vue
@@ -0,0 +1,90 @@
+<template>
+  <div class="space-y-2 px-4 py-8 lg:px-8 lg:pt-10">
+    <div
+      class="flex items-center justify-between gap-2 border-b border-gray-20 pb-4"
+    >
+      <div class="flex items-center gap-4">
+        <i class="text-h1 text-primary" :class="pageIcon" />
+
+        <PHeading level="h1" responsive>
+          {{ pageTitle }}
+        </PHeading>
+      </div>
+
+      <NuxtLink :to="{ name: 'feedback-create' }">
+        <PIconButton class="shrink-0" :icon="PeyPlusIcon" tabindex="-1" />
+      </NuxtLink>
+    </div>
+
+    <div v-if="pending" class="flex items-center justify-center py-8">
+      <PLoading class="text-primary" :size="20" />
+    </div>
+
+    <div v-else-if="error" class="flex flex-col items-center gap-4 py-8">
+      <PText as="p" class="text-center text-danger" responsive>
+        {{ t('note.getNotesError') }}
+      </PText>
+
+      <PButton color="gray" :icon-start="PeyRetryIcon" @click="refresh">
+        {{ t('common.retry') }}
+      </PButton>
+    </div>
+
+    <template v-else>
+      <NoteListControls v-if="notes?.length">
+        <template #sort>
+          <NoteListSortControl />
+        </template>
+
+        <template #filter>
+          <NoteListPeriodFilter :notes="notes" />
+        </template>
+      </NoteListControls>
+
+      <NoteList v-if="sortedNotes.length" :notes="sortedNotes" />
+
+      <PText v-else as="p" class="py-8 text-center text-gray-80" responsive>
+        {{ t('note.noNotes') }}
+      </PText>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PButton, PHeading, PIconButton, PLoading, PText } from '@pey/core';
+import { PeyPlusIcon, PeyRetryIcon } from '@pey/icons';
+
+const props = defineProps<{ type: FeedbackType }>();
+definePageMeta({ name: 'feedbacks' });
+
+const { t } = useI18n();
+const {
+  data: notes,
+  pending,
+  error,
+  refresh,
+} = useGetNotes(
+  { type: NOTE_TYPE.message },
+  {
+    transform: (notes) =>
+      notes.filter((note) => note.feedbackType === props.type),
+  },
+);
+const filteredNotes = useFilterNotes(() => notes.value || []);
+const sortedNotes = useSortNotes(filteredNotes);
+
+const pageTitle = computed(() =>
+  props.type === FEEDBACK_TYPE.Send
+    ? t('common.sendFeedback')
+    : t('common.requestFeedback'),
+);
+const pageIcon = computed(() =>
+  props.type === FEEDBACK_TYPE.Send
+    ? 'i-mdi-feedback'
+    : 'i-mdi-comment-question',
+);
+
+useHead({
+  title: pageTitle,
+});
+</script>
diff --git a/frontend/src/pages/index/feedbacks/[type]/new.vue b/frontend/src/pages/index/feedbacks/[type]/new.vue
new file mode 100644
index 0000000..559e335
--- /dev/null
+++ b/frontend/src/pages/index/feedbacks/[type]/new.vue
@@ -0,0 +1,70 @@
+<template>
+  <PBox class="mx-auto max-w-3xl bg-white px-4 py-8 lg:px-8 lg:pt-10">
+    <div class="mb-4 flex items-center gap-4 border-b border-gray-10 pb-4">
+      <i class="text-h1 text-primary" :class="pageIcon" />
+
+      <PHeading level="h1" responsive>
+        {{ pageTitle }}
+      </PHeading>
+    </div>
+
+    <PChip
+      v-if="!isRequestType"
+      :icon="PeyInfoIcon"
+      :label="t('feedback.feedbackFormHint')"
+      variant="ghost"
+      color="secondary"
+    />
+
+    <NoteForm
+      :note-type="NOTE_TYPE.message"
+      :is-submitting="pending"
+      @submit="handleSubmit"
+      @cancel="handleCancel"
+    />
+  </PBox>
+</template>
+
+<script lang="ts" setup>
+import { PBox, PChip, PHeading } from '@pey/core';
+import { PeyInfoIcon } from '@pey/icons';
+import type { SubmissionContext } from 'vee-validate';
+
+definePageMeta({ name: 'feedback-create' });
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+const { execute: createNote, pending } = useCreateNote();
+
+const isRequestType = computed(
+  () => route.params.type === FEEDBACK_TYPE.Request,
+);
+const pageTitle = computed(() =>
+  isRequestType.value ? t('common.requestFeedback') : t('common.sendFeedback'),
+);
+const pageIcon = computed(() =>
+  isRequestType.value ? 'i-mdi-comment-question' : 'i-mdi-feedback',
+);
+
+const handleSubmit = (
+  values: NoteFormValues,
+  ctx: SubmissionContext<NoteFormValues>,
+) => {
+  const title = `${isRequestType.value ? FEEDBACK_REQUEST_PREFIX : ''}${values.title}`;
+  const date = values.date || new Date();
+  const dateString = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
+
+  createNote({
+    body: { ...values, title, date: dateString, type: NOTE_TYPE.message },
+    onSuccess: (newNote) => {
+      navigateTo({ name: 'feedback', params: { id: newNote.uuid } });
+      ctx.resetForm();
+    },
+  });
+};
+
+const handleCancel = () => {
+  router.back();
+};
+</script>
diff --git a/frontend/src/pages/index/messages.vue b/frontend/src/pages/index/messages.vue
index 8a57caf..3595a25 100644
--- a/frontend/src/pages/index/messages.vue
+++ b/frontend/src/pages/index/messages.vue
@@ -27,17 +27,17 @@
     </div>
 
     <template v-else>
-      <NoteTypeFilter />
+      <NoteListTypeFilter />
 
       <NoteListControls v-if="notes?.length">
         <template #sort>
-          <NoteSortControl />
+          <NoteListSortControl />
         </template>
 
         <template #filter>
-          <NoteWriterFilter :notes="notes" />
-          <NotePeriodFilter :notes="notes" />
-          <NoteReadStatusFilter />
+          <NoteListWriterFilter :notes="notes" />
+          <NoteListPeriodFilter :notes="notes" />
+          <NoteListReadStatusFilter />
         </template>
       </NoteListControls>
 
diff --git a/frontend/src/pages/index/notes/[type].vue b/frontend/src/pages/index/notes/[type].vue
index 56106dd..42d763a 100644
--- a/frontend/src/pages/index/notes/[type].vue
+++ b/frontend/src/pages/index/notes/[type].vue
@@ -17,8 +17,9 @@ const { data: users, refresh: getMyTeam } = useGetMyTeam({
 const noteType = computed(() => {
   if (
     typeof route.params.type === 'string' &&
-    route.params.type in NOTE_TYPE &&
-    route.params.type !== 'template'
+    (Object.values(NOTE_TYPE_ROUTE_PARAM) as string[]).includes(
+      route.params.type,
+    )
   ) {
     return NOTE_TYPE[route.params.type as NoteTypeRouteParam];
   }
diff --git a/frontend/src/pages/index/notes/[type]/[id]/feedback.vue b/frontend/src/pages/index/notes/[type]/[id]/feedback.vue
deleted file mode 100644
index db5c8c3..0000000
--- a/frontend/src/pages/index/notes/[type]/[id]/feedback.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-  <div>
-    <PHeading class="mb-4 border-b border-gray-10 pb-4" level="h1" responsive>
-      {{ t('note.writeFeedbackFor', { title: note.title }) }}
-    </PHeading>
-
-    <PLoading
-      v-if="isEditMode && getFeedbacksPending"
-      class="text-primary"
-      :size="20"
-    />
-
-    <NoteFeedbackForm
-      v-else
-      :feedback="isEditMode ? userFeedbacks?.[0] : undefined"
-      :is-submitting="isSubmitting"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { PHeading, PLoading } from '@pey/core';
-import type { SubmissionContext } from 'vee-validate';
-
-definePageMeta({ name: 'note-feedback' });
-const props = defineProps<{ note: Note }>();
-
-const { t } = useI18n();
-const {
-  query: { owner },
-} = useRoute();
-
-const isEditMode = computed(() => Boolean(owner && typeof owner === 'string'));
-
-const { data: userFeedbacks, pending: getFeedbacksPending } =
-  useGetNoteFeedbacks({
-    noteId: props.note.uuid,
-    owner: isEditMode.value ? (owner as string) : '',
-    enabled: isEditMode.value,
-  });
-const { execute: createNoteFeedback, pending: isSubmitting } =
-  useCreateNoteFeedback({ noteId: props.note.uuid });
-
-const handleSubmit = (
-  values: NoteFeedbackFormValues,
-  ctx: SubmissionContext<NoteFeedbackFormValues>,
-) => {
-  createNoteFeedback({
-    body: values,
-    onSuccess: () => {
-      ctx.resetForm();
-      navigateTo({ name: 'note' });
-    },
-  });
-};
-
-const handleCancel = () => {
-  navigateTo({ name: 'note' });
-};
-</script>
diff --git a/frontend/src/pages/index/notes/[type]/[id]/index.vue b/frontend/src/pages/index/notes/[type]/[id]/index.vue
index a21ed0b..b232dd6 100644
--- a/frontend/src/pages/index/notes/[type]/[id]/index.vue
+++ b/frontend/src/pages/index/notes/[type]/[id]/index.vue
@@ -1,8 +1,25 @@
 <template>
-  <NoteDetail :note="note" />
+  <NoteDetail :note="note">
+    <template v-if="note.access_level.can_edit" #actions>
+      <PIconButton
+        class="shrink-0"
+        :icon="PeyEditIcon"
+        type="button"
+        @click="navigateTo({ name: 'note-edit' })"
+      />
+
+      <NoteDeleteButton
+        :note-id="note.uuid"
+        @success="navigateTo({ name: 'notes' })"
+      />
+    </template>
+  </NoteDetail>
 </template>
 
 <script lang="ts" setup>
+import { PIconButton } from '@pey/core';
+import { PeyEditIcon } from '@pey/icons';
+
 definePageMeta({ name: 'note' });
 defineProps<{ note: Note }>();
 </script>
diff --git a/frontend/src/pages/index/notes/[type]/index.vue b/frontend/src/pages/index/notes/[type]/index.vue
index 6ad7746..1d78dfc 100644
--- a/frontend/src/pages/index/notes/[type]/index.vue
+++ b/frontend/src/pages/index/notes/[type]/index.vue
@@ -36,12 +36,12 @@
     <template v-else>
       <NoteListControls v-if="notes?.length">
         <template #sort>
-          <NoteSortControl />
+          <NoteListSortControl />
         </template>
 
         <template #filter>
-          <NoteTypeFilter v-if="!noteType" />
-          <NotePeriodFilter :notes="notes" />
+          <NoteListTypeFilter v-if="!noteType" />
+          <NoteListPeriodFilter :notes="notes" />
         </template>
       </NoteListControls>
 
@@ -64,7 +64,7 @@ import { PeyPlusIcon, PeyRetryIcon } from '@pey/icons';
 
 definePageMeta({ name: 'notes' });
 const props = defineProps<{
-  noteType?: Exclude<NoteType, 'Template'>;
+  noteType?: Exclude<NoteType, 'Message' | 'Template'>;
   userEmail?: string;
   user?: User | null;
 }>();
@@ -86,7 +86,6 @@ const isUser = computed(() => Boolean(props.userEmail));
 const noteTitles = computed(() => ({
   [NOTE_TYPE.goal]: t('common.goals'),
   [NOTE_TYPE.meeting]: t('common.meetings'),
-  [NOTE_TYPE.message]: t('common.messageToOthers'),
   [NOTE_TYPE.personal]: t('common.personalNotes'),
   [NOTE_TYPE.proposal]: t('common.proposal'),
   [NOTE_TYPE.task]: t('common.tasks'),
diff --git a/frontend/src/types/feedback.ts b/frontend/src/types/feedback.ts
new file mode 100644
index 0000000..10b0502
--- /dev/null
+++ b/frontend/src/types/feedback.ts
@@ -0,0 +1 @@
+export type FeedbackType = (typeof FEEDBACK_TYPE)[keyof typeof FEEDBACK_TYPE];
diff --git a/frontend/src/types/note.ts b/frontend/src/types/note.ts
index ad36ff3..8ebaea9 100644
--- a/frontend/src/types/note.ts
+++ b/frontend/src/types/note.ts
@@ -25,6 +25,8 @@ export interface Note {
   type: NoteType;
   uuid: string;
   year: number;
+
+  feedbackType?: FeedbackType;
 }
 
 export interface NoteFormValues
diff --git a/frontend/src/utils/transformNoteResponse.ts b/frontend/src/utils/transformNoteResponse.ts
new file mode 100644
index 0000000..f73617f
--- /dev/null
+++ b/frontend/src/utils/transformNoteResponse.ts
@@ -0,0 +1,10 @@
+export const transformNoteResponse = (note: Note) => ({
+  ...note,
+  feedbackType:
+    note.type === NOTE_TYPE.message
+      ? note.title.startsWith(FEEDBACK_REQUEST_PREFIX)
+        ? FEEDBACK_TYPE.Request
+        : FEEDBACK_TYPE.Send
+      : undefined,
+  title: note.title.replace(new RegExp(`^${FEEDBACK_REQUEST_PREFIX}`), ''),
+});