From fe44b0714790722f4fbf70c962f3a96d5a095509 Mon Sep 17 00:00:00 2001
From: salmonumbrella <182032677+salmonumbrella@users.noreply.github.com>
Date: Wed, 6 May 2026 08:20:27 -0700
Subject: [PATCH] feat(companies): add company detail page (#14054)

---
 app/javascript/dashboard/api/companies.js     |  52 ++-
 .../dashboard/api/specs/companies.spec.js     | 142 +++----
 .../Companies/CompaniesCard/CompaniesCard.vue |  52 ++-
 .../Companies/CompaniesDetailsLayout.vue      | 115 ++++++
 .../CompaniesHeader/CompanyHeader.vue         |  20 +-
 .../components/CompanySortMenu.vue            |   6 +
 .../CompanyDetail/CompanyContactsSidebar.vue  | 354 +++++++++++++++++
 .../CompanyCustomAttributeItem.vue            |  94 +++++
 .../CompanyDetail/CompanyCustomAttributes.vue | 142 +++++++
 .../CompanyDetail/CompanyProfileCard.vue      | 203 ++++++++++
 .../ConfirmCompanyDeleteDialog.vue            |  45 +++
 .../CustomAttributes/DateAttribute.vue        |   2 +-
 .../CustomAttributes/OtherAttribute.vue       |   2 +-
 .../components-next/sidebar/Sidebar.vue       |   2 +-
 .../i18n/locale/en/attributesMgmt.json        |   8 +-
 .../dashboard/i18n/locale/en/companies.json   |  95 +++++
 .../companies/pages/CompaniesIndex.vue        |  19 +-
 .../companies/pages/CompanyDetailView.vue     | 236 ++++++++++++
 .../routes/dashboard/companies/routes.js      |  14 +
 .../dashboard/settings/attributes/Index.vue   |   5 +-
 .../dashboard/store/modules/attributes.js     |   5 +
 .../modules/specs/attributes/getters.spec.js  |  30 ++
 app/javascript/dashboard/stores/companies.js  | 358 +++++++++++++++++-
 .../dashboard/stores/companies.spec.js        | 213 +++++++++++
 app/models/custom_attribute_definition.rb     |  15 +-
 config/routes.rb                              |  11 +
 ..._add_additional_attributes_to_companies.rb |   9 +
 db/schema.rb                                  |   3 +
 .../accounts/companies/contacts_controller.rb |  87 +++++
 .../api/v1/accounts/companies_controller.rb   |  51 ++-
 enterprise/app/models/company.rb              |  18 +
 enterprise/app/policies/company_policy.rb     |   8 +
 .../companies/contact_membership_service.rb   |  15 +
 .../accounts/companies/_company.json.jbuilder |   8 -
 .../accounts/companies/avatar.json.jbuilder   |   3 +
 .../companies/contacts/_contact.json.jbuilder |  10 +
 .../companies/contacts/create.json.jbuilder   |   3 +
 .../companies/contacts/index.json.jbuilder    |  10 +
 .../companies/contacts/search.json.jbuilder   |  10 +
 .../accounts/companies/create.json.jbuilder   |   2 +-
 .../destroy_custom_attributes.json.jbuilder   |   3 +
 .../v1/accounts/companies/index.json.jbuilder |   2 +-
 .../accounts/companies/search.json.jbuilder   |   2 +-
 .../v1/accounts/companies/show.json.jbuilder  |   2 +-
 .../accounts/companies/update.json.jbuilder   |   2 +-
 .../api/v1/models/_company.json.jbuilder      |  10 +
 .../companies/contacts_controller_spec.rb     |  78 ++++
 .../v1/accounts/companies_controller_spec.rb  |  67 ++++
 .../custom_attribute_definition_spec.rb       |  11 +
 49 files changed, 2461 insertions(+), 193 deletions(-)
 create mode 100644 app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue
 create mode 100644 app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue
 create mode 100644 app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue
 create mode 100644 app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributes.vue
 create mode 100644 app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue
 create mode 100644 app/javascript/dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue
 create mode 100644 app/javascript/dashboard/routes/dashboard/companies/pages/CompanyDetailView.vue
 create mode 100644 app/javascript/dashboard/stores/companies.spec.js
 create mode 100644 db/migrate/20260422133000_add_additional_attributes_to_companies.rb
 create mode 100644 enterprise/app/controllers/api/v1/accounts/companies/contacts_controller.rb
 create mode 100644 enterprise/app/services/companies/contact_membership_service.rb
 delete mode 100644 enterprise/app/views/api/v1/accounts/companies/_company.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/accounts/companies/avatar.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/accounts/companies/contacts/_contact.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/accounts/companies/contacts/create.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/accounts/companies/contacts/index.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/accounts/companies/contacts/search.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/accounts/companies/destroy_custom_attributes.json.jbuilder
 create mode 100644 enterprise/app/views/api/v1/models/_company.json.jbuilder
 create mode 100644 spec/enterprise/controllers/api/v1/accounts/companies/contacts_controller_spec.rb

diff --git a/app/javascript/dashboard/api/companies.js b/app/javascript/dashboard/api/companies.js
index 090b530c4..b98a59983 100644
--- a/app/javascript/dashboard/api/companies.js
+++ b/app/javascript/dashboard/api/companies.js
@@ -1,21 +1,12 @@
 /* global axios */
 import ApiClient from './ApiClient';
 
-export const buildCompanyParams = (page, sort) => {
-  let params = `page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
-
-export const buildSearchParams = (query, page, sort) => {
-  let params = `q=${encodeURIComponent(query)}&page=${page}`;
-  if (sort) {
-    params = `${params}&sort=${sort}`;
-  }
-  return params;
-};
+const buildParams = params =>
+  new URLSearchParams(
+    Object.entries(params).filter(
+      ([key, value]) => value !== undefined && (value !== '' || key === 'q')
+    )
+  ).toString();
 
 class CompanyAPI extends ApiClient {
   constructor() {
@@ -24,14 +15,41 @@ class CompanyAPI extends ApiClient {
 
   get(params = {}) {
     const { page = 1, sort = 'name' } = params;
-    const requestURL = `${this.url}?${buildCompanyParams(page, sort)}`;
+    const requestURL = `${this.url}?${buildParams({ page, sort })}`;
     return axios.get(requestURL);
   }
 
   search(query = '', page = 1, sort = 'name') {
-    const requestURL = `${this.url}/search?${buildSearchParams(query, page, sort)}`;
+    const requestURL = `${this.url}/search?${buildParams({ q: query, page, sort })}`;
     return axios.get(requestURL);
   }
+
+  listContacts(id, page = 1) {
+    return axios.get(`${this.url}/${id}/contacts?${buildParams({ page })}`);
+  }
+
+  searchContacts(id, query = '', page = 1) {
+    const requestURL = `${this.url}/${id}/contacts/search?${buildParams({ q: query, page })}`;
+    return axios.get(requestURL);
+  }
+
+  createContact(id, payload) {
+    return axios.post(`${this.url}/${id}/contacts`, payload);
+  }
+
+  removeContact(id, contactId) {
+    return axios.delete(`${this.url}/${id}/contacts/${contactId}`);
+  }
+
+  destroyCustomAttributes(id, customAttributes) {
+    return axios.post(`${this.url}/${id}/destroy_custom_attributes`, {
+      custom_attributes: customAttributes,
+    });
+  }
+
+  destroyAvatar(id) {
+    return axios.delete(`${this.url}/${id}/avatar`);
+  }
 }
 
 export default new CompanyAPI();
diff --git a/app/javascript/dashboard/api/specs/companies.spec.js b/app/javascript/dashboard/api/specs/companies.spec.js
index 82fdc1c97..ca1d905de 100644
--- a/app/javascript/dashboard/api/specs/companies.spec.js
+++ b/app/javascript/dashboard/api/specs/companies.spec.js
@@ -1,7 +1,4 @@
-import companyAPI, {
-  buildCompanyParams,
-  buildSearchParams,
-} from '../companies';
+import companyAPI from '../companies';
 import ApiClient from '../ApiClient';
 
 describe('#CompanyAPI', () => {
@@ -9,7 +6,6 @@ describe('#CompanyAPI', () => {
     expect(companyAPI).toBeInstanceOf(ApiClient);
     expect(companyAPI).toHaveProperty('get');
     expect(companyAPI).toHaveProperty('show');
-    expect(companyAPI).toHaveProperty('create');
     expect(companyAPI).toHaveProperty('update');
     expect(companyAPI).toHaveProperty('delete');
     expect(companyAPI).toHaveProperty('search');
@@ -32,111 +28,69 @@ describe('#CompanyAPI', () => {
       window.axios = originalAxios;
     });
 
-    it('#get with default params', () => {
+    it('#get includes pagination and sorting params', () => {
       companyAPI.get({});
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies?page=1&sort=name'
       );
     });
 
-    it('#get with page and sort params', () => {
-      companyAPI.get({ page: 2, sort: 'domain' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=2&sort=domain'
-      );
-    });
-
-    it('#get with descending sort', () => {
-      companyAPI.get({ page: 1, sort: '-created_at' });
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies?page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with query', () => {
-      companyAPI.search('acme', 1, 'name');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme&page=1&sort=name'
-      );
-    });
-
-    it('#search with special characters in query', () => {
+    it('#search encodes query params', () => {
       companyAPI.search('acme & co', 2, 'domain');
       expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=acme%20%26%20co&page=2&sort=domain'
+        '/api/v1/companies/search?q=acme+%26+co&page=2&sort=domain'
       );
     });
 
-    it('#search with descending sort', () => {
-      companyAPI.search('test', 1, '-created_at');
-      expect(axiosMock.get).toHaveBeenCalledWith(
-        '/api/v1/companies/search?q=test&page=1&sort=-created_at'
-      );
-    });
-
-    it('#search with empty query', () => {
+    it('#search keeps empty query param for backend validation', () => {
       companyAPI.search('', 1, 'name');
       expect(axiosMock.get).toHaveBeenCalledWith(
         '/api/v1/companies/search?q=&page=1&sort=name'
       );
     });
-  });
-});
 
-describe('#buildCompanyParams', () => {
-  it('returns correct string with page only', () => {
-    expect(buildCompanyParams(1)).toBe('page=1');
-  });
-
-  it('returns correct string with page and sort', () => {
-    expect(buildCompanyParams(1, 'name')).toBe('page=1&sort=name');
-  });
-
-  it('returns correct string with different page', () => {
-    expect(buildCompanyParams(3, 'domain')).toBe('page=3&sort=domain');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildCompanyParams(1, '-created_at')).toBe(
-      'page=1&sort=-created_at'
-    );
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildCompanyParams(2, '')).toBe('page=2');
-  });
-});
-
-describe('#buildSearchParams', () => {
-  it('returns correct string with all parameters', () => {
-    expect(buildSearchParams('acme', 1, 'name')).toBe(
-      'q=acme&page=1&sort=name'
-    );
-  });
-
-  it('returns correct string with special characters', () => {
-    expect(buildSearchParams('acme & co', 2, 'domain')).toBe(
-      'q=acme%20%26%20co&page=2&sort=domain'
-    );
-  });
-
-  it('returns correct string with empty query', () => {
-    expect(buildSearchParams('', 1, 'name')).toBe('q=&page=1&sort=name');
-  });
-
-  it('returns correct string without sort parameter', () => {
-    expect(buildSearchParams('test', 1, '')).toBe('q=test&page=1');
-  });
-
-  it('returns correct string with descending sort', () => {
-    expect(buildSearchParams('company', 3, '-created_at')).toBe(
-      'q=company&page=3&sort=-created_at'
-    );
-  });
-
-  it('encodes special characters correctly', () => {
-    expect(buildSearchParams('test@example.com', 1, 'name')).toBe(
-      'q=test%40example.com&page=1&sort=name'
-    );
+    it('#destroyAvatar deletes the company avatar endpoint', () => {
+      companyAPI.destroyAvatar(1);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/companies/1/avatar'
+      );
+    });
+
+    it('#listContacts fetches company contacts', () => {
+      companyAPI.listContacts(1, 2);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts?page=2'
+      );
+    });
+
+    it('#searchContacts encodes contact search params', () => {
+      companyAPI.searchContacts(1, 'jane & co', 3);
+      expect(axiosMock.get).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts/search?q=jane+%26+co&page=3'
+      );
+    });
+
+    it('#createContact links a contact to the company', () => {
+      companyAPI.createContact(1, { contact_id: 2 });
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts',
+        { contact_id: 2 }
+      );
+    });
+
+    it('#removeContact unlinks a contact from the company', () => {
+      companyAPI.removeContact(1, 2);
+      expect(axiosMock.delete).toHaveBeenCalledWith(
+        '/api/v1/companies/1/contacts/2'
+      );
+    });
+
+    it('#destroyCustomAttributes removes company custom attributes', () => {
+      companyAPI.destroyCustomAttributes(1, ['plan']);
+      expect(axiosMock.post).toHaveBeenCalledWith(
+        '/api/v1/companies/1/destroy_custom_attributes',
+        { custom_attributes: ['plan'] }
+      );
+    });
   });
 });
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue b/app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue
index 4603521eb..fe4385bbb 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesCard/CompaniesCard.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { formatDistanceToNow } from 'date-fns';
+import { dynamicTime } from 'shared/helpers/timeHelper';
 
 import CardLayout from 'dashboard/components-next/CardLayout.vue';
 import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
@@ -12,9 +12,8 @@ const props = defineProps({
   name: { type: String, default: '' },
   domain: { type: String, default: '' },
   contactsCount: { type: Number, default: 0 },
-  description: { type: String, default: '' },
   avatarUrl: { type: String, default: '' },
-  updatedAt: { type: [String, Number], default: null },
+  lastActivityAt: { type: [String, Number], default: null },
 });
 
 const emit = defineEmits(['showCompany']);
@@ -27,15 +26,21 @@ const displayName = computed(() => props.name || t('COMPANIES.UNNAMED'));
 
 const avatarSource = computed(() => props.avatarUrl || null);
 
-const formattedUpdatedAt = computed(() => {
-  if (!props.updatedAt) return '';
-  return formatDistanceToNow(new Date(props.updatedAt), { addSuffix: true });
+const hasContacts = computed(() => Number(props.contactsCount || 0) > 0);
+
+const contactsCountLabel = computed(() =>
+  t('COMPANIES.CONTACTS_COUNT', { n: Number(props.contactsCount || 0) })
+);
+
+const formattedLastActivityAt = computed(() => {
+  if (!props.lastActivityAt) return '';
+  return dynamicTime(props.lastActivityAt);
 });
 </script>
 
 <template>
   <CardLayout layout="row" @click="onClickViewDetails">
-    <div class="flex items-center justify-start flex-1 gap-4">
+    <div class="flex items-center justify-start flex-1 gap-4 cursor-pointer">
       <Avatar
         :username="displayName"
         :src="avatarSource"
@@ -51,42 +56,29 @@ const formattedUpdatedAt = computed(() => {
             {{ displayName }}
           </span>
           <span
-            v-if="domain && description"
+            v-if="hasContacts"
             class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
           >
-            <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
-            <span class="truncate">{{ domain }}</span>
+            <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
+            {{ contactsCountLabel }}
           </span>
         </div>
-        <div class="flex items-center justify-between">
-          <div class="flex flex-wrap items-center gap-x-3 gap-y-1 min-w-0">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center min-w-0">
             <span
-              v-if="domain && !description"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
+              v-if="domain"
+              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate cursor-text"
+              @click.stop
             >
               <Icon icon="i-lucide-globe" size="size-3.5 text-n-slate-11" />
               <span class="truncate">{{ domain }}</span>
             </span>
-            <span v-if="description" class="text-sm text-n-slate-11 truncate">
-              {{ description }}
-            </span>
-            <div
-              v-if="(description || domain) && contactsCount"
-              class="w-px h-3 bg-n-slate-6"
-            />
-            <span
-              v-if="contactsCount"
-              class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 truncate"
-            >
-              <Icon icon="i-lucide-contact" size="size-3.5 text-n-slate-11" />
-              {{ t('COMPANIES.CONTACTS_COUNT', { n: contactsCount }) }}
-            </span>
           </div>
           <span
-            v-if="updatedAt"
+            v-if="lastActivityAt"
             class="inline-flex items-center gap-1.5 text-sm text-n-slate-11 flex-shrink-0"
           >
-            {{ formattedUpdatedAt }}
+            {{ formattedLastActivityAt }}
           </span>
         </div>
       </div>
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue b/app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue
new file mode 100644
index 000000000..7736ccffd
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesDetailsLayout.vue
@@ -0,0 +1,115 @@
+<script setup>
+import { ref, useSlots } from 'vue';
+import { vOnClickOutside } from '@vueuse/components';
+
+import Breadcrumb from 'dashboard/components-next/breadcrumb/Breadcrumb.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+
+defineProps({
+  breadcrumbItems: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['back']);
+
+const slots = useSlots();
+const isSidebarOpen = ref(false);
+
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
+};
+
+const closeMobileSidebar = () => {
+  if (!isSidebarOpen.value) {
+    return;
+  }
+
+  isSidebarOpen.value = false;
+};
+</script>
+
+<template>
+  <section
+    class="flex w-full h-full overflow-hidden justify-evenly bg-n-surface-1"
+  >
+    <div
+      class="flex flex-col w-full h-full transition-all duration-300 ltr:2xl:ml-56 rtl:2xl:mr-56"
+    >
+      <header class="sticky top-0 z-10 px-6 3xl:px-0">
+        <div class="w-full mx-auto max-w-[40.625rem]">
+          <div
+            class="flex flex-col xs:flex-row items-start xs:items-center justify-between w-full py-7 gap-2"
+          >
+            <Breadcrumb :items="breadcrumbItems" @click="emit('back')" />
+          </div>
+        </div>
+      </header>
+
+      <main class="flex-1 px-6 overflow-y-auto 3xl:px-px">
+        <div class="w-full py-4 mx-auto max-w-[40.625rem]">
+          <slot />
+        </div>
+      </main>
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="hidden lg:block overflow-y-auto justify-end min-w-52 w-full py-6 max-w-md border-l border-n-weak bg-n-solid-2"
+    >
+      <slot name="sidebar" />
+    </div>
+
+    <div
+      v-if="slots.sidebar"
+      class="lg:hidden fixed top-0 ltr:right-0 rtl:left-0 h-full z-50 flex justify-end transition-all duration-200 ease-in-out"
+      :class="isSidebarOpen ? 'w-full' : 'w-16'"
+    >
+      <div
+        v-on-click-outside="[
+          closeMobileSidebar,
+          { ignore: ['#details-sidebar-content'] },
+        ]"
+        class="flex items-start p-1 w-fit h-fit relative order-1 xs:top-24 top-28 transition-all bg-n-solid-2 border border-n-weak duration-500 ease-in-out"
+        :class="[
+          isSidebarOpen
+            ? 'justify-end ltr:rounded-l-full rtl:rounded-r-full ltr:rounded-r-none rtl:rounded-l-none'
+            : 'justify-center rounded-full ltr:mr-6 rtl:ml-6',
+        ]"
+      >
+        <Button
+          ghost
+          slate
+          sm
+          class="!rounded-full rtl:rotate-180"
+          :class="{ 'bg-n-alpha-2': isSidebarOpen }"
+          :icon="
+            isSidebarOpen
+              ? 'i-lucide-panel-right-close'
+              : 'i-lucide-panel-right-open'
+          "
+          data-details-sidebar-toggle
+          @click="toggleSidebar"
+        />
+      </div>
+
+      <Transition
+        enter-active-class="transition-transform duration-200 ease-in-out"
+        leave-active-class="transition-transform duration-200 ease-in-out"
+        enter-from-class="ltr:translate-x-full rtl:-translate-x-full"
+        enter-to-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-from-class="ltr:translate-x-0 rtl:-translate-x-0"
+        leave-to-class="ltr:translate-x-full rtl:-translate-x-full"
+      >
+        <div
+          v-if="isSidebarOpen"
+          id="details-sidebar-content"
+          class="order-2 w-[85%] sm:w-[50%] bg-n-solid-2 ltr:border-l rtl:border-r border-n-weak overflow-y-auto py-6 shadow-lg"
+        >
+          <slot name="sidebar" />
+        </div>
+      </Transition>
+    </div>
+  </section>
+</template>
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue b/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue
index 0eeb42233..f85b613a3 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesHeader/CompanyHeader.vue
@@ -19,22 +19,15 @@ const emit = defineEmits(['search', 'update:sort']);
     <div
       class="flex items-start sm:items-center justify-between w-full py-6 gap-2 mx-auto max-w-5xl"
     >
-      <span class="text-heading-1 truncate text-n-slate-12">
+      <span class="text-xl font-medium truncate text-n-slate-12">
         {{ headerTitle }}
       </span>
-      <div class="flex items-center flex-row flex-shrink-0 gap-2">
-        <div class="flex items-center">
-          <CompanySortMenu
-            :active-sort="activeSort"
-            :active-ordering="activeOrdering"
-            @update:sort="emit('update:sort', $event)"
-          />
-        </div>
+      <div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
         <div v-if="showSearch" class="flex items-center gap-2 w-full">
           <Input
             :model-value="searchValue"
             type="search"
-            :placeholder="$t('CONTACTS_LAYOUT.HEADER.SEARCH_PLACEHOLDER')"
+            :placeholder="$t('COMPANIES.SEARCH_PLACEHOLDER')"
             :custom-input-class="[
               'h-8 [&:not(.focus)]:!border-transparent bg-n-alpha-2 dark:bg-n-solid-1 ltr:!pl-8 !py-1 rtl:!pr-8',
             ]"
@@ -49,6 +42,13 @@ const emit = defineEmits(['search', 'update:sort']);
             </template>
           </Input>
         </div>
+        <div class="flex items-center flex-shrink-0 gap-2">
+          <CompanySortMenu
+            :active-sort="activeSort"
+            :active-ordering="activeOrdering"
+            @update:sort="emit('update:sort', $event)"
+          />
+        </div>
       </div>
     </div>
   </header>
diff --git a/app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue b/app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue
index 8cf75d555..198a2f278 100644
--- a/app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue
+++ b/app/javascript/dashboard/components-next/Companies/CompaniesHeader/components/CompanySortMenu.vue
@@ -35,6 +35,10 @@ const sortMenus = [
     label: t('COMPANIES.SORT_BY.OPTIONS.CREATED_AT'),
     value: 'created_at',
   },
+  {
+    label: t('COMPANIES.SORT_BY.OPTIONS.LAST_ACTIVITY_AT'),
+    value: 'last_activity_at',
+  },
   {
     label: t('COMPANIES.SORT_BY.OPTIONS.CONTACTS_COUNT'),
     value: 'contacts_count',
@@ -101,6 +105,7 @@ const handleOrderChange = value => {
           :model-value="activeSort"
           :options="sortMenus"
           :label="activeSortLabel"
+          sub-menu-position="left"
           @update:model-value="handleSortChange"
         />
       </div>
@@ -112,6 +117,7 @@ const handleOrderChange = value => {
           :model-value="activeOrdering"
           :options="orderingMenus"
           :label="activeOrderingLabel"
+          sub-menu-position="left"
           @update:model-value="handleOrderChange"
         />
       </div>
diff --git a/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue
new file mode 100644
index 000000000..2ca1b33c4
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue
@@ -0,0 +1,354 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { debounce } from '@chatwoot/utils';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import ComboBox from 'dashboard/components-next/combobox/ComboBox.vue';
+import PaginationFooter from 'dashboard/components-next/pagination/PaginationFooter.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+  contacts: {
+    type: Array,
+    default: () => [],
+  },
+  meta: {
+    type: Object,
+    default: () => ({}),
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+  isBusy: {
+    type: Boolean,
+    default: false,
+  },
+  searchResults: {
+    type: Array,
+    default: () => [],
+  },
+  isSearching: {
+    type: Boolean,
+    default: false,
+  },
+  selectedContact: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits([
+  'cancelContactSelection',
+  'confirmContactSelection',
+  'removeContact',
+  'search',
+  'selectContact',
+  'update:currentPage',
+]);
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+
+const selectedContactId = ref(null);
+const searchQuery = ref('');
+
+const hasContacts = computed(() => props.contacts.length > 0);
+const currentPage = computed(() => Number(props.meta?.page || 1));
+const totalContacts = computed(() => Number(props.meta?.totalCount || 0));
+const linkedContactIds = computed(
+  () => new Set(props.contacts.map(contact => Number(contact.id)))
+);
+const showPaginationFooter = computed(
+  () => hasContacts.value && totalContacts.value > props.contacts.length
+);
+
+const openContact = contactId => {
+  router.push({
+    name: 'contacts_edit',
+    params: {
+      accountId: route.params.accountId,
+      contactId,
+    },
+  });
+};
+
+const contactMeta = contact =>
+  [contact.email, contact.phoneNumber].filter(Boolean).join(' • ');
+
+const contactName = contact =>
+  contact.name || t('COMPANIES.DETAIL.CONTACTS.UNNAMED_CONTACT');
+
+const contactOptions = computed(() =>
+  props.searchResults
+    .filter(
+      contact =>
+        !contact.linkedToCurrentCompany &&
+        !linkedContactIds.value.has(Number(contact.id))
+    )
+    .map(contact => ({
+      value: contact.id,
+      label: [contactName(contact), contact.email, contact.phoneNumber]
+        .filter(Boolean)
+        .join(' · '),
+    }))
+);
+
+const emptyState = computed(() => {
+  if (props.isSearching) {
+    return t('COMPANIES.DETAIL.CONTACTS.LOADING');
+  }
+
+  return searchQuery.value.trim()
+    ? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.EMPTY')
+    : t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.INITIAL');
+});
+
+const selectedContactName = computed(() =>
+  props.selectedContact ? contactName(props.selectedContact) : ''
+);
+
+const selectedContactMeta = computed(() =>
+  props.selectedContact ? contactMeta(props.selectedContact) : ''
+);
+
+const selectedContactCompanyName = computed(
+  () => props.selectedContact?.company?.name || ''
+);
+
+const summaryRows = computed(() => [
+  {
+    key: 'company',
+    label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.COMPANY_LABEL'),
+    avatarName: props.company.name || t('COMPANIES.UNNAMED'),
+    avatarSrc: props.company.avatarUrl,
+    primary: props.company.name || t('COMPANIES.UNNAMED'),
+    secondary: props.company.domain,
+  },
+  {
+    key: 'contact',
+    label: t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONTACT_LABEL'),
+    badge: selectedContactCompanyName.value
+      ? t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CURRENT_COMPANY', {
+          companyName: selectedContactCompanyName.value,
+        })
+      : '',
+    avatarName: selectedContactName.value,
+    avatarSrc: props.selectedContact?.thumbnail,
+    primary: selectedContactName.value,
+    secondary: selectedContactMeta.value,
+  },
+]);
+
+const debouncedSearch = debounce(query => {
+  emit('search', query);
+}, 300);
+
+const handleSearch = query => {
+  searchQuery.value = query;
+  debouncedSearch(query.trim());
+};
+
+const handleContactSelect = contactId => {
+  const selectedContact = props.searchResults.find(
+    contact => contact.id === Number(contactId)
+  );
+
+  selectedContactId.value = null;
+  if (selectedContact) {
+    emit('selectContact', selectedContact);
+  }
+};
+</script>
+
+<template>
+  <div class="flex flex-col gap-6 px-6 pb-6 pt-1">
+    <div v-if="!selectedContact" class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-base text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD') }}
+        </label>
+        <span class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.DESCRIPTION') }}
+        </span>
+      </div>
+      <ComboBox
+        use-api-results
+        :model-value="selectedContactId"
+        :options="contactOptions"
+        :disabled="isBusy"
+        :empty-state="emptyState"
+        :search-placeholder="
+          t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.SEARCH_PLACEHOLDER')
+        "
+        :placeholder="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.ADD')"
+        class="[&>div>button]:bg-n-alpha-black2"
+        @search="handleSearch"
+        @update:model-value="handleContactSelect"
+      />
+    </div>
+
+    <div v-else class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label class="text-base text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_TITLE') }}
+        </label>
+        <span class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CONFIRM_DESCRIPTION') }}
+        </span>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div
+          v-for="row in summaryRows"
+          :key="row.key"
+          class="flex flex-col gap-2"
+        >
+          <div class="flex items-center justify-between h-5 gap-2">
+            <label class="text-sm text-n-slate-12">
+              {{ row.label }}
+            </label>
+            <span
+              v-if="row.badge"
+              class="px-2 py-0.5 text-xs rounded-md text-n-amber-11 bg-n-alpha-2"
+            >
+              {{ row.badge }}
+            </span>
+          </div>
+
+          <div
+            class="border border-n-strong h-[60px] gap-2 flex items-center rounded-xl p-3"
+          >
+            <Avatar
+              :name="row.avatarName"
+              :src="row.avatarSrc"
+              :size="32"
+              rounded-full
+              hide-offline-status
+            />
+            <div class="flex flex-col w-full min-w-0 gap-1">
+              <span
+                class="text-sm leading-4 font-medium truncate text-n-slate-12"
+              >
+                {{ row.primary }}
+              </span>
+              <span
+                v-if="row.secondary"
+                class="text-sm leading-4 truncate text-n-slate-11"
+              >
+                {{ row.secondary }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex items-center justify-between gap-3 mt-2">
+        <Button
+          variant="faded"
+          color="slate"
+          :label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.CANCEL')"
+          class="w-full bg-n-alpha-2 text-n-blue-11 hover:bg-n-alpha-3"
+          :disabled="isBusy"
+          @click="emit('cancelContactSelection')"
+        />
+        <Button
+          :label="t('COMPANIES.DETAIL.CONTACTS.DIALOGS.ADD.ADD')"
+          class="w-full"
+          :is-loading="isBusy"
+          :disabled="isBusy"
+          @click="emit('confirmContactSelection')"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div class="flex items-center justify-between gap-3">
+        <h4 class="text-sm font-medium text-n-slate-12">
+          {{ t('COMPANIES.DETAIL.SIDEBAR.TABS.CONTACTS') }}
+        </h4>
+        <span v-if="hasContacts" class="text-xs tabular-nums text-n-slate-11">
+          {{ t('COMPANIES.CONTACTS_COUNT', { n: totalContacts }) }}
+        </span>
+      </div>
+
+      <div
+        v-if="isLoading && !hasContacts"
+        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+      >
+        {{ t('COMPANIES.DETAIL.CONTACTS.LOADING') }}
+      </div>
+
+      <div
+        v-else-if="!hasContacts"
+        class="py-8 text-sm text-center rounded-xl border border-dashed border-n-weak text-n-slate-11"
+      >
+        {{ t('COMPANIES.DETAIL.CONTACTS.EMPTY') }}
+      </div>
+
+      <div v-else class="flex flex-col divide-y divide-n-weak">
+        <div
+          v-for="contact in contacts"
+          :key="contact.id"
+          class="flex items-center gap-2 py-3 group/contact"
+        >
+          <button
+            type="button"
+            class="flex items-center flex-1 min-w-0 !p-0 gap-3 text-start rounded-lg transition-colors text-n-slate-12 hover:text-n-blue-11 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-n-brand focus-visible:ring-offset-2 focus-visible:ring-offset-n-background"
+            @click="openContact(contact.id)"
+          >
+            <Avatar
+              :name="contactName(contact)"
+              :src="contact.thumbnail"
+              :size="32"
+              rounded-full
+              hide-offline-status
+            />
+            <div class="min-w-0 space-y-0.5">
+              <span
+                class="text-sm font-medium leading-5 truncate text-n-slate-12"
+              >
+                {{ contactName(contact) }}
+              </span>
+              <p
+                v-if="contactMeta(contact)"
+                class="text-sm leading-5 truncate text-n-slate-11"
+              >
+                {{ contactMeta(contact) }}
+              </p>
+            </div>
+          </button>
+
+          <Button
+            icon="i-lucide-unlink"
+            color="slate"
+            variant="ghost"
+            size="xs"
+            class="shrink-0 opacity-70 transition-opacity sm:opacity-0 sm:group-hover/contact:opacity-100 sm:focus-visible:opacity-100"
+            :disabled="isBusy"
+            :title="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
+            :aria-label="t('COMPANIES.DETAIL.CONTACTS.ACTIONS.REMOVE')"
+            @click.stop="emit('removeContact', contact.id)"
+          />
+        </div>
+      </div>
+
+      <PaginationFooter
+        v-if="showPaginationFooter"
+        current-page-info="CONTACTS_LAYOUT.PAGINATION_FOOTER.SHOWING"
+        :current-page="currentPage"
+        :total-items="totalContacts"
+        :items-per-page="15"
+        class="px-0 before:hidden"
+        @update:current-page="emit('update:currentPage', $event)"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue
new file mode 100644
index 000000000..3328e801e
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue
@@ -0,0 +1,94 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+import ListAttribute from 'dashboard/components-next/CustomAttributes/ListAttribute.vue';
+import CheckboxAttribute from 'dashboard/components-next/CustomAttributes/CheckboxAttribute.vue';
+import DateAttribute from 'dashboard/components-next/CustomAttributes/DateAttribute.vue';
+import OtherAttribute from 'dashboard/components-next/CustomAttributes/OtherAttribute.vue';
+
+const props = defineProps({
+  companyId: {
+    type: Number,
+    required: true,
+  },
+  attribute: {
+    type: Object,
+    required: true,
+  },
+  isEditingView: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const companiesStore = useCompaniesStore();
+const { t } = useI18n();
+
+const handleDelete = async () => {
+  try {
+    await companiesStore.deleteCustomAttributes({
+      id: props.companyId,
+      customAttributes: [props.attribute.attributeKey],
+    });
+    useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.DELETE_ERROR')
+    );
+  }
+};
+
+const handleUpdate = async value => {
+  try {
+    await companiesStore.update({
+      id: props.companyId,
+      customAttributes: {
+        [props.attribute.attributeKey]: value,
+      },
+    });
+    useAlert(t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_SUCCESS'));
+  } catch (error) {
+    useAlert(
+      error?.response?.message ||
+        t('COMPANIES.DETAIL.ATTRIBUTES.MESSAGES.UPDATE_ERROR')
+    );
+  }
+};
+
+const componentMap = {
+  list: ListAttribute,
+  checkbox: CheckboxAttribute,
+  date: DateAttribute,
+  default: OtherAttribute,
+};
+
+const CurrentAttributeComponent = computed(
+  () =>
+    componentMap[props.attribute.attributeDisplayType] || componentMap.default
+);
+</script>
+
+<template>
+  <div
+    class="grid grid-cols-[140px,1fr] group/attribute items-center w-full gap-2"
+    :class="isEditingView ? 'min-h-10' : 'min-h-11'"
+  >
+    <div class="flex items-center justify-between truncate">
+      <span class="text-sm font-medium truncate text-n-slate-12">
+        {{ attribute.attributeDisplayName }}
+      </span>
+    </div>
+
+    <component
+      :is="CurrentAttributeComponent"
+      :attribute="attribute"
+      :is-editing-view="isEditingView"
+      @update="handleUpdate"
+      @delete="handleDelete"
+    />
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributes.vue b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributes.vue
new file mode 100644
index 000000000..9ed72169c
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributes.vue
@@ -0,0 +1,142 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useMapGetter, useStore } from 'dashboard/composables/store';
+
+import CompanyCustomAttributeItem from 'dashboard/components-next/Companies/CompanyDetail/CompanyCustomAttributeItem.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const searchQuery = ref('');
+const companyAttributes = useMapGetter('attributes/getCompanyAttributes');
+
+const customAttributes = computed(() => props.company?.customAttributes || {});
+const hasCompanyAttributes = computed(
+  () => companyAttributes.value?.length > 0
+);
+
+const processCompanyAttributes = (
+  attributes,
+  attributeValues,
+  filterCondition
+) => {
+  if (!attributes.length) {
+    return [];
+  }
+
+  return attributes.reduce((result, attribute) => {
+    const { attributeKey } = attribute;
+
+    if (filterCondition(attributeKey, attributeValues)) {
+      result.push({
+        ...attribute,
+        value: attributeValues[attributeKey] ?? '',
+      });
+    }
+
+    return result;
+  }, []);
+};
+
+const usedAttributes = computed(() =>
+  processCompanyAttributes(
+    companyAttributes.value,
+    customAttributes.value,
+    (key, values) => key in values
+  )
+);
+
+const unusedAttributes = computed(() =>
+  processCompanyAttributes(
+    companyAttributes.value,
+    customAttributes.value,
+    (key, values) => !(key in values)
+  )
+);
+
+const filteredUnusedAttributes = computed(() =>
+  unusedAttributes.value.filter(attribute =>
+    attribute.attributeDisplayName
+      .toLowerCase()
+      .includes(searchQuery.value.toLowerCase())
+  )
+);
+
+const unusedAttributesCount = computed(() => unusedAttributes.value.length);
+const hasNoUnusedAttributes = computed(() => unusedAttributesCount.value === 0);
+const hasNoUsedAttributes = computed(() => usedAttributes.value.length === 0);
+
+onMounted(() => {
+  store.dispatch('attributes/get');
+});
+</script>
+
+<template>
+  <div v-if="hasCompanyAttributes" class="flex flex-col gap-6 px-6 py-6">
+    <div v-if="!hasNoUsedAttributes" class="flex flex-col gap-2">
+      <CompanyCustomAttributeItem
+        v-for="attribute in usedAttributes"
+        :key="`${company.id}-${attribute.id}`"
+        is-editing-view
+        :company-id="company.id"
+        :attribute="attribute"
+      />
+    </div>
+
+    <div v-if="!hasNoUnusedAttributes" class="flex items-center gap-3">
+      <div class="flex-1 h-px bg-n-slate-5" />
+      <span class="text-sm font-medium text-n-slate-10">
+        {{
+          t('COMPANIES.DETAIL.ATTRIBUTES.UNUSED_ATTRIBUTES', {
+            count: unusedAttributesCount,
+          })
+        }}
+      </span>
+      <div class="flex-1 h-px bg-n-slate-5" />
+    </div>
+
+    <div class="flex flex-col gap-3">
+      <div v-if="!hasNoUnusedAttributes" class="relative">
+        <span
+          class="absolute i-lucide-search size-3.5 top-2 ltr:left-3 rtl:right-3"
+        />
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="t('COMPANIES.DETAIL.ATTRIBUTES.SEARCH_PLACEHOLDER')"
+          class="w-full h-8 py-2 pl-10 pr-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
+        />
+      </div>
+
+      <div
+        v-if="filteredUnusedAttributes.length === 0 && !hasNoUnusedAttributes"
+        class="flex items-center justify-start h-11"
+      >
+        <p class="text-sm text-n-slate-11">
+          {{ t('COMPANIES.DETAIL.ATTRIBUTES.NO_ATTRIBUTES') }}
+        </p>
+      </div>
+
+      <div v-if="!hasNoUnusedAttributes" class="flex flex-col gap-2">
+        <CompanyCustomAttributeItem
+          v-for="attribute in filteredUnusedAttributes"
+          :key="`${company.id}-${attribute.id}`"
+          :company-id="company.id"
+          :attribute="attribute"
+        />
+      </div>
+    </div>
+  </div>
+
+  <p v-else class="px-6 py-10 text-sm leading-6 text-center text-n-slate-11">
+    {{ t('COMPANIES.DETAIL.ATTRIBUTES.EMPTY_STATE') }}
+  </p>
+</template>
diff --git a/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue
new file mode 100644
index 000000000..1ffbf0c18
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue
@@ -0,0 +1,203 @@
+<script setup>
+import { computed, reactive, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useAlert } from 'dashboard/composables';
+import { dynamicTime } from 'shared/helpers/timeHelper';
+
+import Avatar from 'dashboard/components-next/avatar/Avatar.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
+import TextArea from 'dashboard/components-next/textarea/TextArea.vue';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+const props = defineProps({
+  company: { type: Object, default: () => ({}) },
+  isLoading: { type: Boolean, default: false },
+});
+
+const { t } = useI18n();
+const companiesStore = useCompaniesStore();
+
+const form = reactive({ name: '', domain: '', description: '' });
+const avatarPreviewUrl = ref('');
+const isUploadingAvatar = ref(false);
+
+const uiFlags = computed(() => companiesStore.getUIFlags);
+const isUpdating = computed(() => uiFlags.value.updatingItem);
+const isAvatarBusy = computed(
+  () =>
+    isUploadingAvatar.value || uiFlags.value.deletingAvatar || isUpdating.value
+);
+
+const displayName = computed(
+  () => props.company?.name || t('COMPANIES.UNNAMED')
+);
+const avatarSource = computed(
+  () => avatarPreviewUrl.value || props.company?.avatarUrl || ''
+);
+const isFormInvalid = computed(() => !form.name.trim());
+const hasChanges = computed(
+  () =>
+    form.name.trim() !== (props.company?.name || '').trim() ||
+    form.domain.trim() !== (props.company?.domain || '').trim() ||
+    form.description.trim() !== (props.company?.description || '').trim()
+);
+
+const summary = computed(() => {
+  const { createdAt, lastActivityAt } = props.company || {};
+  return [
+    createdAt &&
+      t('COMPANIES.DETAIL.PROFILE.CREATED_AT', {
+        date: dynamicTime(createdAt),
+      }),
+    lastActivityAt &&
+      t('COMPANIES.DETAIL.PROFILE.LAST_ACTIVE', {
+        date: dynamicTime(lastActivityAt),
+      }),
+  ]
+    .filter(Boolean)
+    .join(' • ');
+});
+
+const syncForm = company => {
+  form.name = company?.name || '';
+  form.domain = company?.domain || '';
+  form.description = company?.description || '';
+};
+
+const isCurrentCompany = companyId => Number(props.company?.id) === companyId;
+
+watch(
+  () => [
+    props.company?.id,
+    props.company?.name,
+    props.company?.domain,
+    props.company?.description,
+    props.company?.avatarUrl,
+  ],
+  () => {
+    avatarPreviewUrl.value = '';
+    syncForm(props.company);
+  },
+  { immediate: true }
+);
+
+const handleAvatarUpload = async ({ file, url }) => {
+  avatarPreviewUrl.value = url;
+  isUploadingAvatar.value = true;
+  try {
+    await companiesStore.update({ id: props.company.id, avatar: file });
+    useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_SUCCESS'));
+  } catch {
+    avatarPreviewUrl.value = '';
+    useAlert(t('COMPANIES.DETAIL.AVATAR.UPLOAD_ERROR'));
+  } finally {
+    isUploadingAvatar.value = false;
+  }
+};
+
+const handleAvatarDelete = async () => {
+  try {
+    await companiesStore.deleteCompanyAvatar(props.company.id);
+    avatarPreviewUrl.value = '';
+    useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_SUCCESS'));
+  } catch {
+    useAlert(t('COMPANIES.DETAIL.AVATAR.DELETE_ERROR'));
+  }
+};
+
+const handleUpdateCompany = async () => {
+  const companyId = Number(props.company.id);
+
+  try {
+    const updated = await companiesStore.update({
+      id: companyId,
+      name: form.name.trim(),
+      domain: form.domain.trim() || null,
+      description: form.description.trim() || null,
+    });
+    if (!isCurrentCompany(companyId)) return;
+
+    syncForm(updated);
+    useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_SUCCESS'));
+  } catch {
+    if (!isCurrentCompany(companyId)) return;
+
+    syncForm(props.company);
+    useAlert(t('COMPANIES.DETAIL.PROFILE.MESSAGES.UPDATE_ERROR'));
+  }
+};
+</script>
+
+<template>
+  <div v-if="isLoading && !company?.id" class="text-sm text-n-slate-11">
+    {{ t('COMPANIES.DETAIL.LOADING') }}
+  </div>
+
+  <div v-else-if="company?.id" class="flex flex-col items-start gap-8 pb-6">
+    <div class="flex flex-col items-start gap-3">
+      <Avatar
+        :name="displayName"
+        :src="avatarSource"
+        :size="72"
+        :allow-upload="!isAvatarBusy"
+        rounded-full
+        hide-offline-status
+        @upload="handleAvatarUpload"
+        @delete="handleAvatarDelete"
+      />
+
+      <div class="flex flex-col gap-1">
+        <h3 class="text-base font-medium text-n-slate-12">
+          {{ displayName }}
+        </h3>
+        <span class="text-sm leading-6 text-n-slate-11">{{ summary }}</span>
+        <p
+          v-if="isUploadingAvatar || uiFlags.deletingAvatar"
+          class="text-sm text-n-slate-11"
+        >
+          {{ t('COMPANIES.DETAIL.AVATAR.UPDATING') }}
+        </p>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-start w-full gap-6">
+      <span class="py-1 text-sm font-medium text-n-slate-12">
+        {{ t('COMPANIES.DETAIL.PROFILE.TITLE') }}
+      </span>
+
+      <div class="grid w-full gap-4 sm:grid-cols-2">
+        <Input
+          v-model="form.name"
+          :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.NAME')"
+          :disabled="isUpdating"
+          custom-input-class="h-8 !pt-1 !pb-1"
+        />
+        <Input
+          v-model="form.domain"
+          :placeholder="t('COMPANIES.DETAIL.PROFILE.FIELDS.DOMAIN')"
+          :disabled="isUpdating"
+          custom-input-class="h-8 !pt-1 !pb-1"
+        />
+      </div>
+
+      <TextArea
+        v-model="form.description"
+        :placeholder="t('COMPANIES.DETAIL.PROFILE.DESCRIPTION_PLACEHOLDER')"
+        :disabled="isUpdating"
+        :max-length="280"
+        class="w-full"
+        show-character-count
+        auto-height
+      />
+
+      <Button
+        :label="t('COMPANIES.DETAIL.PROFILE.ACTIONS.SAVE')"
+        size="sm"
+        :is-loading="isUpdating"
+        :disabled="isUpdating || isFormInvalid || !hasChanges"
+        @click="handleUpdateCompany"
+      />
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue b/app/javascript/dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue
new file mode 100644
index 000000000..a689fb079
--- /dev/null
+++ b/app/javascript/dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue
@@ -0,0 +1,45 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
+
+const props = defineProps({
+  company: {
+    type: Object,
+    default: () => ({}),
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['confirm']);
+
+const { t } = useI18n();
+
+const dialogRef = ref(null);
+
+const description = computed(() =>
+  props.company?.name
+    ? t('COMPANIES.DETAIL.DELETE.DESCRIPTION_WITH_NAME', {
+        companyName: props.company.name,
+      })
+    : t('COMPANIES.DETAIL.DELETE.DESCRIPTION')
+);
+
+defineExpose({ dialogRef });
+</script>
+
+<template>
+  <Dialog
+    ref="dialogRef"
+    type="alert"
+    :title="t('COMPANIES.DETAIL.DELETE.TITLE')"
+    :description="description"
+    :confirm-button-label="t('COMPANIES.DETAIL.DELETE.CONFIRM')"
+    :is-loading="isLoading"
+    @confirm="emit('confirm')"
+  />
+</template>
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
index ba8090e02..d3342e18a 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/DateAttribute.vue
@@ -134,7 +134,7 @@ const handleInputUpdate = async () => {
         :message-type="hasError ? 'error' : 'info'"
         autofocus
         custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"
diff --git a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
index 913e3e381..5dfe86755 100644
--- a/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
+++ b/app/javascript/dashboard/components-next/CustomAttributes/OtherAttribute.vue
@@ -191,7 +191,7 @@ const handleInputUpdate = async () => {
         :message="attributeErrorMessage"
         :message-type="hasError ? 'error' : 'info'"
         custom-input-class="h-8 ltr:rounded-r-none rtl:rounded-l-none"
-        @keyup.enter="handleInputUpdate"
+        @enter="handleInputUpdate"
       />
       <Button
         icon="i-lucide-check"
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index cbb3b2099..b079ea17b 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -457,7 +457,7 @@ const menuItems = computed(() => {
             {},
             { page: 1, search: undefined }
           ),
-          activeOn: ['companies_dashboard_index'],
+          activeOn: ['companies_dashboard_index', 'companies_dashboard_show'],
         },
       ],
     },
diff --git a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
index e83950b14..1815e0c72 100644
--- a/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
+++ b/app/javascript/dashboard/i18n/locale/en/attributesMgmt.json
@@ -3,14 +3,15 @@
     "HEADER": "Custom Attributes",
     "HEADER_BTN_TXT": "Add Custom Attribute",
     "LOADING": "Fetching custom attributes",
-    "DESCRIPTION": "A custom attribute tracks additional details about your contacts or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
+    "DESCRIPTION": "A custom attribute tracks additional details about your contacts, companies, or conversations—such as the subscription plan or the date of their first purchase. You can add different types of custom attributes, such as text, lists, or numbers, to capture the specific information you need.",
     "LEARN_MORE": "Learn more about custom attributes",
     "COUNT": "{n} attribute | {n} attributes",
     "SEARCH_PLACEHOLDER": "Search attributes...",
     "NO_RESULTS": "No attributes found matching your search",
     "ATTRIBUTE_MODELS": {
       "CONVERSATION": "Conversation",
-      "CONTACT": "Contact"
+      "CONTACT": "Contact",
+      "COMPANY": "Company"
     },
     "ATTRIBUTE_TYPES": {
       "TEXT": "Text",
@@ -108,7 +109,8 @@
     "TABS": {
       "HEADER": "Custom Attributes",
       "CONVERSATION": "Conversation",
-      "CONTACT": "Contact"
+      "CONTACT": "Contact",
+      "COMPANY": "Company"
     },
     "LIST": {
       "TABLE_HEADER": {
diff --git a/app/javascript/dashboard/i18n/locale/en/companies.json b/app/javascript/dashboard/i18n/locale/en/companies.json
index 0d64a4abd..370af697e 100644
--- a/app/javascript/dashboard/i18n/locale/en/companies.json
+++ b/app/javascript/dashboard/i18n/locale/en/companies.json
@@ -7,6 +7,7 @@
         "NAME": "Name",
         "DOMAIN": "Domain",
         "CREATED_AT": "Created at",
+        "LAST_ACTIVITY_AT": "Last activity",
         "CONTACTS_COUNT": "Contacts count"
       }
     },
@@ -21,6 +22,100 @@
     "LOADING": "Loading companies...",
     "UNNAMED": "Unnamed Company",
     "CONTACTS_COUNT": "{n} contact | {n} contacts",
+    "DETAIL": {
+      "LOADING": "Loading company details...",
+      "EMPTY_STATE": {
+        "TITLE": "Company not found",
+        "SUBTITLE": "This company may have been removed or is no longer available in this account."
+      },
+      "SIDEBAR": {
+        "TABS": {
+          "ATTRIBUTES": "Attributes",
+          "CONTACTS": "Contacts"
+        }
+      },
+      "ATTRIBUTES": {
+        "SEARCH_PLACEHOLDER": "Search attributes...",
+        "EMPTY_STATE": "There are no company custom attributes configured yet.",
+        "NO_ATTRIBUTES": "No matching attributes found.",
+        "UNUSED_ATTRIBUTES": "{count} unused attribute | {count} unused attributes",
+        "MESSAGES": {
+          "UPDATE_SUCCESS": "Company attribute updated.",
+          "UPDATE_ERROR": "Could not update company attribute.",
+          "DELETE_SUCCESS": "Company attribute removed.",
+          "DELETE_ERROR": "Could not remove company attribute."
+        }
+      },
+      "CONTACTS": {
+        "LOADING": "Loading contacts...",
+        "EMPTY": "No contacts are linked to this company yet.",
+        "UNNAMED_CONTACT": "Unnamed contact",
+        "ACTIONS": {
+          "ADD": "Add contact",
+          "REMOVE": "Remove contact"
+        },
+        "DIALOGS": {
+          "ADD": {
+            "DESCRIPTION": "Search for an existing contact and link it to this company.",
+            "SEARCH_PLACEHOLDER": "Search contacts...",
+            "INITIAL": "Start typing to search contacts.",
+            "EMPTY": "No contacts found.",
+            "CONFIRM_TITLE": "Link contact",
+            "CONFIRM_DESCRIPTION": "Confirm the company and contact before linking them.",
+            "COMPANY_LABEL": "Company",
+            "CONTACT_LABEL": "Contact",
+            "CURRENT_COMPANY": "Currently linked to {companyName}",
+            "ADD": "Link contact",
+            "CANCEL": "Cancel"
+          }
+        },
+        "MESSAGES": {
+          "ADD_SUCCESS": "Contact linked to company.",
+          "ADD_ERROR": "Could not link contact to company.",
+          "REASSIGN_SUCCESS": "Contact reassigned to company.",
+          "REASSIGN_ERROR": "Could not reassign contact to company.",
+          "REMOVE_SUCCESS": "Contact removed from company.",
+          "REMOVE_ERROR": "Could not remove contact from company."
+        }
+      },
+      "AVATAR": {
+        "UPDATING": "Updating company avatar...",
+        "UPLOAD_SUCCESS": "Company avatar updated.",
+        "UPLOAD_ERROR": "Could not update the company avatar.",
+        "DELETE_SUCCESS": "Company avatar removed.",
+        "DELETE_ERROR": "Could not remove the company avatar."
+      },
+      "PROFILE": {
+        "TITLE": "Edit company details",
+        "CREATED_AT": "Created {date}",
+        "LAST_ACTIVE": "Last active {date}",
+        "DESCRIPTION_PLACEHOLDER": "Add a short description for this company",
+        "ACTIONS": {
+          "SAVE": "Update company"
+        },
+        "MESSAGES": {
+          "UPDATE_SUCCESS": "Company updated.",
+          "UPDATE_ERROR": "Could not update the company."
+        },
+        "FIELDS": {
+          "NAME": "Name",
+          "DOMAIN": "Domain"
+        }
+      },
+      "DELETE": {
+        "SECTION_TITLE": "Danger zone",
+        "SECTION_DESCRIPTION": "Delete this company and unlink its contacts. The contacts will remain in the account.",
+        "BUTTON": "Delete company",
+        "TITLE": "Delete company?",
+        "DESCRIPTION": "This will remove the company and unlink all associated contacts. Contacts themselves will be preserved.",
+        "DESCRIPTION_WITH_NAME": "This will remove {companyName} and unlink all associated contacts. Contacts themselves will be preserved.",
+        "CONFIRM": "Delete company",
+        "MESSAGES": {
+          "SUCCESS": "Company deleted.",
+          "ERROR": "Could not delete the company."
+        }
+      }
+    },
     "EMPTY_STATE": {
       "TITLE": "No companies found"
     }
diff --git a/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue b/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
index 28071421c..6c437fa1f 100644
--- a/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
+++ b/app/javascript/dashboard/routes/dashboard/companies/pages/CompaniesIndex.vue
@@ -111,6 +111,16 @@ const onPageChange = page => {
   fetchCompanies(page, searchValue.value, sortParam.value);
 };
 
+const showCompany = companyId => {
+  router.push({
+    name: 'companies_dashboard_show',
+    params: {
+      accountId: route.params.accountId,
+      companyId,
+    },
+  });
+};
+
 const handleSort = async ({ sort, order }) => {
   Object.assign(sortState, { activeSort: sort, activeOrdering: order });
 
@@ -123,6 +133,11 @@ const handleSort = async ({ sort, order }) => {
 
 onMounted(() => {
   searchValue.value = searchQuery.value;
+
+  if (!route.query.sort && sortParam.value !== DEFAULT_SORT_FIELD) {
+    updateURLParams(pageNumber.value, searchQuery.value, sortParam.value);
+  }
+
   fetchCompanies();
 });
 </script>
@@ -162,9 +177,9 @@ onMounted(() => {
         :name="company.name"
         :domain="company.domain"
         :contacts-count="company.contactsCount || 0"
-        :description="company.description"
         :avatar-url="company.avatarUrl"
-        :updated-at="company.updatedAt"
+        :last-activity-at="company.lastActivityAt"
+        @show-company="showCompany"
       />
     </div>
   </CompaniesListLayout>
diff --git a/app/javascript/dashboard/routes/dashboard/companies/pages/CompanyDetailView.vue b/app/javascript/dashboard/routes/dashboard/companies/pages/CompanyDetailView.vue
new file mode 100644
index 000000000..313df49d3
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/companies/pages/CompanyDetailView.vue
@@ -0,0 +1,236 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useAlert } from 'dashboard/composables';
+
+import Policy from 'dashboard/components/policy.vue';
+import Button from 'dashboard/components-next/button/Button.vue';
+import CompaniesDetailsLayout from 'dashboard/components-next/Companies/CompaniesDetailsLayout.vue';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import CompanyContactsSidebar from 'dashboard/components-next/Companies/CompanyDetail/CompanyContactsSidebar.vue';
+import CompanyProfileCard from 'dashboard/components-next/Companies/CompanyDetail/CompanyProfileCard.vue';
+import ConfirmCompanyDeleteDialog from 'dashboard/components-next/Companies/CompanyDetail/ConfirmCompanyDeleteDialog.vue';
+import { useCompaniesStore } from 'dashboard/stores/companies';
+
+const route = useRoute();
+const router = useRouter();
+const companiesStore = useCompaniesStore();
+const { t } = useI18n();
+
+const confirmDeleteDialogRef = ref(null);
+const selectedCandidate = ref(null);
+
+const companyId = computed(() => Number(route.params.companyId));
+const company = computed(() => companiesStore.getRecord(companyId.value));
+const companyContacts = computed(() => companiesStore.companyContacts);
+const companyContactsMeta = computed(() => companiesStore.companyContactsMeta);
+const contactSearchResults = computed(
+  () => companiesStore.contactSearchResults
+);
+const uiFlags = computed(() => companiesStore.getUIFlags);
+
+const isFetchingCompany = computed(() => uiFlags.value.fetchingItem);
+const isFetchingContacts = computed(() => uiFlags.value.fetchingContacts);
+const isSearchingContacts = computed(() => uiFlags.value.searchingContacts);
+const isManagingContacts = computed(
+  () => uiFlags.value.creatingContact || uiFlags.value.removingContact
+);
+const isDeletingCompany = computed(() => uiFlags.value.deletingItem);
+const hasCompany = computed(() => Boolean(company.value?.id));
+const showInitialLoadingState = computed(
+  () =>
+    !hasCompany.value && (isFetchingCompany.value || isFetchingContacts.value)
+);
+
+const breadcrumbItems = computed(() => [
+  { label: t('COMPANIES.HEADER') },
+  ...(hasCompany.value
+    ? [{ label: company.value?.name || t('COMPANIES.UNNAMED') }]
+    : []),
+]);
+
+const goToCompaniesIndex = () => {
+  router.push({
+    name: 'companies_dashboard_index',
+    params: { accountId: route.params.accountId },
+    query: { page: '1' },
+  });
+};
+
+const goToCompaniesList = () => {
+  if (window.history.state?.back) {
+    router.back();
+    return;
+  }
+  goToCompaniesIndex();
+};
+
+const loadCompanyContactsPage = async page => {
+  if (!companyId.value) return;
+  await companiesStore.getCompanyContacts(companyId.value, page);
+};
+
+const openDeleteCompanyDialog = () => {
+  confirmDeleteDialogRef.value?.dialogRef.open();
+};
+
+const clearSelectedCandidate = () => {
+  selectedCandidate.value = null;
+};
+
+const handleContactSearch = async query => {
+  await companiesStore.searchCompanyContactCandidates({
+    companyId: companyId.value,
+    search: query,
+  });
+};
+
+const handleConfirmContactSelection = async () => {
+  const candidate = selectedCandidate.value;
+  if (!candidate) return;
+
+  const isReassigning =
+    candidate.company?.id && candidate.company.id !== companyId.value;
+  const message = isReassigning
+    ? t('COMPANIES.DETAIL.CONTACTS.MESSAGES.REASSIGN_SUCCESS')
+    : t('COMPANIES.DETAIL.CONTACTS.MESSAGES.ADD_SUCCESS');
+
+  try {
+    await companiesStore.attachContactToCompany(companyId.value, candidate.id);
+    useAlert(message);
+    clearSelectedCandidate();
+  } catch {
+    const errorMessage = isReassigning
+      ? t('COMPANIES.DETAIL.CONTACTS.MESSAGES.REASSIGN_ERROR')
+      : t('COMPANIES.DETAIL.CONTACTS.MESSAGES.ADD_ERROR');
+    useAlert(errorMessage);
+  }
+};
+
+const handleRemoveContact = async contactId => {
+  const currentPage = Number(companyContactsMeta.value.page || 1);
+  const nextPage =
+    currentPage > 1 && companyContacts.value.length === 1
+      ? currentPage - 1
+      : currentPage;
+
+  try {
+    await companiesStore.removeContactFromCompany(
+      companyId.value,
+      contactId,
+      nextPage
+    );
+    useAlert(t('COMPANIES.DETAIL.CONTACTS.MESSAGES.REMOVE_SUCCESS'));
+  } catch {
+    useAlert(t('COMPANIES.DETAIL.CONTACTS.MESSAGES.REMOVE_ERROR'));
+  }
+};
+
+const handleDeleteCompany = async () => {
+  try {
+    await companiesStore.delete(companyId.value);
+    useAlert(t('COMPANIES.DETAIL.DELETE.MESSAGES.SUCCESS'));
+    confirmDeleteDialogRef.value?.dialogRef.close();
+    goToCompaniesIndex();
+  } catch {
+    useAlert(t('COMPANIES.DETAIL.DELETE.MESSAGES.ERROR'));
+  }
+};
+
+watch(
+  companyId,
+  async id => {
+    companiesStore.resetCompanyDetailState();
+    clearSelectedCandidate();
+    if (!id) return;
+    await Promise.allSettled([
+      companiesStore.show(id),
+      companiesStore.getCompanyContacts(id),
+    ]);
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  companiesStore.resetCompanyDetailState();
+});
+</script>
+
+<template>
+  <CompaniesDetailsLayout
+    :breadcrumb-items="breadcrumbItems"
+    @back="goToCompaniesList"
+  >
+    <div
+      v-if="showInitialLoadingState"
+      class="flex flex-col items-center justify-center gap-3 py-24 text-n-slate-11"
+    >
+      <Spinner />
+      <span class="text-sm">{{ t('COMPANIES.DETAIL.LOADING') }}</span>
+    </div>
+
+    <div
+      v-else-if="!hasCompany"
+      class="flex flex-col items-center justify-center gap-3 px-6 py-24 text-center rounded-2xl border border-n-weak bg-n-solid-2"
+    >
+      <span class="text-lg font-medium text-n-slate-12">
+        {{ t('COMPANIES.DETAIL.EMPTY_STATE.TITLE') }}
+      </span>
+      <p class="max-w-md text-sm text-n-slate-11">
+        {{ t('COMPANIES.DETAIL.EMPTY_STATE.SUBTITLE') }}
+      </p>
+    </div>
+
+    <div v-else class="flex flex-col gap-6">
+      <CompanyProfileCard :company="company" :is-loading="isFetchingCompany" />
+
+      <Policy :permissions="['administrator']">
+        <section
+          class="flex flex-col items-start w-full gap-4 pt-6 border-t border-n-strong"
+        >
+          <div class="flex flex-col gap-2">
+            <h6 class="text-base font-medium text-n-slate-12">
+              {{ t('COMPANIES.DETAIL.DELETE.SECTION_TITLE') }}
+            </h6>
+            <span class="text-sm text-n-slate-11">
+              {{ t('COMPANIES.DETAIL.DELETE.SECTION_DESCRIPTION') }}
+            </span>
+          </div>
+          <Button
+            :label="t('COMPANIES.DETAIL.DELETE.BUTTON')"
+            color="ruby"
+            :disabled="isDeletingCompany"
+            @click="openDeleteCompanyDialog"
+          />
+        </section>
+      </Policy>
+    </div>
+
+    <template v-if="hasCompany" #sidebar>
+      <CompanyContactsSidebar
+        :company="company"
+        :contacts="companyContacts"
+        :meta="companyContactsMeta"
+        :is-loading="isFetchingContacts"
+        :is-busy="isManagingContacts"
+        :search-results="contactSearchResults"
+        :is-searching="isSearchingContacts"
+        :selected-contact="selectedCandidate"
+        @cancel-contact-selection="clearSelectedCandidate"
+        @confirm-contact-selection="handleConfirmContactSelection"
+        @search="handleContactSearch"
+        @select-contact="contact => (selectedCandidate = contact)"
+        @remove-contact="handleRemoveContact"
+        @update:current-page="loadCompanyContactsPage"
+      />
+    </template>
+
+    <ConfirmCompanyDeleteDialog
+      ref="confirmDeleteDialogRef"
+      :company="company"
+      :is-loading="isDeletingCompany"
+      @confirm="handleDeleteCompany"
+    />
+  </CompaniesDetailsLayout>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/companies/routes.js b/app/javascript/dashboard/routes/dashboard/companies/routes.js
index 69cbba762..42ed6bd18 100644
--- a/app/javascript/dashboard/routes/dashboard/companies/routes.js
+++ b/app/javascript/dashboard/routes/dashboard/companies/routes.js
@@ -1,5 +1,6 @@
 import { frontendURL } from '../../../helper/URLHelper';
 import CompaniesIndex from './pages/CompaniesIndex.vue';
+import CompanyDetailView from './pages/CompanyDetailView.vue';
 import { FEATURE_FLAGS } from '../../../featureFlags';
 import { INSTALLATION_TYPES } from 'dashboard/constants/installationTypes';
 
@@ -23,4 +24,17 @@ export const routes = [
       },
     ],
   },
+  {
+    path: frontendURL('accounts/:accountId/companies/:companyId'),
+    component: CompanyDetailView,
+    meta: commonMeta,
+    children: [
+      {
+        path: '',
+        name: 'companies_dashboard_show',
+        component: CompanyDetailView,
+        meta: commonMeta,
+      },
+    ],
+  },
 ];
diff --git a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
index 2aa2f28cd..61582fd32 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/attributes/Index.vue
@@ -32,6 +32,7 @@ const uiFlags = computed(() => getters['attributes/getUIFlags'].value);
 const [showEditPopup, toggleEditPopup] = useToggle(false);
 const [showDeletePopup, toggleDeletePopup] = useToggle(false);
 const selectedAttribute = ref({});
+const attributeModels = ['conversation_attribute', 'contact_attribute'];
 
 const openAddPopup = () => {
   toggleAddPopup(true);
@@ -69,8 +70,8 @@ onMounted(() => {
   store.dispatch('attributes/get');
 });
 
-const attributeModel = computed(() =>
-  selectedTabIndex.value ? 'contact_attribute' : 'conversation_attribute'
+const attributeModel = computed(
+  () => attributeModels[selectedTabIndex.value] || 'conversation_attribute'
 );
 
 const attributes = computed(() =>
diff --git a/app/javascript/dashboard/store/modules/attributes.js b/app/javascript/dashboard/store/modules/attributes.js
index c7cb771a5..1c7826cea 100644
--- a/app/javascript/dashboard/store/modules/attributes.js
+++ b/app/javascript/dashboard/store/modules/attributes.js
@@ -30,6 +30,11 @@ export const getters = {
       .filter(record => record.attribute_model === 'contact_attribute')
       .map(camelcaseKeys);
   },
+  getCompanyAttributes: _state => {
+    return _state.records
+      .filter(record => record.attribute_model === 'company_attribute')
+      .map(camelcaseKeys);
+  },
   getAttributesByModel: _state => attributeModel => {
     return _state.records.filter(
       record => record.attribute_model === attributeModel
diff --git a/app/javascript/dashboard/store/modules/specs/attributes/getters.spec.js b/app/javascript/dashboard/store/modules/specs/attributes/getters.spec.js
index 9d8f027f5..77cf0748b 100644
--- a/app/javascript/dashboard/store/modules/specs/attributes/getters.spec.js
+++ b/app/javascript/dashboard/store/modules/specs/attributes/getters.spec.js
@@ -35,6 +35,36 @@ describe('#getters', () => {
     ]);
   });
 
+  it('getCompanyAttributes', () => {
+    const state = {
+      records: [
+        {
+          attribute_display_name: 'Industry',
+          attribute_display_type: 0,
+          attribute_description: 'Company industry',
+          attribute_key: 'industry',
+          attribute_model: 'company_attribute',
+        },
+        {
+          attribute_display_name: 'Language',
+          attribute_display_type: 1,
+          attribute_description: 'Conversation language',
+          attribute_key: 'language',
+          attribute_model: 'conversation_attribute',
+        },
+      ],
+    };
+    expect(getters.getCompanyAttributes(state)).toEqual([
+      {
+        attributeDisplayName: 'Industry',
+        attributeDisplayType: 0,
+        attributeDescription: 'Company industry',
+        attributeKey: 'industry',
+        attributeModel: 'company_attribute',
+      },
+    ]);
+  });
+
   it('getUIFlags', () => {
     const state = {
       uiFlags: {
diff --git a/app/javascript/dashboard/stores/companies.js b/app/javascript/dashboard/stores/companies.js
index d1e8e56e9..e31f1677a 100644
--- a/app/javascript/dashboard/stores/companies.js
+++ b/app/javascript/dashboard/stores/companies.js
@@ -1,31 +1,375 @@
+import camelcaseKeys from 'camelcase-keys';
 import CompanyAPI from 'dashboard/api/companies';
 import { createStore } from 'dashboard/store/storeFactory';
 import { throwErrorMessage } from 'dashboard/store/utils/api';
-import camelcaseKeys from 'camelcase-keys';
+import snakecaseKeys from 'snakecase-keys';
+
+const createInitialUIFlags = () => ({
+  fetchingList: false,
+  fetchingItem: false,
+  updatingItem: false,
+  deletingItem: false,
+  deletingAvatar: false,
+  deletingCustomAttributes: false,
+  fetchingContacts: false,
+  searchingContacts: false,
+  creatingContact: false,
+  removingContact: false,
+});
+
+const camelizeCompany = data =>
+  camelcaseKeys(data || {}, { deep: true, stopPaths: ['custom_attributes'] });
+
+const camelizeContact = data =>
+  camelcaseKeys(data || {}, {
+    deep: true,
+    stopPaths: ['custom_attributes', 'additional_attributes'],
+  });
+
+const normalizeMeta = meta => ({
+  ...camelcaseKeys(meta || {}),
+  totalCount: Number(meta?.total_count || meta?.totalCount || meta?.count || 0),
+  page: Number(meta?.page || meta?.current_page || 1),
+});
+
+const appendFormData = (formData, key, value) => {
+  if (value === undefined || value == null || value === '') return;
+  if (
+    value instanceof File ||
+    value instanceof Blob ||
+    typeof value !== 'object'
+  ) {
+    formData.append(key, value);
+    return;
+  }
+  Object.entries(value).forEach(([k, v]) =>
+    appendFormData(formData, `${key}[${k}]`, v)
+  );
+};
+
+const buildCompanyRequestPayload = ({ avatar, customAttributes, ...rest }) => {
+  const payload = {
+    ...snakecaseKeys(rest, { deep: true }),
+    ...(customAttributes && { custom_attributes: customAttributes }),
+    ...(avatar && { avatar }),
+  };
+  if (!avatar) return { company: payload };
+
+  const formData = new FormData();
+  Object.entries(payload).forEach(([k, v]) =>
+    appendFormData(formData, `company[${k}]`, v)
+  );
+  return formData;
+};
 
 export const useCompaniesStore = createStore({
   name: 'companies',
   type: 'pinia',
   API: CompanyAPI,
+
   getters: {
-    getCompaniesList: state => {
-      return camelcaseKeys(state.records, { deep: true });
-    },
+    getCompaniesList: state => state.records,
   },
+
   actions: () => ({
-    async search({ search, page, sort }) {
+    setMeta(meta) {
+      this.meta = normalizeMeta(meta);
+    },
+
+    setActiveCompanyId(companyId) {
+      this.activeCompanyId = Number(companyId);
+    },
+
+    ensureActiveCompanyContext(companyId) {
+      if (this.activeCompanyId === null) {
+        this.setActiveCompanyId(companyId);
+      }
+    },
+
+    upsertCompanyRecord(record) {
+      const index = this.records.findIndex(r => r.id === record.id);
+      if (index === -1) this.records.push(record);
+      else this.records[index] = record;
+    },
+
+    updateCompanyContactsCount(companyId, contactsCount) {
+      const company = this.getRecord(companyId);
+      if (!company.id) return;
+      this.upsertCompanyRecord({ ...company, contactsCount });
+    },
+
+    clearContactSearchResults() {
+      this.contactSearchResults = [];
+      this.contactSearchMeta = {};
+      this.activeContactSearchQuery = '';
+      this.contactSearchRequestToken =
+        (this.contactSearchRequestToken || 0) + 1;
+    },
+
+    async get({ page = 1, sort = 'name' } = {}) {
+      this.setUIFlag({ fetchingList: true });
+      try {
+        const {
+          data: { payload, meta },
+        } = await CompanyAPI.get({ page, sort });
+        this.records = camelizeCompany(payload);
+        this.setMeta(meta);
+        return this.records;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ fetchingList: false });
+      }
+    },
+
+    async show(id) {
+      this.setUIFlag({ fetchingItem: true });
+      this.setActiveCompanyId(id);
+      const activeCompanyId = Number(id);
+      const requestToken = (this.companyDetailRequestToken || 0) + 1;
+      this.companyDetailRequestToken = requestToken;
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.show(id);
+        const company = camelizeCompany(payload);
+
+        if (
+          this.companyDetailRequestToken !== requestToken ||
+          this.activeCompanyId !== activeCompanyId
+        ) {
+          return company;
+        }
+
+        this.upsertCompanyRecord(company);
+        this.setActiveCompanyId(company.id);
+        return company;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        if (this.companyDetailRequestToken === requestToken) {
+          this.setUIFlag({ fetchingItem: false });
+        }
+      }
+    },
+
+    async update({ id, ...companyAttrs }) {
+      this.setUIFlag({ updatingItem: true });
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.update(
+          id,
+          buildCompanyRequestPayload(companyAttrs)
+        );
+        const company = camelizeCompany(payload);
+        this.upsertCompanyRecord(company);
+        return company;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ updatingItem: false });
+      }
+    },
+
+    async delete(id) {
+      this.setUIFlag({ deletingItem: true });
+      try {
+        await CompanyAPI.delete(id);
+        this.records = this.records.filter(r => r.id !== Number(id));
+        if (this.activeCompanyId === Number(id)) this.resetCompanyDetailState();
+        return Number(id);
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ deletingItem: false });
+      }
+    },
+
+    async search({ search, page = 1, sort = 'name' }) {
       this.setUIFlag({ fetchingList: true });
       try {
         const {
           data: { payload, meta },
         } = await CompanyAPI.search(search, page, sort);
-        this.records = payload;
+        this.records = camelizeCompany(payload);
         this.setMeta(meta);
+        return this.records;
       } catch (error) {
-        throwErrorMessage(error);
+        return throwErrorMessage(error);
       } finally {
         this.setUIFlag({ fetchingList: false });
       }
     },
+
+    async deleteCompanyAvatar(companyId) {
+      this.setUIFlag({ deletingAvatar: true });
+      this.ensureActiveCompanyContext(companyId);
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.destroyAvatar(companyId);
+        const company = camelizeCompany(payload);
+        this.upsertCompanyRecord(company);
+        return company;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ deletingAvatar: false });
+      }
+    },
+
+    async getCompanyContacts(companyId, page = 1) {
+      this.setUIFlag({ fetchingContacts: true });
+      this.ensureActiveCompanyContext(companyId);
+      const activeCompanyId = Number(companyId);
+      const requestToken = (this.companyContactsRequestToken || 0) + 1;
+      this.companyContactsRequestToken = requestToken;
+
+      try {
+        const {
+          data: { payload, meta },
+        } = await CompanyAPI.listContacts(companyId, page);
+        const contacts = camelizeContact(payload);
+        const normalizedMeta = normalizeMeta(meta);
+
+        if (
+          this.companyContactsRequestToken !== requestToken ||
+          this.activeCompanyId !== activeCompanyId
+        ) {
+          return contacts;
+        }
+
+        this.companyContacts = contacts;
+        this.companyContactsMeta = normalizedMeta;
+        this.updateCompanyContactsCount(companyId, normalizedMeta.totalCount);
+        return contacts;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        if (this.companyContactsRequestToken === requestToken) {
+          this.setUIFlag({ fetchingContacts: false });
+        }
+      }
+    },
+
+    async searchCompanyContactCandidates({ companyId, search, page = 1 }) {
+      const query = search?.trim() || '';
+      if (!query) {
+        this.clearContactSearchResults();
+        return [];
+      }
+
+      this.setUIFlag({ searchingContacts: true });
+      this.ensureActiveCompanyContext(companyId);
+      this.activeContactSearchQuery = query;
+      const activeCompanyId = Number(companyId);
+      const requestToken = (this.contactSearchRequestToken || 0) + 1;
+      this.contactSearchRequestToken = requestToken;
+
+      try {
+        const {
+          data: { payload, meta },
+        } = await CompanyAPI.searchContacts(companyId, query, page);
+        const contacts = camelizeContact(payload);
+        const normalizedMeta = normalizeMeta(meta);
+
+        if (
+          this.contactSearchRequestToken !== requestToken ||
+          this.activeCompanyId !== activeCompanyId ||
+          this.activeContactSearchQuery !== query
+        ) {
+          return contacts;
+        }
+
+        this.contactSearchResults = contacts;
+        this.contactSearchMeta = normalizedMeta;
+        return contacts;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        if (this.contactSearchRequestToken === requestToken) {
+          this.setUIFlag({ searchingContacts: false });
+        }
+      }
+    },
+
+    async attachContactToCompany(companyId, contactId) {
+      this.setUIFlag({ creatingContact: true });
+      this.ensureActiveCompanyContext(companyId);
+      const activeCompanyId = Number(companyId);
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.createContact(companyId, {
+          contact_id: contactId,
+        });
+        const contact = camelizeContact(payload);
+        if (this.activeCompanyId === activeCompanyId) {
+          await this.getCompanyContacts(companyId, 1);
+          if (this.activeCompanyId === activeCompanyId) {
+            this.clearContactSearchResults();
+          }
+        }
+        return contact;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ creatingContact: false });
+      }
+    },
+
+    async removeContactFromCompany(companyId, contactId, page = null) {
+      this.setUIFlag({ removingContact: true });
+      this.ensureActiveCompanyContext(companyId);
+      const activeCompanyId = Number(companyId);
+      try {
+        await CompanyAPI.removeContact(companyId, contactId);
+        if (this.activeCompanyId === activeCompanyId) {
+          await this.getCompanyContacts(
+            companyId,
+            page || this.companyContactsMeta?.page || 1
+          );
+        }
+        return Number(contactId);
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ removingContact: false });
+      }
+    },
+
+    async deleteCustomAttributes({ id, customAttributes }) {
+      this.setUIFlag({ deletingCustomAttributes: true });
+      try {
+        const {
+          data: { payload },
+        } = await CompanyAPI.destroyCustomAttributes(id, customAttributes);
+        const company = camelizeCompany(payload);
+        this.upsertCompanyRecord(company);
+        return company;
+      } catch (error) {
+        return throwErrorMessage(error);
+      } finally {
+        this.setUIFlag({ deletingCustomAttributes: false });
+      }
+    },
+
+    resetCompanyDetailState() {
+      const { fetchingList } = this.uiFlags;
+      this.activeCompanyId = null;
+      this.companyDetailRequestToken =
+        (this.companyDetailRequestToken || 0) + 1;
+      this.companyContactsRequestToken =
+        (this.companyContactsRequestToken || 0) + 1;
+      this.contactSearchRequestToken =
+        (this.contactSearchRequestToken || 0) + 1;
+      this.companyContacts = [];
+      this.companyContactsMeta = {};
+      this.contactSearchResults = [];
+      this.contactSearchMeta = {};
+      this.activeContactSearchQuery = '';
+      this.uiFlags = { ...createInitialUIFlags(), fetchingList };
+    },
   }),
 });
diff --git a/app/javascript/dashboard/stores/companies.spec.js b/app/javascript/dashboard/stores/companies.spec.js
new file mode 100644
index 000000000..1c44d4292
--- /dev/null
+++ b/app/javascript/dashboard/stores/companies.spec.js
@@ -0,0 +1,213 @@
+import { setActivePinia, createPinia } from 'pinia';
+import CompanyAPI from 'dashboard/api/companies';
+import { useCompaniesStore } from './companies';
+
+vi.mock('dashboard/api/companies', () => ({
+  default: {
+    show: vi.fn(),
+    update: vi.fn(),
+    destroyAvatar: vi.fn(),
+    listContacts: vi.fn(),
+    searchContacts: vi.fn(),
+    createContact: vi.fn(),
+    removeContact: vi.fn(),
+    destroyCustomAttributes: vi.fn(),
+  },
+}));
+
+vi.mock('dashboard/store/utils/api', () => ({
+  throwErrorMessage: vi.fn(error => error),
+}));
+
+const createDeferred = () => {
+  let resolve;
+  const promise = new Promise(res => {
+    resolve = res;
+  });
+
+  return { promise, resolve };
+};
+
+describe('companies store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    vi.clearAllMocks();
+  });
+
+  it('keeps the latest active company when show requests resolve out of order', async () => {
+    const firstRequest = createDeferred();
+    const secondRequest = createDeferred();
+
+    CompanyAPI.show
+      .mockImplementationOnce(() => firstRequest.promise)
+      .mockImplementationOnce(() => secondRequest.promise);
+
+    const companiesStore = useCompaniesStore();
+
+    const staleRequest = companiesStore.show(1);
+    const currentRequest = companiesStore.show(2);
+
+    secondRequest.resolve({
+      data: {
+        payload: {
+          id: 2,
+          name: 'Beta Company',
+        },
+      },
+    });
+
+    await currentRequest;
+
+    expect(companiesStore.activeCompanyId).toBe(2);
+    expect(companiesStore.getUIFlags.fetchingItem).toBe(false);
+
+    firstRequest.resolve({
+      data: {
+        payload: {
+          id: 1,
+          name: 'Alpha Company',
+        },
+      },
+    });
+
+    await staleRequest;
+
+    expect(companiesStore.activeCompanyId).toBe(2);
+    expect(companiesStore.getRecord(1)).toEqual({});
+    expect(companiesStore.getRecord(2)).toEqual(
+      expect.objectContaining({ id: 2, name: 'Beta Company' })
+    );
+    expect(companiesStore.getUIFlags.fetchingItem).toBe(false);
+  });
+
+  it('keeps avatar files intact when building multipart update params', async () => {
+    CompanyAPI.update.mockResolvedValueOnce({
+      data: {
+        payload: {
+          id: 1,
+          name: 'Acme',
+        },
+      },
+    });
+
+    const companiesStore = useCompaniesStore();
+    const avatar = new File(['avatar'], 'avatar.png', { type: 'image/png' });
+
+    await companiesStore.update({
+      id: 1,
+      name: 'Acme',
+      avatar,
+    });
+
+    const formData = CompanyAPI.update.mock.calls[0][1];
+    expect(formData.get('company[avatar]')).toBe(avatar);
+    expect(formData.get('company[name]')).toBe('Acme');
+  });
+
+  it('preserves custom attribute keys when building update params', async () => {
+    CompanyAPI.update.mockResolvedValueOnce({
+      data: {
+        payload: {
+          id: 1,
+          name: 'Acme',
+          custom_attributes: {
+            subscriptionPlan: 'Enterprise',
+          },
+        },
+      },
+    });
+
+    const companiesStore = useCompaniesStore();
+
+    await companiesStore.update({
+      id: 1,
+      customAttributes: {
+        subscriptionPlan: 'Enterprise',
+      },
+    });
+
+    expect(CompanyAPI.update).toHaveBeenCalledWith(1, {
+      company: {
+        custom_attributes: {
+          subscriptionPlan: 'Enterprise',
+        },
+      },
+    });
+  });
+
+  it('links an existing contact and refreshes company contacts', async () => {
+    CompanyAPI.createContact.mockResolvedValueOnce({
+      data: {
+        payload: {
+          id: 2,
+          name: 'Jane Contact',
+          company_id: 1,
+          linked_to_current_company: true,
+        },
+      },
+    });
+    CompanyAPI.listContacts.mockResolvedValueOnce({
+      data: {
+        payload: [
+          {
+            id: 2,
+            name: 'Jane Contact',
+            company_id: 1,
+            linked_to_current_company: true,
+          },
+        ],
+        meta: { total_count: 1, page: 1 },
+      },
+    });
+
+    const companiesStore = useCompaniesStore();
+    companiesStore.setActiveCompanyId(1);
+
+    await companiesStore.attachContactToCompany(1, 2);
+
+    expect(CompanyAPI.createContact).toHaveBeenCalledWith(1, {
+      contact_id: 2,
+    });
+    expect(CompanyAPI.listContacts).toHaveBeenCalledWith(1, 1);
+    expect(companiesStore.companyContacts).toEqual([
+      expect.objectContaining({
+        id: 2,
+        companyId: 1,
+        linkedToCurrentCompany: true,
+      }),
+    ]);
+  });
+
+  it('removes a company custom attribute and updates the company record', async () => {
+    CompanyAPI.destroyCustomAttributes.mockResolvedValueOnce({
+      data: {
+        payload: {
+          id: 1,
+          name: 'Acme',
+          custom_attributes: {
+            region: 'us',
+          },
+        },
+      },
+    });
+
+    const companiesStore = useCompaniesStore();
+
+    await companiesStore.deleteCustomAttributes({
+      id: 1,
+      customAttributes: ['plan'],
+    });
+
+    expect(CompanyAPI.destroyCustomAttributes).toHaveBeenCalledWith(1, [
+      'plan',
+    ]);
+    expect(companiesStore.getRecord(1)).toEqual(
+      expect.objectContaining({
+        id: 1,
+        customAttributes: {
+          region: 'us',
+        },
+      })
+    );
+  });
+});
diff --git a/app/models/custom_attribute_definition.rb b/app/models/custom_attribute_definition.rb
index 07d0a9535..35f822335 100644
--- a/app/models/custom_attribute_definition.rb
+++ b/app/models/custom_attribute_definition.rb
@@ -25,7 +25,8 @@ class CustomAttributeDefinition < ApplicationRecord
   STANDARD_ATTRIBUTES = {
     :conversation => %w[status priority assignee_id inbox_id team_id display_id campaign_id labels browser_language country_code referer created_at
                         last_activity_at],
-    :contact => %w[name email phone_number identifier country_code city company_name created_at last_activity_at referer blocked]
+    :contact => %w[name email phone_number identifier country_code city company_name created_at last_activity_at referer blocked],
+    :company => %w[name domain description contacts_count created_at updated_at last_activity_at]
   }.freeze
 
   scope :with_attribute_model, ->(attribute_model) { attribute_model.presence && where(attribute_model: attribute_model) }
@@ -41,12 +42,12 @@ class CustomAttributeDefinition < ApplicationRecord
   validates :attribute_model, presence: true
   validate :attribute_must_not_conflict, on: :create
 
-  enum attribute_model: { conversation_attribute: 0, contact_attribute: 1 }
+  enum attribute_model: { conversation_attribute: 0, contact_attribute: 1, company_attribute: 2 }
   enum attribute_display_type: { text: 0, number: 1, currency: 2, percent: 3, link: 4, date: 5, list: 6, checkbox: 7 }
 
   belongs_to :account
-  after_update :update_widget_pre_chat_custom_fields
-  after_destroy :sync_widget_pre_chat_custom_fields
+  after_update :update_widget_pre_chat_custom_fields, unless: :company_attribute?
+  after_destroy :sync_widget_pre_chat_custom_fields, unless: :company_attribute?
 
   private
 
@@ -64,8 +65,10 @@ class CustomAttributeDefinition < ApplicationRecord
   end
 
   def attribute_must_not_conflict
-    model_keys = attribute_model.to_sym == :conversation_attribute ? :conversation : :contact
-    return unless attribute_key.in?(STANDARD_ATTRIBUTES[model_keys])
+    model_keys = attribute_model.to_s.delete_suffix('_attribute').to_sym
+    standard_attributes = STANDARD_ATTRIBUTES[model_keys]
+    return if standard_attributes.blank?
+    return unless attribute_key.in?(standard_attributes)
 
     errors.add(:attribute_key, I18n.t('errors.custom_attribute_definition.key_conflict'))
   end
diff --git a/config/routes.rb b/config/routes.rb
index c1a34bc85..fde0f64dd 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -177,6 +177,17 @@ Rails.application.routes.draw do
             collection do
               get :search
             end
+            member do
+              post :destroy_custom_attributes
+              delete :avatar
+            end
+            scope module: :companies do
+              resources :contacts, only: [:index, :create, :destroy] do
+                collection do
+                  get :search
+                end
+              end
+            end
           end
           resources :contacts, only: [:index, :show, :update, :create, :destroy] do
             collection do
diff --git a/db/migrate/20260422133000_add_additional_attributes_to_companies.rb b/db/migrate/20260422133000_add_additional_attributes_to_companies.rb
new file mode 100644
index 000000000..10835490f
--- /dev/null
+++ b/db/migrate/20260422133000_add_additional_attributes_to_companies.rb
@@ -0,0 +1,9 @@
+class AddAdditionalAttributesToCompanies < ActiveRecord::Migration[7.1]
+  def change
+    change_table :companies, bulk: true do |t|
+      t.jsonb :additional_attributes, default: {}
+      t.jsonb :custom_attributes, default: {}
+      t.datetime :last_activity_at, precision: nil
+    end
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 9ce734ba7..f7c3cce6d 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -612,6 +612,9 @@ ActiveRecord::Schema[7.1].define(version: 2026_04_30_114500) do
     t.datetime "created_at", null: false
     t.datetime "updated_at", null: false
     t.integer "contacts_count"
+    t.jsonb "additional_attributes", default: {}
+    t.jsonb "custom_attributes", default: {}
+    t.datetime "last_activity_at", precision: nil
     t.index ["account_id", "domain"], name: "index_companies_on_account_and_domain", unique: true, where: "(domain IS NOT NULL)"
     t.index ["account_id"], name: "index_companies_on_account_id"
     t.index ["name", "account_id"], name: "index_companies_on_name_and_account_id"
diff --git a/enterprise/app/controllers/api/v1/accounts/companies/contacts_controller.rb b/enterprise/app/controllers/api/v1/accounts/companies/contacts_controller.rb
new file mode 100644
index 000000000..a67ad907b
--- /dev/null
+++ b/enterprise/app/controllers/api/v1/accounts/companies/contacts_controller.rb
@@ -0,0 +1,87 @@
+class Api::V1::Accounts::Companies::ContactsController < Api::V1::Accounts::EnterpriseAccountsController
+  RESULTS_PER_PAGE = 15
+  CONTACT_SEARCH_QUERY = [
+    'contacts.name ILIKE :search',
+    'contacts.email ILIKE :search',
+    'contacts.phone_number ILIKE :search',
+    'contacts.identifier ILIKE :search'
+  ].join(' OR ')
+
+  before_action :ensure_companies_enabled!
+  before_action :fetch_company
+  before_action :authorize_company_read!, only: [:index, :search]
+  before_action :authorize_company_update!, only: [:create, :destroy]
+  before_action :set_current_page, only: [:index, :search]
+  before_action :fetch_contact, only: [:destroy]
+
+  def index
+    @contacts = fetch_contacts(@company.contacts.order(:name, :id))
+    @contacts_count = @contacts.total_count
+  end
+
+  def search
+    if params[:q].blank?
+      return render json: { error: 'Specify search string with parameter q' },
+                    status: :unprocessable_entity
+    end
+
+    @contacts = fetch_contacts(contact_search_scope)
+    @contacts_count = @contacts.total_count
+  end
+
+  def create
+    @contact = Current.account.contacts.find(params[:contact_id])
+    membership_service.assign(contact: @contact)
+  end
+
+  def destroy
+    membership_service.remove(contact: @contact)
+    head :ok
+  end
+
+  private
+
+  def set_current_page
+    @current_page = params[:page] || 1
+  end
+
+  def fetch_company
+    @company = Current.account.companies.find(params[:company_id])
+  end
+
+  def fetch_contact
+    @contact = @company.contacts.find(params[:id])
+  end
+
+  def fetch_contacts(contacts)
+    contacts
+      .includes({ avatar_attachment: [:blob] }, :company)
+      .page(@current_page)
+      .per(RESULTS_PER_PAGE)
+  end
+
+  def contact_search_scope
+    Current.account.contacts
+           .where('contacts.company_id IS NULL OR contacts.company_id != ?', @company.id)
+           .where(CONTACT_SEARCH_QUERY, search: "%#{params[:q].strip}%")
+           .order(:name, :id)
+  end
+
+  def membership_service
+    @membership_service ||= Companies::ContactMembershipService.new(company: @company)
+  end
+
+  def ensure_companies_enabled!
+    return if Current.account.feature_enabled?('companies')
+
+    render json: { error: 'Companies are not enabled for this account' }, status: :forbidden
+  end
+
+  def authorize_company_read!
+    authorize(@company, :show?)
+  end
+
+  def authorize_company_update!
+    authorize(@company, :update?)
+  end
+end
diff --git a/enterprise/app/controllers/api/v1/accounts/companies_controller.rb b/enterprise/app/controllers/api/v1/accounts/companies_controller.rb
index 3ec547cda..1df0e7d88 100644
--- a/enterprise/app/controllers/api/v1/accounts/companies_controller.rb
+++ b/enterprise/app/controllers/api/v1/accounts/companies_controller.rb
@@ -3,13 +3,15 @@ class Api::V1::Accounts::CompaniesController < Api::V1::Accounts::EnterpriseAcco
   sort_on :name, type: :string
   sort_on :domain, type: :string
   sort_on :created_at, type: :datetime
+  sort_on :last_activity_at, internal_name: :order_on_last_activity_at, type: :scope, scope_params: [:direction]
   sort_on :contacts_count, internal_name: :order_on_contacts_count, type: :scope, scope_params: [:direction]
 
   RESULTS_PER_PAGE = 25
 
+  before_action :ensure_companies_enabled!
   before_action :check_authorization
   before_action :set_current_page, only: [:index, :search]
-  before_action :fetch_company, only: [:show, :update, :destroy]
+  before_action :fetch_company, only: [:show, :update, :destroy, :avatar, :destroy_custom_attributes]
 
   def index
     @companies = fetch_companies(resolved_companies)
@@ -35,7 +37,15 @@ class Api::V1::Accounts::CompaniesController < Api::V1::Accounts::EnterpriseAcco
   end
 
   def update
-    @company.update!(company_params)
+    @company.update!(company_update_params)
+  end
+
+  def destroy_custom_attributes
+    custom_attributes = custom_attributes_to_destroy
+    return if performed?
+
+    @company.custom_attributes = @company.custom_attributes.excluding(*custom_attributes)
+    @company.save!
   end
 
   def destroy
@@ -43,6 +53,10 @@ class Api::V1::Accounts::CompaniesController < Api::V1::Accounts::EnterpriseAcco
     head :ok
   end
 
+  def avatar
+    @company.avatar.purge if @company.avatar.attached?
+  end
+
   private
 
   def resolved_companies
@@ -59,10 +73,10 @@ class Api::V1::Accounts::CompaniesController < Api::V1::Accounts::EnterpriseAcco
       .per(RESULTS_PER_PAGE)
   end
 
-  def check_authorization
-    raise Pundit::NotAuthorizedError unless ChatwootApp.enterprise?
+  def ensure_companies_enabled!
+    return if Current.account.feature_enabled?('companies')
 
-    authorize(Company)
+    render json: { error: 'Companies are not enabled for this account' }, status: :forbidden
   end
 
   def fetch_company
@@ -70,6 +84,31 @@ class Api::V1::Accounts::CompaniesController < Api::V1::Accounts::EnterpriseAcco
   end
 
   def company_params
-    params.require(:company).permit(:name, :domain, :description, :avatar)
+    params.require(:company).permit(
+      :name,
+      :domain,
+      :description,
+      :avatar,
+      additional_attributes: {},
+      custom_attributes: {}
+    )
+  end
+
+  def company_custom_attributes
+    custom_attributes = company_params[:custom_attributes]
+    return @company.custom_attributes.merge(custom_attributes.to_h) if custom_attributes.present?
+
+    @company.custom_attributes
+  end
+
+  def company_update_params
+    company_params.except(:custom_attributes).merge(custom_attributes: company_custom_attributes)
+  end
+
+  def custom_attributes_to_destroy
+    custom_attributes = params.permit(custom_attributes: [])[:custom_attributes]
+    return custom_attributes if custom_attributes.present? || params[:custom_attributes].is_a?(Array)
+
+    render json: { error: 'custom_attributes must be an array' }, status: :unprocessable_entity
   end
 end
diff --git a/enterprise/app/models/company.rb b/enterprise/app/models/company.rb
index 8581675bd..25ba51935 100644
--- a/enterprise/app/models/company.rb
+++ b/enterprise/app/models/company.rb
@@ -2,6 +2,9 @@
 #
 # Table name: companies
 #
+#  additional_attributes :jsonb
+#  custom_attributes     :jsonb
+#  last_activity_at      :datetime
 #  id             :bigint           not null, primary key
 #  contacts_count :integer
 #  description    :text
@@ -19,6 +22,7 @@
 #
 class Company < ApplicationRecord
   include Avatarable
+
   validates :account_id, presence: true
   validates :name, presence: true, length: { maximum: Limits::COMPANY_NAME_LENGTH_LIMIT }
   validates :domain, allow_blank: true, format: {
@@ -27,9 +31,11 @@ class Company < ApplicationRecord
   }
   validates :domain, uniqueness: { scope: :account_id }, if: -> { domain.present? }
   validates :description, length: { maximum: Limits::COMPANY_DESCRIPTION_LENGTH_LIMIT }
+  validates :custom_attributes, jsonb_attributes_length: true
 
   belongs_to :account
   has_many :contacts, dependent: :nullify
+  before_validation :prepare_jsonb_attributes
   after_create_commit :fetch_favicon, if: -> { domain.present? }
 
   scope :ordered_by_name, -> { order(:name) }
@@ -44,9 +50,21 @@ class Company < ApplicationRecord
       )
     )
   }
+  scope :order_on_last_activity_at, lambda { |direction|
+    order(
+      Arel::Nodes::SqlLiteral.new(
+        sanitize_sql_for_order("\"companies\".\"last_activity_at\" #{direction} NULLS LAST")
+      )
+    )
+  }
 
   private
 
+  def prepare_jsonb_attributes
+    self.additional_attributes = {} unless additional_attributes.is_a?(Hash)
+    self.custom_attributes = {} unless custom_attributes.is_a?(Hash)
+  end
+
   def fetch_favicon
     Avatar::AvatarFromFaviconJob.set(wait: 5.seconds).perform_later(self)
   end
diff --git a/enterprise/app/policies/company_policy.rb b/enterprise/app/policies/company_policy.rb
index 756edfc32..d12ea3600 100644
--- a/enterprise/app/policies/company_policy.rb
+++ b/enterprise/app/policies/company_policy.rb
@@ -19,6 +19,14 @@ class CompanyPolicy < ApplicationPolicy
     true
   end
 
+  def avatar?
+    update?
+  end
+
+  def destroy_custom_attributes?
+    update?
+  end
+
   def destroy?
     @account_user.administrator?
   end
diff --git a/enterprise/app/services/companies/contact_membership_service.rb b/enterprise/app/services/companies/contact_membership_service.rb
new file mode 100644
index 000000000..fe3f32168
--- /dev/null
+++ b/enterprise/app/services/companies/contact_membership_service.rb
@@ -0,0 +1,15 @@
+class Companies::ContactMembershipService
+  attr_reader :company
+
+  def initialize(company:)
+    @company = company
+  end
+
+  def assign(contact:)
+    contact.update!(company: company)
+  end
+
+  def remove(contact:)
+    contact.update!(company: nil)
+  end
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/_company.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/_company.json.jbuilder
deleted file mode 100644
index 8b8772507..000000000
--- a/enterprise/app/views/api/v1/accounts/companies/_company.json.jbuilder
+++ /dev/null
@@ -1,8 +0,0 @@
-json.id company.id
-json.name company.name
-json.contacts_count company.contacts_count
-json.domain company.domain
-json.description company.description
-json.avatar_url company.avatar_url
-json.created_at company.created_at
-json.updated_at company.updated_at
diff --git a/enterprise/app/views/api/v1/accounts/companies/avatar.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/avatar.json.jbuilder
new file mode 100644
index 000000000..48f181f66
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/companies/avatar.json.jbuilder
@@ -0,0 +1,3 @@
+json.payload do
+  json.partial! 'api/v1/models/company', formats: [:json], resource: @company
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/contacts/_contact.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/contacts/_contact.json.jbuilder
new file mode 100644
index 000000000..2b0885169
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/companies/contacts/_contact.json.jbuilder
@@ -0,0 +1,10 @@
+json.partial! 'api/v1/models/contact', formats: [:json], resource: contact, with_contact_inboxes: false
+json.company_id contact.company_id
+json.linked_to_current_company contact.company_id == @company.id
+if contact.company.present?
+  json.company do
+    json.partial! 'api/v1/models/company', formats: [:json], resource: contact.company
+  end
+else
+  json.company nil
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/contacts/create.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/contacts/create.json.jbuilder
new file mode 100644
index 000000000..103e8ef17
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/companies/contacts/create.json.jbuilder
@@ -0,0 +1,3 @@
+json.payload do
+  json.partial! 'api/v1/accounts/companies/contacts/contact', formats: [:json], contact: @contact
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/contacts/index.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/contacts/index.json.jbuilder
new file mode 100644
index 000000000..5537d8adc
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/companies/contacts/index.json.jbuilder
@@ -0,0 +1,10 @@
+json.meta do
+  json.total_count @contacts_count
+  json.page @current_page
+end
+
+json.payload do
+  json.array! @contacts do |contact|
+    json.partial! 'api/v1/accounts/companies/contacts/contact', formats: [:json], contact: contact
+  end
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/contacts/search.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/contacts/search.json.jbuilder
new file mode 100644
index 000000000..5537d8adc
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/companies/contacts/search.json.jbuilder
@@ -0,0 +1,10 @@
+json.meta do
+  json.total_count @contacts_count
+  json.page @current_page
+end
+
+json.payload do
+  json.array! @contacts do |contact|
+    json.partial! 'api/v1/accounts/companies/contacts/contact', formats: [:json], contact: contact
+  end
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/create.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/create.json.jbuilder
index b3bc80cfd..48f181f66 100644
--- a/enterprise/app/views/api/v1/accounts/companies/create.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/companies/create.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'company', company: @company
+  json.partial! 'api/v1/models/company', formats: [:json], resource: @company
 end
diff --git a/enterprise/app/views/api/v1/accounts/companies/destroy_custom_attributes.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/destroy_custom_attributes.json.jbuilder
new file mode 100644
index 000000000..48f181f66
--- /dev/null
+++ b/enterprise/app/views/api/v1/accounts/companies/destroy_custom_attributes.json.jbuilder
@@ -0,0 +1,3 @@
+json.payload do
+  json.partial! 'api/v1/models/company', formats: [:json], resource: @company
+end
diff --git a/enterprise/app/views/api/v1/accounts/companies/index.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/index.json.jbuilder
index ef9c67723..798490d90 100644
--- a/enterprise/app/views/api/v1/accounts/companies/index.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/companies/index.json.jbuilder
@@ -5,6 +5,6 @@ end
 
 json.payload do
   json.array! @companies do |company|
-    json.partial! 'company', company: company
+    json.partial! 'api/v1/models/company', formats: [:json], resource: company
   end
 end
diff --git a/enterprise/app/views/api/v1/accounts/companies/search.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/search.json.jbuilder
index ef9c67723..798490d90 100644
--- a/enterprise/app/views/api/v1/accounts/companies/search.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/companies/search.json.jbuilder
@@ -5,6 +5,6 @@ end
 
 json.payload do
   json.array! @companies do |company|
-    json.partial! 'company', company: company
+    json.partial! 'api/v1/models/company', formats: [:json], resource: company
   end
 end
diff --git a/enterprise/app/views/api/v1/accounts/companies/show.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/show.json.jbuilder
index b3bc80cfd..48f181f66 100644
--- a/enterprise/app/views/api/v1/accounts/companies/show.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/companies/show.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'company', company: @company
+  json.partial! 'api/v1/models/company', formats: [:json], resource: @company
 end
diff --git a/enterprise/app/views/api/v1/accounts/companies/update.json.jbuilder b/enterprise/app/views/api/v1/accounts/companies/update.json.jbuilder
index b3bc80cfd..48f181f66 100644
--- a/enterprise/app/views/api/v1/accounts/companies/update.json.jbuilder
+++ b/enterprise/app/views/api/v1/accounts/companies/update.json.jbuilder
@@ -1,3 +1,3 @@
 json.payload do
-  json.partial! 'company', company: @company
+  json.partial! 'api/v1/models/company', formats: [:json], resource: @company
 end
diff --git a/enterprise/app/views/api/v1/models/_company.json.jbuilder b/enterprise/app/views/api/v1/models/_company.json.jbuilder
new file mode 100644
index 000000000..2e7f11ed4
--- /dev/null
+++ b/enterprise/app/views/api/v1/models/_company.json.jbuilder
@@ -0,0 +1,10 @@
+json.id resource.id
+json.name resource.name
+json.contacts_count resource.contacts_count
+json.domain resource.domain
+json.description resource.description
+json.custom_attributes resource.custom_attributes
+json.avatar_url resource.avatar_url
+json.last_activity_at resource.last_activity_at.to_i if resource[:last_activity_at].present?
+json.created_at resource.created_at.to_i if resource[:created_at].present?
+json.updated_at resource.updated_at.to_i if resource[:updated_at].present?
diff --git a/spec/enterprise/controllers/api/v1/accounts/companies/contacts_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/companies/contacts_controller_spec.rb
new file mode 100644
index 000000000..d18014e8c
--- /dev/null
+++ b/spec/enterprise/controllers/api/v1/accounts/companies/contacts_controller_spec.rb
@@ -0,0 +1,78 @@
+require 'rails_helper'
+
+RSpec.describe 'Company contacts API', type: :request do
+  let(:account) { create(:account) }
+  let(:admin) { create(:user, account: account, role: :administrator) }
+  let(:company) { create(:company, name: 'Acme', account: account) }
+
+  before { account.enable_features!(:companies) }
+
+  describe 'GET /api/v1/accounts/{account.id}/companies/{company.id}/contacts' do
+    it 'returns contacts linked to the company' do
+      linked_contact = create(:contact, name: 'Linked Contact', company: company, account: account)
+      create(:contact, name: 'Other Contact', account: account)
+
+      get "/api/v1/accounts/#{account.id}/companies/#{company.id}/contacts",
+          headers: admin.create_new_auth_token,
+          as: :json
+
+      expect(response).to have_http_status(:success)
+      response_body = response.parsed_body
+      expect(response_body['payload'].pluck('id')).to eq([linked_contact.id])
+      expect(response_body['payload'].first['company_id']).to eq(company.id)
+      expect(response_body['payload'].first['linked_to_current_company']).to be true
+      expect(response_body['meta']['total_count']).to eq(1)
+    end
+  end
+
+  describe 'GET /api/v1/accounts/{account.id}/companies/{company.id}/contacts/search' do
+    it 'returns matching contacts that are not already linked to the company' do
+      other_company = create(:company, name: 'Other Company', account: account)
+      linked_contact = create(:contact, name: 'Jane Current', company: company, account: account)
+      available_contact = create(:contact, name: 'Jane Available', account: account)
+      assigned_contact = create(:contact, name: 'Jane Assigned', company: other_company, account: account)
+
+      get "/api/v1/accounts/#{account.id}/companies/#{company.id}/contacts/search",
+          params: { q: 'Jane' },
+          headers: admin.create_new_auth_token,
+          as: :json
+
+      expect(response).to have_http_status(:success)
+      contact_ids = response.parsed_body['payload'].pluck('id')
+      expect(contact_ids).to contain_exactly(available_contact.id, assigned_contact.id)
+      expect(contact_ids).not_to include(linked_contact.id)
+    end
+  end
+
+  describe 'POST /api/v1/accounts/{account.id}/companies/{company.id}/contacts' do
+    it 'links an existing contact to the company' do
+      contact = create(:contact, name: 'Jane Contact', account: account, additional_attributes: { 'city' => 'Berlin' })
+
+      post "/api/v1/accounts/#{account.id}/companies/#{company.id}/contacts",
+           params: { contact_id: contact.id },
+           headers: admin.create_new_auth_token,
+           as: :json
+
+      expect(response).to have_http_status(:success)
+      expect(contact.reload.company_id).to eq(company.id)
+      expect(contact.additional_attributes).to eq('city' => 'Berlin')
+      expect(response.parsed_body['payload']['company_id']).to eq(company.id)
+      expect(response.parsed_body['payload']['linked_to_current_company']).to be true
+    end
+  end
+
+  describe 'DELETE /api/v1/accounts/{account.id}/companies/{company.id}/contacts/{id}' do
+    it 'removes a contact from the company' do
+      contact = create(:contact, name: 'Jane Contact', company: company, account: account,
+                                 additional_attributes: { 'company_name' => 'Acme', 'city' => 'Berlin' })
+
+      delete "/api/v1/accounts/#{account.id}/companies/#{company.id}/contacts/#{contact.id}",
+             headers: admin.create_new_auth_token,
+             as: :json
+
+      expect(response).to have_http_status(:ok)
+      expect(contact.reload.company_id).to be_nil
+      expect(contact.additional_attributes).to eq('company_name' => 'Acme', 'city' => 'Berlin')
+    end
+  end
+end
diff --git a/spec/enterprise/controllers/api/v1/accounts/companies_controller_spec.rb b/spec/enterprise/controllers/api/v1/accounts/companies_controller_spec.rb
index 3dadcec43..84b182669 100644
--- a/spec/enterprise/controllers/api/v1/accounts/companies_controller_spec.rb
+++ b/spec/enterprise/controllers/api/v1/accounts/companies_controller_spec.rb
@@ -3,6 +3,8 @@ require 'rails_helper'
 RSpec.describe 'Companies API', type: :request do
   let(:account) { create(:account) }
 
+  before { account.enable_features!(:companies) }
+
   describe 'GET /api/v1/accounts/{account.id}/companies' do
     context 'when it is an unauthenticated user' do
       it 'returns unauthorized' do
@@ -222,6 +224,17 @@ RSpec.describe 'Companies API', type: :request do
         expect(response_body['payload']['name']).to eq(company.name)
         expect(response_body['payload']['id']).to eq(company.id)
       end
+
+      it 'returns company custom attributes' do
+        company.update!(custom_attributes: { 'plan' => 'enterprise' })
+
+        get "/api/v1/accounts/#{account.id}/companies/#{company.id}",
+            headers: admin.create_new_auth_token,
+            as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(response.parsed_body['payload']['custom_attributes']).to eq('plan' => 'enterprise')
+      end
     end
   end
 
@@ -302,6 +315,60 @@ RSpec.describe 'Companies API', type: :request do
         expect(response_body['payload']['name']).to eq('Updated Company Name')
         expect(response_body['payload']['domain']).to eq('updated.com')
       end
+
+      it 'merges custom attributes without removing existing attributes' do
+        company.update!(custom_attributes: { 'plan' => 'startup', 'region' => 'us' })
+
+        patch "/api/v1/accounts/#{account.id}/companies/#{company.id}",
+              params: { company: { custom_attributes: { 'plan' => 'enterprise' } } },
+              headers: admin.create_new_auth_token,
+              as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(company.reload.custom_attributes).to eq('plan' => 'enterprise', 'region' => 'us')
+        expect(response.parsed_body['payload']['custom_attributes']).to eq('plan' => 'enterprise', 'region' => 'us')
+      end
+    end
+  end
+
+  describe 'POST /api/v1/accounts/{account.id}/companies/{id}/destroy_custom_attributes' do
+    let(:company) { create(:company, account: account, custom_attributes: { 'plan' => 'enterprise', 'region' => 'us' }) }
+
+    context 'when it is an authenticated user' do
+      let(:admin) { create(:user, account: account, role: :administrator) }
+
+      it 'removes selected company custom attributes' do
+        post "/api/v1/accounts/#{account.id}/companies/#{company.id}/destroy_custom_attributes",
+             params: { custom_attributes: ['plan'] },
+             headers: admin.create_new_auth_token,
+             as: :json
+
+        expect(response).to have_http_status(:success)
+        expect(company.reload.custom_attributes).to eq('region' => 'us')
+        expect(response.parsed_body['payload']['custom_attributes']).to eq('region' => 'us')
+      end
+    end
+  end
+
+  describe 'DELETE /api/v1/accounts/{account.id}/companies/{id}/avatar' do
+    let(:company) { create(:company, account: account) }
+
+    context 'when it is an authenticated administrator' do
+      let(:admin) { create(:user, account: account, role: :administrator) }
+
+      before do
+        company.avatar.attach(io: Rails.root.join('spec/assets/avatar.png').open, filename: 'avatar.png', content_type: 'image/png')
+      end
+
+      it 'deletes the company avatar' do
+        delete "/api/v1/accounts/#{account.id}/companies/#{company.id}/avatar",
+               headers: admin.create_new_auth_token,
+               as: :json
+
+        expect(response).to have_http_status(:success)
+        expect { company.avatar.attachment.reload }.to raise_error(ActiveRecord::RecordNotFound)
+        expect(response.parsed_body['payload']['avatar_url']).to be_blank
+      end
     end
   end
 
diff --git a/spec/models/custom_attribute_definition_spec.rb b/spec/models/custom_attribute_definition_spec.rb
index 648296b69..c529fc609 100644
--- a/spec/models/custom_attribute_definition_spec.rb
+++ b/spec/models/custom_attribute_definition_spec.rb
@@ -42,6 +42,17 @@ RSpec.describe CustomAttributeDefinition do
         cad = build(:custom_attribute_definition, account: account, attribute_key: 'key()')
         expect(cad).not_to be_valid
       end
+
+      it 'allows company custom attributes' do
+        cad = build(:custom_attribute_definition, account: account, attribute_model: 'company_attribute')
+        expect(cad).to be_valid
+      end
+
+      it 'rejects company custom attributes that conflict with standard company fields' do
+        cad = build(:custom_attribute_definition, account: account, attribute_model: 'company_attribute', attribute_key: 'domain')
+        expect(cad).not_to be_valid
+        expect(cad.errors[:attribute_key]).to be_present
+      end
     end
   end