diff --git a/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
index 02544439f..b388d067e 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/AssistantCard.story.vue
@@ -1,64 +1,6 @@
 <script setup>
 import AssistantCard from './AssistantCard.vue';
-
-const assistantList = [
-  {
-    account_id: 2,
-    config: { product_name: 'HelpDesk Pro' },
-    created_at: 1736033561,
-    description: 'An advanced assistant for customer support solutions',
-    id: 4,
-    name: 'Support Genie',
-  },
-  {
-    account_id: 3,
-    config: { product_name: 'CRM Tools' },
-    created_at: 1736033562,
-    description: 'Assists in managing customer relationships efficiently',
-    id: 5,
-    name: 'CRM Assistant',
-  },
-  {
-    account_id: 4,
-    config: { product_name: 'SalesFlow' },
-    created_at: 1736033563,
-    description: 'Optimizes sales pipeline tracking and forecasting',
-    id: 6,
-    name: 'SalesBot',
-  },
-  {
-    account_id: 5,
-    config: { product_name: 'TicketMaster AI' },
-    created_at: 1736033564,
-    description: 'Automates ticket assignment and customer query responses',
-    id: 7,
-    name: 'TicketBot',
-  },
-  {
-    account_id: 6,
-    config: { product_name: 'FinanceAssist' },
-    created_at: 1736033565,
-    description: 'Provides financial analytics and reporting',
-    id: 8,
-    name: 'Finance Wizard',
-  },
-  {
-    account_id: 7,
-    config: { product_name: 'MarketingMate' },
-    created_at: 1736033566,
-    description: 'Automates marketing tasks and generates campaign insights',
-    id: 9,
-    name: 'Marketing Guru',
-  },
-  {
-    account_id: 8,
-    config: { product_name: 'HR Assistant' },
-    created_at: 1736033567,
-    description: 'Streamlines HR operations and employee management',
-    id: 10,
-    name: 'HR Helper',
-  },
-];
+import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 </script>
 
 <template>
@@ -68,7 +10,7 @@ const assistantList = [
   >
     <Variant title="Assistant Card">
       <div
-        v-for="(assistant, index) in assistantList"
+        v-for="(assistant, index) in assistantsList"
         :key="index"
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
diff --git a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
index ec004e6c0..df1ada6cc 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/DocumentCard.story.vue
@@ -1,152 +1,8 @@
 <script setup>
 import DocumentCard from './DocumentCard.vue';
-
-const documents = [
-  {
-    account_id: 1,
-    assistant: {
-      id: 1,
-      name: 'Helper Pro',
-    },
-    content: 'Guide content for using conversation filters.',
-    created_at: 1736143272,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
-    id: 3059,
-    name: 'How to use Conversation Filters? | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 2,
-    assistant: {
-      id: 2,
-      name: 'Support Genie',
-    },
-    content: 'Guide on automating ticket assignments in Chatwoot.',
-    created_at: 1736143273,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
-    id: 3060,
-    name: 'Automating Ticket Assignments | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 3,
-    assistant: {
-      id: 3,
-      name: 'CRM Assistant',
-    },
-    content: 'Learn how to manage customer profiles efficiently.',
-    created_at: 1736143274,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
-    id: 3061,
-    name: 'Managing Customer Profiles | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 4,
-    assistant: {
-      id: 4,
-      name: 'SalesBot',
-    },
-    content: 'Optimize sales tracking with advanced features.',
-    created_at: 1736143275,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
-    id: 3062,
-    name: 'Sales Tracking Guide | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 5,
-    assistant: {
-      id: 5,
-      name: 'TicketBot',
-    },
-    content: 'Learn how to create and manage tickets in Chatwoot.',
-    created_at: 1736143276,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
-    id: 3063,
-    name: 'Managing Tickets | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 6,
-    assistant: {
-      id: 6,
-      name: 'Finance Wizard',
-    },
-    content: 'Guide on using financial reporting features.',
-    created_at: 1736143277,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
-    id: 3064,
-    name: 'Financial Reporting | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 7,
-    assistant: {
-      id: 7,
-      name: 'Marketing Guru',
-    },
-    content: 'Learn about campaign automation in Chatwoot.',
-    created_at: 1736143278,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688250-campaign-automation',
-    id: 3065,
-    name: 'Campaign Automation | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 8,
-    assistant: {
-      id: 8,
-      name: 'HR Helper',
-    },
-    content: 'How to manage employee profiles effectively.',
-    created_at: 1736143279,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688260-employee-profile-management',
-    id: 3066,
-    name: 'Employee Profile Management | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 9,
-    assistant: {
-      id: 9,
-      name: 'ProjectBot',
-    },
-    content: 'Guide to project management features in Chatwoot.',
-    created_at: 1736143280,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688270-project-management',
-    id: 3067,
-    name: 'Project Management | User Guide | Chatwoot',
-    status: 'available',
-  },
-  {
-    account_id: 10,
-    assistant: {
-      id: 10,
-      name: 'ShopBot',
-    },
-    content: 'E-commerce optimization with Chatwoot features.',
-    created_at: 1736143281,
-    external_link:
-      'https://www.chatwoot.com/hc/user-guide/articles/1677688280-ecommerce-optimization',
-    id: 3068,
-    name: 'E-commerce Optimization | User Guide | Chatwoot',
-    status: 'available',
-  },
-];
+import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
 <template>
   <Story
     title="Captain/Assistant/DocumentCard"
@@ -154,7 +10,7 @@ const documents = [
   >
     <Variant title="Document Card">
       <div
-        v-for="(doc, index) in documents"
+        v-for="(doc, index) in documentsList"
         :key="index"
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
diff --git a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
index 34439a135..2fd0e9756 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/InboxCard.story.vue
@@ -1,73 +1,8 @@
 <script setup>
 import InboxCard from './InboxCard.vue';
-import { INBOX_TYPES } from 'dashboard/helper/inbox';
-
-const inboxes = [
-  {
-    id: 1,
-    name: 'Website Chat',
-    channel_type: INBOX_TYPES.WEB,
-  },
-  {
-    id: 2,
-    name: 'Facebook Support',
-    channel_type: INBOX_TYPES.FB,
-  },
-  {
-    id: 3,
-    name: 'Twitter Support',
-    channel_type: INBOX_TYPES.TWITTER,
-  },
-  {
-    id: 4,
-    name: 'SMS Support',
-    channel_type: INBOX_TYPES.TWILIO,
-    phone_number: '+1234567890',
-  },
-  {
-    id: 5,
-    name: 'SMS Service',
-    channel_type: INBOX_TYPES.TWILIO,
-    messaging_service_sid: 'MGxxxxxx',
-  },
-  {
-    id: 6,
-    name: 'WhatsApp Support',
-    channel_type: INBOX_TYPES.WHATSAPP,
-    phone_number: '+1987654321',
-  },
-  {
-    id: 7,
-    name: 'Email Support',
-    channel_type: INBOX_TYPES.EMAIL,
-    email: 'support@company.com',
-  },
-  {
-    id: 8,
-    name: 'Telegram Support',
-    channel_type: INBOX_TYPES.TELEGRAM,
-  },
-  {
-    id: 9,
-    name: 'LINE Support',
-    channel_type: INBOX_TYPES.LINE,
-  },
-  {
-    id: 10,
-    name: 'API Channel',
-    channel_type: INBOX_TYPES.API,
-  },
-  {
-    id: 11,
-    name: 'SMS Basic',
-    channel_type: INBOX_TYPES.SMS,
-    phone_number: '+1555555555',
-  },
-];
+import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
 <template>
   <Story
     title="Captain/Assistant/InboxCard"
diff --git a/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue b/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
index 27fba8b6b..1a281b799 100644
--- a/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
+++ b/app/javascript/dashboard/components-next/captain/assistant/ResponseCard.story.vue
@@ -1,139 +1,8 @@
 <script setup>
 import ResponseCard from './ResponseCard.vue';
-
-const responses = [
-  {
-    account_id: 1,
-    answer:
-      'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
-    created_at: 1736283330,
-    id: 87,
-    question: 'Why is my Messenger in Chatwoot deactivated?',
-    status: 'pending',
-    assistant: {
-      account_id: 1,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033280,
-      description: 'This is a description of the assistant 2',
-      id: 1,
-      name: 'Assistant 2',
-    },
-  },
-  {
-    account_id: 2,
-    answer:
-      'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
-    created_at: 1736283340,
-    id: 88,
-    question: 'How do I integrate WhatsApp with Chatwoot?',
-    assistant: {
-      account_id: 2,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033281,
-      description: 'Handles integration queries',
-      id: 2,
-      name: 'Assistant 3',
-    },
-  },
-  {
-    account_id: 3,
-    answer:
-      "To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
-    created_at: 1736283350,
-    id: 89,
-    question: 'How can I reset my password in Chatwoot?',
-    assistant: {
-      account_id: 3,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033282,
-      description: 'Handles account management support',
-      id: 3,
-      name: 'Assistant 4',
-    },
-  },
-  {
-    account_id: 4,
-    answer:
-      "You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
-    created_at: 1736283360,
-    id: 90,
-    question: 'How do I enable dark mode in Chatwoot?',
-    assistant: {
-      account_id: 4,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033283,
-      description: 'Helps with UI customization',
-      id: 4,
-      name: 'Assistant 5',
-    },
-  },
-  {
-    account_id: 5,
-    answer:
-      "To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
-    created_at: 1736283370,
-    id: 91,
-    question: 'How do I add a new team member in Chatwoot?',
-    assistant: {
-      account_id: 5,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033284,
-      description: 'Handles team management queries',
-      id: 5,
-      name: 'Assistant 6',
-    },
-  },
-  {
-    account_id: 6,
-    answer:
-      "Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
-    created_at: 1736283380,
-    id: 92,
-    question: 'What are campaigns in Chatwoot?',
-    assistant: {
-      account_id: 6,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033285,
-      description: 'Focuses on campaign and marketing queries',
-      id: 6,
-      name: 'Assistant 7',
-    },
-  },
-  {
-    account_id: 7,
-    answer:
-      "To track an agent's performance, use the Analytics dashboard under 'Reports'.",
-    created_at: 1736283390,
-    id: 93,
-    question: "How can I track an agent's performance in Chatwoot?",
-    assistant: {
-      account_id: 7,
-      config: {
-        product_name: 'Chatwoot',
-      },
-      created_at: 1736033286,
-      description: 'Analytics and reporting assistant',
-      id: 7,
-      name: 'Assistant 8',
-    },
-  },
-];
+import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
 </script>
 
-<!-- eslint-disable vue/no-bare-strings-in-template -->
-<!-- eslint-disable vue/no-undef-components -->
 <template>
   <Story
     title="Captain/Assistant/ResponseCard"
@@ -141,7 +10,7 @@ const responses = [
   >
     <Variant title="Article Card">
       <div
-        v-for="(response, index) in responses"
+        v-for="(response, index) in responsesList"
         :key="index"
         class="px-20 py-4 bg-white dark:bg-slate-900"
       >
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
new file mode 100644
index 000000000..0ae292eb4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue
@@ -0,0 +1,39 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import AssistantCard from 'dashboard/components-next/captain/assistant/AssistantCard.vue';
+import { assistantsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.ASSISTANTS.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <AssistantCard
+          v-for="(assistant, index) in assistantsList.slice(0, 5)"
+          :id="assistant.id"
+          :key="`assistant-${index}`"
+          :name="assistant.name"
+          :description="assistant.description"
+          :updated-at="assistant.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.ASSISTANTS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
new file mode 100644
index 000000000..614a82a88
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue
@@ -0,0 +1,40 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import DocumentCard from 'dashboard/components-next/captain/assistant/DocumentCard.vue';
+import { documentsList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.DOCUMENTS.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <DocumentCard
+          v-for="(document, index) in documentsList.slice(0, 5)"
+          :id="document.id"
+          :key="`document-${index}`"
+          :name="document.name"
+          :assistant="document.assistant"
+          :external-link="document.external_link"
+          :created-at="document.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.DOCUMENTS.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue
new file mode 100644
index 000000000..e13413a07
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue
@@ -0,0 +1,37 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
+import { inboxes } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.INBOXES.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.INBOXES.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <InboxCard
+          v-for="(inbox, index) in inboxes.slice(0, 5)"
+          :id="inbox.id"
+          :key="`inbox-${index}`"
+          :inbox="inbox"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.INBOXES.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
new file mode 100644
index 000000000..2582aa6af
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue
@@ -0,0 +1,42 @@
+<script setup>
+import EmptyStateLayout from 'dashboard/components-next/EmptyStateLayout.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
+import { responsesList } from 'dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js';
+
+const emit = defineEmits(['click']);
+
+const onClick = () => {
+  emit('click');
+};
+</script>
+
+<template>
+  <EmptyStateLayout
+    :title="$t('CAPTAIN.RESPONSES.EMPTY_STATE.TITLE')"
+    :subtitle="$t('CAPTAIN.RESPONSES.EMPTY_STATE.SUBTITLE')"
+  >
+    <template #empty-state-item>
+      <div class="grid grid-cols-1 gap-4 p-px overflow-hidden">
+        <ResponseCard
+          v-for="(response, index) in responsesList.slice(0, 5)"
+          :id="response.id"
+          :key="`response-${index}`"
+          :question="response.question"
+          :answer="response.answer"
+          :status="response.status"
+          :assistant="response.assistant"
+          :created-at="response.created_at"
+          :updated-at="response.created_at"
+        />
+      </div>
+    </template>
+    <template #actions>
+      <Button
+        :label="$t('CAPTAIN.RESPONSES.ADD_NEW')"
+        icon="i-lucide-plus"
+        @click="onClick"
+      />
+    </template>
+  </EmptyStateLayout>
+</template>
diff --git a/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js
new file mode 100644
index 000000000..af0331430
--- /dev/null
+++ b/app/javascript/dashboard/components-next/captain/pageComponents/emptyStates/captainEmptyStateContent.js
@@ -0,0 +1,286 @@
+import { INBOX_TYPES } from 'dashboard/helper/inbox';
+
+export const assistantsList = [
+  {
+    account_id: 2,
+    config: { product_name: 'HelpDesk Pro' },
+    created_at: 1736033561,
+    description:
+      'An advanced AI assistant designed to enhance customer support solutions by automating workflows and providing instant responses.',
+    id: 4,
+    name: 'Support Genie',
+  },
+  {
+    account_id: 3,
+    config: { product_name: 'CRM Tools' },
+    created_at: 1736033562,
+    description:
+      'Helps streamline customer relationship management by organizing contacts, automating follow-ups, and providing insights.',
+    id: 5,
+    name: 'CRM Assistant',
+  },
+  {
+    account_id: 4,
+    config: { product_name: 'SalesFlow' },
+    created_at: 1736033563,
+    description:
+      'Optimizes your sales pipeline by tracking prospects, forecasting sales, and automating administrative tasks.',
+    id: 6,
+    name: 'SalesBot',
+  },
+  {
+    account_id: 5,
+    config: { product_name: 'TicketMaster AI' },
+    created_at: 1736033564,
+    description:
+      'Automates ticket assignment, categorization, and customer query responses to enhance support efficiency.',
+    id: 7,
+    name: 'TicketBot',
+  },
+  {
+    account_id: 6,
+    config: { product_name: 'FinanceAssist' },
+    created_at: 1736033565,
+    description:
+      'Provides financial analytics, reporting, and insights, helping teams make data-driven financial decisions.',
+    id: 8,
+    name: 'Finance Wizard',
+  },
+  {
+    account_id: 8,
+    config: { product_name: 'HR Assistant' },
+    created_at: 1736033567,
+    description:
+      'Streamlines HR operations including employee management, payroll, and recruitment processes.',
+    id: 10,
+    name: 'HR Helper',
+  },
+];
+
+export const documentsList = [
+  {
+    account_id: 1,
+    assistant: { id: 1, name: 'Helper Pro' },
+    content:
+      'Comprehensive guide on using conversation filters to manage chats effectively.',
+    created_at: 1736143272,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688192-how-to-use-conversation-filters',
+    id: 3059,
+    name: 'How to use Conversation Filters? | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 2,
+    assistant: { id: 2, name: 'Support Genie' },
+    content:
+      'Step-by-step guide for automating ticket assignments and improving support workflow in Chatwoot.',
+    created_at: 1736143273,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688200-automating-ticket-assignments',
+    id: 3060,
+    name: 'Automating Ticket Assignments | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 3,
+    assistant: { id: 3, name: 'CRM Assistant' },
+    content:
+      'A detailed guide on managing and organizing customer profiles for better relationship management.',
+    created_at: 1736143274,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688210-managing-customer-profiles',
+    id: 3061,
+    name: 'Managing Customer Profiles | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 4,
+    assistant: { id: 4, name: 'SalesBot' },
+    content:
+      'Learn how to optimize sales tracking and improve your sales forecasting using advanced features.',
+    created_at: 1736143275,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688220-sales-tracking-guide',
+    id: 3062,
+    name: 'Sales Tracking Guide | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 5,
+    assistant: { id: 5, name: 'TicketBot' },
+    content:
+      'How to efficiently create, manage, and resolve tickets in Chatwoot.',
+    created_at: 1736143276,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688230-managing-tickets',
+    id: 3063,
+    name: 'Managing Tickets | User Guide | Chatwoot',
+    status: 'available',
+  },
+  {
+    account_id: 6,
+    assistant: { id: 6, name: 'Finance Wizard' },
+    content:
+      'Detailed guide on how to use financial reporting tools and generate insightful analytics.',
+    created_at: 1736143277,
+    external_link:
+      'https://www.chatwoot.com/hc/user-guide/articles/1677688240-financial-reporting',
+    id: 3064,
+    name: 'Financial Reporting | User Guide | Chatwoot',
+    status: 'available',
+  },
+];
+
+export const responsesList = [
+  {
+    account_id: 1,
+    answer:
+      'Messenger may be deactivated because you are on a free plan or the limit for inboxes might have been reached.',
+    created_at: 1736283330,
+    id: 87,
+    question: 'Why is my Messenger in Chatwoot deactivated?',
+    status: 'pending',
+    assistant: {
+      account_id: 1,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033280,
+      description: 'Assists with general queries and system-wide issues.',
+      id: 1,
+      name: 'Assistant 2',
+    },
+  },
+  {
+    account_id: 2,
+    answer:
+      'You can integrate your WhatsApp account by navigating to the Integrations section and selecting the WhatsApp integration option.',
+    created_at: 1736283340,
+    id: 88,
+    question: 'How do I integrate WhatsApp with Chatwoot?',
+    assistant: {
+      account_id: 2,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033281,
+      description: 'Helps with integration and setup-related inquiries.',
+      id: 2,
+      name: 'Assistant 3',
+    },
+  },
+  {
+    account_id: 3,
+    answer:
+      "To reset your password, go to the login page and click on 'Forgot Password', then follow the instructions sent to your email.",
+    created_at: 1736283350,
+    id: 89,
+    question: 'How can I reset my password in Chatwoot?',
+    assistant: {
+      account_id: 3,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033282,
+      description: 'Handles account management and recovery support.',
+      id: 3,
+      name: 'Assistant 4',
+    },
+  },
+  {
+    account_id: 4,
+    answer:
+      "You can enable the dark mode in settings by navigating to 'Appearance' and selecting 'Dark Mode'.",
+    created_at: 1736283360,
+    id: 90,
+    question: 'How do I enable dark mode in Chatwoot?',
+    assistant: {
+      account_id: 4,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033283,
+      description: 'Helps with UI and theme-related inquiries.',
+      id: 4,
+      name: 'Assistant 5',
+    },
+  },
+  {
+    account_id: 5,
+    answer:
+      "To add a new team member, navigate to 'Settings', then 'Team', and click on 'Add Team Member'.",
+    created_at: 1736283370,
+    id: 91,
+    question: 'How do I add a new team member in Chatwoot?',
+    assistant: {
+      account_id: 5,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033284,
+      description: 'Supports team management and user access-related queries.',
+      id: 5,
+      name: 'Assistant 6',
+    },
+  },
+  {
+    account_id: 6,
+    answer:
+      "Campaigns in Chatwoot allow you to send targeted messages to specific user segments. You can create them in the 'Campaigns' section.",
+    created_at: 1736283380,
+    id: 92,
+    question: 'What are campaigns in Chatwoot?',
+    assistant: {
+      account_id: 6,
+      config: { product_name: 'Chatwoot' },
+      created_at: 1736033285,
+      description:
+        'Specialized in marketing, campaign management, and messaging strategies.',
+      id: 6,
+      name: 'Assistant 7',
+    },
+  },
+];
+
+export const inboxes = [
+  {
+    id: 7,
+    name: 'Email Support',
+    channel_type: INBOX_TYPES.EMAIL,
+    email: 'support@company.com',
+  },
+  {
+    id: 1,
+    name: 'Website Chat',
+    channel_type: INBOX_TYPES.WEB,
+  },
+  {
+    id: 2,
+    name: 'Facebook Support',
+    channel_type: INBOX_TYPES.FB,
+  },
+  {
+    id: 5,
+    name: 'SMS Service',
+    channel_type: INBOX_TYPES.TWILIO,
+    messaging_service_sid: 'MGxxxxxx',
+  },
+  {
+    id: 6,
+    name: 'WhatsApp Support',
+    channel_type: INBOX_TYPES.WHATSAPP,
+    phone_number: '+1987654321',
+  },
+  {
+    id: 8,
+    name: 'Telegram Support',
+    channel_type: INBOX_TYPES.TELEGRAM,
+  },
+  {
+    id: 9,
+    name: 'LINE Support',
+    channel_type: INBOX_TYPES.LINE,
+  },
+  {
+    id: 10,
+    name: 'API Channel',
+    channel_type: INBOX_TYPES.API,
+  },
+  {
+    id: 11,
+    name: 'SMS Basic',
+    channel_type: INBOX_TYPES.SMS,
+    phone_number: '+1555555555',
+  },
+];
diff --git a/app/javascript/dashboard/i18n/locale/en/integrations.json b/app/javascript/dashboard/i18n/locale/en/integrations.json
index 0157d5571..e61ba92b3 100644
--- a/app/javascript/dashboard/i18n/locale/en/integrations.json
+++ b/app/javascript/dashboard/i18n/locale/en/integrations.json
@@ -360,6 +360,10 @@
         "EDIT_ASSISTANT": "Edit Assistant",
         "DELETE_ASSISTANT": "Delete Assistant",
         "VIEW_CONNECTED_INBOXES": "View connected inboxes"
+      },
+      "EMPTY_STATE": {
+        "TITLE": "No assistants available",
+        "SUBTITLE": "Create an assistant to provide quick and accurate responses to your users. It can learn from your help articles and past conversations. Click the button below to get started."
       }
     },
     "DOCUMENTS": {
@@ -398,6 +402,10 @@
       "OPTIONS": {
         "VIEW_RELATED_RESPONSES": "View Related Responses",
         "DELETE_DOCUMENT": "Delete Document"
+      },
+      "EMPTY_STATE": {
+        "TITLE": "No documents available",
+        "SUBTITLE": "Documents are used by your assistant to generate FAQs. You can import documents to provide context for your assistant. Click the button below to get started."
       }
     },
     "RESPONSES": {
@@ -455,12 +463,16 @@
         "APPROVE": "Mark as approved",
         "EDIT_RESPONSE": "Edit FAQ",
         "DELETE_RESPONSE": "Delete FAQ"
+      },
+      "EMPTY_STATE": {
+        "TITLE": "No FAQs Found",
+        "SUBTITLE": "FAQs help your assistant provide quick and accurate answers to questions from your customers. They can be generated automatically from your content or can be added manually. Click the button below to create your first FAQ."
       }
     },
     "INBOXES": {
       "HEADER": "Connected Inboxes",
       "ADD_NEW": "Connect a new inbox",
-      "OPTIONS" :{
+      "OPTIONS": {
         "DISCONNECT": "Disconnect"
       },
       "DELETE": {
@@ -482,6 +494,10 @@
           "PLACEHOLDER": "Choose the inbox to deploy the assistant.",
           "ERROR": "An inbox selection is required."
         }
+      },
+      "EMPTY_STATE": {
+        "TITLE": "No Connected Inboxes",
+        "SUBTITLE": "Connecting an inbox allows the assistant to handle initial questions from your customers before transferring them to you. Click the button below to set it up now."
       }
     }
   }
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
index 029a3e216..6bba32eb2 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/Index.vue
@@ -7,6 +7,7 @@ import DeleteDialog from 'dashboard/components-next/captain/pageComponents/Delet
 import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CreateAssistantDialog from 'dashboard/components-next/captain/pageComponents/assistant/CreateAssistantDialog.vue';
+import AssistantPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/AssistantPageEmptyState.vue';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
@@ -94,7 +95,7 @@ onMounted(() => store.dispatch('captainAssistants/get'));
       />
     </div>
 
-    <div v-else>{{ 'No assistants found' }}</div>
+    <AssistantPageEmptyState v-else @click="handleCreate" />
 
     <DeleteDialog
       v-if="selectedAssistant"
diff --git a/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
index 83d7be8ec..1aa0982ac 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/assistants/inboxes/Index.vue
@@ -13,6 +13,7 @@ import PageLayout from 'dashboard/components-next/captain/PageLayout.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ConnectInboxDialog from 'dashboard/components-next/captain/pageComponents/inbox/ConnectInboxDialog.vue';
 import InboxCard from 'dashboard/components-next/captain/assistant/InboxCard.vue';
+import InboxPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/InboxPageEmptyState.vue';
 
 const store = useStore();
 const dialogType = ref('');
@@ -104,7 +105,7 @@ onMounted(() =>
       />
     </div>
 
-    <div v-else>{{ 'There are no connected inboxes' }}</div>
+    <InboxPageEmptyState v-else @click="handleCreate" />
 
     <DeleteDialog
       v-if="selectedInbox"
diff --git a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
index 44850c5af..af2cbc0ef 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/documents/Index.vue
@@ -9,6 +9,8 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import RelatedResponses from 'dashboard/components-next/captain/pageComponents/document/RelatedResponses.vue';
 import CreateDocumentDialog from 'dashboard/components-next/captain/pageComponents/document/CreateDocumentDialog.vue';
 import AssistantSelector from 'dashboard/components-next/captain/pageComponents/AssistantSelector.vue';
+import DocumentPageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/DocumentPageEmptyState.vue';
+
 const store = useStore();
 
 const uiFlags = useMapGetter('captainDocuments/getUIFlags');
@@ -30,6 +32,12 @@ const showCreateDialog = ref(false);
 const createDocumentDialog = ref(null);
 const relationQuestionDialog = ref(null);
 
+const shouldShowAssistantSelector = computed(() => {
+  if (assistants.value.length === 0) return false;
+
+  return !isFetching.value;
+});
+
 const handleShowRelatedDocument = () => {
   showRelatedResponses.value = true;
   nextTick(() => relationQuestionDialog.value.dialogRef.open());
@@ -95,7 +103,7 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="handleCreateDocument"
   >
-    <div v-if="!isFetching" class="mb-4 -mt-3 flex gap-3">
+    <div v-if="shouldShowAssistantSelector" class="mb-4 -mt-3 flex gap-3">
       <AssistantSelector
         :assistant-id="selectedAssistant"
         @update="handleAssistantFilterChange"
@@ -120,7 +128,8 @@ onMounted(() => {
       />
     </div>
 
-    <div v-else>{{ 'No documents found' }}</div>
+    <DocumentPageEmptyState v-else @click="handleCreateDocument" />
+
     <RelatedResponses
       v-if="showRelatedResponses"
       ref="relationQuestionDialog"
diff --git a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
index dc0d8ed69..4ae24c5ad 100644
--- a/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
@@ -13,9 +13,11 @@ import AssistantSelector from 'dashboard/components-next/captain/pageComponents/
 import ResponseCard from 'dashboard/components-next/captain/assistant/ResponseCard.vue';
 import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import CreateResponseDialog from 'dashboard/components-next/captain/pageComponents/response/CreateResponseDialog.vue';
+import ResponsePageEmptyState from 'dashboard/components-next/captain/pageComponents/emptyStates/ResponsePageEmptyState.vue';
 
 const store = useStore();
 const uiFlags = useMapGetter('captainResponses/getUIFlags');
+const assistants = useMapGetter('captainAssistants/getRecords');
 const responseMeta = useMapGetter('captainResponses/getMeta');
 const responses = useMapGetter('captainResponses/getRecords');
 const isFetching = computed(() => uiFlags.value.fetchingList);
@@ -31,6 +33,11 @@ const { t } = useI18n();
 const createDialog = ref(null);
 
 const isStatusFilterOpen = ref(false);
+const shouldShowDropdown = computed(() => {
+  if (assistants.value.length === 0) return false;
+
+  return !isFetching.value;
+});
 
 const statusOptions = computed(() =>
   ['all', 'pending', 'approved'].map(key => ({
@@ -106,7 +113,7 @@ const fetchResponses = (page = 1) => {
   if (selectedAssistant.value !== 'all') {
     filterParams.assistantId = selectedAssistant.value;
   }
-  store.dispatch('captainResponses/get', page);
+  store.dispatch('captainResponses/get', filterParams);
 };
 
 const onPageChange = page => fetchResponses(page);
@@ -138,7 +145,7 @@ onMounted(() => {
     @update:current-page="onPageChange"
     @click="handleCreate"
   >
-    <div v-if="!isFetching" class="mb-4 -mt-3 flex gap-3">
+    <div v-if="shouldShowDropdown" class="mb-4 -mt-3 flex gap-3">
       <OnClickOutside @trigger="isStatusFilterOpen = false">
         <Button
           :label="selectedStatusLabel"
@@ -184,7 +191,7 @@ onMounted(() => {
       />
     </div>
 
-    <div v-else>{{ 'No responses found' }}</div>
+    <ResponsePageEmptyState v-else @click="handleCreate" />
 
     <DeleteDialog
       v-if="selectedResponse"