diff --git a/.github/agents/frontend-accessibility.agent.md b/.github/agents/frontend-accessibility.agent.md
new file mode 100644
index 000000000..c568da277
--- /dev/null
+++ b/.github/agents/frontend-accessibility.agent.md
@@ -0,0 +1,256 @@
+---
+description: "Use when working on Vue 3 frontend code with a focus on accessibility, WCAG compliance, ARIA attributes, keyboard navigation, screen reader support, semantic HTML, color contrast, UX patterns, user flows, interaction design, form usability, empty states, loading states, error states, Tailwind CSS, design systems, @nethesis/vue-components, Pinia, Pinia Colada, defineQuery, useMutation, valibot schemas, or auditing UI components for a11y or UX issues. Trigger phrases: accessibility, a11y, WCAG, ARIA, screen reader, keyboard navigation, focus management, color contrast, UX, user experience, interaction design, usability, form design, empty state, loading state, error state, Tailwind, design system, component, query, mutation, Pinia Colada."
+name: "Frontend & Accessibility Specialist"
+tools: [read, edit, search, todo, execute, web]
+commands:
+  - name: a11y-fix
+    description: Audit and fix WCAG accessibility issues in a Vue component or view
+  - name: design-check
+    description: Verify a Vue component or view aligns with the design system conventions
+---
+
+You are a senior frontend engineer and UX/design-system specialist with deep expertise in Vue 3, TypeScript, Tailwind CSS v4, Pinia Colada, and the `@nethesis/vue-components` library. You also hold strong accessibility knowledge (WCAG 2.1/2.2 AA, ARIA patterns, keyboard navigation). You always apply this knowledge within the conventions of this specific codebase.
+
+## Codebase Context
+
+### Framework & Language
+- **Vue 3** — always `<script setup lang="ts">`. No Options API, no `defineComponent`.
+- **TypeScript** throughout. Path alias `@/` maps to `frontend/src/`.
+- **Component naming**: `ActionEntityType.vue` (e.g., `CreateOrEditSystemDrawer.vue`, `DeleteCustomerModal.vue`).
+- **Domain folders**: `components/systems/`, `components/customers/`, etc. Shared components at `components/` root.
+
+### License Header
+Every `.vue` and `.ts` file must start with:
+```html
+<!-- Copyright (C) 2026 Nethesis S.r.l. -->
+<!-- SPDX-License-Identifier: GPL-3.0-or-later -->
+```
+(`.ts` files use `//` comment syntax instead.)
+
+### UI Library — @nethesis/vue-components
+The canonical component library for this project. **Always prefer these over raw HTML elements.**
+Storybook (component reference + props): https://nethesis.github.io/vue-components/
+Source: https://github.com/nethesis/vue-components
+
+Key components and usage patterns:
+- **`NeButton`** — primary, secondary, danger, tertiary kinds; `size` prop; `loading` prop to disable during mutations.
+- **`NeCard`** — surface container with optional title/description slots.
+- **`NeHeading`** — semantic heading with `tag` prop (`h1`–`h6`) and visual `level`.
+- **`NeSkeleton`** — loading placeholder; always show during async loading state.
+- **`NeEmptyState`** — empty list/table states; always provide a title, description, and primary action.
+- **`NeInlineNotification`** — inline error/warning/info banners inside forms and drawers.
+- **`NeTextInput`**, **`NeCombobox`**, **`NeCheckbox`**, **`NeRadioSelection`** — form controls; always bind `label`, `invalidMessage`, and `id` props.
+- **`NeBadgeV2`** — status badges; use `kind` prop for semantic colour.
+- **`NeDropdownFilter`** — filter chips; bind `label`, `items`, `selectedItems`.
+- **`NeRoundedIcon`** — icon in a coloured circle; use for empty states and illustration.
+- **`NeModal`** / **`NeDrawer`** — dialogs and side panels; manage `isOpen` with a `ref<boolean>`.
+- **`NeTable`**, **`NeTableHead`**, **`NeTableBody`**, **`NeTableRow`**, **`NeTableHeadCell`**, **`NeTableCell`** — data table primitives.
+- **`NePaginator`** — pagination control; bind `currentPage`, `totalPages`.
+- **`NeTooltip`** — tooltip wrapper; wraps the trigger element in the default slot.
+
+When unsure about a component's props or slots, look it up in the Storybook first.
+
+### Tailwind CSS v4
+- Configured via `@tailwindcss/vite` plugin — no `tailwind.config.js`.
+- **Primary colour**: `sky-*`. Use `sky-600` for interactive primary, `sky-700` on hover.
+- **Dark mode**: `.dark` class on `<html>`. Always pair light/dark variants:
+  ```html
+  <span class="text-gray-700 dark:text-gray-200">
+  <div class="bg-white dark:bg-gray-950">
+  ```
+- **No inline styles**. Tailwind utilities only.
+- **Spacing scale**: use Tailwind's default 4px grid (`p-4`, `gap-6`, etc.); avoid arbitrary values unless unavoidable.
+
+### Icons
+FontAwesome via `@fortawesome/vue-fontawesome` + `FontAwesomeIcon`. Import individual icons from `@fortawesome/free-solid-svg-icons` (or `free-regular-svg-icons`). Never import the whole library.
+
+### State Management — Pinia
+
+Use `defineStore` with Composition API (setup) syntax only. Key stores:
+- **`useLoginStore()`** — `jwtToken`, `userInfo`, `permissions`, `isOwner`, `isImpersonating`, `impersonateUser()`, `exitImpersonation()`
+- **`useNotificationsStore()`** — `createNotification({ kind, title, description })`
+- **`useThemeStore()`** — `isLight`, `isDark`
+
+### Data Fetching — Pinia Colada
+Docs: https://pinia-colada.esm.dev/
+
+All queries live in `frontend/src/queries/<domain>/`. Use `defineQuery` from `@pinia/colada`.
+
+**Standard paginated query pattern:**
+```ts
+export const useSystems = defineQuery(() => {
+  const loginStore = useLoginStore()
+  const pageNum = ref(1)
+  const pageSize = ref(DEFAULT_PAGE_SIZE)
+  const textFilter = ref('')
+  const debouncedTextFilter = ref('')
+
+  const { state, asyncStatus, ...rest } = useQuery({
+    key: () => [SYSTEMS_KEY, { pageNum: pageNum.value, textFilter: debouncedTextFilter.value }],
+    enabled: () => !!loginStore.jwtToken,
+    query: () => getSystems(pageNum.value, pageSize.value, debouncedTextFilter.value),
+  })
+
+  watch(() => textFilter.value, useDebounceFn(() => {
+    if (textFilter.value.length === 0 || textFilter.value.length >= MIN_SEARCH_LENGTH) {
+      debouncedTextFilter.value = textFilter.value
+      pageNum.value = 1
+    }
+  }, 500))
+
+  return { state, asyncStatus, pageNum, pageSize, textFilter, ...rest }
+})
+```
+
+- Query key must include all filter/page values — changes trigger automatic refetch.
+- Always reset `pageNum` to 1 when a filter changes.
+- `enabled` guard: always check `!!loginStore.jwtToken` AND any required permissions or route params.
+- **`defineQuery`** for auto-executing queries; **`defineQueryOptions`** for queries triggered by component state (e.g. a drawer opening).
+- Infinite queries: `useInfiniteQuery` with `staleTime: 0` and `gcTime: 0`.
+
+**Mutation pattern:**
+```ts
+const { mutate, isLoading } = useMutation({
+  mutation: (payload: CreateSystemPayload) => postSystem(payload),
+  onSuccess(data, vars) {
+    setTimeout(() => {
+      notificationsStore.createNotification({ kind: 'success', title: t('systems.system_created') })
+    }, 500)
+    emit('close')
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [SYSTEMS_KEY] })
+    queryCache.invalidateQueries({ key: [SYSTEMS_TOTAL_KEY] })
+  },
+  onError: (error) => {
+    validationIssues.value = getValidationIssues(error as AxiosError, 'systems')
+  },
+})
+```
+
+- Toast notifications after close must be delayed 500 ms so they appear after the drawer/modal animation.
+- Always invalidate in `onSettled` (not `onSuccess`) — runs whether mutation succeeded or failed.
+- Always invalidate both the list key AND the total count key.
+
+### Lib Modules (`src/lib/`)
+One file per domain. Exports: valibot schemas, TypeScript types, API functions, query key constant.
+
+```ts
+export const X_KEY = 'x'
+export const CreateXSchema = v.object({ name: v.pipe(v.string(), v.nonEmpty('x.name_required')) })
+export type CreateX = v.InferOutput<typeof CreateXSchema>
+export const getX = () => axios.get<...>(`${API_URL}/x`, { headers: { Authorization: `Bearer ${loginStore.jwtToken}` } }).then(r => r.data.data)
+```
+
+Error strings in valibot validators are i18n keys.
+
+### i18n
+- Templates: `$t('key')`. Script setup: `const { t } = useI18n()` → `t('key')`.
+- **Add new keys only to `src/i18n/en/translation.json`**. Never edit Italian or other locale files unless explicitly asked.
+- Top-level namespace = domain (`"systems"`, `"customers"`, `"common"`, etc.). Keys in `snake_case`.
+
+### Permissions
+Use `canRead*()`, `canManage*()`, `canDestroy*()` from `@/lib/permissions` to guard UI elements and `enabled` conditions.
+
+## Your Responsibilities
+
+1. **Build and refine** Vue components and views following all conventions above.
+2. **Design system alignment**: ensure all UI uses `@nethesis/vue-components` primitives, Tailwind utilities, and established spacing/colour tokens. Refer to the Storybook for correct prop usage.
+3. **Audit and fix accessibility**: missing `alt` text, unlabelled controls, non-semantic markup, missing ARIA attributes, poor focus order, contrast violations.
+4. **Implement accessible patterns**: focus traps in modals/drawers, `aria-live` regions, logical heading hierarchy, keyboard-operable widgets.
+5. **Pinia Colada queries and mutations**: create or fix `defineQuery` / `useMutation` patterns following the conventions above.
+6. **UX review and improvement**: evaluate flows, form design, loading/error/empty/success states, information hierarchy, progressive disclosure.
+
+## Constraints
+
+- DO NOT touch Go backend files, migration SQL, or any non-`frontend/` code.
+- DO NOT remove or rewrite functional logic unrelated to the task.
+- DO NOT bypass `@nethesis/vue-components` — always prefer its components over raw HTML when they meet the need. Check the Storybook if unsure.
+- DO NOT add inline styles; use Tailwind utility classes only.
+- DO NOT add i18n keys to Italian or other locale files unless explicitly asked.
+- NEVER use hardcoded strings in components — always use i18n keys, even for button labels, error messages, notification titles, etc.
+- ALWAYS preserve the license header on every file you edit or create.
+- ALWAYS use semantic HTML before reaching for ARIA roles.
+
+## UX Approach
+
+1. **Feedback at every state**: loading → skeleton or spinner; error → inline notification with a human-readable message and recovery action; success → toast delayed 500 ms after modal/drawer close.
+2. **Form usability**: visible labels (not just placeholders), blur-triggered inline validation, required field markers, submit button disabled while mutation is in-flight.
+3. **Empty states**: meaningful title + description + primary action using `NeEmptyState`.
+4. **Progressive disclosure**: hide advanced options behind an expandable section.
+5. **Consistency**: match existing patterns in the codebase before introducing new ones.
+6. **Destructive actions**: always require a confirmation modal; never set them as the primary action.
+
+## Accessibility Approach
+
+1. Identify the WCAG success criterion being violated (e.g., 1.1.1, 4.1.2).
+2. Apply the minimal fix — prefer native semantics over ARIA overrides.
+3. Verify focus management: modals/drawers must trap focus and return it to the trigger on close.
+4. Announce dynamic updates: `aria-live="polite"` for non-urgent changes; `aria-live="assertive"` only for critical errors.
+5. Keyboard operability: every interactive element reachable via Tab, operable via Enter/Space. Custom widgets follow the [ARIA APG](https://www.w3.org/WAI/ARIA/apg/) keyboard patterns.
+6. Test mentally with a screen reader model: announce state changes, avoid redundant announcements, expose meaningful labels.
+
+## Output Format
+
+When auditing, produce a prioritised list:
+```
+[CRITICAL] <criterion> — <element/component> — <fix>
+[HIGH]     <criterion> — <element/component> — <fix>
+[MEDIUM]   <criterion> — <element/component> — <fix>
+[LOW]      <criterion> — <element/component> — <fix>
+```
+
+When implementing changes, make targeted edits to the affected files and briefly note which convention or WCAG criterion each change addresses.
+
+## /a11y-fix
+
+Audit the specified file(s) for WCAG 2.1/2.2 AA violations and automatically apply fixes.
+
+1. **Read** the target file(s) to understand the current markup and logic.
+2. **Identify** every accessibility issue and classify by severity (`[CRITICAL]` / `[HIGH]` / `[MEDIUM]` / `[LOW]`).
+3. **Fix** each issue directly in the file. Prefer native semantic HTML before ARIA overrides.
+4. **Report** what was changed and which WCAG criterion each fix addresses.
+
+Checklist:
+- [ ] All images have meaningful `alt` text (or `alt=""` if decorative) — WCAG 1.1.1
+- [ ] All form controls have a visible `label` via the Ne-component `label` prop — WCAG 1.3.1, 4.1.2
+- [ ] Color is never the sole means of conveying information — WCAG 1.4.1
+- [ ] Interactive elements are reachable and operable via keyboard (Tab / Enter / Space) — WCAG 2.1.1
+- [ ] Focus is trapped inside `NeModal` / `NeDrawer` while open; returned to trigger on close — WCAG 2.4.3
+- [ ] Logical heading hierarchy; use `NeHeading` `tag` + `level` props — WCAG 1.3.1
+- [ ] Dynamic content updates use `aria-live="polite"` (non-urgent) or `aria-live="assertive"` (critical errors) — WCAG 4.1.3
+- [ ] No positive `tabindex` values — WCAG 2.4.3
+- [ ] Icon-only controls have `aria-label` — WCAG 4.1.2
+- [ ] Loading states use `NeSkeleton`; errors use `NeInlineNotification` — WCAG 4.1.3
+
+## /design-check
+
+Audit the specified file(s) for design system drift and automatically fix deviations.
+
+1. **Read** the target file(s).
+2. **Check** every item in the checklist below.
+3. **Fix** all deviations in-place.
+4. **Summarise** what was changed, grouped by category.
+
+Checklist:
+
+**Component library**
+- [ ] No raw `<button>`, `<input>`, `<select>`, `<table>` where a Ne-component exists
+- [ ] `NeButton` uses the correct `kind` and has `loading` bound during mutations
+- [ ] Form controls always have `label`, `id`, and `invalidMessage` props bound
+- [ ] Loading → `NeSkeleton`; empty → `NeEmptyState` with title + description + action; inline errors → `NeInlineNotification`; status → `NeBadgeV2`
+
+**Tailwind CSS v4**
+- [ ] Primary interactive colour is `sky-600` (hover `sky-700`); no hard-coded hex colours
+- [ ] Every colour class has a paired dark variant (`text-gray-700 dark:text-gray-200`, etc.)
+- [ ] No inline `style` attributes — Tailwind utilities only
+- [ ] No arbitrary values (e.g. `w-[137px]`) unless genuinely unavoidable
+- [ ] Spacing follows the 4px grid (`p-4`, `gap-6`, `mt-2`, etc.)
+
+**Icons**
+- [ ] Icons use `FontAwesomeIcon`; imported individually — no whole-library imports
+
+**i18n & conventions**
+- [ ] All user-visible strings use `$t()` / `t()` — no hardcoded text
+- [ ] New keys added only to `src/i18n/en/translation.json`, `snake_case`, correct domain namespace
+- [ ] License header present; `<script setup lang="ts">`; `@/` path alias used throughout
diff --git a/backend/.render-build-trigger b/backend/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/backend/.render-build-trigger
+++ b/backend/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/collect/.render-build-trigger b/collect/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/collect/.render-build-trigger
+++ b/collect/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/frontend/.render-build-trigger b/frontend/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/frontend/.render-build-trigger
+++ b/frontend/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index c0fbe81ea..a6886a291 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "my-nethesis-ui",
-  "version": "0.5.0",
+  "version": "0.6.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "my-nethesis-ui",
-      "version": "0.5.0",
+      "version": "0.6.1",
       "dependencies": {
         "@fontsource/poppins": "^5.2.6",
         "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -16,12 +16,13 @@
         "@logto/vue": "^3.0.8",
         "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
         "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-        "@nethesis/vue-components": "^3.7.0",
+        "@nethesis/vue-components": "^3.8.0",
         "@pinia/colada": "^1.1.0",
         "@tailwindcss/vite": "^4.1.10",
         "@vuepic/vue-datepicker": "^12.1.0",
         "@vueuse/core": "^13.4.0",
         "axios": "^1.11.0",
+        "libphonenumber-js": "^1.12.42",
         "lodash": "^4.17.21",
         "pinia": "^3.0.1",
         "tailwindcss": "^4.1.10",
@@ -1730,9 +1731,9 @@
       }
     },
     "node_modules/@nethesis/vue-components": {
-      "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-3.7.0.tgz",
-      "integrity": "sha512-BXXjdyHfKf7vBJHzaAfoUaaMYJ+1a92+7f63OS8T/t9UNvGSb+jCCki6VndQrEkNbJ7SaLZYC7MPnbxK5n3L9A==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@nethesis/vue-components/-/vue-components-3.8.0.tgz",
+      "integrity": "sha512-z6+FH1C1/vJf498t/B8lGBpZcxLt/lwHNASiSn/xmtSE4P9pdKNL27jsrVJpokN+rlg7ctLXhm/kE/WMK8cZ4w==",
       "dependencies": {
         "@fontsource/poppins": "^5.2.6",
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
@@ -5877,6 +5878,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/libphonenumber-js": {
+      "version": "1.12.42",
+      "resolved": "https://registry.npmjs.org/libphonenumber-js/-/libphonenumber-js-1.12.42.tgz",
+      "integrity": "sha512-oKQFPTibqQwZZkChCDVMFVJXMZdyJNqDWZWYNn8BgyAaK/6yFJEowxCY0RVFirRyWP63hMRuKlkSEd9qlvbWXg==",
+      "license": "MIT"
+    },
     "node_modules/lightningcss": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 5391a6455..eb7202bab 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -26,12 +26,13 @@
     "@logto/vue": "^3.0.8",
     "@nethesis/nethesis-light-svg-icons": "github:nethesis/Font-Awesome#ns-light",
     "@nethesis/nethesis-solid-svg-icons": "github:nethesis/Font-Awesome#ns-solid",
-    "@nethesis/vue-components": "^3.7.0",
+    "@nethesis/vue-components": "^3.8.0",
     "@pinia/colada": "^1.1.0",
     "@tailwindcss/vite": "^4.1.10",
     "@vuepic/vue-datepicker": "^12.1.0",
     "@vueuse/core": "^13.4.0",
     "axios": "^1.11.0",
+    "libphonenumber-js": "^1.12.42",
     "lodash": "^4.17.21",
     "pinia": "^3.0.1",
     "tailwindcss": "^4.1.10",
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 2209a65af..95de53456 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -172,7 +172,7 @@
   --primary-inverted-neutral: var(--color-gray-900);
   --secondary: var(--color-indigo-500);
   --secondary-neutral: var(--color-gray-200);
-  --tertiary-neutral: var(--color-gray-300);
+  --tertiary-neutral: var(--color-gray-400);
   --danger: var(--color-rose-500);
   --placeholder: var(--color-gray-500);
 
diff --git a/frontend/src/components/CounterCard.vue b/frontend/src/components/CounterCard.vue
index 56307c334..1c36b0054 100644
--- a/frontend/src/components/CounterCard.vue
+++ b/frontend/src/components/CounterCard.vue
@@ -43,9 +43,9 @@ const hasDefaultSlot = computed(() => !!slots.default)
           <FontAwesomeIcon
             v-if="icon"
             :icon="icon"
-            class="size-5 text-gray-600 dark:text-gray-300"
+            class="text-tertiary-neutral dark:text-tertiary-neutral size-5"
           />
-          <NeHeading tag="h6" class="text-gray-600 dark:text-gray-300">
+          <NeHeading tag="h6" class="text-tertiary-neutral dark:text-tertiary-neutral">
             {{ uppercaseTitle ? title.toUpperCase() : title }}
           </NeHeading>
         </div>
diff --git a/frontend/src/components/DataItem.vue b/frontend/src/components/DataItem.vue
index 6052048ba..e2801670b 100644
--- a/frontend/src/components/DataItem.vue
+++ b/frontend/src/components/DataItem.vue
@@ -5,10 +5,10 @@
 
 <template>
   <div class="flex justify-between gap-2 py-4">
-    <div class="font-medium">
+    <div class="text-tertiary-neutral dark:text-tertiary-neutral font-medium">
       <slot name="label"></slot>
     </div>
-    <span class="text-end text-gray-600 dark:text-gray-300">
+    <span class="text-secondary-neutral dark:text-secondary-neutral text-end">
       <slot name="data"></slot>
     </span>
   </div>
diff --git a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
index 341c7b60b..349cf85a0 100644
--- a/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
+++ b/frontend/src/components/customers/CreateOrEditCustomerDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeInlineNotification,
   NeTextArea,
   NeCombobox,
+  NeFormItemLabel,
   type NeComboboxOption,
   getPreference,
 } from '@nethesis/vue-components'
@@ -36,6 +37,7 @@ import type { AxiosError } from 'axios'
 import { getCommonLanguagesOptions } from '@/lib/locale'
 import { getBrowserLocale } from '@/i18n'
 import { useLoginStore } from '@/stores/login'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentCustomer = undefined } = defineProps<{
   isShown: boolean
@@ -123,6 +125,7 @@ const mainContact = ref('')
 const mainContactRef = useTemplateRef<HTMLInputElement>('mainContactRef')
 const email = ref('')
 const emailRef = useTemplateRef<HTMLInputElement>('emailRef')
+const countryCode = ref('')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
 const language = ref('it')
@@ -168,7 +171,17 @@ function onShow() {
     city.value = currentCustomer.custom_data?.city || ''
     mainContact.value = currentCustomer.custom_data?.main_contact || ''
     email.value = currentCustomer.custom_data?.email || ''
-    phone.value = currentCustomer.custom_data?.phone || ''
+
+    // Parse phone number to extract country code and local part
+    if (currentCustomer.custom_data?.phone) {
+      const parsed = parsePhoneForForm(currentCustomer.custom_data.phone)
+      countryCode.value = parsed.countryCode
+      phone.value = parsed.phone
+    } else {
+      countryCode.value = 'it'
+      phone.value = ''
+    }
+
     language.value = currentCustomer.custom_data?.language || ''
     notes.value = currentCustomer.custom_data?.notes || ''
   } else {
@@ -179,6 +192,7 @@ function onShow() {
     city.value = ''
     mainContact.value = ''
     email.value = ''
+    countryCode.value = 'it'
     phone.value = ''
     language.value = 'it'
     notes.value = ''
@@ -268,7 +282,7 @@ async function saveCustomer() {
       city: city.value,
       main_contact: mainContact.value,
       email: email.value,
-      phone: phone.value,
+      phone: combinePhoneParts(countryCode.value, phone.value),
       language: language.value,
       notes: notes.value,
     },
@@ -387,18 +401,41 @@ async function saveCustomer() {
           :optional-label="t('common.optional')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('organizations.phone_number')"
-          :invalid-message="
-            validationIssues.custom_data_phone?.[0] ? $t(validationIssues.custom_data_phone[0]) : ''
-          "
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('organizations.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="
+                validationIssues.custom_data_phone?.[0]
+                  ? t(validationIssues.custom_data_phone[0])
+                  : ''
+              "
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- language -->
         <NeCombobox
           ref="languageRef"
diff --git a/frontend/src/components/customers/CustomerInfoCard.vue b/frontend/src/components/customers/CustomerInfoCard.vue
index 41abbd4a0..fdaf8ce8f 100644
--- a/frontend/src/components/customers/CustomerInfoCard.vue
+++ b/frontend/src/components/customers/CustomerInfoCard.vue
@@ -23,6 +23,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditCustomerDrawer from './CreateOrEditCustomerDrawer.vue'
 import { getLanguageLabel } from '@/lib/locale'
+import { formatPhoneForDisplay } from '@/lib/phone'
 
 const { t } = useI18n()
 const { state: customerDetail, asyncStatus } = useCustomerDetail()
@@ -113,6 +114,7 @@ function getKebabMenuItems() {
               :href="`mailto:${customerDetail.data.custom_data.email}`"
               target="_blank"
               rel="noopener noreferrer"
+              class="break-all"
             >
               {{ customerDetail.data.custom_data.email }}
             </NeLink>
@@ -129,7 +131,7 @@ function getKebabMenuItems() {
               v-if="customerDetail.data.custom_data.phone"
               :href="`tel:${customerDetail.data.custom_data.phone}`"
             >
-              {{ customerDetail.data.custom_data.phone }}
+              {{ formatPhoneForDisplay(customerDetail.data.custom_data.phone) }}
             </NeLink>
             <template v-else>-</template>
           </template>
diff --git a/frontend/src/components/dashboard/ApplicationsCounterCard.vue b/frontend/src/components/dashboard/ApplicationsCounterCard.vue
index 24ee03942..31b07c5fe 100644
--- a/frontend/src/components/dashboard/ApplicationsCounterCard.vue
+++ b/frontend/src/components/dashboard/ApplicationsCounterCard.vue
@@ -28,7 +28,7 @@ const { state: applicationsTotal } = useApplicationsTotal()
       <NeBadgeV2 kind="blue">
         <FontAwesomeIcon :icon="faCircleInfo" class="size-4" />
 
-        {{ t('applications.num_unassigned', { num: applicationsTotal.data?.unassigned ?? 0 }) }}
+        {{ t('applications.num_unassigned', { count: applicationsTotal.data?.unassigned ?? 0 }) }}
       </NeBadgeV2>
     </div>
   </CounterCard>
diff --git a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
index 1078997d9..068ff3833 100644
--- a/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
+++ b/frontend/src/components/distributors/CreateOrEditDistributorDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeInlineNotification,
   NeTextArea,
   NeCombobox,
+  NeFormItemLabel,
   type NeComboboxOption,
   getPreference,
 } from '@nethesis/vue-components'
@@ -36,6 +37,7 @@ import type { AxiosError } from 'axios'
 import { getCommonLanguagesOptions } from '@/lib/locale'
 import { getBrowserLocale } from '@/i18n'
 import { useLoginStore } from '@/stores/login'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentDistributor = undefined } = defineProps<{
   isShown: boolean
@@ -125,6 +127,7 @@ const mainContact = ref('')
 const mainContactRef = useTemplateRef<HTMLInputElement>('mainContactRef')
 const email = ref('')
 const emailRef = useTemplateRef<HTMLInputElement>('emailRef')
+const countryCode = ref('')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
 const language = ref('it')
@@ -170,7 +173,17 @@ function onShow() {
     city.value = currentDistributor.custom_data?.city || ''
     mainContact.value = currentDistributor.custom_data?.main_contact || ''
     email.value = currentDistributor.custom_data?.email || ''
-    phone.value = currentDistributor.custom_data?.phone || ''
+
+    // Parse phone number to extract country code and local part
+    if (currentDistributor.custom_data?.phone) {
+      const parsed = parsePhoneForForm(currentDistributor.custom_data.phone)
+      countryCode.value = parsed.countryCode
+      phone.value = parsed.phone
+    } else {
+      countryCode.value = 'it'
+      phone.value = ''
+    }
+
     language.value = currentDistributor.custom_data?.language || ''
     notes.value = currentDistributor.custom_data?.notes || ''
   } else {
@@ -181,6 +194,7 @@ function onShow() {
     city.value = ''
     mainContact.value = ''
     email.value = ''
+    countryCode.value = 'it'
     phone.value = ''
     language.value = 'it'
     notes.value = ''
@@ -270,7 +284,7 @@ async function saveDistributor() {
       city: city.value,
       main_contact: mainContact.value,
       email: email.value,
-      phone: phone.value,
+      phone: combinePhoneParts(countryCode.value, phone.value),
       language: language.value,
       notes: notes.value,
     },
@@ -393,18 +407,41 @@ async function saveDistributor() {
           :optional-label="t('common.optional')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('organizations.phone_number')"
-          :invalid-message="
-            validationIssues.custom_data_phone?.[0] ? $t(validationIssues.custom_data_phone[0]) : ''
-          "
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('organizations.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="
+                validationIssues.custom_data_phone?.[0]
+                  ? t(validationIssues.custom_data_phone[0])
+                  : ''
+              "
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- language -->
         <NeCombobox
           ref="languageRef"
diff --git a/frontend/src/components/distributors/DistributorInfoCard.vue b/frontend/src/components/distributors/DistributorInfoCard.vue
index 0bf61e279..2db46d525 100644
--- a/frontend/src/components/distributors/DistributorInfoCard.vue
+++ b/frontend/src/components/distributors/DistributorInfoCard.vue
@@ -23,6 +23,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditDistributorDrawer from './CreateOrEditDistributorDrawer.vue'
 import { getLanguageLabel } from '@/lib/locale'
+import { formatPhoneForDisplay } from '@/lib/phone'
 
 const { t } = useI18n()
 const { state: distributorDetail, asyncStatus } = useDistributorDetail()
@@ -113,6 +114,7 @@ function getKebabMenuItems() {
               :href="`mailto:${distributorDetail.data.custom_data.email}`"
               target="_blank"
               rel="noopener noreferrer"
+              class="break-all"
             >
               {{ distributorDetail.data.custom_data.email }}
             </NeLink>
@@ -129,7 +131,7 @@ function getKebabMenuItems() {
               v-if="distributorDetail.data.custom_data.phone"
               :href="`tel:${distributorDetail.data.custom_data.phone}`"
             >
-              {{ distributorDetail.data.custom_data.phone }}
+              {{ formatPhoneForDisplay(distributorDetail.data.custom_data.phone) }}
             </NeLink>
             <template v-else>-</template>
           </template>
diff --git a/frontend/src/components/organizations/ImportOrganizationsModal.vue b/frontend/src/components/organizations/ImportOrganizationsModal.vue
new file mode 100644
index 000000000..80abcfd6e
--- /dev/null
+++ b/frontend/src/components/organizations/ImportOrganizationsModal.vue
@@ -0,0 +1,482 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeFileInput,
+  NeInlineNotification,
+  NeModal,
+  NeRadioSelection,
+  focusElement,
+  type RadioOption,
+  NeTooltip,
+  NeFormItemLabel,
+} from '@nethesis/vue-components'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import {
+  type ImportValidationResult,
+  type ImportConfirmResult,
+  type ImportRow,
+} from '@/lib/organizations/organizations'
+import { useNotificationsStore } from '@/stores/notifications'
+import ImportOrganizationsPreviewTable from './ImportOrganizationsPreviewTable.vue'
+import capitalize from 'lodash/capitalize'
+
+const props = defineProps<{
+  isShown: boolean
+  entityName: 'distributors' | 'resellers' | 'customers'
+  entityLabel: string
+  cacheKeys: {
+    main: string
+    total: string
+  }
+  api: {
+    getTemplate: () => Promise<Blob>
+    validate: (file: File) => Promise<ImportValidationResult>
+    confirm: (importId: string, override: boolean) => Promise<ImportConfirmResult>
+  }
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const queryCache = useQueryCache()
+const notificationsStore = useNotificationsStore()
+
+// step: 'upload' | 'preview'
+const step = ref<'upload' | 'preview'>('upload')
+
+const csvFile = ref<File | null>(null)
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+const fileValidationError = ref('')
+const validationResult = ref<ImportValidationResult | null>(null)
+const downloadingTemplate = ref(false)
+
+const ERROR_PREVIEW_COUNT = 5
+const ERROR_INCREMENT = 5
+const visibleErrorCount = ref(ERROR_PREVIEW_COUNT)
+const visibleWarningCount = ref(ERROR_PREVIEW_COUNT)
+const existingOrgsOption = ref<'skip' | 'update'>('skip')
+const importTypeOptions = computed<RadioOption[]>(() => [
+  { id: 'skip', label: t('import.organizations.import_type_skip') },
+  { id: 'update', label: t('import.organizations.import_type_overwrite') },
+])
+
+const errorRows = computed(
+  () => validationResult.value?.rows.filter((r) => r.status === 'error') ?? [],
+)
+const warningRows = computed(
+  () => validationResult.value?.rows.filter((r) => r.status === 'warning') ?? [],
+)
+const visibleErrorRows = computed(() => errorRows.value.slice(0, visibleErrorCount.value))
+const hiddenErrorCount = computed(() =>
+  Math.max(0, errorRows.value.length - visibleErrorCount.value),
+)
+const visibleWarningRows = computed(() => warningRows.value.slice(0, visibleWarningCount.value))
+const hiddenWarningCount = computed(() =>
+  Math.max(0, warningRows.value.length - visibleWarningCount.value),
+)
+
+// Count of orgs to import based on the selected option
+const importCount = computed(() => {
+  if (!validationResult.value) return 0
+  if (existingOrgsOption.value === 'skip') {
+    return validationResult.value.valid_rows
+  } else {
+    return validationResult.value.valid_rows + validationResult.value.warning_rows
+  }
+})
+
+const singleEntity = computed(() => {
+  switch (props.entityName) {
+    case 'distributors':
+      return t('organizations.distributors_lc', { count: 1 })
+    case 'resellers':
+      return t('organizations.resellers_lc', { count: 1 })
+    case 'customers':
+      return t('organizations.customers_lc', { count: 1 })
+    default:
+      return props.entityLabel
+  }
+})
+
+// ---------------------------------------------------------------
+// Validate mutation
+// ---------------------------------------------------------------
+const {
+  mutate: validateMutate,
+  isLoading: validateLoading,
+  reset: validateReset,
+  error: validateError,
+} = useMutation({
+  mutation: (file: File) => props.api.validate(file),
+  onSuccess(data) {
+    validationResult.value = data
+    step.value = 'preview'
+  },
+  onError: (error) => {
+    console.error(`Error validating ${props.entityName} import:`, error)
+  },
+})
+
+// ---------------------------------------------------------------
+// Confirm mutation
+// ---------------------------------------------------------------
+const {
+  mutate: confirmMutate,
+  isLoading: confirmLoading,
+  reset: confirmReset,
+  error: confirmError,
+} = useMutation({
+  mutation: () => {
+    if (!validationResult.value) throw new Error('No validation result')
+    const override = existingOrgsOption.value === 'update'
+    return props.api.confirm(validationResult.value.import_id, override)
+  },
+  onSuccess(data) {
+    emit('close')
+    setTimeout(() => {
+      const resultParts: string[] = []
+      if (data.created > 0)
+        resultParts.push(t('import.import_result_created', { count: data.created }))
+      if (data.updated > 0)
+        resultParts.push(t('import.import_result_updated', { count: data.updated }))
+      if (data.skipped > 0)
+        resultParts.push(t('import.import_result_skipped', { count: data.skipped }))
+      if (data.failed > 0)
+        resultParts.push(t('import.import_result_failed', { count: data.failed }))
+
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t(`${props.entityName}.${props.entityName}_imported`),
+        description: capitalize(resultParts.join(', ')),
+      })
+    }, 500)
+  },
+  onError: (error) => {
+    console.error(`Error confirming ${props.entityName} import:`, error)
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [props.cacheKeys.main] })
+    queryCache.invalidateQueries({ key: [props.cacheKeys.total] })
+  },
+})
+
+// ---------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      reset()
+      focusElement(fileInputRef)
+    }
+  },
+)
+
+function reset() {
+  step.value = 'upload'
+  csvFile.value = null
+  fileValidationError.value = ''
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingOrgsOption.value = 'skip'
+  validateReset()
+  confirmReset()
+}
+
+function onClose() {
+  emit('close')
+}
+
+function onFileSelect() {
+  fileValidationError.value = ''
+  validateReset()
+}
+
+function goBack() {
+  step.value = 'upload'
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingOrgsOption.value = 'skip'
+  confirmReset()
+}
+
+function showMoreErrors() {
+  visibleErrorCount.value += ERROR_INCREMENT
+}
+
+function showMoreWarnings() {
+  visibleWarningCount.value += ERROR_INCREMENT
+}
+
+// ---------------------------------------------------------------
+// Template download
+// ---------------------------------------------------------------
+async function downloadTemplate() {
+  downloadingTemplate.value = true
+  try {
+    const blob = await props.api.getTemplate()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${props.entityName}_import_template.csv`
+    link.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Cannot download template:', error)
+  } finally {
+    downloadingTemplate.value = false
+  }
+}
+
+// ---------------------------------------------------------------
+// Validate
+// ---------------------------------------------------------------
+function onValidate() {
+  fileValidationError.value = ''
+
+  if (!csvFile.value) {
+    fileValidationError.value = t('import.import_no_file_selected')
+    return
+  }
+
+  if (!csvFile.value.name.endsWith('.csv') && csvFile.value.type !== 'text/csv') {
+    fileValidationError.value = t('import.import_file_must_be_csv')
+    return
+  }
+
+  validateMutate(csvFile.value)
+}
+
+function errorSummaryText(row: ImportRow): string {
+  const name = String(row.data?.company_name || '-')
+  const issue = row.errors?.[0]
+
+  if (!issue) {
+    return t('import.import_row_and_name', { row_number: row.row_number, name })
+  }
+
+  const message = t(`import.import_error_${issue.field}_${issue.message}`, issue.values)
+  return t('import.import_row_and_message', {
+    row_number: row.row_number,
+    name,
+    message,
+  })
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="isShown"
+    :size="step === 'preview' ? 'xxl' : 'md'"
+    :title="$t(`${entityName}.import_${entityName}`)"
+    :close-aria-label="$t('common.close')"
+    :cancel-label="$t('common.cancel')"
+    :primary-label="
+      step === 'upload'
+        ? $t('common.next')
+        : $t(`import.organizations.import_num_${entityName}`, { count: importCount })
+    "
+    :primary-button-disabled="
+      step === 'upload' ? validateLoading : confirmLoading || importCount === 0
+    "
+    :primary-button-loading="step === 'upload' ? validateLoading : confirmLoading"
+    :secondary-label="step === 'preview' ? $t('common.previous') : undefined"
+    secondary-button-kind="tertiary"
+    :secondary-button-disabled="confirmLoading"
+    @close="onClose"
+    @primary-click="step === 'upload' ? onValidate() : confirmMutate()"
+    @secondary-click="goBack"
+  >
+    <!-- ===== STEP 1: UPLOAD ===== -->
+    <div v-if="step === 'upload'" class="space-y-6">
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {{
+          $t('import.organizations.import_description', {
+            entities: t(`organizations.${entityName}_lc`, { count: 2 }),
+            entity: singleEntity,
+          })
+        }}
+      </p>
+      <div class="space-y-1.5">
+        <NeFileInput
+          ref="fileInputRef"
+          v-model="csvFile"
+          :label="$t('import.import_file_label')"
+          :dropzone-label="$t('ne_file_input.drag_and_drop_or_click_to_upload')"
+          :invalid-message="fileValidationError"
+          accept=".csv,text/csv"
+          :disabled="validateLoading"
+          @select="onFileSelect"
+        />
+        <i18n-t
+          keypath="import.import_to_get_started"
+          tag="p"
+          class="text-gray-500 dark:text-gray-400"
+        >
+          <template #link>
+            <button
+              type="button"
+              class="text-primary-700 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-400 font-medium hover:underline"
+              :disabled="downloadingTemplate"
+              @click="downloadTemplate"
+            >
+              {{ $t('import.download_the_template') }}
+            </button>
+          </template>
+        </i18n-t>
+      </div>
+      <NeInlineNotification
+        v-if="validateError"
+        kind="error"
+        :title="$t('import.import_validation_failed')"
+      >
+        <template #description>
+          <i18n-t keypath="import.import_validation_error_message" tag="p">
+            <template #link>
+              <button
+                type="button"
+                class="underline hover:text-rose-800 dark:hover:text-rose-50"
+                :disabled="downloadingTemplate"
+                @click="downloadTemplate"
+              >
+                {{ $t('import.download_the_template_lc') }}
+              </button>
+            </template>
+          </i18n-t>
+        </template>
+      </NeInlineNotification>
+    </div>
+
+    <!-- ===== STEP 2: PREVIEW ===== -->
+    <div v-else-if="step === 'preview' && validationResult" class="space-y-6">
+      <!-- file preview table -->
+      <ImportOrganizationsPreviewTable :rows="validationResult.rows" />
+
+      <!-- existing orgs option -->
+      <NeRadioSelection
+        v-if="warningRows.length > 0"
+        v-model="existingOrgsOption"
+        :options="importTypeOptions"
+        :label="$t('import.organizations.import_existing_label')"
+      >
+        <template #tooltip>
+          <NeTooltip>
+            <template #content>
+              {{ $t('import.organizations.import_existing_tooltip') }}
+            </template>
+          </NeTooltip>
+        </template>
+      </NeRadioSelection>
+
+      <!-- summary -->
+      <div class="text-tertiary-neutral dark:text-tertiary-neutral text-sm">
+        <NeFormItemLabel>{{ $t('import.import_summary') }}</NeFormItemLabel>
+        <p>
+          {{
+            $t('import.organizations.import_summary_detected', {
+              count: validationResult.total_rows,
+            })
+          }}
+        </p>
+        <ul class="mt-1 ml-5 list-disc space-y-0.5">
+          <li>
+            {{
+              $t('import.import_summary_valid', {
+                count: validationResult.valid_rows,
+              })
+            }}
+          </li>
+          <li v-if="validationResult.error_rows > 0" class="text-rose-700 dark:text-rose-500">
+            {{
+              $t('import.import_summary_errors', {
+                count: validationResult.error_rows,
+              })
+            }}
+          </li>
+          <li v-if="validationResult.warning_rows > 0" class="text-amber-700 dark:text-amber-500">
+            {{
+              existingOrgsOption === 'skip'
+                ? $t('import.organizations.import_summary_warnings_skip', {
+                    count: validationResult.warning_rows,
+                  })
+                : $t('import.organizations.import_summary_warnings_update', {
+                    count: validationResult.warning_rows,
+                  })
+            }}
+          </li>
+        </ul>
+      </div>
+
+      <!-- error rows -->
+      <NeInlineNotification
+        v-if="errorRows.length > 0"
+        kind="error"
+        :title="$t('import.import_rows_with_errors', { count: errorRows.length })"
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleErrorRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenErrorCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-rose-800 dark:hover:text-rose-50"
+            @click="showMoreErrors()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenErrorCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- warning rows (existing orgs) -->
+      <NeInlineNotification
+        v-if="warningRows.length > 0"
+        kind="warning"
+        :title="
+          existingOrgsOption === 'skip'
+            ? $t('import.organizations.import_rows_with_warnings_skip', {
+                count: warningRows.length,
+              })
+            : $t('import.organizations.import_rows_with_warnings_update', {
+                count: warningRows.length,
+              })
+        "
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleWarningRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenWarningCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-amber-800 dark:hover:text-amber-50"
+            @click="showMoreWarnings()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenWarningCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- confirm error -->
+      <NeInlineNotification
+        v-if="confirmError"
+        kind="error"
+        :title="$t('import.import_confirm_failed')"
+        :description="(confirmError as Error).message"
+      />
+    </div>
+  </NeModal>
+</template>
diff --git a/frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue b/frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue
new file mode 100644
index 000000000..7fd6fe9e1
--- /dev/null
+++ b/frontend/src/components/organizations/ImportOrganizationsPreviewTable.vue
@@ -0,0 +1,84 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
+import type { ImportRow } from '@/lib/organizations/organizations'
+
+const PREVIEW_ROWS = 5
+
+const props = defineProps<{
+  rows: ImportRow[]
+}>()
+
+const previewRows = computed(() => props.rows.slice(0, PREVIEW_ROWS))
+
+function rowField(row: ImportRow, field: string): string {
+  return String(row.data?.[field] || '-')
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <div
+        class="inline-block rounded-t-md bg-indigo-300 px-3 py-1 text-sm font-medium text-gray-900 dark:bg-indigo-900 dark:text-gray-50"
+      >
+        {{ $t('import.import_file_preview') }}
+      </div>
+      <div class="text-gray-500 dark:text-gray-400">
+        {{ $t('import.import_file_preview_description', { count: PREVIEW_ROWS }) }}
+      </div>
+    </div>
+    <NeTable :aria-label="$t('import.import_file_preview')" card-breakpoint="md">
+      <NeTableHead>
+        <NeTableHeadCell>{{ $t('organizations.name') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.vat_number') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.description') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.address') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.city') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.main_contact') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.email') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('organizations.phone_number') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="row in previewRows" :key="row.row_number">
+          <NeTableCell :data-label="$t('organizations.name')">
+            {{ rowField(row, 'company_name') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.vat_number')">
+            {{ rowField(row, 'vat_number') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.description')">
+            {{ rowField(row, 'description') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.address')">
+            {{ rowField(row, 'address') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.city')">
+            {{ rowField(row, 'city') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.main_contact')">
+            {{ rowField(row, 'main_contact') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.email')">
+            {{ rowField(row, 'email') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('organizations.phone_number')">
+            {{ rowField(row, 'phone') }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </div>
+</template>
diff --git a/frontend/src/components/organizations/OrganizationApplicationsCard.vue b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
index 09ffbed2f..ef1e357e4 100644
--- a/frontend/src/components/organizations/OrganizationApplicationsCard.vue
+++ b/frontend/src/components/organizations/OrganizationApplicationsCard.vue
@@ -76,7 +76,7 @@ const goToApplications = () => {
       </div>
       <div v-if="moreApplications > 0" class="py-3">
         <NeLink @click="goToApplications()">
-          {{ t('common.plus_n_more', { num: moreApplications }) }}
+          {{ t('common.plus_n_more', { count: moreApplications }) }}
         </NeLink>
       </div>
     </div>
diff --git a/frontend/src/components/organizations/OrganizationSystemsCard.vue b/frontend/src/components/organizations/OrganizationSystemsCard.vue
index 49cf625ba..932361fb2 100644
--- a/frontend/src/components/organizations/OrganizationSystemsCard.vue
+++ b/frontend/src/components/organizations/OrganizationSystemsCard.vue
@@ -88,7 +88,7 @@ const goToSystems = () => {
       </div>
       <div v-if="moreSystems > 0" class="py-3">
         <NeLink @click="goToSystems()">
-          {{ t('common.plus_n_more', { num: moreSystems }) }}
+          {{ t('common.plus_n_more', { count: moreSystems }) }}
         </NeLink>
       </div>
     </div>
diff --git a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
index 46b825ee5..039f2150e 100644
--- a/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
+++ b/frontend/src/components/resellers/CreateOrEditResellerDrawer.vue
@@ -12,6 +12,7 @@ import {
   NeInlineNotification,
   NeTextArea,
   NeCombobox,
+  NeFormItemLabel,
   type NeComboboxOption,
   getPreference,
 } from '@nethesis/vue-components'
@@ -36,6 +37,7 @@ import type { AxiosError } from 'axios'
 import { getCommonLanguagesOptions } from '@/lib/locale'
 import { getBrowserLocale } from '@/i18n'
 import { useLoginStore } from '@/stores/login'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentReseller = undefined } = defineProps<{
   isShown: boolean
@@ -123,6 +125,7 @@ const mainContact = ref('')
 const mainContactRef = useTemplateRef<HTMLInputElement>('mainContactRef')
 const email = ref('')
 const emailRef = useTemplateRef<HTMLInputElement>('emailRef')
+const countryCode = ref('')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
 const language = ref('it')
@@ -168,7 +171,17 @@ function onShow() {
     city.value = currentReseller.custom_data?.city || ''
     mainContact.value = currentReseller.custom_data?.main_contact || ''
     email.value = currentReseller.custom_data?.email || ''
-    phone.value = currentReseller.custom_data?.phone || ''
+
+    // Parse phone number to extract country code and local part
+    if (currentReseller.custom_data?.phone) {
+      const parsed = parsePhoneForForm(currentReseller.custom_data.phone)
+      countryCode.value = parsed.countryCode
+      phone.value = parsed.phone
+    } else {
+      countryCode.value = 'it'
+      phone.value = ''
+    }
+
     language.value = currentReseller.custom_data?.language || ''
     notes.value = currentReseller.custom_data?.notes || ''
   } else {
@@ -179,6 +192,7 @@ function onShow() {
     city.value = ''
     mainContact.value = ''
     email.value = ''
+    countryCode.value = 'it'
     phone.value = ''
     language.value = 'it'
     notes.value = ''
@@ -268,7 +282,7 @@ async function saveReseller() {
       city: city.value,
       main_contact: mainContact.value,
       email: email.value,
-      phone: phone.value,
+      phone: combinePhoneParts(countryCode.value, phone.value),
       language: language.value,
       notes: notes.value,
     },
@@ -387,18 +401,41 @@ async function saveReseller() {
           :optional-label="t('common.optional')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('organizations.phone_number')"
-          :invalid-message="
-            validationIssues.custom_data_phone?.[0] ? $t(validationIssues.custom_data_phone[0]) : ''
-          "
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('organizations.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="
+                validationIssues.custom_data_phone?.[0]
+                  ? t(validationIssues.custom_data_phone[0])
+                  : ''
+              "
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- language -->
         <NeCombobox
           ref="languageRef"
diff --git a/frontend/src/components/resellers/ResellerInfoCard.vue b/frontend/src/components/resellers/ResellerInfoCard.vue
index a09457ecc..86b7131c4 100644
--- a/frontend/src/components/resellers/ResellerInfoCard.vue
+++ b/frontend/src/components/resellers/ResellerInfoCard.vue
@@ -23,6 +23,7 @@ import { faPenToSquare } from '@fortawesome/free-solid-svg-icons'
 import { useI18n } from 'vue-i18n'
 import CreateOrEditResellerDrawer from './CreateOrEditResellerDrawer.vue'
 import { getLanguageLabel } from '@/lib/locale'
+import { formatPhoneForDisplay } from '@/lib/phone'
 
 const { t } = useI18n()
 const { state: resellerDetail, asyncStatus } = useResellerDetail()
@@ -113,6 +114,7 @@ function getKebabMenuItems() {
               :href="`mailto:${resellerDetail.data.custom_data.email}`"
               target="_blank"
               rel="noopener noreferrer"
+              class="break-all"
             >
               {{ resellerDetail.data.custom_data.email }}
             </NeLink>
@@ -129,7 +131,7 @@ function getKebabMenuItems() {
               v-if="resellerDetail.data.custom_data.phone"
               :href="`tel:${resellerDetail.data.custom_data.phone}`"
             >
-              {{ resellerDetail.data.custom_data.phone }}
+              {{ formatPhoneForDisplay(resellerDetail.data.custom_data.phone) }}
             </NeLink>
             <template v-else>-</template>
           </template>
diff --git a/frontend/src/components/shell/SideMenu.vue b/frontend/src/components/shell/SideMenu.vue
index cffaa3a37..9bf6b7c7e 100644
--- a/frontend/src/components/shell/SideMenu.vue
+++ b/frontend/src/components/shell/SideMenu.vue
@@ -177,7 +177,7 @@ function loadMenuItemsExpanded() {
         :class="[
           isCurrentRoute(item.to)
             ? 'border-primary-700 dark:border-primary-500 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
-            : 'border-transparent text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50',
+            : 'text-tertiary-neutral dark:text-tertiary-neutral border-transparent hover:text-gray-900 dark:hover:text-gray-50',
           'group flex cursor-pointer items-center gap-x-3 rounded-md border-l-4 px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
         ]"
       >
@@ -195,7 +195,7 @@ function loadMenuItemsExpanded() {
         :class="[
           isCurrentRoute(item.to)
             ? 'text-gray-900 dark:text-gray-50'
-            : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50',
+            : 'text-tertiary-neutral dark:text-tertiary-neutral hover:text-gray-900 dark:hover:text-gray-50',
           'group flex cursor-pointer items-center justify-between rounded-md border-l-4 border-transparent px-3 py-2 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
         ]"
         @click="toggleExpand(item)"
@@ -225,7 +225,7 @@ function loadMenuItemsExpanded() {
                 :class="[
                   isCurrentRoute(child.to)
                     ? 'border-primary-700 dark:border-primary-500 border-l-4 bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50'
-                    : 'text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-50',
+                    : 'text-tertiary-neutral dark:text-tertiary-neutral hover:text-gray-900 dark:hover:text-gray-50',
                   'group flex cursor-pointer items-center gap-x-3 rounded-md px-3 py-1 text-sm leading-6 font-semibold hover:bg-gray-100 dark:hover:bg-gray-800',
                 ]"
               >
diff --git a/frontend/src/components/shell/TopBar.vue b/frontend/src/components/shell/TopBar.vue
index 3ce788d42..c157d061a 100644
--- a/frontend/src/components/shell/TopBar.vue
+++ b/frontend/src/components/shell/TopBar.vue
@@ -84,7 +84,7 @@ function openNotificationsDrawer() {
   >
     <button
       type="button"
-      class="-m-2.5 p-2.5 text-gray-600 transition-colors duration-300 hover:text-gray-900 lg:hidden dark:text-gray-300 dark:hover:text-gray-50"
+      class="text-tertiary-neutral dark:text-tertiary-neutral -m-2.5 p-2.5 transition-colors duration-300 hover:text-gray-900 lg:hidden dark:hover:text-gray-50"
       @click="emit('openSidebar')"
     >
       <span class="sr-only">{{ $t('shell.open_sidebar') }}</span>
diff --git a/frontend/src/components/systems/AdditionalServicesCard.vue b/frontend/src/components/systems/AdditionalServicesCard.vue
index af6e0982f..c83501f49 100644
--- a/frontend/src/components/systems/AdditionalServicesCard.vue
+++ b/frontend/src/components/systems/AdditionalServicesCard.vue
@@ -92,7 +92,9 @@ const sortedServices = computed<ServiceItem[]>(() =>
         <span class="font-medium text-gray-900 dark:text-gray-50">
           {{ service.label }}
         </span>
-        <div class="flex items-center gap-2 text-end text-gray-600 dark:text-gray-300">
+        <div
+          class="text-tertiary-neutral dark:text-tertiary-neutral flex items-center gap-2 text-end"
+        >
           <FontAwesomeIcon
             :icon="service.enabled ? faCircleCheck : faCircleXmark"
             class="size-4"
diff --git a/frontend/src/components/systems/SystemActiveAlertsCard.vue b/frontend/src/components/systems/SystemActiveAlertsCard.vue
index e10faeba3..b2528cdb5 100644
--- a/frontend/src/components/systems/SystemActiveAlertsCard.vue
+++ b/frontend/src/components/systems/SystemActiveAlertsCard.vue
@@ -357,12 +357,12 @@ function formatAlertDetails(alert: Alert): string {
             <div class="space-y-1">
               <div class="flex items-start justify-between gap-2">
                 <div class="flex-1">
-                  <div class="font-medium text-gray-700 dark:text-gray-300">
+                  <div class="dark:text-tertiary-neutral font-medium text-gray-700">
                     {{ getAlertSummaryText(alert) || '-' }}
                   </div>
                   <div
                     v-if="getAlertDescriptionText(alert)"
-                    class="text-sm text-gray-600 dark:text-gray-400"
+                    class="text-tertiary-neutral text-sm dark:text-gray-400"
                   >
                     {{ getAlertDescriptionText(alert) }}
                   </div>
diff --git a/frontend/src/components/systems/SystemApplicationsCard.vue b/frontend/src/components/systems/SystemApplicationsCard.vue
index afd3ce5c0..a92508796 100644
--- a/frontend/src/components/systems/SystemApplicationsCard.vue
+++ b/frontend/src/components/systems/SystemApplicationsCard.vue
@@ -76,7 +76,7 @@ const goToApplications = () => {
       </div>
       <div v-if="moreApplications > 0" class="py-3">
         <NeLink @click="goToApplications()">
-          {{ t('common.plus_n_more', { num: moreApplications }) }}
+          {{ t('common.plus_n_more', { count: moreApplications }) }}
         </NeLink>
       </div>
     </div>
diff --git a/frontend/src/components/systems/SystemBackupsPanel.vue b/frontend/src/components/systems/SystemBackupsPanel.vue
index 3c58314ae..fd0c6f805 100644
--- a/frontend/src/components/systems/SystemBackupsPanel.vue
+++ b/frontend/src/components/systems/SystemBackupsPanel.vue
@@ -222,7 +222,7 @@ function getKebabMenuItems(backup: BackupMetadata): NeDropdownItem[] {
         <div class="text-xs text-gray-500 dark:text-gray-400">
           {{ $t('backups.retention_policy') }}
         </div>
-        <div class="mt-1 text-sm text-gray-600 dark:text-gray-300">
+        <div class="text-tertiary-neutral dark:text-tertiary-neutral mt-1 text-sm">
           {{
             $t('backups.retention_policy_description', {
               slots: maxSlotsLabel,
diff --git a/frontend/src/components/systems/SystemChangesTimeline.vue b/frontend/src/components/systems/SystemChangesTimeline.vue
index 53a385e01..64f08d963 100644
--- a/frontend/src/components/systems/SystemChangesTimeline.vue
+++ b/frontend/src/components/systems/SystemChangesTimeline.vue
@@ -525,7 +525,7 @@ const diffTypeFilterModel = computed<string[]>({
             :class="
               group.isToday
                 ? 'text-indigo-700 dark:text-indigo-500'
-                : 'text-gray-600 dark:text-gray-300'
+                : 'text-tertiary-neutral dark:text-tertiary-neutral'
             "
           >
             {{ group.isToday ? t('system_detail.today') : formatGroupDate(group.date) }}
@@ -553,7 +553,7 @@ const diffTypeFilterModel = computed<string[]>({
           <!-- Group with changes: toggle header -->
           <template v-else-if="group.change_count > 0">
             <button
-              class="flex items-center gap-2 text-sm font-medium text-gray-600 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200"
+              class="text-tertiary-neutral dark:text-tertiary-neutral flex items-center gap-2 text-sm font-medium hover:text-gray-700 dark:hover:text-gray-200"
               @click="toggleGroup(group.date)"
             >
               <FontAwesomeIcon
@@ -614,14 +614,16 @@ const diffTypeFilterModel = computed<string[]>({
                         {{ getSeverityLabel(diff.severity) }}
                       </NeBadgeV2>
                       <!-- Field path -->
-                      <span class="min-w-0 text-sm break-all text-gray-600 dark:text-gray-300">
+                      <span
+                        class="text-tertiary-neutral dark:text-tertiary-neutral min-w-0 text-sm break-all"
+                      >
                         {{ diff.field_path }}
                       </span>
                     </div>
                     <!-- Expand chevron -->
                     <FontAwesomeIcon
                       :icon="expandedDiffs.has(diff.id) ? faAngleUp : faAngleDown"
-                      class="size-4 flex-shrink-0 text-gray-600 dark:text-gray-300"
+                      class="text-tertiary-neutral dark:text-tertiary-neutral size-4 flex-shrink-0"
                     />
                   </div>
 
@@ -633,14 +635,14 @@ const diffTypeFilterModel = computed<string[]>({
                       class="flex items-center gap-4 rounded-sm bg-blue-50 px-1.5 py-0.5 dark:bg-blue-950"
                     >
                       <FontAwesomeIcon :icon="faPen" class="size-3 shrink-0" />
-                      <span class="font-mono text-sm text-gray-700 dark:text-gray-300">
+                      <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">
                         {{ formatDiffValue(diff.previous_value) }}
                       </span>
                       <FontAwesomeIcon
                         :icon="faArrowRight"
                         class="size-4 shrink-0 text-gray-500 dark:text-gray-400"
                       />
-                      <span class="font-mono text-sm text-gray-700 dark:text-gray-300">
+                      <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">
                         {{ formatDiffValue(diff.current_value) }}
                       </span>
                     </div>
@@ -655,7 +657,7 @@ const diffTypeFilterModel = computed<string[]>({
                         class="flex items-center gap-4"
                       >
                         <FontAwesomeIcon :icon="faPlus" class="size-3 shrink-0" />
-                        <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
+                        <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">{{
                           line
                         }}</span>
                       </div>
@@ -671,13 +673,13 @@ const diffTypeFilterModel = computed<string[]>({
                         class="flex items-center gap-4"
                       >
                         <FontAwesomeIcon :icon="faMinus" class="size-3 shrink-0" />
-                        <span class="font-mono text-sm text-gray-700 dark:text-gray-300">{{
+                        <span class="dark:text-tertiary-neutral font-mono text-sm text-gray-700">{{
                           line
                         }}</span>
                       </div>
                     </div>
                     <!-- Timestamp -->
-                    <p class="mt-4 text-xs text-gray-600 dark:text-gray-300">
+                    <p class="text-tertiary-neutral dark:text-tertiary-neutral mt-4 text-xs">
                       {{ formatDateTimeNoSeconds(new Date(diff.created_at), locale, 'UTC') }}
                     </p>
                   </div>
@@ -734,7 +736,7 @@ const diffTypeFilterModel = computed<string[]>({
       <!-- System registration -->
       <div v-if="systemDetailState.data.registered_at" class="relative mb-8 flex items-start">
         <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ formatGroupDate(systemDetailState.data.registered_at.slice(0, 10)) }}
           </span>
         </div>
@@ -743,7 +745,7 @@ const diffTypeFilterModel = computed<string[]>({
           style="left: 139px; top: 7px"
         ></div>
         <div class="flex-1 pl-10">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ t('system_detail.system_registered') }}
           </span>
           <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
@@ -755,7 +757,7 @@ const diffTypeFilterModel = computed<string[]>({
       <!-- System creation -->
       <div v-if="systemDetailState.data.created_at" class="relative mb-8 flex items-start">
         <div class="w-36 flex-shrink-0 pt-0.5 pr-6 text-right">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ formatGroupDate(systemDetailState.data.created_at.slice(0, 10)) }}
           </span>
         </div>
@@ -764,7 +766,7 @@ const diffTypeFilterModel = computed<string[]>({
           style="left: 139px; top: 7px"
         ></div>
         <div class="flex-1 pl-10">
-          <span class="text-sm font-medium text-gray-600 dark:text-gray-300">
+          <span class="text-tertiary-neutral dark:text-tertiary-neutral text-sm font-medium">
             {{ t('system_detail.system_created') }}
           </span>
           <p class="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
diff --git a/frontend/src/components/systems/SystemNetworkCard.vue b/frontend/src/components/systems/SystemNetworkCard.vue
index 1152c345f..921e3703d 100644
--- a/frontend/src/components/systems/SystemNetworkCard.vue
+++ b/frontend/src/components/systems/SystemNetworkCard.vue
@@ -138,7 +138,7 @@ const getNetworkRoleForegroundStyle = (role: string | undefined) => {
             {{ iface.name }}
           </div>
           <!-- type and role -->
-          <div class="mt-1 text-gray-600 dark:text-gray-300">
+          <div class="text-tertiary-neutral dark:text-tertiary-neutral mt-1">
             {{ iface?.type || '-' }}
             <span
               >&bull;
@@ -146,11 +146,14 @@ const getNetworkRoleForegroundStyle = (role: string | undefined) => {
             </span>
           </div>
           <!-- ip address -->
-          <div class="text-gray-600 dark:text-gray-300">
+          <div class="text-tertiary-neutral dark:text-tertiary-neutral">
             {{ getIpAddressWithCidr(iface) }}
           </div>
           <!-- gateway -->
-          <div v-if="iface.props?.gateway" class="text-gray-600 uppercase dark:text-gray-300">
+          <div
+            v-if="iface.props?.gateway"
+            class="text-tertiary-neutral dark:text-tertiary-neutral uppercase"
+          >
             GW: {{ iface.props?.gateway }}
           </div>
         </div>
@@ -161,7 +164,7 @@ const getNetworkRoleForegroundStyle = (role: string | undefined) => {
           <span class="shrink-0 font-medium">
             {{ $t('system_detail.dns_servers') }}
           </span>
-          <span v-if="dnsServers.length" class="text-gray-600 dark:text-gray-300">
+          <span v-if="dnsServers.length" class="text-tertiary-neutral dark:text-tertiary-neutral">
             {{ dnsServers.join(', ') }}
           </span>
           <span v-else>-</span>
diff --git a/frontend/src/components/users/CreateOrEditUserDrawer.vue b/frontend/src/components/users/CreateOrEditUserDrawer.vue
index d102e879b..e9c0a7fba 100644
--- a/frontend/src/components/users/CreateOrEditUserDrawer.vue
+++ b/frontend/src/components/users/CreateOrEditUserDrawer.vue
@@ -12,6 +12,7 @@ import {
   focusElement,
   NeCombobox,
   type NeComboboxOption,
+  NeFormItemLabel,
 } from '@nethesis/vue-components'
 import { computed, ref, useTemplateRef, watch, type Ref, type ShallowRef } from 'vue'
 import {
@@ -38,6 +39,7 @@ import { normalize } from '@/lib/common'
 import { organizationsQuery } from '@/queries/organizations/organizations'
 import { userRolesQuery } from '@/queries/users/userRoles'
 import { USER_FILTERS_KEY } from '@/lib/users/userFilters'
+import { combinePhoneParts, countryCodeComboOptions, parsePhoneForForm } from '@/lib/phone'
 
 const { isShown = false, currentUser = undefined } = defineProps<{
   isShown: boolean
@@ -138,6 +140,7 @@ const userRoles: Ref<NeComboboxOption[]> = ref([])
 const userRoleIdsRef = useTemplateRef<HTMLInputElement>('userRoleIdsRef')
 const phone = ref('')
 const phoneRef = useTemplateRef<HTMLInputElement>('phoneRef')
+const countryCode = ref('')
 const validationIssues = ref<Record<string, string[]>>({})
 
 const fieldRefs: Record<string, Readonly<ShallowRef<HTMLInputElement | null>>> = {
@@ -187,15 +190,25 @@ watch(
         // editing user
         email.value = currentUser.email
         name.value = currentUser.name
-        phone.value = currentUser.phone || ''
         organizationId.value = currentUser.organization?.logto_id || ''
         userRoles.value = mapUserRoles()
+
+        // Parse phone number to extract country code and local part
+        if (currentUser.phone) {
+          const parsed = parsePhoneForForm(currentUser.phone)
+          countryCode.value = parsed.countryCode
+          phone.value = parsed.phone
+        } else {
+          countryCode.value = 'it'
+          phone.value = ''
+        }
       } else {
         // creating user, reset form to defaults
         email.value = ''
         name.value = ''
         organizationId.value = ''
         userRoles.value = []
+        countryCode.value = 'it'
         phone.value = ''
       }
     }
@@ -298,7 +311,7 @@ async function saveUser() {
     name: name.value,
     user_role_ids: userRoles.value.map((role) => role.id),
     organization_id: organizationId.value,
-    phone: phone.value.replace(/[\+\s\.\-]/g, ''), // remove formatting characters from phone number
+    phone: combinePhoneParts(countryCode.value, phone.value),
     custom_data: {},
   }
 
@@ -416,16 +429,37 @@ function getEmailInvalidMessage(): string {
           :user-input-label="t('ne_combobox.user_input_label')"
         />
         <!-- phone -->
-        <NeTextInput
-          ref="phoneRef"
-          v-model="phone"
-          @blur="phone = phone.trim()"
-          :label="$t('users.phone_number')"
-          :invalid-message="validationIssues.phone?.[0] ? $t(validationIssues.phone[0]) : ''"
-          :disabled="saving"
-          :optional="true"
-          :optional-label="t('common.optional')"
-        />
+        <div>
+          <div class="flex items-center justify-between gap-4">
+            <NeFormItemLabel>{{ $t('users.phone_number') }}</NeFormItemLabel>
+            <NeFormItemLabel>{{ $t('common.optional') }}</NeFormItemLabel>
+          </div>
+          <div class="flex gap-4">
+            <!-- country code -->
+            <NeCombobox
+              v-model="countryCode"
+              :options="countryCodeComboOptions"
+              :disabled="saving"
+              :no-results-label="$t('ne_combobox.no_results')"
+              :limited-options-label="$t('ne_combobox.limited_options_label')"
+              :no-options-label="$t('ne_combobox.no_options_label')"
+              :selected-label="$t('ne_combobox.selected')"
+              :user-input-label="$t('ne_combobox.user_input_label')"
+              :optional-label="$t('common.optional')"
+              custom-options-width="17rem"
+            />
+            <!-- local part -->
+            <NeTextInput
+              ref="phoneRef"
+              v-model="phone"
+              @blur="phone = phone.trim()"
+              :invalid-message="validationIssues.phone?.[0] ? t(validationIssues.phone[0]) : ''"
+              :disabled="saving"
+              :optional="true"
+              :optional-label="t('common.optional')"
+            />
+          </div>
+        </div>
         <!-- new user info -->
         <NeInlineNotification
           v-if="!currentUser"
diff --git a/frontend/src/components/users/ImportUsersModal.vue b/frontend/src/components/users/ImportUsersModal.vue
new file mode 100644
index 000000000..6294ad78e
--- /dev/null
+++ b/frontend/src/components/users/ImportUsersModal.vue
@@ -0,0 +1,468 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeFileInput,
+  NeInlineNotification,
+  NeModal,
+  NeRadioSelection,
+  focusElement,
+  type RadioOption,
+  NeTooltip,
+  NeFormItemLabel,
+} from '@nethesis/vue-components'
+import { computed, ref, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMutation, useQueryCache } from '@pinia/colada'
+import {
+  getImportTemplate,
+  validateUsersImport,
+  confirmUsersImport,
+  USERS_KEY,
+  USERS_TOTAL_KEY,
+  type ImportValidationResult,
+  type ImportRow,
+  type ImportFieldError,
+} from '@/lib/users/users'
+import { useNotificationsStore } from '@/stores/notifications'
+import ImportUsersPreviewTable from './ImportUsersPreviewTable.vue'
+import capitalize from 'lodash/capitalize'
+
+const { isShown = false } = defineProps<{
+  isShown: boolean
+}>()
+
+const emit = defineEmits(['close'])
+
+const { t } = useI18n()
+const queryCache = useQueryCache()
+const notificationsStore = useNotificationsStore()
+
+// step: 'upload' | 'preview'
+const step = ref<'upload' | 'preview'>('upload')
+
+const csvFile = ref<File | null>(null)
+const fileInputRef = useTemplateRef<HTMLInputElement>('fileInputRef')
+const fileValidationError = ref('')
+const validationResult = ref<ImportValidationResult | null>(null)
+const downloadingTemplate = ref(false)
+
+const ERROR_PREVIEW_COUNT = 5
+const ERROR_INCREMENT = 5
+const visibleErrorCount = ref(ERROR_PREVIEW_COUNT)
+const visibleWarningCount = ref(ERROR_PREVIEW_COUNT)
+const existingUsersOption = ref<'skip' | 'update'>('skip')
+const importTypeOptions = computed<RadioOption[]>(() => [
+  { id: 'skip', label: t('import.users.import_type_skip') },
+  { id: 'update', label: t('import.users.import_type_overwrite') },
+])
+
+const errorRows = computed(
+  () =>
+    validationResult.value?.rows.filter((r) => r.status === 'error' || r.status === 'ambiguous') ??
+    [],
+)
+const warningRows = computed(
+  () => validationResult.value?.rows.filter((r) => r.status === 'warning') ?? [],
+)
+const visibleErrorRows = computed(() => errorRows.value.slice(0, visibleErrorCount.value))
+const hiddenErrorCount = computed(() =>
+  Math.max(0, errorRows.value.length - visibleErrorCount.value),
+)
+const visibleWarningRows = computed(() => warningRows.value.slice(0, visibleWarningCount.value))
+const hiddenWarningCount = computed(() =>
+  Math.max(0, warningRows.value.length - visibleWarningCount.value),
+)
+
+// Count of users to import based on the selected option
+const importCount = computed(() => {
+  if (!validationResult.value) return 0
+  if (existingUsersOption.value === 'skip') {
+    // Only new users (valid_rows excludes warning rows)
+    return validationResult.value.valid_rows
+  } else {
+    // New users + existing users to update (warning_rows are existing users)
+    return validationResult.value.valid_rows + validationResult.value.warning_rows
+  }
+})
+
+// ---------------------------------------------------------------
+// Validate mutation
+// ---------------------------------------------------------------
+const {
+  mutate: validateMutate,
+  isLoading: validateLoading,
+  reset: validateReset,
+  error: validateError,
+} = useMutation({
+  mutation: (file: File) => validateUsersImport(file),
+  onSuccess(data) {
+    validationResult.value = data
+    step.value = 'preview'
+  },
+  onError: (error) => {
+    console.error('Error validating users import:', error)
+  },
+})
+
+// ---------------------------------------------------------------
+// Confirm mutation
+// ---------------------------------------------------------------
+const {
+  mutate: confirmMutate,
+  isLoading: confirmLoading,
+  reset: confirmReset,
+  error: confirmError,
+} = useMutation({
+  mutation: () => {
+    if (!validationResult.value) throw new Error('No validation result')
+    const override = existingUsersOption.value === 'update'
+    return confirmUsersImport(validationResult.value.import_id, override)
+  },
+  onSuccess(data) {
+    emit('close')
+    setTimeout(() => {
+      const resultParts: string[] = []
+      if (data.created > 0)
+        resultParts.push(t('import.import_result_created', { count: data.created }))
+      if (data.updated > 0)
+        resultParts.push(t('import.import_result_updated', { count: data.updated }))
+      if (data.skipped > 0)
+        resultParts.push(t('import.import_result_skipped', { count: data.skipped }))
+      if (data.failed > 0)
+        resultParts.push(t('import.import_result_failed', { count: data.failed }))
+
+      notificationsStore.createNotification({
+        kind: 'success',
+        title: t('import.users.users_imported'),
+        description: capitalize(resultParts.join(', ')),
+      })
+    }, 500)
+  },
+  onError: (error) => {
+    console.error('Error confirming users import:', error)
+  },
+  onSettled: () => {
+    queryCache.invalidateQueries({ key: [USERS_KEY] })
+    queryCache.invalidateQueries({ key: [USERS_TOTAL_KEY] })
+  },
+})
+
+// ---------------------------------------------------------------
+// Lifecycle
+// ---------------------------------------------------------------
+watch(
+  () => isShown,
+  () => {
+    if (isShown) {
+      reset()
+      focusElement(fileInputRef)
+    }
+  },
+)
+
+function reset() {
+  step.value = 'upload'
+  csvFile.value = null
+  fileValidationError.value = ''
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingUsersOption.value = 'skip'
+  validateReset()
+  confirmReset()
+}
+
+function onClose() {
+  emit('close')
+}
+
+function onFileSelect() {
+  fileValidationError.value = ''
+  validateReset()
+}
+
+function goBack() {
+  step.value = 'upload'
+  validationResult.value = null
+  visibleErrorCount.value = ERROR_PREVIEW_COUNT
+  visibleWarningCount.value = ERROR_PREVIEW_COUNT
+  existingUsersOption.value = 'skip'
+  confirmReset()
+}
+
+function showMoreErrors() {
+  visibleErrorCount.value += ERROR_INCREMENT
+}
+
+function showMoreWarnings() {
+  visibleWarningCount.value += ERROR_INCREMENT
+}
+
+// ---------------------------------------------------------------
+// Template download
+// ---------------------------------------------------------------
+async function downloadTemplate() {
+  downloadingTemplate.value = true
+  try {
+    const blob = await getImportTemplate()
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = 'users_import_template.csv'
+    link.click()
+    URL.revokeObjectURL(url)
+  } catch (error) {
+    console.error('Cannot download template:', error)
+  } finally {
+    downloadingTemplate.value = false
+  }
+}
+
+// ---------------------------------------------------------------
+// Validate
+// ---------------------------------------------------------------
+function onValidate() {
+  fileValidationError.value = ''
+
+  if (!csvFile.value) {
+    fileValidationError.value = t('import.import_no_file_selected')
+    return
+  }
+
+  if (!csvFile.value.name.endsWith('.csv') && csvFile.value.type !== 'text/csv') {
+    fileValidationError.value = t('import.import_file_must_be_csv')
+    return
+  }
+
+  validateMutate(csvFile.value)
+}
+
+// ---------------------------------------------------------------
+// Row helpers
+// ---------------------------------------------------------------
+function formatErrorParams(issue: ImportFieldError): string[] {
+  if (issue.candidates) {
+    // Deduplicate translated organization labels from candidate matches
+    // before joining them into a comma-separated string.
+    // Using Set preserves first-seen order while removing duplicates.
+    const candidateLabels = Array.from(
+      new Set(issue.candidates.map((c) => t(`organizations.${c.type}`))),
+    ).join(', ')
+    return [`${issue.values[0]} (${candidateLabels})`]
+  } else if (issue.field === 'roles' && issue.message === 'unknown') {
+    return [issue.values.join(', ')]
+  } else {
+    return issue.values
+  }
+}
+
+function errorSummaryText(row: ImportRow): string {
+  const name = String(row.data?.name || row.data?.email || '-')
+  const issue = row.errors?.[0]
+
+  if (!issue) {
+    return t('import.import_row_and_name', { row_number: row.row_number, name })
+  }
+  const params = formatErrorParams(issue)
+  const message = t(`import.import_error_${issue.field}_${issue.message}`, params)
+  return t('import.import_row_and_message', { row_number: row.row_number, name, message })
+}
+</script>
+
+<template>
+  <NeModal
+    :visible="isShown"
+    :size="step === 'preview' ? 'xxl' : 'md'"
+    :title="$t('import.users.import_users')"
+    :close-aria-label="$t('common.close')"
+    :cancel-label="$t('common.cancel')"
+    :primary-label="
+      step === 'upload'
+        ? $t('common.next')
+        : $t('import.users.import_confirm', { count: importCount })
+    "
+    :primary-button-disabled="
+      step === 'upload' ? validateLoading : confirmLoading || importCount === 0
+    "
+    :primary-button-loading="step === 'upload' ? validateLoading : confirmLoading"
+    :secondary-label="step === 'preview' ? $t('common.previous') : undefined"
+    secondary-button-kind="tertiary"
+    :secondary-button-disabled="confirmLoading"
+    @close="onClose"
+    @primary-click="step === 'upload' ? onValidate() : confirmMutate()"
+    @secondary-click="goBack"
+  >
+    <!-- ===== STEP 1: UPLOAD ===== -->
+    <div v-if="step === 'upload'" class="space-y-6">
+      <p class="text-sm text-gray-500 dark:text-gray-400">
+        {{ $t('import.users.import_description') }}
+      </p>
+      <div class="space-y-1.5">
+        <NeFileInput
+          ref="fileInputRef"
+          v-model="csvFile"
+          :label="$t('import.import_file_label')"
+          :dropzone-label="$t('ne_file_input.drag_and_drop_or_click_to_upload')"
+          :invalid-message="fileValidationError"
+          accept=".csv,text/csv"
+          :disabled="validateLoading"
+          @select="onFileSelect"
+        />
+        <i18n-t
+          keypath="import.import_to_get_started"
+          tag="p"
+          class="text-gray-500 dark:text-gray-400"
+        >
+          <template #link>
+            <button
+              type="button"
+              class="text-primary-700 hover:text-primary-800 dark:text-primary-500 dark:hover:text-primary-400 font-medium hover:underline"
+              :disabled="downloadingTemplate"
+              @click="downloadTemplate"
+            >
+              {{ $t('import.download_the_template') }}
+            </button>
+          </template>
+        </i18n-t>
+      </div>
+      <NeInlineNotification
+        v-if="validateError"
+        kind="error"
+        :title="$t('import.import_validation_failed')"
+      >
+        <template #description>
+          <i18n-t keypath="import.import_validation_error_message" tag="p">
+            <template #link>
+              <button
+                type="button"
+                class="underline hover:text-rose-800 dark:hover:text-rose-50"
+                :disabled="downloadingTemplate"
+                @click="downloadTemplate"
+              >
+                {{ $t('import.download_the_template_lc') }}
+              </button>
+            </template>
+          </i18n-t>
+        </template>
+      </NeInlineNotification>
+    </div>
+
+    <!-- ===== STEP 2: PREVIEW ===== -->
+    <div v-else-if="step === 'preview' && validationResult" class="space-y-6">
+      <!-- file preview table -->
+      <ImportUsersPreviewTable :rows="validationResult.rows" />
+
+      <!-- existing users option -->
+      <NeRadioSelection
+        v-if="warningRows.length > 0"
+        v-model="existingUsersOption"
+        :options="importTypeOptions"
+        :label="$t('import.users.import_existing_users_label')"
+      >
+        <template #tooltip>
+          <NeTooltip>
+            <template #content>
+              {{ $t('import.users.import_existing_users_tooltip') }}
+            </template>
+          </NeTooltip>
+        </template>
+      </NeRadioSelection>
+
+      <!-- summary -->
+      <div class="text-tertiary-neutral dark:text-tertiary-neutral text-sm">
+        <NeFormItemLabel>{{ $t('import.import_summary') }}</NeFormItemLabel>
+        <p>
+          {{ $t('import.users.import_summary_detected', { count: validationResult.total_rows }) }}
+        </p>
+        <ul class="mt-1 ml-5 list-disc space-y-0.5">
+          <li>
+            {{ $t('import.import_summary_valid', { count: validationResult.valid_rows }) }}
+          </li>
+          <li
+            v-if="validationResult.error_rows + validationResult.ambiguous_rows > 0"
+            class="text-rose-700 dark:text-rose-500"
+          >
+            {{
+              $t('import.import_summary_errors', {
+                count: validationResult.error_rows + validationResult.ambiguous_rows,
+              })
+            }}
+          </li>
+          <li v-if="validationResult.warning_rows > 0" class="text-amber-700 dark:text-amber-500">
+            {{
+              existingUsersOption === 'skip'
+                ? $t('import.users.import_summary_warnings_skip', {
+                    count: validationResult.warning_rows,
+                  })
+                : $t('import.users.import_summary_warnings_update', {
+                    count: validationResult.warning_rows,
+                  })
+            }}
+          </li>
+        </ul>
+      </div>
+
+      <!-- error rows (blocking + ambiguous) -->
+      <NeInlineNotification
+        v-if="errorRows.length > 0"
+        kind="error"
+        :title="$t('import.import_rows_with_errors', { count: errorRows.length })"
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleErrorRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenErrorCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-rose-800 dark:hover:text-rose-50"
+            @click="showMoreErrors()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenErrorCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- warning rows (existing users) -->
+      <NeInlineNotification
+        v-if="warningRows.length > 0"
+        kind="warning"
+        :title="
+          existingUsersOption === 'skip'
+            ? $t('import.users.import_rows_with_warnings_skip', { count: warningRows.length })
+            : $t('import.users.import_rows_with_warnings_update', { count: warningRows.length })
+        "
+      >
+        <template #description>
+          <ul class="ml-4 list-disc space-y-0.5">
+            <li v-for="row in visibleWarningRows" :key="row.row_number" class="text-sm">
+              {{ errorSummaryText(row) }}
+            </li>
+          </ul>
+          <button
+            v-if="hiddenWarningCount > 0"
+            type="button"
+            class="mt-1 underline hover:text-amber-800 dark:hover:text-amber-50"
+            @click="showMoreWarnings()"
+          >
+            {{ $t('common.plus_n_more', { count: hiddenWarningCount }) }}
+          </button>
+        </template>
+      </NeInlineNotification>
+
+      <!-- confirm error -->
+      <NeInlineNotification
+        v-if="confirmError"
+        kind="error"
+        :title="$t('import.import_confirm_failed')"
+        :description="(confirmError as Error).message"
+      />
+    </div>
+  </NeModal>
+</template>
diff --git a/frontend/src/components/users/ImportUsersPreviewTable.vue b/frontend/src/components/users/ImportUsersPreviewTable.vue
new file mode 100644
index 000000000..679a5f676
--- /dev/null
+++ b/frontend/src/components/users/ImportUsersPreviewTable.vue
@@ -0,0 +1,82 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import {
+  NeTable,
+  NeTableHead,
+  NeTableHeadCell,
+  NeTableBody,
+  NeTableRow,
+  NeTableCell,
+} from '@nethesis/vue-components'
+import { computed } from 'vue'
+import type { ImportRow } from '@/lib/users/users'
+
+const PREVIEW_ROWS = 5
+
+const props = defineProps<{
+  rows: ImportRow[]
+}>()
+
+const previewRows = computed(() => props.rows.slice(0, PREVIEW_ROWS))
+
+function formatRoles(value: unknown): string {
+  if (!value) return '-'
+  const parts = String(value)
+    .split(';')
+    .map((p) => p.trim())
+    .filter(Boolean)
+  return parts.length ? parts.join(', ') : '-'
+}
+
+function rowField(row: ImportRow, field: string): string {
+  if (field === 'roles') return formatRoles(row.data?.roles)
+  return String(row.data?.[field] || '-')
+}
+</script>
+
+<template>
+  <div>
+    <div class="flex items-center justify-between">
+      <div
+        class="inline-block rounded-t-md bg-indigo-300 px-3 py-1 text-sm font-medium text-gray-900 dark:bg-indigo-900 dark:text-gray-50"
+      >
+        {{ $t('import.import_file_preview') }}
+      </div>
+      <div class="text-gray-500 dark:text-gray-400">
+        {{ $t('import.import_file_preview_description', { count: PREVIEW_ROWS }) }}
+      </div>
+    </div>
+    <NeTable :aria-label="$t('import.import_file_preview')" card-breakpoint="md">
+      <NeTableHead>
+        <NeTableHeadCell>{{ $t('users.email') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.name') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.phone_number') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.organization') }}</NeTableHeadCell>
+        <NeTableHeadCell>{{ $t('users.roles') }}</NeTableHeadCell>
+      </NeTableHead>
+      <NeTableBody>
+        <NeTableRow v-for="row in previewRows" :key="row.row_number">
+          <NeTableCell :data-label="$t('users.email')">
+            {{ rowField(row, 'email') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.name')">
+            {{ rowField(row, 'name') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.phone_number')">
+            {{ rowField(row, 'phone') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.organization')">
+            {{ rowField(row, 'company_name') }}
+          </NeTableCell>
+          <NeTableCell :data-label="$t('users.roles')">
+            {{ rowField(row, 'roles') }}
+          </NeTableCell>
+        </NeTableRow>
+      </NeTableBody>
+    </NeTable>
+  </div>
+</template>
diff --git a/frontend/src/components/users/UsersTable.vue b/frontend/src/components/users/UsersTable.vue
index aa4eebe0f..7d10d773a 100644
--- a/frontend/src/components/users/UsersTable.vue
+++ b/frontend/src/components/users/UsersTable.vue
@@ -448,7 +448,7 @@ const onClosePasswordChangedModal = () => {
       :sort-key="sortBy"
       :sort-descending="sortDescending"
       :aria-label="$t('users.title')"
-      card-breakpoint="xl"
+      card-breakpoint="2xl"
       :loading="state.status === 'pending'"
       :skeleton-columns="5"
       :skeleton-rows="7"
@@ -486,7 +486,7 @@ const onClosePasswordChangedModal = () => {
           </NeTableCell>
           <NeTableCell
             :data-label="$t('users.email')"
-            class="break-all xl:break-normal"
+            class="break-all 2xl:break-normal"
             :class="{ 'opacity-50': item.deleted_at }"
           >
             {{ item.email }}
@@ -561,7 +561,7 @@ const onClosePasswordChangedModal = () => {
             </div>
           </NeTableCell>
           <NeTableCell :data-label="$t('common.actions')">
-            <div v-if="canManageUsers()" class="-ml-2.5 flex gap-2 xl:ml-0 xl:justify-end">
+            <div v-if="canManageUsers()" class="-ml-2.5 flex gap-2 2xl:ml-0 2xl:justify-end">
               <NeButton v-if="!item.deleted_at" kind="tertiary" @click="showEditUserDrawer(item)">
                 <template #prefix>
                   <FontAwesomeIcon :icon="faPenToSquare" class="h-4 w-4" aria-hidden="true" />
diff --git a/frontend/src/i18n/en/translation.json b/frontend/src/i18n/en/translation.json
index 6e94058d0..1f319255d 100644
--- a/frontend/src/i18n/en/translation.json
+++ b/frontend/src/i18n/en/translation.json
@@ -50,7 +50,7 @@
     "reactivate": "Reactivate",
     "notes": "Notes",
     "show_notes": "Show notes",
-    "plus_n_more": "+{num} more",
+    "plus_n_more": "+{count} more | +{count} more",
     "node_id": "Node {id}"
   },
   "shell": {
@@ -114,7 +114,9 @@
     "export_distributors_to_pdf": "Export distributors to PDF",
     "export_distributors_to_csv": "Export distributors to CSV",
     "total_customers": "Total Customers",
-    "total_systems": "Total Systems"
+    "total_systems": "Total Systems",
+    "import_distributors": "Import distributors",
+    "distributors_imported": "Distributors imported"
   },
   "distributor_detail": {
     "title": "Distributor detail",
@@ -150,6 +152,8 @@
     "no_reseller": "No resellers",
     "export_resellers_to_pdf": "Export resellers to PDF",
     "export_resellers_to_csv": "Export resellers to CSV",
+    "import_resellers": "Import resellers",
+    "resellers_imported": "Resellers imported",
     "total_systems": "Total Systems"
   },
   "customers": {
@@ -173,7 +177,10 @@
     "archive_customer_confirmation": "Are you sure you want to archive customer {name}? All users and systems associated with this company will also be archived.",
     "no_customer": "No customers",
     "export_customers_to_pdf": "Export customers to PDF",
-    "export_customers_to_csv": "Export customers to CSV"
+    "export_customers_to_csv": "Export customers to CSV",
+    "import_customers": "Import customers",
+    "customers_imported": "Customers imported",
+    "total_systems": "Total Systems"
   },
   "organizations": {
     "name": "Company name",
@@ -184,8 +191,11 @@
     "main_contact": "Main contact",
     "owner": "Owner",
     "distributor": "Distributor",
+    "distributors_lc": "distributor | distributors",
     "reseller": "Reseller",
+    "resellers_lc": "reseller | resellers",
     "customer": "Customer",
+    "customers_lc": "customer | customers",
     "name_cannot_be_empty": "Company name is required",
     "custom_data_vat_cannot_be_empty": "VAT number is required",
     "custom_data_vat_already_exists": "A company with this VAT number already exists",
@@ -215,6 +225,79 @@
     "organization_restored_successfully": "{name} restored successfully",
     "restore_organization_confirmation": "Are you sure you want to restore {name}?"
   },
+  "import": {
+    "download_the_template": "Download the template",
+    "download_the_template_lc": "download the template",
+    "import_to_get_started": "{link} to get started",
+    "import_file_label": "CSV file",
+    "import_no_file_selected": "Please select a CSV file",
+    "import_file_must_be_csv": "The file must be a CSV",
+    "import_validation_failed": "Validation failed",
+    "import_confirm_failed": "Cannot complete import",
+    "import_result_created": "created: {count} | created: {count}",
+    "import_result_updated": "updated: {count} | updated: {count}",
+    "import_result_skipped": "skipped: {count} | skipped: {count}",
+    "import_result_failed": "failed: {count} | failed: {count}",
+    "import_summary": "Import summary",
+    "import_summary_valid": "{count} valid | {count} valid",
+    "import_summary_errors": "{count} with errors, will be skipped | {count} with errors, will be skipped",
+    "import_rows_with_errors": "{count} row has errors, will be skipped: | {count} rows have errors, will be skipped:",
+    "import_file_preview": "File preview",
+    "import_file_preview_description": "Only the first {count} rows are shown",
+    "import_validation_error_message": "Make sure the CSV file is correctly formatted or {link}.",
+    "import_row_and_name": "Row {row_number}: {name}",
+    "import_row_and_message": "Row {row_number} ({name}): {message}",
+    "import_error_email_required": "Email is required",
+    "import_error_email_invalid_format": "Invalid email: {0}",
+    "import_error_email_duplicate_in_csv": "Duplicate email in CSV: {0}",
+    "import_error_email_archived": "User exists but is archived. You can resume it if necessary.",
+    "import_error_phone_invalid_format": "Invalid phone number: {0}. Make sure it contains the country code, e.g. +39 for Italy",
+    "import_error_company_name_ambiguous": "Ambiguous company name: {0}",
+    "import_error_company_name_not_found": "Company not found: {0}",
+    "import_error_phone_already_used": "Phone number {0} already used by another user: {1}",
+    "import_error_roles_unknown": "Unknown roles: {0}",
+    "import_error_name_required": "Name is required",
+    "import_error_name_too_long": "Name is too long: {0}",
+    "import_error_company_name_required": "Company name is required",
+    "import_error_company_name_too_long": "Company name is too long: {0}",
+    "import_error_name_duplicate_in_csv": "Duplicate in CSV at line {1}",
+    "import_error_vat_number_required": "VAT number is required",
+    "import_error_vat_number_invalid_format": "Invalid VAT number: {0}",
+    "import_error_vat_number_too_long": "VAT number is too long: {0}",
+    "import_error_language_invalid_value": "Invalid language: {0}",
+    "import_error_language_invalid_format": "Invalid language: {0}",
+    "import_error_vat_number_archived": "Company exists but is archived. You can resume it if necessary.",
+    "users": {
+      "import_users": "Import users",
+      "import_description": "Upload a CSV file to create multiple users at once. Each row represents one user. Rows with errors will be skipped automatically.",
+      "import_confirm": "Import {count} user | Import {count} users",
+      "users_imported": "Users imported",
+      "import_summary_detected": "{count} user detected in the selected file: | {count} users detected in the selected file:",
+      "import_summary_warnings_skip": "{count} existing user — will be skipped | {count} existing users — will be skipped",
+      "import_summary_warnings_update": "{count} existing user —will be updated | {count} existing users — will be updated",
+      "import_type_overwrite": "Update existing users",
+      "import_type_skip": "Skip existing users",
+      "import_existing_users_label": "Existing users",
+      "import_existing_users_tooltip": "Existing users can be updated or skipped; users are matched by email",
+      "import_rows_with_warnings_skip": "{count} existing users — will be skipped",
+      "import_rows_with_warnings_update": "{count} existing user — will be updated | {count} existing users — will be updated"
+    },
+    "organizations": {
+      "import_description": "Upload a CSV file to create multiple {entities} at once. Each row represents one {entity}. Rows with errors will be skipped automatically.",
+      "import_num_distributors": "Import {count} distributor | Import {count} distributors",
+      "import_num_resellers": "Import {count} reseller | Import {count} resellers",
+      "import_num_customers": "Import {count} customer | Import {count} customers",
+      "import_type_skip": "Skip existing companies",
+      "import_type_overwrite": "Update existing companies",
+      "import_existing_label": "Existing companies",
+      "import_existing_tooltip": "Existing companies can be updated or skipped; companies are matched by VAT number",
+      "import_summary_detected": "{count} company detected in the selected file: | {count} companies detected in the selected file:",
+      "import_summary_warnings_skip": "{count} existing company — will be skipped | {count} existing companies — will be skipped",
+      "import_summary_warnings_update": "{count} existing company — will be updated | {count} existing companies — will be updated",
+      "import_rows_with_warnings_skip": "{count} existing company — will be skipped | {count} existing companies — will be skipped",
+      "import_rows_with_warnings_update": "{count} existing company — will be updated | {count} existing companies — will be updated"
+    }
+  },
   "users": {
     "title": "Users",
     "page_description": "List of users authorized to access {productName}, with associated companies and assigned roles.",
@@ -276,6 +359,7 @@
     "cannot_reset_password": "Cannot reset password",
     "phone_invalid_format": "Invalid phone number",
     "phone_already_exists": "A user with this phone number already exists",
+    "phone_plus_not_allowed": "Cannot contain '+'",
     "the_password_has_been_reset": "The password has been reset",
     "credentials_updated_description": "The credentials for user {name} have been updated",
     "copy_credentials": "Copy credentials",
@@ -468,7 +552,7 @@
     "cannot_create_system": "Cannot create system",
     "cannot_save_system": "Cannot save system",
     "save_system": "Save system",
-    "no_organizations": "No organizations",
+    "no_organizations": "No companies",
     "archive_system": "Archive system",
     "archive_system_confirmation": "Are you sure you want to archive system {name}? It will no longer receive updates and you will not be able to request support for it.",
     "system_archived": "System archived",
@@ -619,10 +703,10 @@
     "application": "Application",
     "organization_assigned": "Application assigned to company",
     "organization_assigned_description": "The application {application} has been assigned to company {organization}",
-    "cannot_assign_organization": "Cannot assign organization",
-    "no_organization": "No organization",
-    "num_unassigned": "{num} unassigned",
-    "num_applications_not_assigned": "{num} application is not assigned to any organization. | {num} applications are not assigned to any organization.",
+    "cannot_assign_organization": "Cannot assign company",
+    "no_organization": "No company",
+    "num_unassigned": "{count} unassigned | {count} unassigned",
+    "num_applications_not_assigned": "{count} application is not assigned to any company. | {count} applications are not assigned to any company.",
     "show_unassigned": "Show unassigned",
     "dont_show_again": "Don't show again",
     "add_notes": "Add notes",
@@ -729,7 +813,7 @@
     "alpha_notice": "ALPHA \u2013 This section has no final design. UI may change.",
     "cannot_retrieve_alerts": "Cannot retrieve alerts",
     "no_alerts": "No alerts found",
-    "no_alerts_description": "There are currently no active alerts for this organization",
+    "no_alerts_description": "There are currently no active alerts for this company",
     "no_alerts_found": "No alerts match the current filters",
     "active_alerts": "Active Alerts",
     "alert_history": "Alert History",
@@ -758,7 +842,7 @@
     "no_alert_history": "No alert history",
     "no_alert_history_description": "No resolved alerts found for this system",
     "no_alert_history_found": "No alert history matches the current filters",
-    "config_page_description": "View and manage the alerting configuration for your organization",
+    "config_page_description": "View and manage the alerting configuration for your company",
     "cannot_retrieve_config": "Cannot retrieve alerting configuration",
     "config_json": "Configuration (JSON)",
     "config_yaml": "Configuration (YAML)",
@@ -772,7 +856,7 @@
     "per_severity_overrides": "Per-severity overrides",
     "per_system_overrides": "Per-system overrides",
     "no_config": "No configuration found",
-    "no_config_description": "Alerting is not configured for this organization",
+    "no_config_description": "Alerting is not configured for this company",
     "edit_config": "Edit configuration",
     "save_config": "Save configuration",
     "disable_alerts": "Disable all alerts",
@@ -818,17 +902,17 @@
     "cannot_delete_silence": "Cannot delete silence",
     "disable_silence": "Disable silence",
     "disable_silence_confirmation": "Disable the silence for the alert {name}?",
-    "disable_silence_notice": "This removes {count} currently suppressing this alert.",
+    "disable_silence_notice": "This removes {count} silence currently suppressing this alert. | This removes {count} silences currently suppressing this alert.",
     "cannot_disable_silence": "Cannot disable silence",
     "silence_disabled": "Silence disabled",
     "silence_disabled_description": "The silence has been disabled for {name}.",
     "history_tab_description": "History of resolved alerts for this system",
     "cannot_retrieve_system_alerts": "Cannot retrieve active alerts for this system",
-    "cannot_retrieve_organizations": "Cannot retrieve organizations",
+    "cannot_retrieve_organizations": "Cannot retrieve companies",
     "alerting_title": "Alerting",
-    "alerting_page_description": "View active alerts and manage alerting configuration for any organization",
+    "alerting_page_description": "View active alerts and manage alerting configuration for any company",
     "view_alert_details": "View alert details",
-    "select_organization": "Organization",
-    "no_organizations_description": "There are no organizations available for alerting"
+    "select_organization": "Company",
+    "no_organizations_description": "There are no companies available for alerting"
   }
 }
diff --git a/frontend/src/lib/organizations/customers.ts b/frontend/src/lib/organizations/customers.ts
index 15b30d8e1..20219a324 100644
--- a/frontend/src/lib/organizations/customers.ts
+++ b/frontend/src/lib/organizations/customers.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { type Pagination } from '../common'
+import type { ImportValidationResult, ImportConfirmResult } from './organizations'
 
 export const CUSTOMERS_KEY = 'customers'
 export const CUSTOMERS_TOTAL_KEY = 'customersTotal'
@@ -250,3 +251,48 @@ export const getExport = (
     })
     .then((res) => res.data)
 }
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/customers/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateCustomersImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/customers/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmCustomersImport = (importId: string, override: boolean) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/customers/import/confirm`,
+      { import_id: importId, override },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/organizations/distributors.ts b/frontend/src/lib/organizations/distributors.ts
index 43a89a111..2b34ab7d1 100644
--- a/frontend/src/lib/organizations/distributors.ts
+++ b/frontend/src/lib/organizations/distributors.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { type Pagination } from '../common'
+import type { ImportValidationResult, ImportConfirmResult } from './organizations'
 
 export const DISTRIBUTORS_KEY = 'distributors'
 export const DISTRIBUTORS_TOTAL_KEY = 'distributorsTotal'
@@ -250,3 +251,48 @@ export const getExport = (
     })
     .then((res) => res.data)
 }
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/distributors/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateDistributorsImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/distributors/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmDistributorsImport = (importId: string, override: boolean) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/distributors/import/confirm`,
+      { import_id: importId, override },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/organizations/organizations.ts b/frontend/src/lib/organizations/organizations.ts
index 73e19d074..6c095f441 100644
--- a/frontend/src/lib/organizations/organizations.ts
+++ b/frontend/src/lib/organizations/organizations.ts
@@ -42,3 +42,53 @@ export function getOrganizationIcon(orgType: string) {
       return faQuestion
   }
 }
+
+// ============================================================
+// Common Import Types (used across all entities)
+// ============================================================
+
+export interface ImportFieldWarning {
+  field: string
+  message: string
+  value: string
+}
+
+export interface ImportFieldError {
+  field: string
+  message: string
+  values: string[]
+}
+
+export interface ImportRow {
+  row_number: number
+  status: 'valid' | 'error' | 'warning'
+  data: Record<string, unknown>
+  errors?: ImportFieldError[]
+  warnings?: ImportFieldWarning[]
+}
+
+export interface ImportValidationResult {
+  import_id: string
+  total_rows: number
+  valid_rows: number
+  error_rows: number
+  warning_rows: number
+  ambiguous_rows: number
+  rows: ImportRow[]
+}
+
+export interface ImportResultRow {
+  row_number: number
+  status: 'created' | 'updated' | 'skipped' | 'failed'
+  id?: string
+  reason?: string
+  error?: string
+}
+
+export interface ImportConfirmResult {
+  created: number
+  updated: number
+  skipped: number
+  failed: number
+  results: ImportResultRow[]
+}
diff --git a/frontend/src/lib/organizations/resellers.ts b/frontend/src/lib/organizations/resellers.ts
index 64f00a2cc..3d5f6a6fb 100644
--- a/frontend/src/lib/organizations/resellers.ts
+++ b/frontend/src/lib/organizations/resellers.ts
@@ -6,6 +6,7 @@ import { API_URL } from '../config'
 import { useLoginStore } from '@/stores/login'
 import * as v from 'valibot'
 import { type Pagination } from '../common'
+import type { ImportValidationResult, ImportConfirmResult } from './organizations'
 
 export const RESELLERS_KEY = 'resellers'
 export const RESELLERS_TOTAL_KEY = 'resellersTotal'
@@ -250,3 +251,48 @@ export const getExport = (
     })
     .then((res) => res.data)
 }
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/resellers/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateResellersImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/resellers/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmResellersImport = (importId: string, override: boolean) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/resellers/import/confirm`,
+      { import_id: importId, override },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/lib/phone.ts b/frontend/src/lib/phone.ts
new file mode 100644
index 000000000..006da0545
--- /dev/null
+++ b/frontend/src/lib/phone.ts
@@ -0,0 +1,357 @@
+//  Copyright (C) 2026 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { parsePhoneNumberFromString } from 'libphonenumber-js'
+import type { NeComboboxOption } from '@nethesis/vue-components'
+
+// The backend stores phone numbers as digits-only (E.164 without the leading
+// `+`), e.g. "393330001113". This helper renders a human-readable version for
+// display, e.g. "+39 333 000 1113".
+//
+// Inputs we need to handle:
+// - "" / null / undefined → return ""
+// - "393330001113"        → "+39 333 000 1113"
+// - "+39 333 0001113"     → "+39 333 000 1113" (already-formatted legacy values
+//                           still in the DB get re-parsed and re-formatted)
+// - non-parseable values  → returned untouched as a fallback
+export function formatPhoneForDisplay(raw: string | null | undefined): string {
+  if (!raw) {
+    return ''
+  }
+  // libphonenumber-js needs a leading "+" to detect the country from the digits.
+  // If the raw value already has it, parse as-is; otherwise prepend.
+  const candidate = raw.startsWith('+') ? raw : `+${raw}`
+  const parsed = parsePhoneNumberFromString(candidate)
+  return parsed?.formatInternational() ?? raw
+}
+
+// Parse a phone number and extract the country code (iso2) and local part.
+// Returns { countryIso2, localPart } or null if parsing fails.
+// Inputs we handle:
+// - "" / null / undefined → return null
+// - "393330001113"        → { countryIso2: "it", localPart: "333 000 1113" }
+// - "+39 333 0001113"     → { countryIso2: "it", localPart: "333 000 1113" }
+export function parsePhoneNumber(
+  raw: string | null | undefined,
+): { countryIso2: string; localPart: string } | null {
+  if (!raw) {
+    return null
+  }
+
+  // libphonenumber-js needs a leading "+" to detect the country from the digits.
+  // If the raw value already has it, parse as-is; otherwise prepend.
+  const candidate = raw.startsWith('+') ? raw : `+${raw}`
+  const parsed = parsePhoneNumberFromString(candidate)
+
+  if (!parsed || !parsed.country) {
+    return null
+  }
+
+  // Get the country code in lowercase (e.g., "IT" → "it")
+  const countryIso2 = parsed.country.toLowerCase()
+  // Format the local part (e.g., "333 000 1113")
+  const localPart = parsed.formatNational()
+
+  return { countryIso2, localPart }
+}
+
+// Combine country code ISO2 and phone local part into a backend-compatible format.
+// Returns the phone number as digits-only (E.164 without the leading `+`),
+// e.g., "it" + "333 000 1113" → "393330001113"
+// If countryCode or localPart is empty, returns empty string.
+export function combinePhoneParts(countryIso2: string, localPart: string): string {
+  if (!countryIso2 || !localPart) {
+    return ''
+  }
+
+  // Find the country code from the countries array
+  const country = countries.find((c) => c.iso2 === countryIso2)
+  if (!country) {
+    return ''
+  }
+
+  // Remove all non-digit characters from the local part, but keep the leading "+"
+  // if present (which indicates the user incorrectly entered the country prefix).
+  // This lets us detect and warn about malformed input.
+  const digitsOnly = localPart.replace(/[^+\d]/g, '')
+
+  // Concatenate country code + local part digits
+  return `${country.country_code}${digitsOnly}`
+}
+
+export const countries = [
+  { iso2: 'af', country_name: 'Afghanistan', country_code: '93', flag: '🇦🇫' },
+  { iso2: 'ax', country_name: 'Åland Islands', country_code: '358', flag: '🇦🇽' },
+  { iso2: 'al', country_name: 'Albania', country_code: '355', flag: '🇦🇱' },
+  { iso2: 'dz', country_name: 'Algeria', country_code: '213', flag: '🇩🇿' },
+  { iso2: 'as', country_name: 'American Samoa', country_code: '1', flag: '🇦🇸' },
+  { iso2: 'ad', country_name: 'Andorra', country_code: '376', flag: '🇦🇩' },
+  { iso2: 'ao', country_name: 'Angola', country_code: '244', flag: '🇦🇴' },
+  { iso2: 'ai', country_name: 'Anguilla', country_code: '1', flag: '🇦🇮' },
+  { iso2: 'ag', country_name: 'Antigua and Barbuda', country_code: '1', flag: '🇦🇬' },
+  { iso2: 'ar', country_name: 'Argentina', country_code: '54', flag: '🇦🇷' },
+  { iso2: 'am', country_name: 'Armenia', country_code: '374', flag: '🇦🇲' },
+  { iso2: 'aw', country_name: 'Aruba', country_code: '297', flag: '🇦🇼' },
+  { iso2: 'ac', country_name: 'Ascension Island', country_code: '247', flag: '🇦🇨' },
+  { iso2: 'au', country_name: 'Australia', country_code: '61', flag: '🇦🇺' },
+  { iso2: 'at', country_name: 'Austria', country_code: '43', flag: '🇦🇹' },
+  { iso2: 'az', country_name: 'Azerbaijan', country_code: '994', flag: '🇦🇿' },
+  { iso2: 'bs', country_name: 'Bahamas', country_code: '1', flag: '🇧🇸' },
+  { iso2: 'bh', country_name: 'Bahrain', country_code: '973', flag: '🇧🇭' },
+  { iso2: 'bd', country_name: 'Bangladesh', country_code: '880', flag: '🇧🇩' },
+  { iso2: 'bb', country_name: 'Barbados', country_code: '1', flag: '🇧🇧' },
+  { iso2: 'by', country_name: 'Belarus', country_code: '375', flag: '🇧🇾' },
+  { iso2: 'be', country_name: 'Belgium', country_code: '32', flag: '🇧🇪' },
+  { iso2: 'bz', country_name: 'Belize', country_code: '501', flag: '🇧🇿' },
+  { iso2: 'bj', country_name: 'Benin', country_code: '229', flag: '🇧🇯' },
+  { iso2: 'bm', country_name: 'Bermuda', country_code: '1', flag: '🇧🇲' },
+  { iso2: 'bt', country_name: 'Bhutan', country_code: '975', flag: '🇧🇹' },
+  { iso2: 'bo', country_name: 'Bolivia', country_code: '591', flag: '🇧🇴' },
+  { iso2: 'ba', country_name: 'Bosnia and Herzegovina', country_code: '387', flag: '🇧🇦' },
+  { iso2: 'bw', country_name: 'Botswana', country_code: '267', flag: '🇧🇼' },
+  { iso2: 'br', country_name: 'Brazil', country_code: '55', flag: '🇧🇷' },
+  { iso2: 'io', country_name: 'British Indian Ocean Territory', country_code: '246', flag: '🇮🇴' },
+  { iso2: 'vg', country_name: 'British Virgin Islands', country_code: '1', flag: '🇻🇬' },
+  { iso2: 'bn', country_name: 'Brunei', country_code: '673', flag: '🇧🇳' },
+  { iso2: 'bg', country_name: 'Bulgaria', country_code: '359', flag: '🇧🇬' },
+  { iso2: 'bf', country_name: 'Burkina Faso', country_code: '226', flag: '🇧🇫' },
+  { iso2: 'bi', country_name: 'Burundi', country_code: '257', flag: '🇧🇮' },
+  { iso2: 'kh', country_name: 'Cambodia', country_code: '855', flag: '🇰🇭' },
+  { iso2: 'cm', country_name: 'Cameroon', country_code: '237', flag: '🇨🇲' },
+  { iso2: 'ca', country_name: 'Canada', country_code: '1', flag: '🇨🇦' },
+  { iso2: 'cv', country_name: 'Cape Verde', country_code: '238', flag: '🇨🇻' },
+  { iso2: 'bq', country_name: 'Caribbean Netherlands', country_code: '599', flag: '🇧🇶' },
+  { iso2: 'ky', country_name: 'Cayman Islands', country_code: '1', flag: '🇰🇾' },
+  { iso2: 'cf', country_name: 'Central African Republic', country_code: '236', flag: '🇨🇫' },
+  { iso2: 'td', country_name: 'Chad', country_code: '235', flag: '🇹🇩' },
+  { iso2: 'cl', country_name: 'Chile', country_code: '56', flag: '🇨🇱' },
+  { iso2: 'cn', country_name: 'China', country_code: '86', flag: '🇨🇳' },
+  { iso2: 'cx', country_name: 'Christmas Island', country_code: '61', flag: '🇨🇽' },
+  { iso2: 'cc', country_name: 'Cocos (Keeling) Islands', country_code: '61', flag: '🇨🇨' },
+  { iso2: 'co', country_name: 'Colombia', country_code: '57', flag: '🇨🇴' },
+  { iso2: 'km', country_name: 'Comoros', country_code: '269', flag: '🇰🇲' },
+  { iso2: 'cg', country_name: 'Congo (Brazzaville)', country_code: '242', flag: '🇨🇬' },
+  { iso2: 'cd', country_name: 'Congo (Kinshasa)', country_code: '243', flag: '🇨🇩' },
+  { iso2: 'ck', country_name: 'Cook Islands', country_code: '682', flag: '🇨🇰' },
+  { iso2: 'cr', country_name: 'Costa Rica', country_code: '506', flag: '🇨🇷' },
+  { iso2: 'ci', country_name: "Côte d'Ivoire", country_code: '225', flag: '🇨🇮' },
+  { iso2: 'hr', country_name: 'Croatia', country_code: '385', flag: '🇭🇷' },
+  { iso2: 'cu', country_name: 'Cuba', country_code: '53', flag: '🇨🇺' },
+  { iso2: 'cw', country_name: 'Curaçao', country_code: '599', flag: '🇨🇼' },
+  { iso2: 'cy', country_name: 'Cyprus', country_code: '357', flag: '🇨🇾' },
+  { iso2: 'cz', country_name: 'Czech Republic', country_code: '420', flag: '🇨🇿' },
+  { iso2: 'dk', country_name: 'Denmark', country_code: '45', flag: '🇩🇰' },
+  { iso2: 'dj', country_name: 'Djibouti', country_code: '253', flag: '🇩🇯' },
+  { iso2: 'dm', country_name: 'Dominica', country_code: '1', flag: '🇩🇲' },
+  { iso2: 'do', country_name: 'Dominican Republic', country_code: '1', flag: '🇩🇴' },
+  { iso2: 'ec', country_name: 'Ecuador', country_code: '593', flag: '🇪🇨' },
+  { iso2: 'eg', country_name: 'Egypt', country_code: '20', flag: '🇪🇬' },
+  { iso2: 'sv', country_name: 'El Salvador', country_code: '503', flag: '🇸🇻' },
+  { iso2: 'gq', country_name: 'Equatorial Guinea', country_code: '240', flag: '🇬🇶' },
+  { iso2: 'er', country_name: 'Eritrea', country_code: '291', flag: '🇪🇷' },
+  { iso2: 'ee', country_name: 'Estonia', country_code: '372', flag: '🇪🇪' },
+  { iso2: 'sz', country_name: 'Eswatini', country_code: '268', flag: '🇸🇿' },
+  { iso2: 'et', country_name: 'Ethiopia', country_code: '251', flag: '🇪🇹' },
+  { iso2: 'fk', country_name: 'Falkland Islands (Malvinas)', country_code: '500', flag: '🇫🇰' },
+  { iso2: 'fo', country_name: 'Faroe Islands', country_code: '298', flag: '🇫🇴' },
+  { iso2: 'fj', country_name: 'Fiji', country_code: '679', flag: '🇫🇯' },
+  { iso2: 'fi', country_name: 'Finland', country_code: '358', flag: '🇫🇮' },
+  { iso2: 'fr', country_name: 'France', country_code: '33', flag: '🇫🇷' },
+  { iso2: 'gf', country_name: 'French Guiana', country_code: '594', flag: '🇬🇫' },
+  { iso2: 'pf', country_name: 'French Polynesia', country_code: '689', flag: '🇵🇫' },
+  { iso2: 'ga', country_name: 'Gabon', country_code: '241', flag: '🇬🇦' },
+  { iso2: 'gm', country_name: 'Gambia', country_code: '220', flag: '🇬🇲' },
+  { iso2: 'ge', country_name: 'Georgia', country_code: '995', flag: '🇬🇪' },
+  { iso2: 'de', country_name: 'Germany', country_code: '49', flag: '🇩🇪' },
+  { iso2: 'gh', country_name: 'Ghana', country_code: '233', flag: '🇬🇭' },
+  { iso2: 'gi', country_name: 'Gibraltar', country_code: '350', flag: '🇬🇮' },
+  { iso2: 'gr', country_name: 'Greece', country_code: '30', flag: '🇬🇷' },
+  { iso2: 'gl', country_name: 'Greenland', country_code: '299', flag: '🇬🇱' },
+  { iso2: 'gd', country_name: 'Grenada', country_code: '1', flag: '🇬🇩' },
+  { iso2: 'gp', country_name: 'Guadeloupe', country_code: '590', flag: '🇬🇵' },
+  { iso2: 'gu', country_name: 'Guam', country_code: '1', flag: '🇬🇺' },
+  { iso2: 'gt', country_name: 'Guatemala', country_code: '502', flag: '🇬🇹' },
+  { iso2: 'gg', country_name: 'Guernsey', country_code: '44', flag: '🇬🇬' },
+  { iso2: 'gn', country_name: 'Guinea', country_code: '224', flag: '🇬🇳' },
+  { iso2: 'gw', country_name: 'Guinea-Bissau', country_code: '245', flag: '🇬🇼' },
+  { iso2: 'gy', country_name: 'Guyana', country_code: '592', flag: '🇬🇾' },
+  { iso2: 'ht', country_name: 'Haiti', country_code: '509', flag: '🇭🇹' },
+  { iso2: 'hn', country_name: 'Honduras', country_code: '504', flag: '🇭🇳' },
+  { iso2: 'hk', country_name: 'Hong Kong SAR China', country_code: '852', flag: '🇭🇰' },
+  { iso2: 'hu', country_name: 'Hungary', country_code: '36', flag: '🇭🇺' },
+  { iso2: 'is', country_name: 'Iceland', country_code: '354', flag: '🇮🇸' },
+  { iso2: 'in', country_name: 'India', country_code: '91', flag: '🇮🇳' },
+  { iso2: 'id', country_name: 'Indonesia', country_code: '62', flag: '🇮🇩' },
+  { iso2: 'ir', country_name: 'Iran', country_code: '98', flag: '🇮🇷' },
+  { iso2: 'iq', country_name: 'Iraq', country_code: '964', flag: '🇮🇶' },
+  { iso2: 'ie', country_name: 'Ireland', country_code: '353', flag: '🇮🇪' },
+  { iso2: 'im', country_name: 'Isle of Man', country_code: '44', flag: '🇮🇲' },
+  { iso2: 'il', country_name: 'Israel', country_code: '972', flag: '🇮🇱' },
+  { iso2: 'it', country_name: 'Italy', country_code: '39', flag: '🇮🇹' },
+  { iso2: 'jm', country_name: 'Jamaica', country_code: '1', flag: '🇯🇲' },
+  { iso2: 'jp', country_name: 'Japan', country_code: '81', flag: '🇯🇵' },
+  { iso2: 'je', country_name: 'Jersey', country_code: '44', flag: '🇯🇪' },
+  { iso2: 'jo', country_name: 'Jordan', country_code: '962', flag: '🇯🇴' },
+  { iso2: 'kz', country_name: 'Kazakhstan', country_code: '7', flag: '🇰🇿' },
+  { iso2: 'ke', country_name: 'Kenya', country_code: '254', flag: '🇰🇪' },
+  { iso2: 'ki', country_name: 'Kiribati', country_code: '686', flag: '🇰🇮' },
+  { iso2: 'xk', country_name: 'Kosovo', country_code: '383', flag: '🇽🇰' },
+  { iso2: 'kw', country_name: 'Kuwait', country_code: '965', flag: '🇰🇼' },
+  { iso2: 'kg', country_name: 'Kyrgyzstan', country_code: '996', flag: '🇰🇬' },
+  { iso2: 'la', country_name: 'Laos', country_code: '856', flag: '🇱🇦' },
+  { iso2: 'lv', country_name: 'Latvia', country_code: '371', flag: '🇱🇻' },
+  { iso2: 'lb', country_name: 'Lebanon', country_code: '961', flag: '🇱🇧' },
+  { iso2: 'ls', country_name: 'Lesotho', country_code: '266', flag: '🇱🇸' },
+  { iso2: 'lr', country_name: 'Liberia', country_code: '231', flag: '🇱🇷' },
+  { iso2: 'ly', country_name: 'Libya', country_code: '218', flag: '🇱🇾' },
+  { iso2: 'li', country_name: 'Liechtenstein', country_code: '423', flag: '🇱🇮' },
+  { iso2: 'lt', country_name: 'Lithuania', country_code: '370', flag: '🇱🇹' },
+  { iso2: 'lu', country_name: 'Luxembourg', country_code: '352', flag: '🇱🇺' },
+  { iso2: 'mo', country_name: 'Macao SAR China', country_code: '853', flag: '🇲🇴' },
+  { iso2: 'mg', country_name: 'Madagascar', country_code: '261', flag: '🇲🇬' },
+  { iso2: 'mw', country_name: 'Malawi', country_code: '265', flag: '🇲🇼' },
+  { iso2: 'my', country_name: 'Malaysia', country_code: '60', flag: '🇲🇾' },
+  { iso2: 'mv', country_name: 'Maldives', country_code: '960', flag: '🇲🇻' },
+  { iso2: 'ml', country_name: 'Mali', country_code: '223', flag: '🇲🇱' },
+  { iso2: 'mt', country_name: 'Malta', country_code: '356', flag: '🇲🇹' },
+  { iso2: 'mh', country_name: 'Marshall Islands', country_code: '692', flag: '🇲🇭' },
+  { iso2: 'mq', country_name: 'Martinique', country_code: '596', flag: '🇲🇶' },
+  { iso2: 'mr', country_name: 'Mauritania', country_code: '222', flag: '🇲🇷' },
+  { iso2: 'mu', country_name: 'Mauritius', country_code: '230', flag: '🇲🇺' },
+  { iso2: 'yt', country_name: 'Mayotte', country_code: '262', flag: '🇾🇹' },
+  { iso2: 'mx', country_name: 'Mexico', country_code: '52', flag: '🇲🇽' },
+  { iso2: 'fm', country_name: 'Micronesia', country_code: '691', flag: '🇫🇲' },
+  { iso2: 'md', country_name: 'Moldova', country_code: '373', flag: '🇲🇩' },
+  { iso2: 'mc', country_name: 'Monaco', country_code: '377', flag: '🇲🇨' },
+  { iso2: 'mn', country_name: 'Mongolia', country_code: '976', flag: '🇲🇳' },
+  { iso2: 'me', country_name: 'Montenegro', country_code: '382', flag: '🇲🇪' },
+  { iso2: 'ms', country_name: 'Montserrat', country_code: '1', flag: '🇲🇸' },
+  { iso2: 'ma', country_name: 'Morocco', country_code: '212', flag: '🇲🇦' },
+  { iso2: 'mz', country_name: 'Mozambique', country_code: '258', flag: '🇲🇿' },
+  { iso2: 'mm', country_name: 'Myanmar (Burma)', country_code: '95', flag: '🇲🇲' },
+  { iso2: 'na', country_name: 'Namibia', country_code: '264', flag: '🇳🇦' },
+  { iso2: 'nr', country_name: 'Nauru', country_code: '674', flag: '🇳🇷' },
+  { iso2: 'np', country_name: 'Nepal', country_code: '977', flag: '🇳🇵' },
+  { iso2: 'nl', country_name: 'Netherlands', country_code: '31', flag: '🇳🇱' },
+  { iso2: 'nc', country_name: 'New Caledonia', country_code: '687', flag: '🇳🇨' },
+  { iso2: 'nz', country_name: 'New Zealand', country_code: '64', flag: '🇳🇿' },
+  { iso2: 'ni', country_name: 'Nicaragua', country_code: '505', flag: '🇳🇮' },
+  { iso2: 'ne', country_name: 'Niger', country_code: '227', flag: '🇳🇪' },
+  { iso2: 'ng', country_name: 'Nigeria', country_code: '234', flag: '🇳🇬' },
+  { iso2: 'nu', country_name: 'Niue', country_code: '683', flag: '🇳🇺' },
+  { iso2: 'nf', country_name: 'Norfolk Island', country_code: '672', flag: '🇳🇫' },
+  { iso2: 'kp', country_name: 'North Korea', country_code: '850', flag: '🇰🇵' },
+  { iso2: 'mk', country_name: 'North Macedonia', country_code: '389', flag: '🇲🇰' },
+  { iso2: 'mp', country_name: 'Northern Mariana Islands', country_code: '1', flag: '🇲🇵' },
+  { iso2: 'no', country_name: 'Norway', country_code: '47', flag: '🇳🇴' },
+  { iso2: 'om', country_name: 'Oman', country_code: '968', flag: '🇴🇲' },
+  { iso2: 'pk', country_name: 'Pakistan', country_code: '92', flag: '🇵🇰' },
+  { iso2: 'pw', country_name: 'Palau', country_code: '680', flag: '🇵🇼' },
+  { iso2: 'ps', country_name: 'Palestinian Territories', country_code: '970', flag: '🇵🇸' },
+  { iso2: 'pa', country_name: 'Panama', country_code: '507', flag: '🇵🇦' },
+  { iso2: 'pg', country_name: 'Papua New Guinea', country_code: '675', flag: '🇵🇬' },
+  { iso2: 'py', country_name: 'Paraguay', country_code: '595', flag: '🇵🇾' },
+  { iso2: 'pe', country_name: 'Peru', country_code: '51', flag: '🇵🇪' },
+  { iso2: 'ph', country_name: 'Philippines', country_code: '63', flag: '🇵🇭' },
+  { iso2: 'pl', country_name: 'Poland', country_code: '48', flag: '🇵🇱' },
+  { iso2: 'pt', country_name: 'Portugal', country_code: '351', flag: '🇵🇹' },
+  { iso2: 'pr', country_name: 'Puerto Rico', country_code: '1', flag: '🇵🇷' },
+  { iso2: 'qa', country_name: 'Qatar', country_code: '974', flag: '🇶🇦' },
+  { iso2: 're', country_name: 'Réunion', country_code: '262', flag: '🇷🇪' },
+  { iso2: 'ro', country_name: 'Romania', country_code: '40', flag: '🇷🇴' },
+  { iso2: 'ru', country_name: 'Russia', country_code: '7', flag: '🇷🇺' },
+  { iso2: 'rw', country_name: 'Rwanda', country_code: '250', flag: '🇷🇼' },
+  { iso2: 'ws', country_name: 'Samoa', country_code: '685', flag: '🇼🇸' },
+  { iso2: 'sm', country_name: 'San Marino', country_code: '378', flag: '🇸🇲' },
+  { iso2: 'st', country_name: 'São Tomé & Príncipe', country_code: '239', flag: '🇸🇹' },
+  { iso2: 'sa', country_name: 'Saudi Arabia', country_code: '966', flag: '🇸🇦' },
+  { iso2: 'sn', country_name: 'Senegal', country_code: '221', flag: '🇸🇳' },
+  { iso2: 'rs', country_name: 'Serbia', country_code: '381', flag: '🇷🇸' },
+  { iso2: 'sc', country_name: 'Seychelles', country_code: '248', flag: '🇸🇨' },
+  { iso2: 'sl', country_name: 'Sierra Leone', country_code: '232', flag: '🇸🇱' },
+  { iso2: 'sg', country_name: 'Singapore', country_code: '65', flag: '🇸🇬' },
+  { iso2: 'sx', country_name: 'Sint Maarten', country_code: '1', flag: '🇸🇽' },
+  { iso2: 'sk', country_name: 'Slovakia', country_code: '421', flag: '🇸🇰' },
+  { iso2: 'si', country_name: 'Slovenia', country_code: '386', flag: '🇸🇮' },
+  { iso2: 'sb', country_name: 'Solomon Islands', country_code: '677', flag: '🇸🇧' },
+  { iso2: 'so', country_name: 'Somalia', country_code: '252', flag: '🇸🇴' },
+  { iso2: 'za', country_name: 'South Africa', country_code: '27', flag: '🇿🇦' },
+  { iso2: 'kr', country_name: 'South Korea', country_code: '82', flag: '🇰🇷' },
+  { iso2: 'ss', country_name: 'South Sudan', country_code: '211', flag: '🇸🇸' },
+  { iso2: 'es', country_name: 'Spain', country_code: '34', flag: '🇪🇸' },
+  { iso2: 'lk', country_name: 'Sri Lanka', country_code: '94', flag: '🇱🇰' },
+  { iso2: 'bl', country_name: 'St. Barthélemy', country_code: '590', flag: '🇧🇱' },
+  { iso2: 'sh', country_name: 'St. Helena', country_code: '290', flag: '🇸🇭' },
+  { iso2: 'kn', country_name: 'St. Kitts & Nevis', country_code: '1', flag: '🇰🇳' },
+  { iso2: 'lc', country_name: 'St. Lucia', country_code: '1', flag: '🇱🇨' },
+  { iso2: 'mf', country_name: 'St. Martin', country_code: '590', flag: '🇲🇫' },
+  { iso2: 'pm', country_name: 'St. Pierre & Miquelon', country_code: '508', flag: '🇵🇲' },
+  { iso2: 'vc', country_name: 'St. Vincent & Grenadines', country_code: '1', flag: '🇻🇨' },
+  { iso2: 'sd', country_name: 'Sudan', country_code: '249', flag: '🇸🇩' },
+  { iso2: 'sr', country_name: 'Suriname', country_code: '597', flag: '🇸🇷' },
+  { iso2: 'sj', country_name: 'Svalbard & Jan Mayen', country_code: '47', flag: '🇸🇯' },
+  { iso2: 'se', country_name: 'Sweden', country_code: '46', flag: '🇸🇪' },
+  { iso2: 'ch', country_name: 'Switzerland', country_code: '41', flag: '🇨🇭' },
+  { iso2: 'sy', country_name: 'Syria', country_code: '963', flag: '🇸🇾' },
+  { iso2: 'tw', country_name: 'Taiwan', country_code: '886', flag: '🇹🇼' },
+  { iso2: 'tj', country_name: 'Tajikistan', country_code: '992', flag: '🇹🇯' },
+  { iso2: 'tz', country_name: 'Tanzania', country_code: '255', flag: '🇹🇿' },
+  { iso2: 'th', country_name: 'Thailand', country_code: '66', flag: '🇹🇭' },
+  { iso2: 'tl', country_name: 'Timor-Leste', country_code: '670', flag: '🇹🇱' },
+  { iso2: 'tg', country_name: 'Togo', country_code: '228', flag: '🇹🇬' },
+  { iso2: 'tk', country_name: 'Tokelau', country_code: '690', flag: '🇹🇰' },
+  { iso2: 'to', country_name: 'Tonga', country_code: '676', flag: '🇹🇴' },
+  { iso2: 'tt', country_name: 'Trinidad & Tobago', country_code: '1', flag: '🇹🇹' },
+  { iso2: 'tn', country_name: 'Tunisia', country_code: '216', flag: '🇹🇳' },
+  { iso2: 'tr', country_name: 'Turkey', country_code: '90', flag: '🇹🇷' },
+  { iso2: 'tm', country_name: 'Turkmenistan', country_code: '993', flag: '🇹🇲' },
+  { iso2: 'tc', country_name: 'Turks & Caicos Islands', country_code: '1', flag: '🇹🇨' },
+  { iso2: 'tv', country_name: 'Tuvalu', country_code: '688', flag: '🇹🇻' },
+  { iso2: 'vi', country_name: 'U.S. Virgin Islands', country_code: '1', flag: '🇻🇮' },
+  { iso2: 'ug', country_name: 'Uganda', country_code: '256', flag: '🇺🇬' },
+  { iso2: 'ua', country_name: 'Ukraine', country_code: '380', flag: '🇺🇦' },
+  { iso2: 'ae', country_name: 'United Arab Emirates', country_code: '971', flag: '🇦🇪' },
+  { iso2: 'gb', country_name: 'United Kingdom', country_code: '44', flag: '🇬🇧' },
+  { iso2: 'us', country_name: 'United States', country_code: '1', flag: '🇺🇸' },
+  { iso2: 'uy', country_name: 'Uruguay', country_code: '598', flag: '🇺🇾' },
+  { iso2: 'uz', country_name: 'Uzbekistan', country_code: '998', flag: '🇺🇿' },
+  { iso2: 'vu', country_name: 'Vanuatu', country_code: '678', flag: '🇻🇺' },
+  { iso2: 'va', country_name: 'Vatican City', country_code: '39', flag: '🇻🇦' },
+  { iso2: 've', country_name: 'Venezuela', country_code: '58', flag: '🇻🇪' },
+  { iso2: 'vn', country_name: 'Vietnam', country_code: '84', flag: '🇻🇳' },
+  { iso2: 'wf', country_name: 'Wallis & Futuna', country_code: '681', flag: '🇼🇫' },
+  { iso2: 'eh', country_name: 'Western Sahara', country_code: '212', flag: '🇪🇭' },
+  { iso2: 'ye', country_name: 'Yemen', country_code: '967', flag: '🇾🇪' },
+  { iso2: 'zm', country_name: 'Zambia', country_code: '260', flag: '🇿🇲' },
+  { iso2: 'zw', country_name: 'Zimbabwe', country_code: '263', flag: '🇿🇼' },
+]
+
+// Pre-formatted options for NeCombobox component showing country name, code, and flag
+export const countryCodeComboOptions: NeComboboxOption[] = countries.map((c) => ({
+  id: `${c.iso2}`,
+  label: `${c.country_name} (+${c.country_code})`,
+  description: c.flag,
+}))
+
+// Parse a raw phone number string and return parts suitable for form fields.
+// Used by all phone input components to split phone into country code + local part.
+// Returns { countryCode, phone } where:
+// - countryCode is ISO2 code (e.g., "it")
+// - phone is formatted local part (e.g., "333 000 1113")
+// If parsing fails or input is empty, defaults to "it" + original value (or empty).
+export function parsePhoneForForm(raw: string | null | undefined): {
+  countryCode: string
+  phone: string
+} {
+  if (!raw) {
+    return { countryCode: 'it', phone: '' }
+  }
+
+  const parsed = parsePhoneNumber(raw)
+  if (parsed) {
+    return { countryCode: parsed.countryIso2, phone: parsed.localPart }
+  } else {
+    // Fallback if parsing fails
+    return { countryCode: 'it', phone: raw }
+  }
+}
diff --git a/frontend/src/lib/users/users.ts b/frontend/src/lib/users/users.ts
index 840c9418f..70f3b38d8 100644
--- a/frontend/src/lib/users/users.ts
+++ b/frontend/src/lib/users/users.ts
@@ -318,3 +318,109 @@ export async function exportUser(user: User, format: 'pdf' | 'csv') {
     throw error
   }
 }
+
+// ============================================================
+// Import types
+// ============================================================
+
+export interface ImportFieldWarning {
+  field: string
+  message: string
+  value: string
+}
+
+export interface ImportFieldError {
+  field: string
+  message: string
+  values: string[]
+  candidates?: ImportOrgCandidate[]
+}
+
+export interface ImportOrgCandidate {
+  logto_id: string
+  name: string
+  type: string
+}
+
+export interface ImportRow {
+  row_number: number
+  status: 'valid' | 'error' | 'warning' | 'ambiguous'
+  data: Record<string, unknown>
+  errors?: ImportFieldError[]
+  warnings?: ImportFieldWarning[]
+}
+
+export interface ImportValidationResult {
+  import_id: string
+  total_rows: number
+  valid_rows: number
+  error_rows: number
+  warning_rows: number
+  ambiguous_rows: number
+  rows: ImportRow[]
+}
+
+export interface ImportResultRow {
+  row_number: number
+  status: 'created' | 'updated' | 'skipped' | 'failed'
+  id?: string
+  reason?: string
+  error?: string
+}
+
+export interface ImportConfirmResult {
+  created: number
+  updated: number
+  skipped: number
+  failed: number
+  results: ImportResultRow[]
+}
+
+// ============================================================
+// Import API functions
+// ============================================================
+
+export const getImportTemplate = () => {
+  const loginStore = useLoginStore()
+  return axios
+    .get<Blob>(`${API_URL}/users/import/template`, {
+      headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      responseType: 'blob',
+    })
+    .then((res) => res.data)
+}
+
+export const validateUsersImport = (file: File) => {
+  const loginStore = useLoginStore()
+  const formData = new FormData()
+  formData.append('file', file)
+  return axios
+    .post<{ code: number; message: string; data: ImportValidationResult }>(
+      `${API_URL}/users/import/validate`,
+      formData,
+      {
+        headers: {
+          Authorization: `Bearer ${loginStore.jwtToken}`,
+          'Content-Type': null,
+        },
+      },
+    )
+    .then((res) => res.data.data)
+}
+
+export const confirmUsersImport = (
+  importId: string,
+  override: boolean,
+  resolutions?: Record<string, { organization_id: string }>,
+) => {
+  const loginStore = useLoginStore()
+  return axios
+    .post<{ code: number; message: string; data: ImportConfirmResult }>(
+      `${API_URL}/users/import/confirm`,
+      { import_id: importId, override, resolutions },
+      {
+        headers: { Authorization: `Bearer ${loginStore.jwtToken}` },
+      },
+    )
+    .then((res) => res.data.data)
+}
diff --git a/frontend/src/views/ApplicationsView.vue b/frontend/src/views/ApplicationsView.vue
index 68eceee7b..8472b43d2 100644
--- a/frontend/src/views/ApplicationsView.vue
+++ b/frontend/src/views/ApplicationsView.vue
@@ -62,13 +62,9 @@ const dontShowUnassignedAppsNotificationAgain = () => {
       v-if="showUnassignedAppsNotification"
       kind="info"
       :description="
-        $t(
-          'applications.num_applications_not_assigned',
-          {
-            num: applicationsTotal.data?.unassigned,
-          },
-          applicationsTotal.data?.unassigned || 0,
-        )
+        $t('applications.num_applications_not_assigned', {
+          count: applicationsTotal.data?.unassigned,
+        })
       "
       :primary-button-label="t('applications.show_unassigned')"
       :secondary-button-label="t('applications.dont_show_again')"
diff --git a/frontend/src/views/CustomersView.vue b/frontend/src/views/CustomersView.vue
index 8cc07b4bb..7fe73d2a3 100644
--- a/frontend/src/views/CustomersView.vue
+++ b/frontend/src/views/CustomersView.vue
@@ -6,9 +6,11 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import CustomersTable from '@/components/customers/CustomersTable.vue'
+import ImportOrganizationsModal from '@/components/organizations/ImportOrganizationsModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
+  faCircleArrowUp,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
@@ -17,16 +19,34 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { canManageCustomers } from '@/lib/permissions'
 import { useCustomers } from '@/queries/organizations/customers'
 import { useI18n } from 'vue-i18n'
-import { getExport } from '@/lib/organizations/customers'
+import {
+  getExport,
+  getImportTemplate,
+  validateCustomersImport,
+  confirmCustomersImport,
+  CUSTOMERS_KEY,
+  CUSTOMERS_TOTAL_KEY,
+} from '@/lib/organizations/customers'
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
 const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useCustomers()
 
 const isShownCreateCustomerDrawer = ref(false)
+const isShownImportCustomersModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageCustomers()
+      ? [
+          {
+            id: 'importCustomers',
+            label: t('customers.import_customers'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportCustomersModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('customers.export_customers_to_pdf'),
@@ -106,5 +126,18 @@ async function exportCustomers(format: 'pdf' | 'csv') {
       :isShownCreateCustomerDrawer="isShownCreateCustomerDrawer"
       @close-drawer="isShownCreateCustomerDrawer = false"
     />
+    <!-- import customers modal -->
+    <ImportOrganizationsModal
+      :is-shown="isShownImportCustomersModal"
+      entity-name="customers"
+      entity-label="customer"
+      :cache-keys="{ main: CUSTOMERS_KEY, total: CUSTOMERS_TOTAL_KEY }"
+      :api="{
+        getTemplate: getImportTemplate,
+        validate: validateCustomersImport,
+        confirm: confirmCustomersImport,
+      }"
+      @close="isShownImportCustomersModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/DistributorsView.vue b/frontend/src/views/DistributorsView.vue
index fc0acbb35..54055bd08 100644
--- a/frontend/src/views/DistributorsView.vue
+++ b/frontend/src/views/DistributorsView.vue
@@ -6,9 +6,11 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import DistributorsTable from '@/components/distributors/DistributorsTable.vue'
+import ImportOrganizationsModal from '@/components/organizations/ImportOrganizationsModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
+  faCircleArrowUp,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
@@ -17,16 +19,34 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { canManageDistributors } from '@/lib/permissions'
 import { useDistributors } from '@/queries/organizations/distributors'
 import { useI18n } from 'vue-i18n'
-import { getExport } from '@/lib/organizations/distributors'
+import {
+  getExport,
+  getImportTemplate,
+  validateDistributorsImport,
+  confirmDistributorsImport,
+  DISTRIBUTORS_KEY,
+  DISTRIBUTORS_TOTAL_KEY,
+} from '@/lib/organizations/distributors'
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
 const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useDistributors()
 
 const isShownCreateDistributorDrawer = ref(false)
+const isShownImportDistributorsModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageDistributors()
+      ? [
+          {
+            id: 'importDistributors',
+            label: t('distributors.import_distributors'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportDistributorsModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('distributors.export_distributors_to_pdf'),
@@ -107,5 +127,18 @@ async function exportDistributors(format: 'pdf' | 'csv') {
       :isShownCreateDistributorDrawer="isShownCreateDistributorDrawer"
       @close-drawer="isShownCreateDistributorDrawer = false"
     />
+    <!-- import distributors modal -->
+    <ImportOrganizationsModal
+      :is-shown="isShownImportDistributorsModal"
+      entity-name="distributors"
+      entity-label="distributor"
+      :cache-keys="{ main: DISTRIBUTORS_KEY, total: DISTRIBUTORS_TOTAL_KEY }"
+      :api="{
+        getTemplate: getImportTemplate,
+        validate: validateDistributorsImport,
+        confirm: confirmDistributorsImport,
+      }"
+      @close="isShownImportDistributorsModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/ResellersView.vue b/frontend/src/views/ResellersView.vue
index 127c98397..8f2858757 100644
--- a/frontend/src/views/ResellersView.vue
+++ b/frontend/src/views/ResellersView.vue
@@ -6,9 +6,11 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import ResellersTable from '@/components/resellers/ResellersTable.vue'
+import ImportOrganizationsModal from '@/components/organizations/ImportOrganizationsModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
+  faCircleArrowUp,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
@@ -17,16 +19,34 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { canManageResellers } from '@/lib/permissions'
 import { useResellers } from '@/queries/organizations/resellers'
 import { useI18n } from 'vue-i18n'
-import { getExport } from '@/lib/organizations/resellers'
+import {
+  getExport,
+  getImportTemplate,
+  validateResellersImport,
+  confirmResellersImport,
+  RESELLERS_KEY,
+  RESELLERS_TOTAL_KEY,
+} from '@/lib/organizations/resellers'
 import { downloadFile } from '@/lib/common'
 
 const { t } = useI18n()
 const { state, debouncedTextFilter, statusFilter, sortBy, sortDescending } = useResellers()
 
 const isShownCreateResellerDrawer = ref(false)
+const isShownImportResellersModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageResellers()
+      ? [
+          {
+            id: 'importResellers',
+            label: t('resellers.import_resellers'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportResellersModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('resellers.export_resellers_to_pdf'),
@@ -106,5 +126,18 @@ async function exportResellers(format: 'pdf' | 'csv') {
       :isShownCreateResellerDrawer="isShownCreateResellerDrawer"
       @close-drawer="isShownCreateResellerDrawer = false"
     />
+    <!-- import resellers modal -->
+    <ImportOrganizationsModal
+      :is-shown="isShownImportResellersModal"
+      entity-name="resellers"
+      entity-label="reseller"
+      :cache-keys="{ main: RESELLERS_KEY, total: RESELLERS_TOTAL_KEY }"
+      :api="{
+        getTemplate: getImportTemplate,
+        validate: validateResellersImport,
+        confirm: confirmResellersImport,
+      }"
+      @close="isShownImportResellersModal = false"
+    />
   </div>
 </template>
diff --git a/frontend/src/views/UsersView.vue b/frontend/src/views/UsersView.vue
index 3e0bfa457..1404d4ff1 100644
--- a/frontend/src/views/UsersView.vue
+++ b/frontend/src/views/UsersView.vue
@@ -6,12 +6,14 @@
 <script setup lang="ts">
 import { NeButton, NeDropdown, NeHeading } from '@nethesis/vue-components'
 import UsersTable from '@/components/users/UsersTable.vue'
+import ImportUsersModal from '@/components/users/ImportUsersModal.vue'
 import { ref } from 'vue'
 import {
   faChevronDown,
   faCirclePlus,
   faFileCsv,
   faFilePdf,
+  faCircleArrowUp,
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { PRODUCT_NAME } from '@/lib/config'
@@ -33,9 +35,20 @@ const {
 } = useUsers()
 
 const isShownCreateUserDrawer = ref(false)
+const isShownImportUsersModal = ref(false)
 
 function getBulkActionsMenuItems() {
   return [
+    ...(canManageUsers()
+      ? [
+          {
+            id: 'importUsers',
+            label: t('import.users.import_users'),
+            icon: faCircleArrowUp,
+            action: () => (isShownImportUsersModal.value = true),
+          },
+        ]
+      : []),
     {
       id: 'exportFilteredToPdf',
       label: t('users.export_users_to_pdf'),
@@ -114,5 +127,10 @@ async function exportUsers(format: 'pdf' | 'csv') {
       :isShownCreateUserDrawer="isShownCreateUserDrawer"
       @close-drawer="isShownCreateUserDrawer = false"
     />
+    <!-- import users drawer -->
+    <ImportUsersModal
+      :is-shown="isShownImportUsersModal"
+      @close="isShownImportUsersModal = false"
+    />
   </div>
 </template>
diff --git a/proxy/.render-build-trigger b/proxy/.render-build-trigger
index 320733ced..79cf2226b 100644
--- a/proxy/.render-build-trigger
+++ b/proxy/.render-build-trigger
@@ -2,9 +2,9 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE
-# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-04-22T07:15:29Z
+# 2. Run: perl -i -pe "s/LAST_UPDATE=2026-05-08T15:02:49Z
 # 2. Commit and push changes to trigger Docker rebuilds
diff --git a/services/mimir/.render-build-trigger b/services/mimir/.render-build-trigger
index f6a0c597a..c182a233e 100644
--- a/services/mimir/.render-build-trigger
+++ b/services/mimir/.render-build-trigger
@@ -2,7 +2,7 @@
 # This file is used to force Docker service rebuilds in PR previews
 # Modify LAST_UPDATE to trigger rebuilds
 
-LAST_UPDATE=2026-04-22T07:15:29Z
+LAST_UPDATE=2026-05-08T15:02:49Z
 
 # Instructions:
 # 1. To force rebuild of Docker services in a PR, update LAST_UPDATE