From a8b302d4cd1950c76184488b4b1ae01ca4faba7b Mon Sep 17 00:00:00 2001
From: Pranav <pranav@chatwoot.com>
Date: Thu, 15 Jan 2026 19:53:57 -0800
Subject: [PATCH] feat(ee): Review Notes for CSAT Reports (#13289)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CSAT scores are helpful, but on their own they rarely tell the full
story. A drop in rating can come from delayed timelines, unclear
expectations, or simple misunderstandings, even when the issue itself
was handled correctly.

Review Notes for CSAT let admins/report manager roles add internal-only
context next to each CSAT response. This makes it easier to interpret
scores properly and focus on patterns and root causes, not just numbers.


<img width="2170" height="1680" alt="image"
src="https://github.com/user-attachments/assets/56df7fab-d0a7-4a94-95b9-e4c459ad33d5"
/>


### Why this matters

* Capture the real context behind individual CSAT ratings
* Clarify whether a low score points to a genuine service issue or a
process gap
* Spot recurring themes across conversations and teams
* Make CSAT reviews more useful for leadership reviews and
retrospectives

### How Review Notes work

**View CSAT responses**
Open the CSAT report to see overall metrics, rating distribution, and
individual responses.

**Add a Review Note**
For any CSAT entry, managers can add a Review Note directly below the
customer’s feedback.

**Document internal insights**
Use Review Notes to capture things like:

* Why a score was lower or higher than expected
* Patterns you are seeing across similar cases
* Observations around communication, timelines, or customer expectations

Review Notes are visible only to administrators and people with report
access only. We may expand visibility to agents in the future based on
feedback. However, customers never see them.

Each note clearly shows who added it and when, making it easy to review
context and changes over time.
---
 .../csat_survey_responses_controller.rb       |   2 +
 .../components/ui/DatePicker/DatePicker.vue   |   6 +-
 .../dashboard/components/widgets/ShowMore.vue |   2 +-
 .../dashboard/i18n/locale/en/report.json      |  55 +++-
 .../settings/reports/CsatResponses.vue        |  15 +-
 .../reports/components/ConversationCell.vue   |  26 --
 .../components/Csat/CsatFilterHelpers.js      |  36 +++
 .../reports/components/Csat/CsatFilters.vue   | 267 ++++++++++++++++++
 .../reports/components/CsatContactCell.vue    |  52 ++++
 .../reports/components/CsatEmptyState.vue     |  32 +++
 .../reports/components/CsatExpandedRow.vue    | 162 +++++++++++
 .../components/CsatMetricCard.story.vue       |  53 ++++
 .../reports/components/CsatMetricCard.vue     |  41 +++
 .../reports/components/CsatMetrics.vue        | 180 ++++--------
 .../CsatRatingDistribution.story.vue          |  75 +++++
 .../components/CsatRatingDistribution.vue     | 101 +++++++
 .../components/CsatReviewNotesPaywall.vue     |  28 ++
 .../settings/reports/components/CsatTable.vue | 264 +++++++++++------
 .../reports/components/CsatTableLoader.vue    |  36 +++
 .../components/specs/CSATMetrics.spec.js      |  42 ++-
 .../__snapshots__/CSATMetrics.spec.js.snap    |  10 -
 .../dashboard/store/modules/csat.js           |  11 +
 .../store/modules/specs/csat/getters.spec.js  |  15 +
 .../dashboard/store/mutation-types.js         |   1 +
 app/models/csat_survey_response.rb            |   1 +
 app/models/user.rb                            |   2 +
 .../csat_survey_responses/download.csv.erb    |  28 +-
 .../update.json.jbuilder                      |   1 +
 .../_csat_survey_response.json.jbuilder       |   8 +
 config/features.yml                           |   4 +
 config/locales/en.yml                         |   1 +
 config/routes.rb                              |   3 +
 ...l_observations_to_csat_survey_responses.rb |   5 +
 ...rvations_audit_to_csat_survey_responses.rb |   6 +
 db/schema.rb                                  |   6 +-
 .../csat_survey_responses_controller.rb       |  12 +
 .../enterprise/csat_survey_response_policy.rb |   4 +
 .../billing/handle_stripe_event_service.rb    |   2 +-
 enterprise/config/premium_features.yml        |   1 +
 .../csat_survey_responses_controller_spec.rb  |  85 ++++++
 40 files changed, 1376 insertions(+), 305 deletions(-)
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilterHelpers.js
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilters.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatContactCell.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatEmptyState.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatExpandedRow.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.story.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.story.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatReviewNotesPaywall.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTableLoader.vue
 delete mode 100644 app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
 create mode 100644 app/views/api/v1/accounts/csat_survey_responses/update.json.jbuilder
 create mode 100644 db/migrate/20260114192518_add_internal_observations_to_csat_survey_responses.rb
 create mode 100644 db/migrate/20260114201315_add_observations_audit_to_csat_survey_responses.rb
 create mode 100644 enterprise/app/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller.rb
 create mode 100644 spec/enterprise/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller_spec.rb

diff --git a/app/controllers/api/v1/accounts/csat_survey_responses_controller.rb b/app/controllers/api/v1/accounts/csat_survey_responses_controller.rb
index f5bed6c34..0cde5f5c1 100644
--- a/app/controllers/api/v1/accounts/csat_survey_responses_controller.rb
+++ b/app/controllers/api/v1/accounts/csat_survey_responses_controller.rb
@@ -50,3 +50,5 @@ class Api::V1::Accounts::CsatSurveyResponsesController < Api::V1::Accounts::Base
     @current_page = params[:page] || 1
   end
 end
+
+Api::V1::Accounts::CsatSurveyResponsesController.prepend_mod_with('Api::V1::Accounts::CsatSurveyResponsesController')
diff --git a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
index bbb31d72c..886bc30a0 100644
--- a/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
+++ b/app/javascript/dashboard/components/ui/DatePicker/DatePicker.vue
@@ -206,10 +206,14 @@ const emitDateRange = () => {
     emit('dateRangeChanged', [selectedStartDate.value, selectedEndDate.value]);
   }
 };
+
+const closeDatePicker = () => {
+  showDatePicker.value = false;
+};
 </script>
 
 <template>
-  <div class="relative font-inter">
+  <div v-on-clickaway="closeDatePicker" class="relative font-inter">
     <DatePickerButton
       :selected-start-date="selectedStartDate"
       :selected-end-date="selectedEndDate"
diff --git a/app/javascript/dashboard/components/widgets/ShowMore.vue b/app/javascript/dashboard/components/widgets/ShowMore.vue
index ca0ef36a7..43fe857c9 100644
--- a/app/javascript/dashboard/components/widgets/ShowMore.vue
+++ b/app/javascript/dashboard/components/widgets/ShowMore.vue
@@ -38,7 +38,7 @@ const toggleShowMore = () => {
     <button
       v-if="text.length > limit"
       class="text-n-brand !p-0 !border-0 align-top"
-      @click="toggleShowMore"
+      @click.stop="toggleShowMore"
     >
       {{ buttonLabel }}
     </button>
diff --git a/app/javascript/dashboard/i18n/locale/en/report.json b/app/javascript/dashboard/i18n/locale/en/report.json
index 91eda0af0..504caff0f 100644
--- a/app/javascript/dashboard/i18n/locale/en/report.json
+++ b/app/javascript/dashboard/i18n/locale/en/report.json
@@ -402,22 +402,48 @@
   },
   "CSAT_REPORTS": {
     "HEADER": "CSAT Reports",
-    "NO_RECORDS": "There are no CSAT survey responses available.",
+    "NO_RECORDS": "No responses yet",
+    "NO_RECORDS_DESCRIPTION": "CSAT survey responses will appear here once customers start providing feedback.",
     "DOWNLOAD": "Download CSAT Reports",
     "DOWNLOAD_FAILED": "Failed to download CSAT Reports",
     "FILTERS": {
+      "ADD_FILTER": "Add filter",
+      "CLEAR_ALL": "Clear all",
+      "NO_FILTER": "No filters available",
+      "INPUT_PLACEHOLDER": {
+        "AGENTS": "Search agents",
+        "INBOXES": "Search inboxes",
+        "TEAMS": "Search teams",
+        "RATINGS": "Search ratings"
+      },
       "AGENTS": {
-        "PLACEHOLDER": "Choose Agents"
+        "LABEL": "Agent"
+      },
+      "INBOXES": {
+        "LABEL": "Inbox"
+      },
+      "TEAMS": {
+        "LABEL": "Team"
+      },
+      "RATINGS": {
+        "LABEL": "Rating"
       }
     },
     "TABLE": {
       "HEADER": {
         "CONTACT_NAME": "Contact",
-        "AGENT_NAME": "Assigned agent",
+        "AGENT_NAME": "Agent",
         "RATING": "Rating",
-        "FEEDBACK_TEXT": "Feedback comment"
-      }
+        "FEEDBACK_TEXT": "Feedback comment",
+        "CONVERSATION": "Conversation",
+        "CUSTOMER": "Customer",
+        "RESPONSE": "Response",
+        "HANDLED_BY": "Handled by"
+      },
+      "UNKNOWN_CUSTOMER": "Unknown customer"
     },
+    "NO_AGENT": "No assigned agent",
+    "NO_FEEDBACK": "No feedback provided",
     "METRIC": {
       "TOTAL_RESPONSES": {
         "LABEL": "Total responses",
@@ -430,6 +456,25 @@
       "RESPONSE_RATE": {
         "LABEL": "Response rate",
         "TOOLTIP": "Total number of responses / Total number of CSAT survey messages sent * 100"
+      },
+      "RATING_DISTRIBUTION": "Rating distribution"
+    },
+    "REVIEW_NOTES": {
+      "TITLE": "Review notes",
+      "PLACEHOLDER": "Add review notes about this rating...",
+      "SAVE": "Save",
+      "CANCEL": "Cancel",
+      "SAVING": "Saving...",
+      "SAVED": "Notes saved successfully",
+      "SAVE_ERROR": "Failed to save notes",
+      "UPDATED_BY": "Updated by {name} {time}",
+      "UPDATED_BY_LABEL": "Updated by",
+      "PAYWALL": {
+        "TITLE": "Upgrade to add review notes",
+        "AVAILABLE_ON": "The review notes feature is only available in the Business and Enterprise plans.",
+        "UPGRADE_PROMPT": "Add internal context to every CSAT response with review notes. Capture what really happened, spot patterns faster, and make better decisions from your feedback.",
+        "UPGRADE_NOW": "Upgrade now",
+        "CANCEL_ANYTIME": "You can change or cancel your plan anytime"
       }
     }
   },
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
index 58a014165..1b74f053c 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/CsatResponses.vue
@@ -3,7 +3,7 @@ import { mapGetters } from 'vuex';
 import { useAlert, useTrack } from 'dashboard/composables';
 import CsatMetrics from './components/CsatMetrics.vue';
 import CsatTable from './components/CsatTable.vue';
-import ReportFilterSelector from './components/FilterSelector.vue';
+import CsatFilters from './components/Csat/CsatFilters.vue';
 import { generateFileName } from '../../../../helper/downloadHelper';
 import { REPORTS_EVENTS } from '../../../../helper/AnalyticsHelper/events';
 import { FEATURE_FLAGS } from '../../../../featureFlags';
@@ -15,7 +15,7 @@ export default {
   components: {
     CsatMetrics,
     CsatTable,
-    ReportFilterSelector,
+    CsatFilters,
     ReportHeader,
     V4Button,
   },
@@ -90,7 +90,7 @@ export default {
       selectedTeam,
       selectedRating,
     }) {
-      // do not track filter change on inital load
+      // do not track filter change on initial load
       if (this.from !== 0 && this.to !== 0) {
         useTrack(REPORTS_EVENTS.FILTER_REPORT, {
           filterType: 'date',
@@ -121,16 +121,11 @@ export default {
     />
   </ReportHeader>
 
-  <div class="flex flex-col gap-4">
-    <ReportFilterSelector
-      show-agents-filter
-      show-inbox-filter
-      show-rating-filter
+  <div class="flex flex-col gap-6">
+    <CsatFilters
       :show-team-filter="isTeamsEnabled"
-      :show-business-hours-switch="false"
       @filter-change="onFilterChange"
     />
-
     <CsatMetrics :filters="requestPayload" />
     <CsatTable :page-index="pageIndex" @page-change="onPageNumberChange" />
   </div>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue
deleted file mode 100644
index 0b221857e..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/ConversationCell.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-
-const { row } = defineProps({
-  row: {
-    type: Object,
-    required: true,
-  },
-});
-
-const routerParams = computed(() => ({
-  name: 'inbox_conversation',
-  params: { conversation_id: row.original.conversationId },
-}));
-</script>
-
-<template>
-  <div class="text-right">
-    <router-link :to="routerParams" class="hover:underline">
-      {{ `#${row.original.conversationId}` }}
-    </router-link>
-    <div v-tooltip="row.original.createdAt" class="text-n-slate-11 text-sm">
-      {{ row.original.createdAgo }}
-    </div>
-  </div>
-</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilterHelpers.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilterHelpers.js
new file mode 100644
index 000000000..064b58080
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilterHelpers.js
@@ -0,0 +1,36 @@
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+export const buildFilterList = (items, type) =>
+  items.map(item => ({
+    id: item.id,
+    name: type === 'ratings' ? item.emoji : item.name,
+    type,
+  }));
+
+export const buildRatingsList = t =>
+  CSAT_RATINGS.map(rating => ({
+    id: rating.value,
+    name: `${t(rating.translationKey)}`,
+    type: 'ratings',
+  }));
+
+export const getActiveFilter = (filters, type, key) =>
+  filters.find(item => item.id.toString() === key.toString());
+
+export const getFilterType = (input, direction) => {
+  const filterMap = {
+    keyToType: {
+      user_ids: 'agents',
+      inbox_id: 'inboxes',
+      team_id: 'teams',
+      rating: 'ratings',
+    },
+    typeToKey: {
+      agents: 'user_ids',
+      inboxes: 'inbox_id',
+      teams: 'team_id',
+      ratings: 'rating',
+    },
+  };
+  return filterMap[direction][input];
+};
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilters.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilters.vue
new file mode 100644
index 000000000..66d601ca4
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/Csat/CsatFilters.vue
@@ -0,0 +1,267 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { getUnixStartOfDay, getUnixEndOfDay } from 'helpers/DateHelper';
+import {
+  buildFilterList,
+  buildRatingsList,
+  getActiveFilter,
+  getFilterType,
+} from './CsatFilterHelpers';
+import FilterButton from 'dashboard/components/ui/Dropdown/DropdownButton.vue';
+import ActiveFilterChip from '../Filters/v3/ActiveFilterChip.vue';
+import AddFilterChip from '../Filters/v3/AddFilterChip.vue';
+import WootDatePicker from 'dashboard/components/ui/DatePicker/DatePicker.vue';
+
+const props = defineProps({
+  showTeamFilter: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['filterChange']);
+
+const { t } = useI18n();
+const store = useStore();
+
+const showDropdownMenu = ref(false);
+const showSubDropdownMenu = ref(false);
+const activeFilterType = ref('');
+const customDateRange = ref([new Date(), new Date()]);
+const appliedFilters = ref({
+  user_ids: null,
+  inbox_id: null,
+  team_id: null,
+  rating: null,
+});
+
+const agents = computed(() => store.getters['agents/getAgents']);
+const inboxes = computed(() => store.getters['inboxes/getInboxes']);
+const teams = computed(() => store.getters['teams/getTeams']);
+
+const ratings = computed(() => buildRatingsList(t));
+
+const from = computed(() => getUnixStartOfDay(customDateRange.value[0]));
+const to = computed(() => getUnixEndOfDay(customDateRange.value[1]));
+
+const getFilterSource = type => {
+  const sources = {
+    agents: agents.value,
+    inboxes: inboxes.value,
+    teams: teams.value,
+    ratings: ratings.value,
+  };
+  return sources[type] || [];
+};
+
+const getFilterOptions = type => {
+  if (type === 'ratings') {
+    return ratings.value;
+  }
+  return buildFilterList(getFilterSource(type), type);
+};
+
+const filterListMenuItems = computed(() => {
+  const filterTypes = [
+    {
+      id: '1',
+      name: t('CSAT_REPORTS.FILTERS.AGENTS.LABEL'),
+      type: 'agents',
+    },
+    {
+      id: '2',
+      name: t('CSAT_REPORTS.FILTERS.INBOXES.LABEL'),
+      type: 'inboxes',
+    },
+    {
+      id: '3',
+      name: t('CSAT_REPORTS.FILTERS.RATINGS.LABEL'),
+      type: 'ratings',
+    },
+  ];
+
+  if (props.showTeamFilter) {
+    filterTypes.splice(2, 0, {
+      id: '4',
+      name: t('CSAT_REPORTS.FILTERS.TEAMS.LABEL'),
+      type: 'teams',
+    });
+  }
+
+  const activeFilterKeys = Object.keys(appliedFilters.value).filter(
+    key => appliedFilters.value[key]
+  );
+  const activeFilterTypes = activeFilterKeys.map(key =>
+    getFilterType(key, 'keyToType')
+  );
+
+  return filterTypes
+    .filter(({ type }) => !activeFilterTypes.includes(type))
+    .map(({ id, name, type }) => ({
+      id,
+      name,
+      type,
+      options: getFilterOptions(type),
+    }));
+});
+
+const activeFilters = computed(() => {
+  const activeKeys = Object.keys(appliedFilters.value).filter(
+    key => appliedFilters.value[key]
+  );
+  return activeKeys.map(key => {
+    const filterType = getFilterType(key, 'keyToType');
+    const items = getFilterSource(filterType);
+    const item = getActiveFilter(items, filterType, appliedFilters.value[key]);
+    return {
+      id: item?.id,
+      name: item?.name || '',
+      type: filterType,
+      options: getFilterOptions(filterType),
+    };
+  });
+});
+
+const hasActiveFilters = computed(() =>
+  Object.values(appliedFilters.value).some(value => value !== null)
+);
+
+const isAllFilterSelected = computed(() => !filterListMenuItems.value.length);
+
+const emitChange = () => {
+  emit('filterChange', {
+    from: from.value,
+    to: to.value,
+    selectedAgents: appliedFilters.value.user_ids
+      ? [{ id: appliedFilters.value.user_ids }]
+      : [],
+    selectedInbox: appliedFilters.value.inbox_id
+      ? { id: appliedFilters.value.inbox_id }
+      : null,
+    selectedTeam: appliedFilters.value.team_id
+      ? { id: appliedFilters.value.team_id }
+      : null,
+    selectedRating: appliedFilters.value.rating
+      ? { value: appliedFilters.value.rating }
+      : null,
+  });
+};
+
+const closeDropdown = () => {
+  showDropdownMenu.value = false;
+};
+
+const closeActiveFilterDropdown = () => {
+  activeFilterType.value = '';
+  showSubDropdownMenu.value = false;
+};
+
+const resetDropdown = () => {
+  closeDropdown();
+  closeActiveFilterDropdown();
+};
+
+const addFilter = item => {
+  const { type, id } = item;
+  const filterKey = getFilterType(type, 'typeToKey');
+  appliedFilters.value[filterKey] = id;
+  emitChange();
+  resetDropdown();
+};
+
+const removeFilter = type => {
+  const filterKey = getFilterType(type, 'typeToKey');
+  appliedFilters.value[filterKey] = null;
+  emitChange();
+};
+
+const clearAllFilters = () => {
+  appliedFilters.value = {
+    user_ids: null,
+    inbox_id: null,
+    team_id: null,
+    rating: null,
+  };
+  emitChange();
+  resetDropdown();
+};
+
+const showDropdown = () => {
+  showSubDropdownMenu.value = false;
+  showDropdownMenu.value = !showDropdownMenu.value;
+};
+
+const openActiveFilterDropdown = filterType => {
+  closeDropdown();
+  activeFilterType.value = filterType;
+  showSubDropdownMenu.value = !showSubDropdownMenu.value;
+};
+
+const onDateRangeChange = value => {
+  customDateRange.value = value;
+  emitChange();
+};
+
+onMounted(() => {
+  emitChange();
+});
+</script>
+
+<template>
+  <div class="flex flex-col flex-wrap w-full gap-3 md:flex-row">
+    <WootDatePicker @date-range-changed="onDateRangeChange" />
+
+    <div
+      class="flex flex-col flex-wrap items-start gap-2 md:items-center md:flex-nowrap md:flex-row"
+    >
+      <div v-if="hasActiveFilters" class="flex flex-wrap gap-2 md:flex-nowrap">
+        <ActiveFilterChip
+          v-for="filter in activeFilters"
+          v-bind="filter"
+          :key="filter.type"
+          :placeholder="
+            $t(
+              `CSAT_REPORTS.FILTERS.INPUT_PLACEHOLDER.${filter.type.toUpperCase()}`
+            )
+          "
+          :active-filter-type="activeFilterType"
+          :show-menu="showSubDropdownMenu"
+          enable-search
+          @toggle-dropdown="openActiveFilterDropdown"
+          @close-dropdown="closeActiveFilterDropdown"
+          @add-filter="addFilter"
+          @remove-filter="removeFilter"
+        />
+      </div>
+
+      <div
+        v-if="hasActiveFilters && !isAllFilterSelected"
+        class="w-full h-px border md:w-px md:h-5 border-n-weak"
+      />
+
+      <div class="flex items-center gap-2">
+        <AddFilterChip
+          v-if="!isAllFilterSelected"
+          placeholder-i18n-key="CSAT_REPORTS.FILTERS.INPUT_PLACEHOLDER"
+          :name="$t('CSAT_REPORTS.FILTERS.ADD_FILTER')"
+          :menu-option="filterListMenuItems"
+          :show-menu="showDropdownMenu"
+          :empty-state-message="$t('CSAT_REPORTS.FILTERS.NO_FILTER')"
+          @toggle-dropdown="showDropdown"
+          @close-dropdown="closeDropdown"
+          @add-filter="addFilter"
+        />
+
+        <div v-if="hasActiveFilters" class="w-px h-5 border border-n-weak" />
+
+        <FilterButton
+          v-if="hasActiveFilters"
+          :button-text="$t('CSAT_REPORTS.FILTERS.CLEAR_ALL')"
+          @click="clearAllFilters"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatContactCell.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatContactCell.vue
new file mode 100644
index 000000000..19a49ae4e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatContactCell.vue
@@ -0,0 +1,52 @@
+<script setup>
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+
+defineProps({
+  contact: {
+    type: Object,
+    default: null,
+  },
+  conversationId: {
+    type: Number,
+    required: true,
+  },
+  createdAgo: {
+    type: String,
+    default: '',
+  },
+  createdAt: {
+    type: String,
+    default: '',
+  },
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-2">
+    <Avatar
+      :src="contact?.thumbnail || ''"
+      :name="contact?.name || ''"
+      :size="32"
+      rounded-full
+    />
+    <div class="flex flex-col gap-0.5">
+      <span class="text-sm text-n-slate-12 font-medium capitalize">
+        {{ contact?.name || '—' }}
+      </span>
+      <div
+        class="flex items-center gap-1 text-xs text-n-slate-10 whitespace-nowrap"
+      >
+        <a
+          :href="`/app/accounts/${$route.params.accountId}/conversations/${conversationId}`"
+          class="flex items-center text-xs gap-0.5 hover:text-n-brand hover:underline"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+        >
+          <span>#{{ conversationId }}</span>
+        </a>
+        <span>·</span>
+        <span :title="createdAt">{{ createdAgo }}</span>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatEmptyState.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatEmptyState.vue
new file mode 100644
index 000000000..95c022c9c
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatEmptyState.vue
@@ -0,0 +1,32 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: 'i-lucide-message-square-off',
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center py-16 px-6 text-center">
+    <div
+      class="size-16 rounded-full bg-n-alpha-2 flex items-center justify-center mb-4"
+    >
+      <i :class="icon" class="size-8 text-n-slate-10" />
+    </div>
+    <h3 class="text-base font-medium text-n-slate-12 mb-1">
+      {{ title }}
+    </h3>
+    <p v-if="description" class="text-sm text-n-slate-10 max-w-sm">
+      {{ description }}
+    </p>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatExpandedRow.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatExpandedRow.vue
new file mode 100644
index 000000000..9bff3faf9
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatExpandedRow.vue
@@ -0,0 +1,162 @@
+<script setup>
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useAlert } from 'dashboard/composables';
+import { useAccount } from 'dashboard/composables/useAccount';
+import { useMessageFormatter } from 'shared/composables/useMessageFormatter';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Editor from 'dashboard/components-next/Editor/Editor.vue';
+import CsatReviewNotesPaywall from './CsatReviewNotesPaywall.vue';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+const props = defineProps({
+  response: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+const { isCloudFeatureEnabled, isOnChatwootCloud } = useAccount();
+const { formatMessage } = useMessageFormatter();
+
+const isFeatureEnabled = computed(() =>
+  isCloudFeatureEnabled('csat_review_notes')
+);
+const showPaywall = computed(
+  () => !isFeatureEnabled.value && isOnChatwootCloud.value
+);
+
+const reviewNotes = ref(props.response.csat_review_notes || '');
+const isEditing = ref(!props.response.csat_review_notes);
+const isSaving = ref(false);
+
+const hasExistingReviewNotes = computed(
+  () => !!props.response.csat_review_notes
+);
+
+const hasChanges = computed(
+  () => reviewNotes.value !== (props.response.csat_review_notes || '')
+);
+
+const startEditing = () => {
+  isEditing.value = true;
+};
+
+const cancelEditing = () => {
+  reviewNotes.value = props.response.csat_review_notes || '';
+  if (hasExistingReviewNotes.value) {
+    isEditing.value = false;
+  }
+};
+
+const saveReviewNotes = async () => {
+  isSaving.value = true;
+  try {
+    await store.dispatch('csat/update', {
+      id: props.response.id,
+      reviewNotes: reviewNotes.value,
+    });
+    useAlert(t('CSAT_REPORTS.REVIEW_NOTES.SAVED'));
+    isEditing.value = false;
+  } catch {
+    useAlert(t('CSAT_REPORTS.REVIEW_NOTES.SAVE_ERROR'));
+  } finally {
+    isSaving.value = false;
+  }
+};
+</script>
+
+<template>
+  <div class="py-4 px-5 border-t border-n-container bg-n-background">
+    <CsatReviewNotesPaywall v-if="showPaywall" />
+    <div v-else-if="isFeatureEnabled" class="flex flex-col gap-3">
+      <div class="flex items-start gap-4">
+        <div
+          class="flex items-center gap-1.5 text-n-slate-11 shrink-0 w-36 pt-3"
+        >
+          <i class="i-lucide-notebook-pen size-4" />
+          <span class="text-sm font-medium">
+            {{ $t('CSAT_REPORTS.REVIEW_NOTES.TITLE') }}
+          </span>
+        </div>
+
+        <div class="flex-1 max-w-2xl">
+          <div
+            v-if="hasExistingReviewNotes && !isEditing"
+            class="group flex items-start gap-2 py-2 px-3 rounded-lg hover:bg-n-slate-2 dark:hover:bg-n-solid-3 cursor-pointer transition-colors"
+            @click.stop="startEditing"
+          >
+            <p
+              v-dompurify-html="formatMessage(response.csat_review_notes || '')"
+              class="flex-1 text-sm text-n-slate-12 prose-sm prose-p:text-sm prose-p:leading-relaxed prose-p:mb-1 prose-p:mt-0"
+            />
+            <i
+              class="i-lucide-pencil size-4 text-n-slate-10 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 mt-0.5"
+            />
+          </div>
+
+          <div
+            v-else
+            class="flex flex-col gap-3 [&_.ProseMirror]:min-h-32 [&_.ProseMirror]:max-h-64 [&_.ProseMirror-menubar]:!mt-0"
+            @click.stop
+          >
+            <Editor
+              v-model="reviewNotes"
+              :placeholder="$t('CSAT_REPORTS.REVIEW_NOTES.PLACEHOLDER')"
+              :show-character-count="false"
+              :enable-canned-responses="false"
+              focus-on-mount
+            >
+              <template #actions>
+                <div class="flex items-center gap-2 py-2">
+                  <Button
+                    v-if="hasExistingReviewNotes"
+                    variant="ghost"
+                    size="xs"
+                    :label="$t('CSAT_REPORTS.REVIEW_NOTES.CANCEL')"
+                    @click.stop="cancelEditing"
+                  />
+                  <Button
+                    :label="$t('CSAT_REPORTS.REVIEW_NOTES.SAVE')"
+                    :disabled="!hasChanges || isSaving"
+                    :loading="isSaving"
+                    size="xs"
+                    @click.stop="saveReviewNotes"
+                  />
+                </div>
+              </template>
+            </Editor>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="
+          hasExistingReviewNotes &&
+          !isEditing &&
+          response.review_notes_updated_by
+        "
+        class="flex items-center gap-4"
+      >
+        <div class="flex items-center gap-1.5 text-n-slate-11 shrink-0 w-36">
+          <i class="i-lucide-user-pen size-4" />
+          <span class="text-sm font-medium">
+            {{ $t('CSAT_REPORTS.REVIEW_NOTES.UPDATED_BY_LABEL') }}
+          </span>
+        </div>
+        <div class="flex items-center gap-1 flex-1 max-w-2xl px-3">
+          <span class="text-sm text-n-slate-12">
+            {{ response.review_notes_updated_by.name }}
+          </span>
+          <span class="text-n-slate-10">·</span>
+          <span class="text-sm text-n-slate-10">
+            {{ dynamicTime(response.review_notes_updated_at) }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.story.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.story.vue
new file mode 100644
index 000000000..901538009
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.story.vue
@@ -0,0 +1,53 @@
+<script setup>
+import CsatMetricCard from './CsatMetricCard.vue';
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/Reports/CsatMetricCard"
+    :layout="{ type: 'grid', width: '400px' }"
+  >
+    <Variant title="Default">
+      <div class="p-4 bg-n-background">
+        <CsatMetricCard
+          label="Total Responses"
+          tooltip="Total number of responses received"
+          value="1,234"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Percentage Value">
+      <div class="p-4 bg-n-background">
+        <CsatMetricCard
+          label="Satisfaction Score"
+          tooltip="Percentage of positive responses"
+          value="85%"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-4 bg-n-background">
+        <CsatMetricCard
+          label="Response Rate"
+          tooltip="Percentage of conversations with responses"
+          value="0"
+          is-loading
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Zero Value">
+      <div class="p-4 bg-n-background">
+        <CsatMetricCard
+          label="Total Responses"
+          tooltip="Total number of responses received"
+          value="0"
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
new file mode 100644
index 000000000..09ffa09c8
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetricCard.vue
@@ -0,0 +1,41 @@
+<script setup>
+defineProps({
+  label: {
+    type: String,
+    required: true,
+  },
+  tooltip: {
+    type: String,
+    required: true,
+  },
+  value: {
+    type: [String, Number],
+    required: true,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-start justify-center min-w-[10rem]">
+    <span
+      class="inline-flex items-center gap-1 text-sm font-medium text-n-slate-11"
+    >
+      {{ label }}
+      <span
+        v-tooltip.right="tooltip"
+        class="i-lucide-info flex flex-shrink-0 text-n-slate-10 size-3.5"
+      />
+    </span>
+    <div
+      v-if="isLoading"
+      class="w-16 h-8 rounded-md bg-n-slate-3 animate-pulse"
+    />
+    <span v-else class="text-2xl font-medium text-n-slate-12">
+      {{ value }}
+    </span>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
index f33ba9f37..a5a45a8b9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatMetrics.vue
@@ -1,135 +1,63 @@
-<script>
-import { mapGetters } from 'vuex';
-import CsatMetricCard from './ReportMetricCard.vue';
-import { CSAT_RATINGS } from 'shared/constants/messages';
-import BarChart from 'shared/components/charts/BarChart.vue';
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import CsatMetricCard from './CsatMetricCard.vue';
+import CsatRatingDistribution from './CsatRatingDistribution.vue';
 
-export default {
-  components: { BarChart, CsatMetricCard },
-  props: {
-    filters: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      csatRatings: CSAT_RATINGS,
-    };
-  },
-  computed: {
-    ...mapGetters({
-      metrics: 'csat/getMetrics',
-      ratingPercentage: 'csat/getRatingPercentage',
-      satisfactionScore: 'csat/getSatisfactionScore',
-      responseRate: 'csat/getResponseRate',
-    }),
-    ratingFilterEnabled() {
-      return Boolean(this.filters.rating);
-    },
-    chartData() {
-      const sortedRatings = [...CSAT_RATINGS].sort((a, b) => b.value - a.value);
-      return {
-        labels: ['Rating'],
-        datasets: sortedRatings.map(rating => ({
-          label: rating.emoji,
-          data: [this.ratingPercentage[rating.value]],
-          backgroundColor: rating.color,
-        })),
-      };
-    },
-    responseCount() {
-      return this.metrics.totalResponseCount
-        ? this.metrics.totalResponseCount.toLocaleString()
-        : '--';
-    },
-    chartOptions() {
-      return {
-        indexAxis: 'y',
-        responsive: true,
-        plugins: {
-          legend: {
-            display: false,
-          },
-          title: {
-            display: false,
-          },
-          tooltip: {
-            enabled: false,
-          },
-        },
-        scales: {
-          x: {
-            display: false,
-            stacked: true,
-          },
-          y: {
-            display: false,
-            stacked: true,
-          },
-        },
-      };
-    },
-  },
-  methods: {
-    formatToPercent(value) {
-      return value ? `${value}%` : '--';
-    },
-    ratingToEmoji(value) {
-      return CSAT_RATINGS.find(rating => rating.value === Number(value)).emoji;
-    },
-  },
-};
+const metrics = useMapGetter('csat/getMetrics');
+const ratingPercentage = useMapGetter('csat/getRatingPercentage');
+const ratingCount = useMapGetter('csat/getRatingCount');
+const satisfactionScore = useMapGetter('csat/getSatisfactionScore');
+const responseRate = useMapGetter('csat/getResponseRate');
+const uiFlags = useMapGetter('csat/getUIFlags');
+
+const isLoading = computed(() => uiFlags.value.isFetchingMetrics);
+
+const responseCount = computed(() =>
+  metrics.value.totalResponseCount
+    ? metrics.value.totalResponseCount.toLocaleString()
+    : '0'
+);
+
+const formatPercent = value => (value ? `${value}%` : '0%');
 </script>
 
-<!-- eslint-disable vue/no-unused-refs -->
-<!-- Added ref for writing specs -->
 <template>
-  <div
-    class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4"
-  >
-    <CsatMetricCard
-      :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
-      :value="responseCount"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-    <CsatMetricCard
-      :disabled="ratingFilterEnabled"
-      :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
-      :value="ratingFilterEnabled ? '--' : formatToPercent(satisfactionScore)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-    <CsatMetricCard
-      :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
-      :info-text="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
-      :value="formatToPercent(responseRate)"
-      class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]"
-    />
-
+  <div class="flex flex-col gap-4">
     <div
-      v-if="metrics.totalResponseCount && !ratingFilterEnabled"
-      ref="csatBarChart"
-      class="w-full md:w-1/2 md:max-w-[50%] flex-1 rtl:[direction:initial]"
+      class="flex sm:flex-row flex-col w-full gap-4 sm:gap-14 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
     >
-      <h3
-        class="flex items-center m-0 text-xs font-medium md:text-sm text-n-slate-12"
-      >
-        <div class="flex flex-row-reverse justify-end">
-          <div
-            v-for="(rating, key, index) in ratingPercentage"
-            :key="rating + key + index"
-            class="ltr:pr-4 rtl:pl-4"
-          >
-            <span class="my-0 mx-0.5">{{ ratingToEmoji(key) }}</span>
-            <span>{{ formatToPercent(rating) }}</span>
-          </div>
-        </div>
-      </h3>
-      <div class="mt-2 h-6">
-        <BarChart :collection="chartData" :chart-options="chartOptions" />
-      </div>
+      <CsatMetricCard
+        :label="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL')"
+        :tooltip="$t('CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP')"
+        :value="responseCount"
+        :is-loading="isLoading"
+      />
+
+      <div class="w-full sm:w-px bg-n-strong" />
+
+      <CsatMetricCard
+        :label="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL')"
+        :tooltip="$t('CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP')"
+        :value="formatPercent(satisfactionScore)"
+        :is-loading="isLoading"
+      />
+
+      <div class="w-full sm:w-px bg-n-strong" />
+
+      <CsatMetricCard
+        :label="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL')"
+        :tooltip="$t('CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP')"
+        :value="formatPercent(responseRate)"
+        :is-loading="isLoading"
+      />
     </div>
+
+    <CsatRatingDistribution
+      :rating-percentage="ratingPercentage"
+      :rating-count="ratingCount"
+      :total-response-count="metrics.totalResponseCount"
+      :is-loading="isLoading"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.story.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.story.vue
new file mode 100644
index 000000000..5ceb2624b
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.story.vue
@@ -0,0 +1,75 @@
+<script setup>
+import CsatRatingDistribution from './CsatRatingDistribution.vue';
+
+const sampleRatingPercentage = {
+  1: 5,
+  2: 10,
+  3: 15,
+  4: 25,
+  5: 45,
+};
+
+const sampleRatingCount = {
+  1: 50,
+  2: 100,
+  3: 150,
+  4: 250,
+  5: 450,
+};
+
+const emptyRatingPercentage = {
+  1: 0,
+  2: 0,
+  3: 0,
+  4: 0,
+  5: 0,
+};
+
+const emptyRatingCount = {
+  1: 0,
+  2: 0,
+  3: 0,
+  4: 0,
+  5: 0,
+};
+</script>
+
+<!-- eslint-disable vue/no-bare-strings-in-template -->
+<!-- eslint-disable vue/no-undef-components -->
+<template>
+  <Story
+    title="Components/Reports/CsatRatingDistribution"
+    :layout="{ type: 'grid', width: '800px' }"
+  >
+    <Variant title="With Data">
+      <div class="p-4 bg-n-background">
+        <CsatRatingDistribution
+          :rating-percentage="sampleRatingPercentage"
+          :rating-count="sampleRatingCount"
+          :total-response-count="1000"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Empty State">
+      <div class="p-4 bg-n-background">
+        <CsatRatingDistribution
+          :rating-percentage="emptyRatingPercentage"
+          :rating-count="emptyRatingCount"
+          :total-response-count="0"
+        />
+      </div>
+    </Variant>
+
+    <Variant title="Loading State">
+      <div class="p-4 bg-n-background">
+        <CsatRatingDistribution
+          :rating-percentage="emptyRatingPercentage"
+          :rating-count="emptyRatingCount"
+          :total-response-count="0"
+          is-loading
+        />
+      </div>
+    </Variant>
+  </Story>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.vue
new file mode 100644
index 000000000..6999bbff2
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatRatingDistribution.vue
@@ -0,0 +1,101 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { CSAT_RATINGS } from 'shared/constants/messages';
+
+const props = defineProps({
+  ratingPercentage: {
+    type: Object,
+    default: () => ({}),
+  },
+  ratingCount: {
+    type: Object,
+    default: () => ({}),
+  },
+  totalResponseCount: {
+    type: Number,
+    default: 0,
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const { t } = useI18n();
+
+const sortedRatings = computed(() =>
+  [...CSAT_RATINGS].sort((a, b) => b.value - a.value)
+);
+
+const formatPercent = value => (value ? `${value}%` : '0%');
+
+const getRatingLabel = value => {
+  const rating = CSAT_RATINGS.find(r => r.value === value);
+  return rating ? t(rating.translationKey) : '';
+};
+
+const getRatingCount = value => {
+  return props.ratingCount[value] || 0;
+};
+</script>
+
+<template>
+  <div
+    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
+  >
+    <span class="text-sm font-medium text-n-slate-11">
+      {{ $t('CSAT_REPORTS.METRIC.RATING_DISTRIBUTION') }}
+    </span>
+
+    <div v-if="isLoading" class="mt-4">
+      <div class="h-6 w-full rounded-full bg-n-slate-3 animate-pulse" />
+      <div class="flex gap-6 mt-4">
+        <div
+          v-for="n in 5"
+          :key="n"
+          class="h-4 w-20 rounded bg-n-slate-3 animate-pulse"
+        />
+      </div>
+    </div>
+
+    <div v-else class="mt-4">
+      <div
+        v-if="totalResponseCount"
+        class="flex h-6 w-full rounded-full overflow-hidden bg-n-alpha-2"
+      >
+        <div
+          v-for="rating in sortedRatings"
+          :key="rating.value"
+          v-tooltip="
+            `${getRatingLabel(rating.value)}: ${formatPercent(ratingPercentage[rating.value])} (${getRatingCount(rating.value)})`
+          "
+          :style="{
+            width: `${ratingPercentage[rating.value]}%`,
+            backgroundColor: rating.color,
+          }"
+          class="h-full transition-all duration-300 first:rounded-s-full last:rounded-e-full cursor-default"
+        />
+      </div>
+      <div v-else class="h-6 w-full rounded-full bg-n-alpha-2" />
+
+      <div class="flex flex-wrap gap-x-6 gap-y-2 mt-4">
+        <div
+          v-for="rating in sortedRatings"
+          :key="rating.value"
+          class="flex items-center gap-2"
+        >
+          <span class="text-sm text-n-slate-11">
+            {{ getRatingLabel(rating.value) }}
+          </span>
+          <span class="text-sm font-medium text-n-slate-12">
+            {{ formatPercent(ratingPercentage[rating.value]) }}
+          </span>
+          <span class="text-xs text-n-slate-10">
+            ({{ getRatingCount(rating.value) }})
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatReviewNotesPaywall.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatReviewNotesPaywall.vue
new file mode 100644
index 000000000..3be9af53e
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatReviewNotesPaywall.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { useRouter } from 'vue-router';
+import { useMapGetter } from 'dashboard/composables/store';
+import BasePaywallModal from 'dashboard/routes/dashboard/settings/components/BasePaywallModal.vue';
+
+const router = useRouter();
+const currentAccountId = useMapGetter('getCurrentAccountId');
+
+const goToBillingSettings = () => {
+  router.push({
+    name: 'billing_settings_index',
+    params: { accountId: currentAccountId.value },
+  });
+};
+</script>
+
+<template>
+  <div class="py-4 px-5 bg-n-background">
+    <div class="flex justify-center">
+      <BasePaywallModal
+        feature-prefix="CSAT_REPORTS.REVIEW_NOTES"
+        i18n-key="PAYWALL"
+        is-on-chatwoot-cloud
+        @upgrade="goToBillingSettings"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
index 64870d31c..a63b3ec35 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTable.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { defineEmits, computed, h } from 'vue';
+import { ref, computed } from 'vue';
 import { useMapGetter } from 'dashboard/composables/store';
+import { useAccount } from 'dashboard/composables/useAccount';
 import { useI18n } from 'vue-i18n';
 
-// [TODO] Instead of converting the values to their reprentation when building the tableData
-// We should do the change in the cell
 import { messageStamp, dynamicTime } from 'shared/helpers/timeHelper';
 
-// components
-import Table from 'dashboard/components/table/Table.vue';
 import Pagination from 'dashboard/components/table/Pagination.vue';
 import UserAvatarWithName from 'dashboard/components/widgets/UserAvatarWithName.vue';
-import ConversationCell from './ConversationCell.vue';
+import ShowMore from 'dashboard/components/widgets/ShowMore.vue';
+import CsatContactCell from './CsatContactCell.vue';
+import CsatExpandedRow from './CsatExpandedRow.vue';
+import CsatEmptyState from './CsatEmptyState.vue';
+import CsatTableLoader from './CsatTableLoader.vue';
 
-// constants
 import { CSAT_RATINGS } from 'shared/constants/messages';
 
 import {
@@ -31,97 +31,82 @@ const { pageIndex } = defineProps({
 
 const emit = defineEmits(['pageChange']);
 const { t } = useI18n();
-// const isRTL = useMapGetter('accounts/isRTL');
+const { isCloudFeatureEnabled, isOnChatwootCloud } = useAccount();
 const csatResponses = useMapGetter('csat/getCSATResponses');
+
+const isFeatureEnabled = computed(() =>
+  isCloudFeatureEnabled('csat_review_notes')
+);
+const showExpandableRows = computed(
+  () => isFeatureEnabled.value || isOnChatwootCloud.value
+);
 const metrics = useMapGetter('csat/getMetrics');
+const uiFlags = useMapGetter('csat/getUIFlags');
+
+const isLoading = computed(() => uiFlags.value.isFetching);
+
+const expandedRows = ref({});
+
+const toggleRow = id => {
+  expandedRows.value = {
+    ...expandedRows.value,
+    [id]: !expandedRows.value[id],
+  };
+};
+
+const isRowExpanded = id => !!expandedRows.value[id];
 
 const tableData = computed(() => {
   return csatResponses.value.map(response => ({
+    id: response.id,
     contact: response.contact,
     assignedAgent: response.assigned_agent,
     rating: response.rating,
-    feedbackText: response.feedback_message || '---',
+    feedbackText: response.feedback_message || '',
     conversationId: response.conversation_id,
+    csatReviewNotes: response.csat_review_notes,
     createdAgo: dynamicTime(response.created_at),
     createdAt: messageStamp(response.created_at, 'LLL d yyyy, h:mm a'),
+    _original: response,
   }));
 });
 
-const defaultSpanRender = cellProps => {
-  const value = cellProps.getValue() || '---';
-  return h(
-    'span',
-    {
-      class: 'line-clamp-5 break-words max-w-full text-n-slate-12',
-      title: value,
-    },
-    value
-  );
+const getRatingData = rating => {
+  return CSAT_RATINGS.find(r => r.value === rating) || {};
 };
 
 const columnHelper = createColumnHelper();
 
-const columns = computed(() => [
-  columnHelper.accessor('contact', {
-    header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
-    width: 200,
-    cell: cellProps => {
-      const { contact } = cellProps.row.original;
-      if (contact) {
-        return h(UserAvatarWithName, {
-          user: contact,
-          class: 'max-w-[200px] overflow-hidden',
-        });
-      }
-      return '--';
-    },
-  }),
-  columnHelper.accessor('assignedAgent', {
-    header: t('CSAT_REPORTS.TABLE.HEADER.AGENT_NAME'),
-    width: 200,
-    cell: cellProps => {
-      const { assignedAgent } = cellProps.row.original;
-      if (assignedAgent) {
-        return h(UserAvatarWithName, {
-          user: assignedAgent,
-          class: 'max-w-[200px] overflow-hidden',
-        });
-      }
-      return '--';
-    },
-  }),
-  columnHelper.accessor('rating', {
-    header: t('CSAT_REPORTS.TABLE.HEADER.RATING'),
-    align: 'center',
-    width: 80,
-    cell: cellProps => {
-      const { rating: giveRating } = cellProps.row.original;
-      const [ratingObject = {}] = CSAT_RATINGS.filter(
-        rating => rating.value === giveRating
-      );
+const columns = computed(() => {
+  const baseColumns = [
+    columnHelper.accessor('contact', {
+      header: t('CSAT_REPORTS.TABLE.HEADER.CONTACT_NAME'),
+    }),
+    columnHelper.accessor('rating', {
+      header: t('CSAT_REPORTS.TABLE.HEADER.RATING'),
+      size: 120,
+    }),
+    columnHelper.accessor('feedbackText', {
+      header: t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
+      size: 500,
+    }),
+    columnHelper.accessor('assignedAgent', {
+      header: t('CSAT_REPORTS.TABLE.HEADER.HANDLED_BY'),
+      size: 160,
+    }),
+  ];
 
-      return h(
-        'span',
-        {
-          class: ratingObject.emoji
-            ? 'emoji-response text-lg'
-            : 'text-n-slate-10',
-        },
-        ratingObject.emoji || '---'
-      );
-    },
-  }),
-  columnHelper.accessor('feedbackText', {
-    header: t('CSAT_REPORTS.TABLE.HEADER.FEEDBACK_TEXT'),
-    width: 400,
-    cell: defaultSpanRender,
-  }),
-  columnHelper.accessor('conversationId', {
-    header: '',
-    width: 100,
-    cell: cellProps => h(ConversationCell, cellProps),
-  }),
-]);
+  if (showExpandableRows.value) {
+    baseColumns.push(
+      columnHelper.accessor('actions', {
+        header: '',
+        size: 50,
+      })
+    );
+  }
+
+  return baseColumns;
+});
 
 const paginationParams = computed(() => {
   return {
@@ -149,25 +134,124 @@ const table = useVueTable({
     },
   },
   onPaginationChange: updater => {
-    const newPagintaion = updater(paginationParams.value);
-    emit('pageChange', newPagintaion.pageIndex);
+    const newPagination = updater(paginationParams.value);
+    emit('pageChange', newPagination.pageIndex);
   },
 });
 </script>
 
 <template>
   <div
-    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-5"
+    class="shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 overflow-hidden"
   >
-    <Table :table="table" class="max-h-[calc(100vh-21.875rem)]" />
-    <div
-      v-show="!tableData.length"
-      class="h-48 flex items-center justify-center text-n-slate-12 text-sm"
-    >
-      {{ $t('CSAT_REPORTS.NO_RECORDS') }}
+    <CsatTableLoader v-if="isLoading" />
+
+    <div v-else-if="tableData.length" class="overflow-x-auto">
+      <table class="w-full">
+        <thead class="bg-n-solid-2 border-b border-n-container">
+          <tr>
+            <th
+              v-for="header in table.getFlatHeaders()"
+              :key="header.id"
+              :style="{
+                width: header.getSize() ? `${header.getSize()}px` : 'auto',
+              }"
+              class="text-left py-3 px-5 font-medium text-sm text-n-slate-12"
+            >
+              {{ header.column.columnDef.header }}
+            </th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-n-container">
+          <template v-for="row in tableData" :key="row.id">
+            <tr
+              class="group hover:bg-n-slate-2 dark:hover:bg-n-solid-3 transition-colors"
+              :class="{
+                'bg-n-slate-2 dark:bg-n-solid-3': isRowExpanded(row.id),
+                'cursor-pointer': showExpandableRows,
+              }"
+              @click="showExpandableRows && toggleRow(row.id)"
+            >
+              <td class="py-4 px-5">
+                <CsatContactCell
+                  :contact="row.contact"
+                  :conversation-id="row.conversationId"
+                  :created-ago="row.createdAgo"
+                  :created-at="row.createdAt"
+                />
+              </td>
+              <td class="py-4 px-5">
+                <div
+                  class="inline-flex items-center gap-1.5 px-2 py-1 rounded-lg"
+                  :style="{
+                    backgroundColor: `${getRatingData(row.rating).color}20`,
+                  }"
+                >
+                  <span class="text-sm font-medium text-n-slate-12 truncate">
+                    {{ $t(getRatingData(row.rating).translationKey) }}
+                  </span>
+                </div>
+              </td>
+              <td class="py-4 px-5">
+                <span
+                  v-if="!row.feedbackText"
+                  class="text-n-slate-10 italic text-sm"
+                >
+                  {{ $t('CSAT_REPORTS.NO_FEEDBACK') }}
+                </span>
+                <div v-else class="text-sm text-n-slate-12">
+                  <ShowMore :text="row.feedbackText" :limit="100" />
+                </div>
+              </td>
+              <td class="py-4 px-5">
+                <UserAvatarWithName
+                  v-if="row.assignedAgent"
+                  :user="row.assignedAgent"
+                  :size="28"
+                />
+                <span v-else class="text-n-slate-10 text-sm italic">
+                  {{ $t('CSAT_REPORTS.NO_AGENT') }}
+                </span>
+              </td>
+              <td v-if="showExpandableRows" class="py-4 px-5">
+                <div
+                  class="p-1.5 rounded-md text-n-slate-10 group-hover:text-n-slate-12 transition-colors"
+                >
+                  <i
+                    class="size-4 block transition-transform duration-200"
+                    :class="
+                      isRowExpanded(row.id)
+                        ? 'i-lucide-chevron-up'
+                        : 'i-lucide-chevron-down'
+                    "
+                  />
+                </div>
+              </td>
+            </tr>
+            <tr
+              v-if="showExpandableRows && isRowExpanded(row.id)"
+              class="!border-t-0"
+            >
+              <td colspan="5" class="p-0 !border-t-0">
+                <CsatExpandedRow :response="row._original" />
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
     </div>
-    <div v-if="metrics.totalResponseCount" class="table-pagination">
-      <Pagination class="mt-2" :table="table" />
+
+    <CsatEmptyState
+      v-else
+      :title="$t('CSAT_REPORTS.NO_RECORDS')"
+      :description="$t('CSAT_REPORTS.NO_RECORDS_DESCRIPTION')"
+    />
+
+    <div
+      v-if="metrics.totalResponseCount"
+      class="px-6 py-4 border-t border-n-weak"
+    >
+      <Pagination :table="table" />
     </div>
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTableLoader.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTableLoader.vue
new file mode 100644
index 000000000..a24523017
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/CsatTableLoader.vue
@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  rows: {
+    type: Number,
+    default: 5,
+  },
+});
+</script>
+
+<template>
+  <div class="p-6">
+    <div class="space-y-4">
+      <div class="flex gap-4 pb-3 border-b border-n-weak">
+        <div class="h-4 w-32 rounded bg-n-slate-3 animate-pulse" />
+        <div class="h-4 w-28 rounded bg-n-slate-3 animate-pulse" />
+        <div class="h-4 w-20 rounded bg-n-slate-3 animate-pulse" />
+        <div class="h-4 flex-1 rounded bg-n-slate-3 animate-pulse" />
+        <div class="h-4 w-20 rounded bg-n-slate-3 animate-pulse" />
+      </div>
+
+      <div v-for="n in rows" :key="n" class="flex items-center gap-4 py-3">
+        <div class="flex items-center gap-2 w-48">
+          <div class="size-8 rounded-full bg-n-slate-3 animate-pulse" />
+          <div class="h-4 w-24 rounded bg-n-slate-3 animate-pulse" />
+        </div>
+        <div class="flex items-center gap-2 w-44">
+          <div class="size-8 rounded-full bg-n-slate-3 animate-pulse" />
+          <div class="h-4 w-20 rounded bg-n-slate-3 animate-pulse" />
+        </div>
+        <div class="h-7 w-24 rounded-lg bg-n-slate-3 animate-pulse" />
+        <div class="h-4 flex-1 rounded bg-n-slate-3 animate-pulse" />
+        <div class="h-4 w-16 rounded bg-n-slate-3 animate-pulse" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CSATMetrics.spec.js b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CSATMetrics.spec.js
index cfaa4cd51..1e743cfc9 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CSATMetrics.spec.js
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/CSATMetrics.spec.js
@@ -6,7 +6,6 @@ describe('CsatMetrics.vue', () => {
   let getters;
   let store;
   let wrapper;
-  const filters = { rating: 3 };
 
   beforeEach(() => {
     getters = {
@@ -18,8 +17,16 @@ describe('CsatMetrics.vue', () => {
         4: 30,
         5: 10,
       }),
+      'csat/getRatingCount': () => ({
+        1: 10,
+        2: 20,
+        3: 30,
+        4: 30,
+        5: 10,
+      }),
       'csat/getSatisfactionScore': () => 85,
       'csat/getResponseRate': () => 90,
+      'csat/getUIFlags': () => ({ isFetchingMetrics: false }),
     };
 
     store = createStore({
@@ -28,40 +35,31 @@ describe('CsatMetrics.vue', () => {
 
     wrapper = shallowMount(CsatMetrics, {
       global: {
-        plugins: [store], // Ensure the store is injected here
+        plugins: [store],
         mocks: {
-          $t: msg => msg, // mock translation function
+          $t: msg => msg,
         },
         stubs: {
-          CsatMetricCard: '<csat-metric-card/>',
-          BarChart: '<woot-horizontal-bar/>',
+          CsatMetricCard: true,
+          CsatRatingDistribution: true,
         },
       },
-      props: { filters },
     });
   });
 
   it('computes response count correctly', () => {
     expect(wrapper.vm.responseCount).toBe('100');
-    expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it('formats values to percent correctly', () => {
-    expect(wrapper.vm.formatToPercent(85)).toBe('85%');
-    expect(wrapper.vm.formatToPercent(null)).toBe('--');
+  it('renders metric cards with correct values', () => {
+    const metricCards = wrapper.findAllComponents({ name: 'CsatMetricCard' });
+    expect(metricCards).toHaveLength(3);
   });
 
-  it('maps rating value to emoji correctly', () => {
-    const rating = wrapper.vm.csatRatings[0]; // assuming this is { value: 1, emoji: '😡' }
-    expect(wrapper.vm.ratingToEmoji(rating.value)).toBe(rating.emoji);
-  });
-
-  it('hides report card if rating filter is enabled', () => {
-    expect(wrapper.html()).not.toContain('bar-chart-stub');
-  });
-
-  it('shows report card if rating filter is not enabled', async () => {
-    await wrapper.setProps({ filters: {} });
-    expect(wrapper.html()).toContain('bar-chart-stub');
+  it('renders rating distribution component', () => {
+    const distribution = wrapper.findComponent({
+      name: 'CsatRatingDistribution',
+    });
+    expect(distribution.exists()).toBe(true);
   });
 });
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap b/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
deleted file mode 100644
index 1f1e80f83..000000000
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/specs/__snapshots__/CSATMetrics.spec.js.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`CsatMetrics.vue > computes response count correctly 1`] = `
-"<div class="flex-col lg:flex-row flex flex-wrap mx-0 shadow outline-1 outline outline-n-container rounded-xl bg-n-solid-2 px-6 py-8 gap-4">
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.LABEL" infotext="CSAT_REPORTS.METRIC.TOTAL_RESPONSES.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="100"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.LABEL" infotext="CSAT_REPORTS.METRIC.SATISFACTION_SCORE.TOOLTIP" disabled="true" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="--"></csat-metric-card-stub>
-  <csat-metric-card-stub label="CSAT_REPORTS.METRIC.RESPONSE_RATE.LABEL" infotext="CSAT_REPORTS.METRIC.RESPONSE_RATE.TOOLTIP" disabled="false" class="xs:w-full sm:max-w-[50%] lg:w-1/6 lg:max-w-[16%]" value="90%"></csat-metric-card-stub>
-  <!--v-if-->
-</div>"
-`;
diff --git a/app/javascript/dashboard/store/modules/csat.js b/app/javascript/dashboard/store/modules/csat.js
index 2cf929862..b5b3e8c53 100644
--- a/app/javascript/dashboard/store/modules/csat.js
+++ b/app/javascript/dashboard/store/modules/csat.js
@@ -82,6 +82,9 @@ export const getters = {
       ),
     };
   },
+  getRatingCount(_state) {
+    return _state.metrics.ratingsCount;
+  },
 };
 
 export const actions = {
@@ -115,6 +118,13 @@ export const actions = {
       });
     });
   },
+  update: async ({ commit }, { id, reviewNotes }) => {
+    const response = await CSATReports.update(id, {
+      csat_review_notes: reviewNotes,
+    });
+    commit(types.UPDATE_CSAT_RESPONSE, response.data);
+    return response.data;
+  },
 };
 
 export const mutations = {
@@ -144,6 +154,7 @@ export const mutations = {
     };
     _state.metrics.totalSentMessagesCount = totalSentMessagesCount || 0;
   },
+  [types.UPDATE_CSAT_RESPONSE]: MutationHelpers.update,
 };
 
 export default {
diff --git a/app/javascript/dashboard/store/modules/specs/csat/getters.spec.js b/app/javascript/dashboard/store/modules/specs/csat/getters.spec.js
index 5a9057b70..f649d7d21 100644
--- a/app/javascript/dashboard/store/modules/specs/csat/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/csat/getters.spec.js
@@ -86,4 +86,19 @@ describe('#getters', () => {
       })
     ).toEqual('50.00');
   });
+
+  it('getRatingCount', () => {
+    const state = {
+      metrics: {
+        ratingsCount: { 1: 10, 2: 20, 3: 15, 4: 3, 5: 2 },
+      },
+    };
+    expect(getters.getRatingCount(state)).toEqual({
+      1: 10,
+      2: 20,
+      3: 15,
+      4: 3,
+      5: 2,
+    });
+  });
 });
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 48e6babdc..b76867360 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -241,6 +241,7 @@ export default {
   SET_CSAT_RESPONSE_UI_FLAG: 'SET_CSAT_RESPONSE_UI_FLAG',
   SET_CSAT_RESPONSE: 'SET_CSAT_RESPONSE',
   SET_CSAT_RESPONSE_METRICS: 'SET_CSAT_RESPONSE_METRICS',
+  UPDATE_CSAT_RESPONSE: 'UPDATE_CSAT_RESPONSE',
 
   // Custom Attributes
   SET_CUSTOM_ATTRIBUTE_UI_FLAG: 'SET_CUSTOM_ATTRIBUTE_UI_FLAG',
diff --git a/app/models/csat_survey_response.rb b/app/models/csat_survey_response.rb
index 7bcc25d58..804dfd4b7 100644
--- a/app/models/csat_survey_response.rb
+++ b/app/models/csat_survey_response.rb
@@ -27,6 +27,7 @@ class CsatSurveyResponse < ApplicationRecord
   belongs_to :contact
   belongs_to :message
   belongs_to :assigned_agent, class_name: 'User', optional: true, inverse_of: :csat_survey_responses
+  belongs_to :review_notes_updated_by, class_name: 'User', optional: true
 
   validates :rating, presence: true, inclusion: { in: [1, 2, 3, 4, 5] }
   validates :account_id, presence: true
diff --git a/app/models/user.rb b/app/models/user.rb
index cc25357f6..b14bcd158 100644
--- a/app/models/user.rb
+++ b/app/models/user.rb
@@ -90,6 +90,8 @@ class User < ApplicationRecord
   has_many :assigned_conversations, foreign_key: 'assignee_id', class_name: 'Conversation', dependent: :nullify, inverse_of: :assignee
   alias_attribute :conversations, :assigned_conversations
   has_many :csat_survey_responses, foreign_key: 'assigned_agent_id', dependent: :nullify, inverse_of: :assigned_agent
+  has_many :reviewed_csat_survey_responses, foreign_key: 'review_notes_updated_by_id', class_name: 'CsatSurveyResponse',
+                                            dependent: :nullify, inverse_of: :review_notes_updated_by
   has_many :conversation_participants, dependent: :destroy_async
   has_many :participating_conversations, through: :conversation_participants, source: :conversation
 
diff --git a/app/views/api/v1/accounts/csat_survey_responses/download.csv.erb b/app/views/api/v1/accounts/csat_survey_responses/download.csv.erb
index 5c0524480..ba17c175b 100644
--- a/app/views/api/v1/accounts/csat_survey_responses/download.csv.erb
+++ b/app/views/api/v1/accounts/csat_survey_responses/download.csv.erb
@@ -1,5 +1,5 @@
-<%=
-  CSV.generate_line([
+<%
+  headers = [
     I18n.t('reports.csat.headers.agent_name'),
     I18n.t('reports.csat.headers.rating'),
     I18n.t('reports.csat.headers.feedback'),
@@ -8,24 +8,28 @@
     I18n.t('reports.csat.headers.contact_phone_number'),
     I18n.t('reports.csat.headers.link_to_the_conversation'),
     I18n.t('reports.csat.headers.recorded_at')
-  ])
+  ]
+  headers << I18n.t('reports.csat.headers.review_notes') if ChatwootApp.enterprise?
 -%>
+<%= CSV.generate_line(headers) -%>
 <% @csat_survey_responses.each do |csat_response| %>
 <% assigned_agent = csat_response.assigned_agent %>
 <% contact = csat_response.contact %>
 <% conversation = csat_response.conversation %>
-<%=
-  CSV.generate_line([
+<%
+  row = [
     assigned_agent ? "#{assigned_agent.name} (#{assigned_agent.email})" : nil,
     csat_response.rating,
-    csat_response.feedback_message.present? ? csat_response.feedback_message : nil,
-    contact&.name.present? ? contact&.name: nil,
-    contact&.email.present? ? contact&.email: nil,
-    contact&.phone_number.present? ? contact&.phone_number: nil,
-    conversation ? app_account_conversation_url(account_id: Current.account.id, id: conversation.display_id): nil,
-    csat_response.created_at,
-]).html_safe
+    csat_response.feedback_message.presence,
+    contact&.name.presence,
+    contact&.email.presence,
+    contact&.phone_number.presence,
+    conversation ? app_account_conversation_url(account_id: Current.account.id, id: conversation.display_id) : nil,
+    csat_response.created_at
+  ]
+  row << csat_response.csat_review_notes if ChatwootApp.enterprise?
 -%>
+<%= CSV.generate_line(row).html_safe -%>
 <% end %>
 <%=
   CSV.generate_line([
diff --git a/app/views/api/v1/accounts/csat_survey_responses/update.json.jbuilder b/app/views/api/v1/accounts/csat_survey_responses/update.json.jbuilder
new file mode 100644
index 000000000..065eb237b
--- /dev/null
+++ b/app/views/api/v1/accounts/csat_survey_responses/update.json.jbuilder
@@ -0,0 +1 @@
+json.partial! 'api/v1/models/csat_survey_response', formats: [:json], resource: @csat_survey_response
diff --git a/app/views/api/v1/models/_csat_survey_response.json.jbuilder b/app/views/api/v1/models/_csat_survey_response.json.jbuilder
index 3470c4646..fbba50aa7 100644
--- a/app/views/api/v1/models/_csat_survey_response.json.jbuilder
+++ b/app/views/api/v1/models/_csat_survey_response.json.jbuilder
@@ -1,6 +1,14 @@
 json.id resource.id
 json.rating resource.rating
 json.feedback_message resource.feedback_message
+json.csat_review_notes resource.csat_review_notes
+json.review_notes_updated_at resource.review_notes_updated_at&.to_i
+if resource.review_notes_updated_by
+  json.review_notes_updated_by do
+    json.id resource.review_notes_updated_by.id
+    json.name resource.review_notes_updated_by.name
+  end
+end
 json.account_id resource.account_id
 json.message_id resource.message_id
 if resource.contact
diff --git a/config/features.yml b/config/features.yml
index 6792cbb07..36943ceff 100644
--- a/config/features.yml
+++ b/config/features.yml
@@ -230,3 +230,7 @@
 - name: channel_tiktok
   display_name: TikTok Channel
   enabled: true
+- name: csat_review_notes
+  display_name: CSAT Review Notes
+  enabled: false
+  premium: true
diff --git a/config/locales/en.yml b/config/locales/en.yml
index bacd007bb..61a80d827 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -202,6 +202,7 @@ en:
         rating: Rating
         feedback: Feedback Comment
         recorded_at: Recorded date
+        review_notes: Review Notes
   notifications:
     notification_title:
       conversation_creation: 'A conversation (#%{display_id}) has been created in %{inbox_name}'
diff --git a/config/routes.rb b/config/routes.rb
index bdc8e4fe6..50b426554 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -189,6 +189,9 @@ Rails.application.routes.draw do
               get :metrics
               get :download
             end
+            member do
+              patch :update if ChatwootApp.enterprise?
+            end
           end
           resources :applied_slas, only: [:index] do
             collection do
diff --git a/db/migrate/20260114192518_add_internal_observations_to_csat_survey_responses.rb b/db/migrate/20260114192518_add_internal_observations_to_csat_survey_responses.rb
new file mode 100644
index 000000000..687064b90
--- /dev/null
+++ b/db/migrate/20260114192518_add_internal_observations_to_csat_survey_responses.rb
@@ -0,0 +1,5 @@
+class AddInternalObservationsToCsatSurveyResponses < ActiveRecord::Migration[7.1]
+  def change
+    add_column :csat_survey_responses, :csat_review_notes, :text
+  end
+end
diff --git a/db/migrate/20260114201315_add_observations_audit_to_csat_survey_responses.rb b/db/migrate/20260114201315_add_observations_audit_to_csat_survey_responses.rb
new file mode 100644
index 000000000..9bf1c5d1f
--- /dev/null
+++ b/db/migrate/20260114201315_add_observations_audit_to_csat_survey_responses.rb
@@ -0,0 +1,6 @@
+class AddObservationsAuditToCsatSurveyResponses < ActiveRecord::Migration[7.1]
+  def change
+    add_column :csat_survey_responses, :review_notes_updated_at, :datetime
+    add_reference :csat_survey_responses, :review_notes_updated_by, index: true
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index bd4f0f968..e30f7cd8d 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[7.1].define(version: 2026_01_12_092041) do
+ActiveRecord::Schema[7.1].define(version: 2026_01_14_201315) do
   # These extensions should be enabled to support this database
   enable_extension "pg_stat_statements"
   enable_extension "pg_trgm"
@@ -733,11 +733,15 @@ ActiveRecord::Schema[7.1].define(version: 2026_01_12_092041) do
     t.bigint "assigned_agent_id"
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
+    t.text "csat_review_notes"
+    t.datetime "review_notes_updated_at"
+    t.bigint "review_notes_updated_by_id"
     t.index ["account_id"], name: "index_csat_survey_responses_on_account_id"
     t.index ["assigned_agent_id"], name: "index_csat_survey_responses_on_assigned_agent_id"
     t.index ["contact_id"], name: "index_csat_survey_responses_on_contact_id"
     t.index ["conversation_id"], name: "index_csat_survey_responses_on_conversation_id"
     t.index ["message_id"], name: "index_csat_survey_responses_on_message_id", unique: true
+    t.index ["review_notes_updated_by_id"], name: "index_csat_survey_responses_on_review_notes_updated_by_id"
   end
 
   create_table "custom_attribute_definitions", force: :cascade do |t|
diff --git a/enterprise/app/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller.rb b/enterprise/app/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller.rb
new file mode 100644
index 000000000..ca1ebcefb
--- /dev/null
+++ b/enterprise/app/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller.rb
@@ -0,0 +1,12 @@
+module Enterprise::Api::V1::Accounts::CsatSurveyResponsesController
+  def update
+    @csat_survey_response = Current.account.csat_survey_responses.find(params[:id])
+    authorize @csat_survey_response
+
+    @csat_survey_response.update!(
+      csat_review_notes: params[:csat_review_notes],
+      review_notes_updated_by: Current.user,
+      review_notes_updated_at: Time.current
+    )
+  end
+end
diff --git a/enterprise/app/policies/enterprise/csat_survey_response_policy.rb b/enterprise/app/policies/enterprise/csat_survey_response_policy.rb
index 4b0f5816e..8f614f873 100644
--- a/enterprise/app/policies/enterprise/csat_survey_response_policy.rb
+++ b/enterprise/app/policies/enterprise/csat_survey_response_policy.rb
@@ -10,4 +10,8 @@ module Enterprise::CsatSurveyResponsePolicy
   def download?
     @account_user.custom_role&.permissions&.include?('report_manage') || super
   end
+
+  def update?
+    @account_user.administrator? || @account_user.custom_role&.permissions&.include?('report_manage')
+  end
 end
diff --git a/enterprise/app/services/enterprise/billing/handle_stripe_event_service.rb b/enterprise/app/services/enterprise/billing/handle_stripe_event_service.rb
index eab6a81dc..10887a1d7 100644
--- a/enterprise/app/services/enterprise/billing/handle_stripe_event_service.rb
+++ b/enterprise/app/services/enterprise/billing/handle_stripe_event_service.rb
@@ -22,7 +22,7 @@ class Enterprise::Billing::HandleStripeEventService
   ].freeze
 
   # Additional features available starting with the Business plan
-  BUSINESS_PLAN_FEATURES = %w[sla custom_roles].freeze
+  BUSINESS_PLAN_FEATURES = %w[sla custom_roles csat_review_notes].freeze
 
   # Additional features available only in the Enterprise plan
   ENTERPRISE_PLAN_FEATURES = %w[audit_logs disable_branding saml].freeze
diff --git a/enterprise/config/premium_features.yml b/enterprise/config/premium_features.yml
index 366cc82fa..dbe50614f 100644
--- a/enterprise/config/premium_features.yml
+++ b/enterprise/config/premium_features.yml
@@ -5,3 +5,4 @@
 - sla
 - captain_integration
 - custom_roles
+- csat_review_notes
diff --git a/spec/enterprise/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller_spec.rb b/spec/enterprise/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller_spec.rb
new file mode 100644
index 000000000..10ff87419
--- /dev/null
+++ b/spec/enterprise/controllers/enterprise/api/v1/accounts/csat_survey_responses_controller_spec.rb
@@ -0,0 +1,85 @@
+require 'rails_helper'
+
+RSpec.describe 'Enterprise CSAT Survey Responses API', type: :request do
+  let(:account) { create(:account) }
+  let(:administrator) { create(:user, account: account, role: :administrator) }
+  let(:agent) { create(:user, account: account, role: :agent) }
+  let!(:csat_survey_response) { create(:csat_survey_response, account: account) }
+
+  describe 'PATCH /api/v1/accounts/{account.id}/csat_survey_responses/:id' do
+    let(:update_params) { { csat_review_notes: 'Customer was very satisfied with the resolution' } }
+
+    context 'when it is an unauthenticated user' do
+      it 'returns unauthorized' do
+        patch "/api/v1/accounts/#{account.id}/csat_survey_responses/#{csat_survey_response.id}",
+              params: update_params,
+              as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated agent without permissions' do
+      it 'returns unauthorized' do
+        patch "/api/v1/accounts/#{account.id}/csat_survey_responses/#{csat_survey_response.id}",
+              headers: agent.create_new_auth_token,
+              params: update_params,
+              as: :json
+
+        expect(response).to have_http_status(:unauthorized)
+      end
+    end
+
+    context 'when it is an authenticated administrator' do
+      it 'updates the csat survey response review notes' do
+        freeze_time do
+          patch "/api/v1/accounts/#{account.id}/csat_survey_responses/#{csat_survey_response.id}",
+                headers: administrator.create_new_auth_token,
+                params: update_params,
+                as: :json
+
+          expect(response).to have_http_status(:success)
+          csat_survey_response.reload
+          expect(csat_survey_response.csat_review_notes).to eq('Customer was very satisfied with the resolution')
+          expect(csat_survey_response.review_notes_updated_by).to eq(administrator)
+          expect(csat_survey_response.review_notes_updated_at).to eq(Time.current)
+        end
+      end
+    end
+
+    context 'when it is an agent with report_manage permission' do
+      let(:custom_role) { create(:custom_role, account: account, permissions: ['report_manage']) }
+      let(:agent_with_role) { create(:user) }
+
+      before do
+        create(:account_user, user: agent_with_role, account: account, role: :agent, custom_role: custom_role)
+      end
+
+      it 'updates the csat survey response review notes' do
+        freeze_time do
+          patch "/api/v1/accounts/#{account.id}/csat_survey_responses/#{csat_survey_response.id}",
+                headers: agent_with_role.create_new_auth_token,
+                params: update_params,
+                as: :json
+
+          expect(response).to have_http_status(:success)
+          csat_survey_response.reload
+          expect(csat_survey_response.csat_review_notes).to eq('Customer was very satisfied with the resolution')
+          expect(csat_survey_response.review_notes_updated_by).to eq(agent_with_role)
+          expect(csat_survey_response.review_notes_updated_at).to eq(Time.current)
+        end
+      end
+    end
+
+    context 'when csat survey response does not exist' do
+      it 'returns not found' do
+        patch "/api/v1/accounts/#{account.id}/csat_survey_responses/0",
+              headers: administrator.create_new_auth_token,
+              params: update_params,
+              as: :json
+
+        expect(response).to have_http_status(:not_found)
+      end
+    end
+  end
+end