From 9fd59f52eded7c0f1cf22fc55f3e448336110aa6 Mon Sep 17 00:00:00 2001
From: mengstabketemaw <mengstabrealk28@gmail.com>
Date: Tue, 30 Jun 2026 15:57:25 +0300
Subject: [PATCH] feat: add i18n support and localized labels to certification
 and profession features commit

---
 .../certification/pages/CertificationPage.tsx |  60 +--
 .../configuration/pages/ConfigurationPage.tsx |  23 +-
 .../features/exam/pages/ExamDetailPage.tsx    |  24 +-
 .../location/components/LocationDetail.tsx    |  19 +-
 .../location/components/LocationForm.tsx      |   9 +-
 .../location/components/LocationTypeModal.tsx |  28 +-
 .../features/location/pages/LocationPage.tsx  |   5 +-
 .../features/question/pages/QuestionPage.tsx  |  99 +++--
 .../app/features/question/types/question.ts   |   2 +-
 .../result/components/RecordResultModal.tsx   |   6 +-
 .../app/features/result/pages/ResultPage.tsx  | 374 ++++++++++--------
 apps/backoffice/src/app/i18n/locales/am.ts    |  90 +++++
 apps/backoffice/src/app/i18n/locales/en.ts    |  90 +++++
 .../src/app/layouts/BackofficeLayout.tsx      |   2 -
 .../location/components/LocationPicker.tsx    |  16 +-
 .../profile/components/AddressFormContent.tsx |  79 ++--
 .../pages/SeafarerRegistrationPage.tsx        |   5 +-
 libs/ui/src/index.ts                          |   1 +
 .../ui/src/lib/input}/BilingualInput.tsx      |  15 +-
 19 files changed, 593 insertions(+), 354 deletions(-)
 rename {apps/portal/src/app/components => libs/ui/src/lib/input}/BilingualInput.tsx (77%)

diff --git a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx
index 7f18fb7f6..d59296ad9 100644
--- a/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx
+++ b/apps/backoffice/src/app/features/certification/pages/CertificationPage.tsx
@@ -17,6 +17,7 @@ import {
   Alert,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { useTranslation } from 'react-i18next';
 import { IconEdit, IconTrash, IconPlus, IconInfoCircle, IconCertificate } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
 import {
@@ -38,6 +39,7 @@ function CertificationForm({
   onSubmit: (values: { nameEn: string; nameAm: string; descEn: string; descAm: string }, isEdit: boolean) => void;
   onCancel: () => void;
 }) {
+  const { t } = useTranslation();
   const [nameEn, setNameEn] = useState(editing?.name?.en ?? '');
   const [nameAm, setNameAm] = useState(editing?.name?.am ?? '');
   const [descEn, setDescEn] = useState(editing?.description?.en ?? '');
@@ -56,13 +58,13 @@ function CertificationForm({
     <Paper p="md" withBorder mb="md" radius="md">
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
-          <TextInput label="Name (English)" placeholder="Certificate name in English" value={nameEn} onChange={(e) => setNameEn(e.currentTarget.value)} size="sm" required />
-          <TextInput label="Name (Amharic)" placeholder="የምስክር ወረቀት ስም" value={nameAm} onChange={(e) => setNameAm(e.currentTarget.value)} size="sm" required />
-          <Textarea label="Description (English)" placeholder="English description" value={descEn} onChange={(e) => setDescEn(e.currentTarget.value)} size="sm" autosize minRows={2} />
-          <Textarea label="Description (Amharic)" placeholder="የአማርኛ መግለጫ" value={descAm} onChange={(e) => setDescAm(e.currentTarget.value)} size="sm" autosize minRows={2} />
+          <TextInput label={t('certification.form.nameEn')} placeholder={t('certification.form.nameEnPlaceholder')} value={nameEn} onChange={(e) => setNameEn(e.currentTarget.value)} size="sm" required />
+          <TextInput label={t('certification.form.nameAm')} placeholder={t('certification.form.nameAmPlaceholder')} value={nameAm} onChange={(e) => setNameAm(e.currentTarget.value)} size="sm" required />
+          <Textarea label={t('certification.form.descEn')} placeholder={t('certification.form.descEnPlaceholder')} value={descEn} onChange={(e) => setDescEn(e.currentTarget.value)} size="sm" autosize minRows={2} />
+          <Textarea label={t('certification.form.descAm')} placeholder={t('certification.form.descAmPlaceholder')} value={descAm} onChange={(e) => setDescAm(e.currentTarget.value)} size="sm" autosize minRows={2} />
           <Group justify="flex-end">
-            <Button variant="default" onClick={onCancel} size="sm">Cancel</Button>
-            <Button type="submit" size="sm" loading={isSubmitting}>{editing ? 'Update' : 'Create'}</Button>
+            <Button variant="default" onClick={onCancel} size="sm">{t('certification.cancel')}</Button>
+            <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('certification.update') : t('certification.create')}</Button>
           </Group>
         </Stack>
       </form>
@@ -71,6 +73,8 @@ function CertificationForm({
 }
 
 export function CertificationPage() {
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
   const { data, isLoading, isError } = useGetCertificationsQuery();
   const [createCert, { isLoading: isCreating }] = useCreateCertificationMutation();
   const [updateCert, { isLoading: isUpdating }] = useUpdateCertificationMutation();
@@ -94,14 +98,14 @@ export function CertificationPage() {
     try {
       if (isEdit && editing) {
         await updateCert({ id: editing.id, name, description }).unwrap();
-        notify.success('Certification updated');
+        notify.success(t('certification.updated'));
       } else {
         await createCert({ name, description }).unwrap();
-        notify.success('Certification created');
+        notify.success(t('certification.created'));
       }
       resetForm();
     } catch {
-      notify.error('Operation failed');
+      notify.error(t('certification.error'));
     }
   };
 
@@ -109,27 +113,27 @@ export function CertificationPage() {
     if (!deleteTarget) return;
     try {
       await deleteCert(deleteTarget.id).unwrap();
-      notify.success('Certification deleted');
+      notify.success(t('certification.deleted'));
       closeDelete();
       setDeleteTarget(null);
     } catch {
-      notify.error('Failed to delete');
+      notify.error(t('certification.error'));
     }
   };
 
   if (isLoading) return <Center py="xl"><Loader /></Center>;
-  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title="Error loading certifications" />;
+  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title={t('certification.loadError')} />;
 
   return (
     <Stack gap="lg">
       <Group justify="space-between" align="flex-end">
         <div>
-          <Title order={2}>Certifications</Title>
-          <Text fz="sm" c="dimmed">Manage certification types (e.g. CoC, CoP)</Text>
+          <Title order={2}>{t('certification.title')}</Title>
+          <Text fz="sm" c="dimmed">{t('certification.subtitle')}</Text>
         </div>
         {!showForm && (
           <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
-            Add Certification
+            {t('certification.add')}
           </Button>
         )}
       </Group>
@@ -147,24 +151,22 @@ export function CertificationPage() {
         <Table striped highlightOnHover>
           <Table.Thead bg="var(--mantine-color-default-hover)">
             <Table.Tr>
-              <Table.Th>Name (EN)</Table.Th>
-              <Table.Th>Name (AM)</Table.Th>
-              <Table.Th>Description</Table.Th>
-              <Table.Th>Status</Table.Th>
+              <Table.Th>{t('certification.columns.name')}</Table.Th>
+              <Table.Th>{t('certification.columns.description')}</Table.Th>
+              <Table.Th>{t('certification.columns.status')}</Table.Th>
               <Table.Th />
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
             {certifications.map((cert) => (
               <Table.Tr key={cert.id}>
-                <Table.Td><Text fz="sm" fw={500}>{cert.name.en}</Text></Table.Td>
-                <Table.Td>{cert.name.am}</Table.Td>
+                <Table.Td><Text fz="sm" fw={500}>{cert.name[locale]}</Text></Table.Td>
                 <Table.Td>
-                  <Text fz="sm" lineClamp={2} maw={250}>{cert.description.en || cert.description.am}</Text>
+                  <Text fz="sm" lineClamp={2} maw={250}>{cert.description[locale]}</Text>
                 </Table.Td>
                 <Table.Td>
                   <Badge size="sm" variant="light" color={cert.isActive ? 'teal' : 'gray'}>
-                    {cert.isActive ? 'Active' : 'Inactive'}
+                    {cert.isActive ? t('certification.status.active') : t('certification.status.inactive')}
                   </Badge>
                 </Table.Td>
                 <Table.Td>
@@ -181,8 +183,8 @@ export function CertificationPage() {
             ))}
             {certifications.length === 0 && (
               <Table.Tr>
-                <Table.Td colSpan={5}>
-                  <Text c="dimmed" ta="center" py="xl">No certifications found</Text>
+                <Table.Td colSpan={4}>
+                  <Text c="dimmed" ta="center" py="xl">{t('certification.noItems')}</Text>
                 </Table.Td>
               </Table.Tr>
             )}
@@ -190,11 +192,11 @@ export function CertificationPage() {
         </Table>
       </Paper>
 
-      <Modal opened={deleteOpened} onClose={closeDelete} title="Delete Certification" size="sm">
-        <Text mb="md">Are you sure you want to delete <strong>{deleteTarget?.name?.en}</strong>?</Text>
+      <Modal opened={deleteOpened} onClose={closeDelete} title={t('certification.confirmDelete')} size="sm">
+        <Text mb="md">{t('certification.deleteConfirmText', { name: deleteTarget?.name?.[locale] })}</Text>
         <Group justify="flex-end">
-          <Button variant="default" onClick={closeDelete} size="sm">Cancel</Button>
-          <Button color="red" onClick={handleDelete} size="sm">Delete</Button>
+          <Button variant="default" onClick={closeDelete} size="sm">{t('certification.cancel')}</Button>
+          <Button color="red" onClick={handleDelete} size="sm">{t('certification.delete')}</Button>
         </Group>
       </Modal>
     </Stack>
diff --git a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
index 15e39f07f..17902ca67 100644
--- a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
+++ b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
@@ -129,7 +129,8 @@ function ProfessionForm({ editingProf, deptOptions, isSubmitting, onSubmit, onCa
 }
 
 function ProfessionTab() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
   const { data: deptRes } = useGetOrganizationsQuery();
   const { data: profRes, isLoading, isError } = useGetProfessionsQuery();
   const [createProfession, { isLoading: isCreating }] = useCreateProfessionMutation();
@@ -146,7 +147,7 @@ function ProfessionTab() {
 
   const deptOptions = departments.filter((d) => d?.status?.toLowerCase() === 'active').map((d) => ({
     value: d.id,
-    label: d.name?.en ?? d.name ?? '',
+    label: d.name?.[locale] ?? d.name ?? '',
   }));
 
   const resetProfForm = useCallback(() => {
@@ -205,8 +206,8 @@ function ProfessionTab() {
 
   const getDeptName = useCallback((deptId: string) => {
     const dept = departments.find((d) => d.id === deptId);
-    return dept ? dept.name.en : '-';
-  }, [departments]);
+    return dept ? (dept.name?.[locale] ?? dept.name?.en ?? '-') : '-';
+  }, [departments, locale]);
 
   if (isLoading) {
     return <Center py="xl"><Loader /></Center>;
@@ -245,8 +246,7 @@ function ProfessionTab() {
       <Table striped highlightOnHover>
         <Table.Thead>
           <Table.Tr>
-            <Table.Th>{t('configuration.nameEn')}</Table.Th>
-            <Table.Th>{t('configuration.nameAm')}</Table.Th>
+            <Table.Th>{t('configuration.name')}</Table.Th>
             <Table.Th>{t('configuration.description')}</Table.Th>
             <Table.Th>{t('configuration.department')}</Table.Th>
             <Table.Th />
@@ -255,10 +255,9 @@ function ProfessionTab() {
         <Table.Tbody>
           {professions.filter((p) => p.isActive).map((prof) => (
             <Table.Tr key={prof.id}>
-              <Table.Td>{prof.name.en}</Table.Td>
-              <Table.Td>{prof.name.am}</Table.Td>
+              <Table.Td>{prof.name[locale]}</Table.Td>
               <Table.Td>
-                <Text size="sm" lineClamp={2} maw={200}>{prof.description.en ?? prof.description.am}</Text>
+                <Text size="sm" lineClamp={2} maw={200}>{prof.description[locale]}</Text>
               </Table.Td>
               <Table.Td>{getDeptName(prof.departmentId)}</Table.Td>
               <Table.Td>
@@ -275,7 +274,7 @@ function ProfessionTab() {
           ))}
           {professions.length === 0 && (
             <Table.Tr>
-              <Table.Td colSpan={5}>
+              <Table.Td colSpan={4}>
                 <Text c="dimmed" ta="center" py="xl">
                   {t('configuration.noProfessions')}
                 </Text>
@@ -287,7 +286,7 @@ function ProfessionTab() {
 
       <Modal opened={deleteOpened} onClose={closeDelete} title={t('configuration.confirmDelete')} size="sm">
         <Text mb="md">
-          {t('configuration.deleteConfirmText', { name: deleteTarget?.name?.en ?? '' })}
+          {t('configuration.deleteConfirmText', { name: deleteTarget?.name?.[locale] ?? '' })}
         </Text>
         <Group justify="flex-end">
           <Button variant="default" onClick={closeDelete} size="sm">{t('configuration.cancel')}</Button>
@@ -314,7 +313,7 @@ export function ConfigurationPage() {
             {t('location.title')}
           </Tabs.Tab>
           <Tabs.Tab value="certifications" leftSection={<IconCertificate size={16} />}>
-            Certifications
+            {t('certification.title')}
           </Tabs.Tab>
         </Tabs.List>
 
diff --git a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
index c9de1a010..2f00a0d25 100644
--- a/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
+++ b/apps/backoffice/src/app/features/exam/pages/ExamDetailPage.tsx
@@ -177,14 +177,25 @@ export function ExamDetailPage() {
       });
     } catch { /* logo not available */ }
 
-    const qHtml = (exam.questions ?? []).map((q, i) => `
+    const qMap = new Map(allQuestions.map((qq) => [qq.id, qq]));
+    const qHtml = (exam.questions ?? []).map((q, i) => {
+      const full = qMap.get(q.id);
+      const titleParts = [q.title.en];
+      if (q.title.am) titleParts.push(q.title.am);
+      const titleStr = titleParts.join(' / ');
+      const desc = full?.description;
+      const descParts: string[] = [];
+      if (desc?.en) descParts.push(desc.en);
+      if (desc?.am) descParts.push(desc.am);
+      return `
       <div style="margin-bottom: 24px; page-break-inside: avoid;">
         <p style="font-weight: 700; margin-bottom: 4px; font-size: 13px;">Question ${i + 1} (${q.points} pts — ${FORM_LABEL[q.form] ?? q.form})</p>
-        <p style="margin: 0 0 8px 0; font-size: 14px; line-height: 1.5;">${q.title.en}</p>
+        <p style="margin: 0 0 4px 0; font-size: 14px; line-height: 1.5;">${titleStr}</p>
+        ${descParts.length > 0 ? `<p style="margin: 0 0 8px 0; font-size: 12px; color: #555; line-height: 1.4;">${descParts.join(' / ')}</p>` : ''}
         ${q.form === 'ESSAY' ? '<div style="border-bottom: 1px dashed #ccc; height: 80px; margin-bottom: 12px;"></div>'.repeat(3) : ''}
         ${q.form === 'CHOICE' ? ['A. ______', 'B. ______', 'C. ______', 'D. ______'].map(l => `<p style="margin: 4px 0; font-size: 13px;">${l}</p>`).join('') : ''}
-      </div>
-    `).join('');
+      </div>`;
+    }).join('');
 
     printWindow.document.write(`
       <html><head><title>${exam.title.en}</title>
@@ -200,13 +211,12 @@ export function ExamDetailPage() {
       </style></head><body>
       <div class="header">
         ${logoBase64 ? `<img src="${logoBase64}" alt="Logo" class="header-logo" />` : ''}
-        <h1>${exam.title.en}</h1>
-        <p>${exam.title.am}</p>
+        <h1>${exam.title.en}${exam.title.am ? ' / ' + exam.title.am : ''}</h1>
         <p>Date: ${exam.date} | Venue: ${exam.venue}</p>
         <p>Form: ${FORM_LABEL[exam.form]} | Type: ${TYPE_LABEL[exam.type]} | Time Allowed: ${exam.givenTime ? `${exam.givenTime.days}d ${exam.givenTime.hours}h ${exam.givenTime.minutes}m` : 'N/A'}</p>
         <p>Pass Mark: ${exam.cuttingPoint} | Total Questions: ${(exam.questions ?? []).length}</p>
       </div>
-      ${exam.direction?.en ? `<div class="directions"><strong>Directions:</strong>${exam.direction.en}</div>` : ''}
+      ${exam.direction?.en || exam.direction?.am ? `<div class="directions"><strong>Directions:</strong>${[exam.direction?.en, exam.direction?.am].filter(Boolean).join(' / ')}</div>` : ''}
       ${qHtml}
       <div style="margin-top: 40px; border-top: 1px solid #ccc; padding-top: 12px; font-size: 12px; color: #888; text-align: center;">
         Generated by EMA — Ethiopian Maritime Authority
diff --git a/apps/backoffice/src/app/features/location/components/LocationDetail.tsx b/apps/backoffice/src/app/features/location/components/LocationDetail.tsx
index f91292497..769137cc6 100644
--- a/apps/backoffice/src/app/features/location/components/LocationDetail.tsx
+++ b/apps/backoffice/src/app/features/location/components/LocationDetail.tsx
@@ -35,7 +35,8 @@ export function LocationDetail({
   onEdit,
   onDelete,
 }: LocationDetailProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
   const typeInfo = locationTypes.find(
     (lt) => lt.id === location.locationTypeId,
   );
@@ -47,7 +48,7 @@ export function LocationDetail({
   return (
     <Paper p="lg" radius="md" withBorder>
       <Group justify="space-between" mb="xs">
-        <Title order={4}>{location.names.en}</Title>
+        <Title order={4}>{location.names[locale]}</Title>
         <Group gap="xs">
           <Button
             variant="light"
@@ -89,7 +90,7 @@ export function LocationDetail({
         </Badge>
         {typeInfo && (
           <Badge size="lg" variant="light" color="teal">
-            {typeInfo.names.en}
+            {typeInfo.names[locale]}
           </Badge>
         )}
       </Group>
@@ -99,15 +100,9 @@ export function LocationDetail({
       <Stack gap="sm">
         <div>
           <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-            {t('location.nameEn')}
+            {t('location.name')}
           </Text>
-          <Text size="sm">{location.names.en}</Text>
-        </div>
-        <div>
-          <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
-            {t('location.nameAm')}
-          </Text>
-          <Text size="sm">{location.names.am}</Text>
+          <Text size="sm">{location.names[locale]}</Text>
         </div>
         <div>
           <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
@@ -120,7 +115,7 @@ export function LocationDetail({
             <Text size="xs" c="dimmed" tt="uppercase" fw={600}>
               {t('location.type')}
             </Text>
-            <Text size="sm">{typeInfo.names.en} (Level {typeInfo.level})</Text>
+            <Text size="sm">{typeInfo.names[locale]} ({t('location.level')} {typeInfo.level})</Text>
           </div>
         )}
       </Stack>
diff --git a/apps/backoffice/src/app/features/location/components/LocationForm.tsx b/apps/backoffice/src/app/features/location/components/LocationForm.tsx
index 0cfee89bb..719de957a 100644
--- a/apps/backoffice/src/app/features/location/components/LocationForm.tsx
+++ b/apps/backoffice/src/app/features/location/components/LocationForm.tsx
@@ -44,7 +44,8 @@ export function LocationForm({
   onCancel,
   isSubmitting,
 }: LocationFormProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
 
   const isEditing = !!editingLocation;
 
@@ -125,7 +126,7 @@ export function LocationForm({
       {parentLocation && !isEditing && (
         <TextInput
           label={t('location.parent')}
-          value={parentLocation.names.en}
+          value={parentLocation.names[locale]}
           disabled
           mb="sm"
           size="sm"
@@ -139,7 +140,7 @@ export function LocationForm({
               placeholder={t('location.selectType')}
               data={allAtLevel.map((lt) => ({
                 value: lt.id,
-                label: lt.names.en,
+                label: lt.names[locale],
               }))}
               {...form.getInputProps('locationTypeId')}
               size="sm"
@@ -153,7 +154,7 @@ export function LocationForm({
               </Text>
               {type ? (
                 <Badge size="lg" variant="light" color="blue">
-                  {type.names.en}
+                  {type.names[locale]}
                 </Badge>
               ) : (
                 <Text size="sm" c="red">
diff --git a/apps/backoffice/src/app/features/location/components/LocationTypeModal.tsx b/apps/backoffice/src/app/features/location/components/LocationTypeModal.tsx
index 4f040d4e6..8db7faa67 100644
--- a/apps/backoffice/src/app/features/location/components/LocationTypeModal.tsx
+++ b/apps/backoffice/src/app/features/location/components/LocationTypeModal.tsx
@@ -32,7 +32,8 @@ interface LocationTypeFormValues {
 }
 
 export function LocationTypeModal({ opened, onClose }: { opened: boolean; onClose: () => void }) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
   const { data: locationTypes, isLoading } = useGetLocationTypesQuery();
   const [createType] = useCreateLocationTypeMutation();
   const [updateType] = useUpdateLocationTypeMutation();
@@ -49,9 +50,9 @@ export function LocationTypeModal({ opened, onClose }: { opened: boolean; onClos
       level: 1,
     },
     validate: {
-      code: (v) => (!v ? 'Code is required' : null),
-      namesEn: (v) => (!v ? 'English name is required' : null),
-      namesAm: (v) => (!v ? 'Amharic name is required' : null),
+      code: (v) => (!v ? t('location.validation.codeRequired') : null),
+      namesEn: (v) => (!v ? t('location.validation.nameEnRequired') : null),
+      namesAm: (v) => (!v ? t('location.validation.nameAmRequired') : null),
       level: (v) => (v < 1 ? 'Level must be at least 1' : null),
     },
   });
@@ -119,6 +120,7 @@ export function LocationTypeModal({ opened, onClose }: { opened: boolean; onClos
           variant="light"
           leftSection={<IconPlus size={16} />}
           onClick={() => setShowForm(true)}
+          mt="md"
           mb="md"
           size="sm"
         >
@@ -130,25 +132,25 @@ export function LocationTypeModal({ opened, onClose }: { opened: boolean; onClos
         <form onSubmit={handleSubmit}>
           <Stack gap="sm" mb="md">
             <TextInput
-              label="Code"
+              label={t('location.code')}
               placeholder="e.g., COUNTRY, REGION, CITY"
               {...form.getInputProps('code')}
               size="sm"
             />
             <TextInput
-              label="Name (English)"
+              label={t('location.nameEn')}
               placeholder="English name"
               {...form.getInputProps('namesEn')}
               size="sm"
             />
             <TextInput
-              label="Name (Amharic)"
+              label={t('location.nameAm')}
               placeholder="የአማርኛ ስም"
               {...form.getInputProps('namesAm')}
               size="sm"
             />
             <NumberInput
-              label="Level"
+              label={t('location.level')}
               placeholder="1"
               min={1}
               max={10}
@@ -179,10 +181,9 @@ export function LocationTypeModal({ opened, onClose }: { opened: boolean; onClos
         <Table striped highlightOnHover>
           <Table.Thead>
             <Table.Tr>
-              <Table.Th>Level</Table.Th>
-              <Table.Th>Code</Table.Th>
-              <Table.Th>Name (EN)</Table.Th>
-              <Table.Th>Name (AM)</Table.Th>
+              <Table.Th>{t('location.level')}</Table.Th>
+              <Table.Th>{t('location.code')}</Table.Th>
+              <Table.Th>{t('location.name')}</Table.Th>
               <Table.Th />
             </Table.Tr>
           </Table.Thead>
@@ -199,8 +200,7 @@ export function LocationTypeModal({ opened, onClose }: { opened: boolean; onClos
                     {type.code}
                   </Badge>
                 </Table.Td>
-                <Table.Td>{type.names.en}</Table.Td>
-                <Table.Td>{type.names.am}</Table.Td>
+                <Table.Td>{type.names[locale]}</Table.Td>
                 <Table.Td>
                   <Group gap="xs">
                     <ActionIcon
diff --git a/apps/backoffice/src/app/features/location/pages/LocationPage.tsx b/apps/backoffice/src/app/features/location/pages/LocationPage.tsx
index 44c2e6736..e8b4f333b 100644
--- a/apps/backoffice/src/app/features/location/pages/LocationPage.tsx
+++ b/apps/backoffice/src/app/features/location/pages/LocationPage.tsx
@@ -31,7 +31,8 @@ import {
 import type { Location } from '../types/location';
 
 export function LocationPage() {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
   const { data: locationTypesRes, isLoading: typesLoading } = useGetLocationTypesQuery();
   const [createLocation, { isLoading: isCreating }] = useCreateLocationMutation();
   const [updateLocation, { isLoading: isUpdating }] = useUpdateLocationMutation();
@@ -221,7 +222,7 @@ export function LocationPage() {
       >
         <Text mb="md">
           {t('location.deleteConfirmText', {
-            name: selectedLocation?.names.en ?? '',
+            name: selectedLocation?.names[locale] ?? '',
           })}
         </Text>
         <Group justify="flex-end">
diff --git a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
index 0e0a31f94..b4ea5de62 100644
--- a/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
+++ b/apps/backoffice/src/app/features/question/pages/QuestionPage.tsx
@@ -10,7 +10,6 @@ import {
   Modal,
   Text,
   TextInput,
-  Textarea,
   Paper,
   Loader,
   Center,
@@ -19,6 +18,7 @@ import {
   NumberInput,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
+import { useTranslation } from 'react-i18next';
 import { IconEdit, IconTrash, IconPlus, IconInfoCircle } from '@tabler/icons-react';
 import { notify } from '@ema-platform/ui';
 import { useGetCertificationsQuery } from '../../certification/api/certification-api';
@@ -44,8 +44,6 @@ function QuestionForm({
     certificationId: string;
     titleEn: string;
     titleAm: string;
-    descriptionEn: string;
-    descriptionAm: string;
     form: string;
     points: number;
     days: number;
@@ -54,11 +52,11 @@ function QuestionForm({
   }, isEdit: boolean) => void;
   onCancel: () => void;
 }) {
+  const { t } = useTranslation();
   const [certificationId, setCertificationId] = useState<string | null>(editing?.certificationId ?? null);
   const [titleEn, setTitleEn] = useState(editing?.title?.en ?? '');
   const [titleAm, setTitleAm] = useState(editing?.title?.am ?? '');
-  const [descriptionEn, setDescriptionEn] = useState(editing?.description?.en ?? '');
-  const [descriptionAm, setDescriptionAm] = useState(editing?.description?.am ?? '');
+
   const [form, setForm] = useState<string | null>(editing?.form ?? null);
   const [points, setPoints] = useState<number>(editing?.points ?? 0);
   const [days, setDays] = useState(editing?.time?.days ?? 0);
@@ -71,29 +69,29 @@ function QuestionForm({
       notify.error('Please fill all required fields');
       return;
     }
-    onSubmit({ certificationId, titleEn, titleAm, descriptionEn, descriptionAm, form, points, days, hours, minutes }, !!editing);
+    onSubmit({
+        certificationId, titleEn, titleAm, form, points, days, hours, minutes
+    }, !!editing);
   };
 
   return (
     <Paper p="md" withBorder mb="md" radius="md">
       <form onSubmit={handleSubmit}>
         <Stack gap="sm">
-          <Select label="Certification" placeholder="Select certification" data={certOptions} value={certificationId} onChange={setCertificationId} size="sm" searchable required />
-          <TextInput label="Title (English)" placeholder="Question in English" value={titleEn} onChange={(e) => setTitleEn(e.currentTarget.value)} size="sm" required />
-          <TextInput label="Title (Amharic)" placeholder="ጥያቄ በአማርኛ" value={titleAm} onChange={(e) => setTitleAm(e.currentTarget.value)} size="sm" required />
-          <Textarea label="Description (English)" placeholder="Question description in English" value={descriptionEn} onChange={(e) => setDescriptionEn(e.currentTarget.value)} size="sm" />
-          <Textarea label="Description (Amharic)" placeholder="ስለ ዝርዝር መረጃ" value={descriptionAm} onChange={(e) => setDescriptionAm(e.currentTarget.value)} size="sm" />
-          <Select label="Form" placeholder="Select form" data={[{ value: 'ESSAY', label: 'Essay' }, { value: 'CHOICE', label: 'Choice' }]} value={form} onChange={setForm} size="sm" required />
-          <NumberInput label="Points" placeholder="Points" value={points} onChange={(v) => setPoints(Number(v))} min={0} size="sm" required />
-          <Text fz="sm" fw={500}>Time Allowed</Text>
+          <Select label={t('question.form.certification')} placeholder={t('question.form.selectCertification')} data={certOptions} value={certificationId} onChange={setCertificationId} size="sm" searchable required />
+          <TextInput label={t('question.form.titleEn')} placeholder={t('question.form.titleEnPlaceholder')} value={titleEn} onChange={(e) => setTitleEn(e.currentTarget.value)} size="sm" required />
+          <TextInput label={t('question.form.titleAm')} placeholder={t('question.form.titleAmPlaceholder')} value={titleAm} onChange={(e) => setTitleAm(e.currentTarget.value)} size="sm" required />
+          <Select label={t('question.form.form')} placeholder={t('question.form.selectForm')} data={[{ value: 'ESSAY', label: t('question.form.essay') }, { value: 'CHOICE', label: t('question.form.choice') }]} value={form} onChange={setForm} size="sm" required />
+          <NumberInput label={t('question.form.points')} placeholder={t('question.form.pointsPlaceholder')} value={points} onChange={(v) => setPoints(Number(v))} min={0} size="sm" required />
+          <Text fz="sm" fw={500}>{t('question.form.timeAllowed')}</Text>
           <Group gap="sm" grow>
-            <NumberInput label="Days" value={days} onChange={(v) => setDays(Number(v))} min={0} size="sm" />
-            <NumberInput label="Hours" value={hours} onChange={(v) => setHours(Number(v))} min={0} size="sm" />
-            <NumberInput label="Minutes" value={minutes} onChange={(v) => setMinutes(Number(v))} min={0} size="sm" />
+            <NumberInput label={t('question.form.days')} value={days} onChange={(v) => setDays(Number(v))} min={0} size="sm" />
+            <NumberInput label={t('question.form.hours')} value={hours} onChange={(v) => setHours(Number(v))} min={0} size="sm" />
+            <NumberInput label={t('question.form.minutes')} value={minutes} onChange={(v) => setMinutes(Number(v))} min={0} size="sm" />
           </Group>
           <Group justify="flex-end">
-            <Button variant="default" onClick={onCancel} size="sm">Cancel</Button>
-            <Button type="submit" size="sm" loading={isSubmitting}>{editing ? 'Update' : 'Create'}</Button>
+            <Button variant="default" onClick={onCancel} size="sm">{t('question.cancel')}</Button>
+            <Button type="submit" size="sm" loading={isSubmitting}>{editing ? t('question.update') : t('question.create')}</Button>
           </Group>
         </Stack>
       </form>
@@ -102,6 +100,8 @@ function QuestionForm({
 }
 
 export function QuestionPage() {
+  const { t, i18n } = useTranslation();
+  const locale = i18n.language as 'en' | 'am';
   const { data: certRes } = useGetCertificationsQuery();
   const { data, isLoading, isError } = useGetQuestionsQuery();
   const [createQ, { isLoading: isCreating }] = useCreateQuestionMutation();
@@ -117,33 +117,31 @@ export function QuestionPage() {
   const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
   const [certFilter, setCertFilter] = useState<string | null>(null);
 
-  const certOptions = certifications.filter((c) => c.isActive).map((c) => ({ value: c.id, label: c.name.en }));
+  const certOptions = certifications.filter((c) => c.isActive).map((c) => ({ value: c.id, label: c.name[locale] }));
 
   const filtered = questions.filter((q) => !certFilter || q.certificationId === certFilter);
 
-  const getCertName = (id: string) => certifications.find((c) => c.id === id)?.name?.en ?? '-';
+  const getCertName = (id: string) => certifications.find((c) => c.id === id)?.name?.[locale] ?? '-';
 
   const resetForm = () => { setEditing(null); setShowForm(false); };
 
   const handleSubmit = async (values: {
     certificationId: string; titleEn: string; titleAm: string;
-    descriptionEn: string; descriptionAm: string; form: string;
-    points: number; days: number; hours: number; minutes: number;
+    form: string; points: number; days: number; hours: number; minutes: number;
   }, isEdit: boolean) => {
     const title = { en: values.titleEn, am: values.titleAm };
-    const description = { en: values.descriptionEn, am: values.descriptionAm };
     const time = { days: values.days, hours: values.hours, minutes: values.minutes };
     try {
       if (isEdit && editing) {
-        await updateQ({ id: editing.id, certificationId: values.certificationId, title, /* description, */ form: values.form as QuestionForm, points: values.points, time }).unwrap();
-        notify.success('Question updated');
+        await updateQ({ id: editing.id, certificationId: values.certificationId, title, form: values.form as QuestionForm, points: values.points, time }).unwrap();
+        notify.success(t('question.updated'));
       } else {
-        await createQ({ certificationId: values.certificationId, title, description, form: values.form as QuestionForm, points: values.points, time }).unwrap();
-        notify.success('Question created');
+        await createQ({ certificationId: values.certificationId, title, description: { en: '', am: '' }, form: values.form as QuestionForm, points: values.points, time }).unwrap();
+        notify.success(t('question.created'));
       }
       resetForm();
     } catch {
-      notify.error('Operation failed');
+      notify.error(t('question.error'));
     }
   };
 
@@ -151,27 +149,24 @@ export function QuestionPage() {
     if (!deleteTarget) return;
     try {
       await deleteQ(deleteTarget.id).unwrap();
-      notify.success('Question deleted');
+      notify.success(t('question.deleted'));
       closeDelete();
       setDeleteTarget(null);
     } catch {
-      notify.error('Failed to delete');
+      notify.error(t('question.error'));
     }
   };
 
   if (isLoading) return <Center py="xl"><Loader /></Center>;
-  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title="Error loading questions" />;
+  if (isError) return <Alert icon={<IconInfoCircle size={16} />} color="red" title={t('question.loadError')} />;
 
   return (
     <Stack gap="lg">
       <Group justify="space-between" align="flex-end">
-        <div>
-          <Title order={2}>Questions</Title>
-          <Text fz="sm" c="dimmed">Manage the question pool for examinations</Text>
-        </div>
+        <Title order={2}>{t('question.title')}</Title>
         {!showForm && (
           <Button variant="light" leftSection={<IconPlus size={16} />} onClick={() => setShowForm(true)} size="sm">
-            Add Question
+            {t('question.addQuestion')}
           </Button>
         )}
       </Group>
@@ -188,29 +183,29 @@ export function QuestionPage() {
 
       <Paper withBorder radius="md">
         <Group p="md" justify="space-between" wrap="wrap" gap="sm">
-          <Text fw={600}>Question Pool</Text>
-          <Select placeholder="Filter by certification" data={[{ value: '', label: 'All' }, ...certOptions]} value={certFilter} onChange={(v) => setCertFilter(v ?? null)} size="sm" style={{ width: 280 }} clearable />
+          <Text fw={600}>{t('question.pool')}</Text>
+          <Select placeholder={t('question.filterByCertification')} data={[{ value: '', label: 'All' }, ...certOptions]} value={certFilter} onChange={(v) => setCertFilter(v ?? null)} size="sm" style={{ width: 280 }} clearable />
         </Group>
         <Table striped highlightOnHover>
           <Table.Thead bg="var(--mantine-color-default-hover)">
             <Table.Tr>
-              <Table.Th>Title (EN)</Table.Th>
-              <Table.Th>Certification</Table.Th>
-              <Table.Th>Form</Table.Th>
-              <Table.Th>Points</Table.Th>
-              <Table.Th>Status</Table.Th>
+              <Table.Th>{t('question.columns.title')}</Table.Th>
+              <Table.Th>{t('question.columns.certification')}</Table.Th>
+              <Table.Th>{t('question.columns.form')}</Table.Th>
+              <Table.Th>{t('question.columns.points')}</Table.Th>
+              <Table.Th>{t('question.columns.status')}</Table.Th>
               <Table.Th />
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
             {filtered.map((q) => (
               <Table.Tr key={q.id}>
-                <Table.Td><Text fz="sm" maw={300} lineClamp={2}>{q.title.en}</Text></Table.Td>
+                <Table.Td><Text fz="sm" maw={300} lineClamp={2}>{q.title[locale]}</Text></Table.Td>
                 <Table.Td><Text fz="sm">{getCertName(q.certificationId)}</Text></Table.Td>
-                <Table.Td><Badge size="sm" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{q.form}</Badge></Table.Td>
+                <Table.Td><Badge size="sm" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{t(`question.form.${q.form === 'ESSAY' ? 'essay' : 'choice'}`)}</Badge></Table.Td>
                 <Table.Td><Text fz="sm" fw={600}>{q.points}</Text></Table.Td>
                 <Table.Td>
-                  <Badge size="sm" variant="light" color={q.isActive ? 'teal' : 'gray'}>{q.isActive ? 'Active' : 'Inactive'}</Badge>
+                  <Badge size="sm" variant="light" color={q.isActive ? 'teal' : 'gray'}>{q.isActive ? t('question.status.active') : t('question.status.inactive')}</Badge>
                 </Table.Td>
                 <Table.Td>
                   <Group gap="xs">
@@ -227,7 +222,7 @@ export function QuestionPage() {
             {filtered.length === 0 && (
               <Table.Tr>
                 <Table.Td colSpan={6}>
-                  <Text c="dimmed" ta="center" py="xl">No questions found</Text>
+                  <Text c="dimmed" ta="center" py="xl">{t('question.noQuestions')}</Text>
                 </Table.Td>
               </Table.Tr>
             )}
@@ -235,11 +230,11 @@ export function QuestionPage() {
         </Table>
       </Paper>
 
-      <Modal opened={deleteOpened} onClose={closeDelete} title="Delete Question" size="sm">
-        <Text mb="md">Are you sure you want to delete this question?</Text>
+      <Modal opened={deleteOpened} onClose={closeDelete} title={t('question.confirmDelete')} size="sm">
+        <Text mb="md">{t('question.deleteConfirmText')}</Text>
         <Group justify="flex-end">
-          <Button variant="default" onClick={closeDelete} size="sm">Cancel</Button>
-          <Button color="red" onClick={handleDelete} size="sm">Delete</Button>
+          <Button variant="default" onClick={closeDelete} size="sm">{t('question.cancel')}</Button>
+          <Button color="red" onClick={handleDelete} size="sm">{t('question.delete')}</Button>
         </Group>
       </Modal>
     </Stack>
diff --git a/apps/backoffice/src/app/features/question/types/question.ts b/apps/backoffice/src/app/features/question/types/question.ts
index 05cf4fbd1..81280f78c 100644
--- a/apps/backoffice/src/app/features/question/types/question.ts
+++ b/apps/backoffice/src/app/features/question/types/question.ts
@@ -30,7 +30,7 @@ export interface ListResponse<T> {
 export interface CreateQuestionPayload {
   certificationId: string;
   title: LocalePair;
-  description: LocalePair;
+  description?: LocalePair;
   form: QuestionForm;
   time?: EstimatedTime;
   points: number;
diff --git a/apps/backoffice/src/app/features/result/components/RecordResultModal.tsx b/apps/backoffice/src/app/features/result/components/RecordResultModal.tsx
index b0ebeaaa1..283ba0761 100644
--- a/apps/backoffice/src/app/features/result/components/RecordResultModal.tsx
+++ b/apps/backoffice/src/app/features/result/components/RecordResultModal.tsx
@@ -109,7 +109,7 @@ export function RecordResultModal({
   };
 
   return (
-    <Modal opened={opened} onClose={onClose} title={`Record Result — ${exam.title.en}`} size="90%" radius="lg">
+    <Modal opened={opened} onClose={onClose} title={`Record Result — ${exam.title.en}`} size="lg" radius="lg">
       <Stack gap="md">
         <Select
           label="Seafarer"
@@ -134,7 +134,6 @@ export function RecordResultModal({
               <Table.Thead>
                 <Table.Tr>
                   <Table.Th>Question</Table.Th>
-                  <Table.Th>Form</Table.Th>
                   <Table.Th>Max Points</Table.Th>
                   <Table.Th>Score</Table.Th>
                   <Table.Th>Remark</Table.Th>
@@ -144,9 +143,6 @@ export function RecordResultModal({
                 {questions.map((q) => (
                   <Table.Tr key={q.id}>
                     <Table.Td><Text fz="sm" maw={250} lineClamp={2}>{q.title.en}</Text></Table.Td>
-                    <Table.Td>
-                      <Badge size="xs" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>{q.form}</Badge>
-                    </Table.Td>
                     <Table.Td><Text fz="sm" fw={600}>{q.points}</Text></Table.Td>
                     <Table.Td>
                       <NumberInput
diff --git a/apps/backoffice/src/app/features/result/pages/ResultPage.tsx b/apps/backoffice/src/app/features/result/pages/ResultPage.tsx
index 84746b07b..67e7295b4 100644
--- a/apps/backoffice/src/app/features/result/pages/ResultPage.tsx
+++ b/apps/backoffice/src/app/features/result/pages/ResultPage.tsx
@@ -1,4 +1,4 @@
-import { useState, type ElementType } from 'react';
+import { useState, useCallback, type ElementType } from 'react';
 import {
   Stack,
   Title,
@@ -17,6 +17,7 @@ import {
   Button,
   ThemeIcon,
   Box,
+  TextInput,
 } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import {
@@ -25,23 +26,20 @@ import {
   IconTrash,
   IconUser,
   IconCertificate,
-  IconScoreboard,
-  IconCheck,
-  IconX,
-  IconCalendar,
-  IconClock,
-  IconMapPin,
+  IconDeviceFloppy,
   IconPlus,
   IconClipboardList,
   IconCircleCheck,
   IconCircleX,
   IconChartBar,
+  IconSearch,
 } from '@tabler/icons-react';
-import { notify } from '@ema-platform/ui';
-import { useGetResultsQuery, useLazyGetResultQuery, useDeleteResultMutation } from '../api/result-api';
+import { notify, BilingualInput } from '@ema-platform/ui';
+import type { BilingualValue } from '@ema-platform/ui';
+import { useGetResultsQuery, useLazyGetResultQuery, useDeleteResultMutation, useUpdateResultMutation } from '../api/result-api';
 import { useGetExamsQuery } from '../../exam/api/exam-api';
 import { RecordResultModal } from '../components/RecordResultModal';
-import type { Result } from '../types/result';
+import type { Result, ResultBreakdown } from '../types/result';
 import type { Exam } from '../../exam/types/exam';
 
 const STATUS_COLOR: Record<string, string> = {
@@ -93,154 +91,6 @@ function InfoRow({ label, value }: { label: string; value: string }) {
   );
 }
 
-function ResultDetail({ result }: { result: Result }) {
-  const exam = result.exam;
-  const profile = result.profile;
-  const totalScore = Number(result.totalScore);
-  const cuttingPoint = exam?.cuttingPoint ? Number(exam.cuttingPoint) : 0;
-  const passed = totalScore >= cuttingPoint;
-
-  const formatTime = (t: { days?: number; hours?: number; minutes?: number } | null | undefined) => {
-    if (!t) return '—';
-    const parts: string[] = [];
-    if (t.days) parts.push(`${t.days}d`);
-    if (t.hours) parts.push(`${t.hours}h`);
-    if (t.minutes) parts.push(`${t.minutes}m`);
-    return parts.join(' ') || '—';
-  };
-
-  const formatDate = (d: string | undefined) => d ? new Date(d).toLocaleDateString() : '—';
-  const formatDob = (d: string | undefined) => d ? new Date(d).toLocaleDateString() : '—';
-
-  return (
-    <Stack gap="md">
-      {/* Seafarer Profile */}
-      <Paper withBorder p="md" radius="md">
-        <Group gap="sm" mb="sm">
-          <ThemeIcon size="sm" variant="light" color="blue" radius="xl">
-            <IconUser size={14} />
-          </ThemeIcon>
-          <Text fw={600} fz="sm">Seafarer Profile</Text>
-        </Group>
-        <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="sm">
-          <InfoRow label="Full Name" value={profile ? `${profile.firstName} ${profile.middleName ?? ''} ${profile.lastName}` : result.seafarerId} />
-          <InfoRow label="Gender" value={profile?.gender ?? '—'} />
-          <InfoRow label="Date of Birth" value={formatDob(profile?.dob)} />
-          <InfoRow label="Marital Status" value={profile?.maritalStatus ?? '—'} />
-        </SimpleGrid>
-      </Paper>
-
-      {/* Exam Details */}
-      {exam && (
-        <Paper withBorder p="md" radius="md">
-          <Group gap="sm" mb="sm">
-            <ThemeIcon size="sm" variant="light" color="violet" radius="xl">
-              <IconCertificate size={14} />
-            </ThemeIcon>
-            <Text fw={600} fz="sm">Exam Details</Text>
-          </Group>
-          <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="sm">
-            <InfoRow label="Exam Title" value={exam.title?.en ?? '—'} />
-            <InfoRow label="Title (Amharic)" value={exam.title?.am ?? '—'} />
-            <InfoRow label="Type" value={exam.type ?? '—'} />
-            <InfoRow label="Form" value={exam.form ?? '—'} />
-            <InfoRow label="Venue" value={exam.venue ?? '—'} />
-            <InfoRow label="Date" value={formatDate(exam.date)} />
-            <InfoRow label="Pass Mark" value={String(cuttingPoint)} />
-            <InfoRow label="Evaluation" value={exam.evaluationMethod ?? '—'} />
-            <InfoRow label="Selection" value={exam.selectionMethod ?? '—'} />
-            <InfoRow label="Time Allowed" value={formatTime(exam.givenTime)} />
-            <InfoRow label="Status" value={exam.status ?? '—'} />
-            <InfoRow label="Questions" value={String(exam.questions?.length ?? 0)} />
-          </SimpleGrid>
-          {exam.direction?.en && (
-            <>
-              <Divider my="sm" />
-              <InfoRow label="Directions" value={exam.direction.en} />
-            </>
-          )}
-        </Paper>
-      )}
-
-      {/* Score Breakdown */}
-      <Paper withBorder p="md" radius="md">
-        <Group gap="sm" mb="sm">
-          <ThemeIcon size="sm" variant="light" color="orange" radius="xl">
-            <IconScoreboard size={14} />
-          </ThemeIcon>
-          <Text fw={600} fz="sm">Score Breakdown</Text>
-        </Group>
-        {result.resultBreakdowns.length === 0 ? (
-          <Text fz="sm" c="dimmed">No breakdown data</Text>
-        ) : (
-          <Table striped>
-            <Table.Thead>
-              <Table.Tr>
-                <Table.Th>#</Table.Th>
-                <Table.Th>Question</Table.Th>
-                <Table.Th>Form</Table.Th>
-                <Table.Th>Max</Table.Th>
-                <Table.Th>Score</Table.Th>
-                <Table.Th>Remark</Table.Th>
-              </Table.Tr>
-            </Table.Thead>
-            <Table.Tbody>
-              {result.resultBreakdowns.map((b, i) => {
-                const q = exam?.questions?.find((eq) => eq.id === b.questionId);
-                return (
-                  <Table.Tr key={b.questionId}>
-                    <Table.Td><Text fz="xs">{i + 1}</Text></Table.Td>
-                    <Table.Td>
-                      <Text fz="xs" lineClamp={2} maw={220}>
-                        {q?.title?.en ?? b.questionId.slice(0, 8)}
-                      </Text>
-                    </Table.Td>
-                    <Table.Td>
-                      {q?.form && (
-                        <Badge size="xs" variant="light" color={q.form === 'ESSAY' ? 'blue' : 'violet'}>
-                          {q.form}
-                        </Badge>
-                      )}
-                    </Table.Td>
-                    <Table.Td><Text fz="sm" fw={600}>{q?.points ?? '—'}</Text></Table.Td>
-                    <Table.Td><Text fz="sm" fw={600}>{b.score}</Text></Table.Td>
-                    <Table.Td><Text fz="xs">{b.remark || '—'}</Text></Table.Td>
-                  </Table.Tr>
-                );
-              })}
-            </Table.Tbody>
-          </Table>
-        )}
-
-        <Divider my="sm" />
-
-        <Paper withBorder p="sm" radius="md" bg="gray.0">
-          <SimpleGrid cols={3} spacing="sm">
-            <InfoRow label="Total Score" value={`${totalScore} / ${cuttingPoint}`} />
-            <InfoRow label="Pass Mark" value={String(cuttingPoint)} />
-            <div>
-              <Text fz="xs" c="dimmed" tt="uppercase" fw={600}>Status</Text>
-              <Group gap={4} mt={2}>
-                {passed ? (
-                  <><IconCheck size={14} color="var(--mantine-color-teal-6)" /><Text fz="sm" fw={700} c="teal">PASSED</Text></>
-                ) : (
-                  <><IconX size={14} color="var(--mantine-color-red-6)" /><Text fz="sm" fw={700} c="red">FAILED</Text></>
-                )}
-              </Group>
-            </div>
-          </SimpleGrid>
-        </Paper>
-      </Paper>
-
-      {result.remark && (
-        <Paper withBorder p="md" radius="md">
-          <InfoRow label="Officer Remark" value={result.remark.en || result.remark.am || '—'} />
-        </Paper>
-      )}
-    </Stack>
-  );
-}
-
 export function ResultPage() {
   const { data: examRes } = useGetExamsQuery();
   const { data, isLoading, isError } = useGetResultsQuery();
@@ -250,11 +100,17 @@ export function ResultPage() {
   const results = data?.items ?? [];
 
   const [deleteResult] = useDeleteResultMutation();
+  const [updateResult] = useUpdateResultMutation();
 
+  const [searchQuery, setSearchQuery] = useState('');
   const [examFilter, setExamFilter] = useState<string | null>(null);
   const [detailOpened, { open: openDetail, close: closeDetail }] = useDisclosure(false);
   const [deleteTarget, setDeleteTarget] = useState<Result | null>(null);
   const [deleteOpened, { open: openDelete, close: closeDelete }] = useDisclosure(false);
+  const [detailStatus, setDetailStatus] = useState<string>('PASSED');
+  const [detailRemark, setDetailRemark] = useState<BilingualValue>({ en: '', am: '' });
+  const [detailBreakdowns, setDetailBreakdowns] = useState<ResultBreakdown[]>([]);
+  const [detailSaving, setDetailSaving] = useState(false);
   const [pickerExamId, setPickerExamId] = useState<string | null>(null);
   const [pickerOpened, { open: openPicker, close: closePicker }] = useDisclosure(false);
   const [recordExam, setRecordExam] = useState<Exam | null>(null);
@@ -279,7 +135,17 @@ export function ResultPage() {
     setPickerExamId(null);
   };
 
-  const filtered = results.filter((r) => !examFilter || r.examId === examFilter);
+  const filtered = results.filter((r) => {
+    if (examFilter && r.examId !== examFilter) return false;
+    if (!searchQuery) return true;
+    const q = searchQuery.toLowerCase();
+    if (r.seafarerId.toLowerCase().includes(q)) return true;
+    if (r.seafarer) {
+      const name = `${r.seafarer.firstName} ${r.seafarer.middleName ?? ''} ${r.seafarer.lastName}`.toLowerCase();
+      if (name.includes(q)) return true;
+    }
+    return false;
+  });
 
   const total = results.length;
   const passedCount = results.filter((r) => r.status === 'PASSED').length;
@@ -291,9 +157,38 @@ export function ResultPage() {
 
   const getExamTitle = (id: string) => exams.find((e) => e.id === id)?.title?.en ?? '-';
 
-  const viewDetail = (result: Result) => {
+  const viewDetail = useCallback((result: Result) => {
     fetchDetail(result.id);
+    setDetailStatus(result.status);
+    setDetailRemark({ en: result.remark?.en ?? '', am: result.remark?.am ?? '' });
+    setDetailBreakdowns(result.resultBreakdowns.map((b) => ({ ...b })));
     openDetail();
+  }, [fetchDetail, openDetail]);
+
+  const handleDetailSave = async () => {
+    if (!detailResult) return;
+    setDetailSaving(true);
+    try {
+      await updateResult({
+        id: detailResult.id,
+        status: detailStatus as 'PASSED' | 'FAILED',
+        remark: detailRemark.en || detailRemark.am ? detailRemark : undefined,
+        resultBreakdowns: detailBreakdowns,
+      }).unwrap();
+      notify.success('Result updated');
+      closeDetail();
+    } catch {
+      notify.error('Failed to update result');
+    } finally {
+      setDetailSaving(false);
+    }
+  };
+
+  const handleDetailClose = () => {
+    closeDetail();
+    setDetailBreakdowns([]);
+    setDetailRemark({ en: '', am: '' });
+    setDetailStatus('PASSED');
   };
 
   const handleDelete = async () => {
@@ -333,15 +228,25 @@ export function ResultPage() {
       <Paper withBorder radius="md">
         <Group p="md" justify="space-between" wrap="wrap" gap="sm">
           <Text fw={600}>Results</Text>
-          <Select
-            placeholder="Filter by exam"
-            data={[{ value: '', label: 'All Exams' }, ...examOptions]}
-            value={examFilter}
-            onChange={(v) => setExamFilter(v ?? null)}
-            size="sm"
-            style={{ width: 320 }}
-            clearable
-          />
+          <Group gap="sm" wrap="wrap">
+            <TextInput
+              placeholder="Search seafarer..."
+              leftSection={<IconSearch size={15} />}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.currentTarget.value)}
+              size="sm"
+              style={{ width: 240 }}
+            />
+            <Select
+              placeholder="Filter by exam"
+              data={[{ value: '', label: 'All Exams' }, ...examOptions]}
+              value={examFilter}
+              onChange={(v) => setExamFilter(v ?? null)}
+              size="sm"
+              style={{ width: 280 }}
+              clearable
+            />
+          </Group>
         </Group>
 
         <Table striped highlightOnHover>
@@ -390,7 +295,7 @@ export function ResultPage() {
                       leftSection={<IconEye size={13} />}
                       onClick={() => viewDetail(r)}
                     >
-                      View
+                      View / Edit
                     </Button>
                     <Button
                       size="xs"
@@ -418,7 +323,7 @@ export function ResultPage() {
 
       <Modal
         opened={detailOpened}
-        onClose={closeDetail}
+        onClose={handleDetailClose}
         title="Result Detail"
         size="xl"
         radius="lg"
@@ -426,7 +331,132 @@ export function ResultPage() {
         {isDetailLoading ? (
           <Center py="xl"><Loader /></Center>
         ) : detailResult ? (
-          <ResultDetail result={detailResult} />
+          <Stack gap="md">
+            {/* Seafarer Profile */}
+            <Paper withBorder p="md" radius="md">
+              <Group gap="sm" mb="sm">
+                <ThemeIcon size="sm" variant="light" color="blue" radius="xl">
+                  <IconUser size={14} />
+                </ThemeIcon>
+                <Text fw={600} fz="sm">Seafarer Profile</Text>
+              </Group>
+              <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="sm">
+                <InfoRow label="Full Name" value={detailResult.profile ? `${detailResult.profile.firstName} ${detailResult.profile.middleName ?? ''} ${detailResult.profile.lastName}` : detailResult.seafarerId} />
+                <InfoRow label="Gender" value={detailResult.profile?.gender ?? '—'} />
+                <InfoRow label="Date of Birth" value={detailResult.profile?.dob ? new Date(detailResult.profile.dob).toLocaleDateString() : '—'} />
+                <InfoRow label="Marital Status" value={detailResult.profile?.maritalStatus ?? '—'} />
+              </SimpleGrid>
+            </Paper>
+
+            {/* Exam Details */}
+            {detailResult.exam && (
+              <Paper withBorder p="md" radius="md">
+                <Group gap="sm" mb="sm">
+                  <ThemeIcon size="sm" variant="light" color="violet" radius="xl">
+                    <IconCertificate size={14} />
+                  </ThemeIcon>
+                  <Text fw={600} fz="sm">Exam Details</Text>
+                </Group>
+                <SimpleGrid cols={{ base: 2, sm: 4 }} spacing="sm">
+                  <InfoRow label="Exam Title" value={detailResult.exam.title?.en ?? '—'} />
+                  <InfoRow label="Title (Amharic)" value={detailResult.exam.title?.am ?? '—'} />
+                  <InfoRow label="Type" value={detailResult.exam.type ?? '—'} />
+                  <InfoRow label="Venue" value={detailResult.exam.venue ?? '—'} />
+                  <InfoRow label="Date" value={detailResult.exam.date ? new Date(detailResult.exam.date).toLocaleDateString() : '—'} />
+                  <InfoRow label="Pass Mark" value={String(detailResult.exam.cuttingPoint ?? 0)} />
+                </SimpleGrid>
+              </Paper>
+            )}
+
+            <Divider />
+
+            {/* Editable fields */}
+            <Select
+              label="Status"
+              data={['PASSED', 'FAILED']}
+              value={detailStatus}
+              onChange={(v) => setDetailStatus(v ?? 'PASSED')}
+              size="sm"
+            />
+
+            <BilingualInput
+              label="Remark"
+              placeholder={{ en: 'Officer remark in English', am: 'የኃላፊ አስተያየት በአማርኛ' }}
+              value={detailRemark}
+              onChange={setDetailRemark}
+              size="sm"
+            />
+
+            {detailBreakdowns.length > 0 && (
+              <>
+                <Text fw={600} fz="sm" tt="uppercase" c="gray.6">Score Breakdown</Text>
+                <Table striped>
+                  <Table.Thead>
+                    <Table.Tr>
+                      <Table.Th>#</Table.Th>
+                      <Table.Th>Question</Table.Th>
+                      <Table.Th>Max</Table.Th>
+                      <Table.Th>Score</Table.Th>
+                      <Table.Th>Remark</Table.Th>
+                    </Table.Tr>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {detailBreakdowns.map((b, i) => {
+                      const examDetail = exams.find((e) => e.id === detailResult.examId);
+                      const q = examDetail?.questions?.find((eq) => eq.id === b.questionId);
+                      return (
+                      <Table.Tr key={b.questionId}>
+                        <Table.Td><Text fz="xs">{i + 1}</Text></Table.Td>
+                        <Table.Td>
+                          <Text fz="xs" lineClamp={2} maw={200}>
+                            {q?.title?.en ?? b.questionId.slice(0, 8)}
+                          </Text>
+                        </Table.Td>
+                        <Table.Td><Text fz="sm" fw={600}>{q?.points ?? '—'}</Text></Table.Td>
+                        <Table.Td>
+                          <TextInput
+                            size="xs"
+                            type="number"
+                            style={{ width: 80 }}
+                            value={b.score}
+                            onChange={(e) => {
+                              const updated = [...detailBreakdowns];
+                              updated[i] = { ...updated[i], score: Number(e.currentTarget.value) };
+                              setDetailBreakdowns(updated);
+                            }}
+                          />
+                        </Table.Td>
+                        <Table.Td>
+                          <TextInput
+                            size="xs"
+                            placeholder="Optional"
+                            value={b.remark ?? ''}
+                            onChange={(e) => {
+                              const updated = [...detailBreakdowns];
+                              updated[i] = { ...updated[i], remark: e.currentTarget.value || undefined };
+                              setDetailBreakdowns(updated);
+                            }}
+                          />
+                        </Table.Td>
+                      </Table.Tr>
+                    );})}
+                  </Table.Tbody>
+                </Table>
+              </>
+            )}
+
+            <Group justify="flex-end">
+              <Button variant="default" onClick={handleDetailClose} size="sm">Close</Button>
+              <Button
+                onClick={handleDetailSave}
+                size="sm"
+                loading={detailSaving}
+                leftSection={<IconDeviceFloppy size={15} />}
+              >
+                Save
+              </Button>
+            </Group>
+          </Stack>
         ) : (
           <Text c="dimmed" ta="center" py="xl">No data available</Text>
         )}
diff --git a/apps/backoffice/src/app/i18n/locales/am.ts b/apps/backoffice/src/app/i18n/locales/am.ts
index 9ca713e02..187b52e53 100644
--- a/apps/backoffice/src/app/i18n/locales/am.ts
+++ b/apps/backoffice/src/app/i18n/locales/am.ts
@@ -107,9 +107,11 @@ export const am: Translations = {
     addTitle: 'አካባቢ ያክሉ',
     editTitle: 'አካባቢ ያስተካክሉ',
     code: 'ኮድ',
+    name: 'ስም',
     nameEn: 'ስም (እንግሊዝኛ)',
     nameAm: 'ስም (አማርኛ)',
     type: 'አይነት',
+    level: 'ደረጃ',
     parent: 'ወላጅ',
     selectType: 'አይነት ይምረጡ',
     cancel: 'ሰርዝ',
@@ -223,6 +225,92 @@ export const am: Translations = {
     },
   },
 
+  certification: {
+    title: 'የምስክር ወረቀቶች',
+    subtitle: 'የምስክር ወረቀት አይነቶችን ያስተዳድሩ (ለምሳሌ CoC, CoP)',
+    add: 'የምስክር ወረቀት ያክሉ',
+    noItems: 'ምንም የምስክር ወረቀቶች አልተገኙም',
+    confirmDelete: 'የምስክር ወረቀት ይሰረዝ',
+    deleteConfirmText: 'እርግጠኛ ነዎት {{name}}ን መሰረዝ ይፈልጋሉ?',
+    created: 'የምስክር ወረቀት ተፈጥሯል',
+    updated: 'የምስክር ወረቀት ዘምኗል',
+    deleted: 'የምስክር ወረቀት ተሰርዟል',
+    error: 'ክዋኔው አልተሳካም',
+    loadError: 'የምስክር ወረቀቶችን በመጫን ላይ ስህተት',
+    cancel: 'ሰርዝ',
+    create: 'ፍጠር',
+    update: 'አዘምን',
+    delete: 'ሰርዝ',
+    columns: {
+      name: 'ስም',
+      description: 'መግለጫ',
+      status: 'ሁኔታ',
+    },
+    form: {
+      nameEn: 'ስም (እንግሊዝኛ)',
+      nameEnPlaceholder: 'የምስክር ወረቀት ስም በእንግሊዝኛ',
+      nameAm: 'ስም (አማርኛ)',
+      nameAmPlaceholder: 'የምስክር ወረቀት ስም',
+      descEn: 'መግለጫ (እንግሊዝኛ)',
+      descEnPlaceholder: 'የእንግሊዝኛ መግለጫ',
+      descAm: 'መግለጫ (አማርኛ)',
+      descAmPlaceholder: 'የአማርኛ መግለጫ',
+    },
+    status: {
+      active: 'ንቁ',
+      inactive: 'እንቅስቃሴ የሌለ',
+    },
+  },
+
+  question: {
+    title: 'ጥያቄዎች',
+    pool: 'የጥያቄ ማከማቻ',
+    filterByCertification: 'በምስክር ወረቀት አጣራ',
+    noQuestions: 'ምንም ጥያቄዎች አልተገኙም',
+    addQuestion: 'ጥያቄ ያክሉ',
+    editQuestion: 'ጥያቄ ያስተካክሉ',
+    confirmDelete: 'መሰረዝን ያረጋግጡ',
+    deleteConfirmText: 'እርግጠኛ ነዎት ይህን ጥያቄ መሰረዝ ይፈልጋሉ?',
+    created: 'ጥያቄ ተፈጥሯል',
+    updated: 'ጥያቄ ዘምኗል',
+    deleted: 'ጥያቄ ተሰርዟል',
+    error: 'ክዋኔው አልተሳካም',
+    loadError: 'ጥያቄዎችን በመጫን ላይ ስህተት',
+    cancel: 'ሰርዝ',
+    create: 'ፍጠር',
+    update: 'አዘምን',
+    delete: 'ሰርዝ',
+    columns: {
+      title: 'ርዕስ',
+      certification: 'የምስክር ወረቀት',
+      form: 'ቅጽ',
+      points: 'ነጥብ',
+      status: 'ሁኔታ',
+    },
+    form: {
+      certification: 'የምስክር ወረቀት',
+      selectCertification: 'የምስክር ወረቀት ይምረጡ',
+      titleEn: 'ርዕስ (እንግሊዝኛ)',
+      titleEnPlaceholder: 'ጥያቄ በእንግሊዝኛ',
+      titleAm: 'ርዕስ (አማርኛ)',
+      titleAmPlaceholder: 'ጥያቄ በአማርኛ',
+      form: 'ቅጽ',
+      selectForm: 'ቅጽ ይምረጡ',
+      essay: 'ኢሴይ',
+      choice: 'ምርጫ',
+      points: 'ነጥብ',
+      pointsPlaceholder: 'ነጥብ',
+      timeAllowed: 'የተፈቀደ ጊዜ',
+      days: 'ቀናት',
+      hours: 'ሰአታት',
+      minutes: 'ደቂቃዎች',
+    },
+    status: {
+      active: 'ንቁ',
+      inactive: 'እንቅስቃሴ የሌለ',
+    },
+  },
+
   configuration: {
     title: 'ውቅረት',
     departments: 'ክፍሎች',
@@ -231,8 +319,10 @@ export const am: Translations = {
     professionsList: 'ሙያዎች',
     addDepartment: 'ክፍል ያክሉ',
     addProfession: 'ሙያ ያክሉ',
+    name: 'ስም',
     nameEn: 'ስም (እንግሊዝኛ)',
     nameAm: 'ስም (አማርኛ)',
+    description: 'መግለጫ',
     descEn: 'መግለጫ (እንግሊዝኛ)',
     descAm: 'መግለጫ (አማርኛ)',
     department: 'ክፍል',
diff --git a/apps/backoffice/src/app/i18n/locales/en.ts b/apps/backoffice/src/app/i18n/locales/en.ts
index 2b9c55a42..1d5fe5d94 100644
--- a/apps/backoffice/src/app/i18n/locales/en.ts
+++ b/apps/backoffice/src/app/i18n/locales/en.ts
@@ -105,9 +105,11 @@ export const en = {
     addTitle: 'Add Location',
     editTitle: 'Edit Location',
     code: 'Code',
+    name: 'Name',
     nameEn: 'Name (English)',
     nameAm: 'Name (Amharic)',
     type: 'Type',
+    level: 'Level',
     parent: 'Parent',
     selectType: 'Select type',
     cancel: 'Cancel',
@@ -222,6 +224,92 @@ export const en = {
     },
   },
 
+  certification: {
+    title: 'Certifications',
+    subtitle: 'Manage certification types (e.g. CoC, CoP)',
+    add: 'Add Certification',
+    noItems: 'No certifications found',
+    confirmDelete: 'Delete Certification',
+    deleteConfirmText: 'Are you sure you want to delete {{name}}?',
+    created: 'Certification created',
+    updated: 'Certification updated',
+    deleted: 'Certification deleted',
+    error: 'Operation failed',
+    loadError: 'Error loading certifications',
+    cancel: 'Cancel',
+    create: 'Create',
+    update: 'Update',
+    delete: 'Delete',
+    columns: {
+      name: 'Name',
+      description: 'Description',
+      status: 'Status',
+    },
+    form: {
+      nameEn: 'Name (English)',
+      nameEnPlaceholder: 'Certificate name in English',
+      nameAm: 'Name (Amharic)',
+      nameAmPlaceholder: 'የምስክር ወረቀት ስም',
+      descEn: 'Description (English)',
+      descEnPlaceholder: 'English description',
+      descAm: 'Description (Amharic)',
+      descAmPlaceholder: 'የአማርኛ መግለጫ',
+    },
+    status: {
+      active: 'Active',
+      inactive: 'Inactive',
+    },
+  },
+
+  question: {
+    title: 'Questions',
+    pool: 'Question Pool',
+    filterByCertification: 'Filter by certification',
+    noQuestions: 'No questions found',
+    addQuestion: 'Add Question',
+    editQuestion: 'Edit Question',
+    confirmDelete: 'Confirm Delete',
+    deleteConfirmText: 'Are you sure you want to delete this question?',
+    created: 'Question created',
+    updated: 'Question updated',
+    deleted: 'Question deleted',
+    error: 'Operation failed',
+    loadError: 'Error loading questions',
+    cancel: 'Cancel',
+    create: 'Create',
+    update: 'Update',
+    delete: 'Delete',
+    columns: {
+      title: 'Title',
+      certification: 'Certification',
+      form: 'Form',
+      points: 'Points',
+      status: 'Status',
+    },
+    form: {
+      certification: 'Certification',
+      selectCertification: 'Select certification',
+      titleEn: 'Title (English)',
+      titleEnPlaceholder: 'Question in English',
+      titleAm: 'Title (Amharic)',
+      titleAmPlaceholder: 'ጥያቄ በአማርኛ',
+      form: 'Form',
+      selectForm: 'Select form',
+      essay: 'Essay',
+      choice: 'Choice',
+      points: 'Points',
+      pointsPlaceholder: 'Points',
+      timeAllowed: 'Time Allowed',
+      days: 'Days',
+      hours: 'Hours',
+      minutes: 'Minutes',
+    },
+    status: {
+      active: 'Active',
+      inactive: 'Inactive',
+    },
+  },
+
   configuration: {
     title: 'Configuration',
     departments: 'Departments',
@@ -230,8 +318,10 @@ export const en = {
     professionsList: 'Professions',
     addDepartment: 'Add Department',
     addProfession: 'Add Profession',
+    name: 'Name',
     nameEn: 'Name (English)',
     nameAm: 'Name (Amharic)',
+    description: 'Description',
     descEn: 'Description (English)',
     descAm: 'Description (Amharic)',
     department: 'Department',
diff --git a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
index 210b2553e..1fdc0210f 100644
--- a/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
+++ b/apps/backoffice/src/app/layouts/BackofficeLayout.tsx
@@ -13,7 +13,6 @@ import {
   IconFileDescription,
   IconHeart,
   IconLayoutDashboard,
-  IconMap,
   IconShieldCheck,
   IconRubberStamp,
   IconSettings,
@@ -39,7 +38,6 @@ const NAV_ITEMS: NavItem[] = [
   { to: '/payment-config',       label: 'Payment Config',        icon: IconCreditCard },
   { to: '/analytics',            label: 'Analytics',             icon: IconChartBar },
   { to: '/medical-verification', label: 'Medical Verification',  icon: IconHeart },
-  { to: '/locations',            label: 'Locations',             icon: IconMap },
   { to: '/questions',            label: 'Questions',             icon: IconQuestionMark },
   { to: '/exams',                label: 'Examinations',          icon: IconClipboardList },
   { to: '/exam-results',         label: 'Exam Results',          icon: IconReport },
diff --git a/apps/portal/src/app/features/location/components/LocationPicker.tsx b/apps/portal/src/app/features/location/components/LocationPicker.tsx
index 2b1205f67..a68fb839a 100644
--- a/apps/portal/src/app/features/location/components/LocationPicker.tsx
+++ b/apps/portal/src/app/features/location/components/LocationPicker.tsx
@@ -6,11 +6,12 @@ import { useTranslation } from 'react-i18next';
 
 interface LocationPickerProps {
   value?: string;
-  onChange: (locationId: string | null) => void;
+  onChange?: (locationId: string | null) => void;
+  onChainChange?: (chain: Location[]) => void;
   required?: boolean;
 }
 
-export function LocationPicker({ value, onChange, required }: LocationPickerProps) {
+export function LocationPicker({ value, onChange, onChainChange, required }: LocationPickerProps) {
   const { t } = useTranslation();
   const { data: typesRes, isLoading: typesLoading } = useGetLocationTypesQuery();
   const { data: locsRes, isLoading: locsLoading } = useGetLocationsQuery({ take: 10000 });
@@ -54,7 +55,8 @@ export function LocationPicker({ value, onChange, required }: LocationPickerProp
       current = current.parentId ? locMap.get(current.parentId) : undefined;
     }
     setSelectedChain(chain);
-  }, [value, locMap]);
+    onChainChange?.(chain);
+  }, [value, locMap, onChainChange]);
 
   const currentLevelChildren = useMemo(() => {
     const parentId =
@@ -89,7 +91,8 @@ export function LocationPicker({ value, onChange, required }: LocationPickerProp
       if (!id) {
         const newChain = selectedChain.slice(0, -1);
         setSelectedChain(newChain);
-        onChange(newChain.length > 0 ? newChain[newChain.length - 1].id : null);
+        onChange?.(newChain.length > 0 ? newChain[newChain.length - 1].id : null);
+        onChainChange?.(newChain);
         return;
       }
 
@@ -100,9 +103,10 @@ export function LocationPicker({ value, onChange, required }: LocationPickerProp
       newChain.push(loc);
       setSelectedChain(newChain);
 
-      onChange(id);
+      onChange?.(id);
+      onChainChange?.(newChain);
     },
-    [selectedChain, locMap, onChange, depth],
+    [selectedChain, locMap, onChange, onChainChange, depth],
   );
 
   const buildOptions = (levelIdx: number) => {
diff --git a/apps/portal/src/app/features/profile/components/AddressFormContent.tsx b/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
index 04cb08d26..1be246cb6 100644
--- a/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
+++ b/apps/portal/src/app/features/profile/components/AddressFormContent.tsx
@@ -1,6 +1,10 @@
+import { useCallback, useMemo } from 'react';
 import { Select, SimpleGrid, Text, TextInput } from '@mantine/core';
 import type { FieldErrors, UseFormRegister, UseFormSetValue, UseFormWatch, UseFormTrigger } from 'react-hook-form';
 import { z } from 'zod';
+import { LocationPicker } from '../../location/components/LocationPicker';
+import { useGetLocationTypesQuery } from '../../location/api/location-api';
+import type { Location } from '../../location/types/location';
 
 export const addressSchema = z.object({
   idType: z.string().min(1, 'Select ID type'),
@@ -25,6 +29,13 @@ export type AddressValues = z.infer<typeof addressSchema>;
 
 export const ID_TYPES = ['NID', 'VITAL', 'PASSPORT', 'DRIVERS_LICENSE'] as const;
 
+const LEVEL_TO_FIELD: Record<number, keyof AddressValues> = {
+  1: 'cityId',
+  2: 'subcityId',
+  3: 'woredaId',
+  4: 'kebeleId',
+};
+
 interface AddressFormContentProps {
   register: UseFormRegister<AddressValues>;
   errors: FieldErrors<AddressValues>;
@@ -40,6 +51,38 @@ export function AddressFormContent({
   watch,
   trigger,
 }: AddressFormContentProps) {
+  const { data: typesRes } = useGetLocationTypesQuery();
+  const locationTypes = typesRes?.items ?? [];
+
+  const typeLevelMap = useMemo(() => {
+    const map = new Map<string, number>();
+    locationTypes.forEach((lt) => map.set(lt.id, lt.level));
+    return map;
+  }, [locationTypes]);
+
+  const leafId = watch('kebeleId') || watch('woredaId') || watch('subcityId') || watch('cityId') || undefined;
+
+  const handleChainChange = useCallback(
+    (chain: Location[]) => {
+      if (chain.length > 0 && !typeLevelMap.has(chain[0].locationTypeId)) {
+        return;
+      }
+
+      setValue('cityId', '');
+      setValue('subcityId', '');
+      setValue('woredaId', '');
+      setValue('kebeleId', '');
+
+      chain.forEach((loc) => {
+        const level = typeLevelMap.get(loc.locationTypeId);
+        if (level && LEVEL_TO_FIELD[level]) {
+          setValue(LEVEL_TO_FIELD[level], loc.id);
+        }
+      });
+    },
+    [setValue, typeLevelMap],
+  );
+
   return (
     <>
       <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
@@ -93,37 +136,11 @@ export function AddressFormContent({
       <Text fw={600} fz="sm" tt="uppercase" c="gray.6" mt="lg" mb="sm">
         Address
       </Text>
-      <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md">
-        <TextInput
-          label="Region ID"
-          placeholder="Region UUID (optional)"
-          {...register('regionId')}
-          error={errors.regionId?.message}
-        />
-        <TextInput
-          label="City ID"
-          placeholder="City UUID (optional)"
-          {...register('cityId')}
-          error={errors.cityId?.message}
-        />
-        <TextInput
-          label="Subcity ID"
-          placeholder="Subcity UUID (optional)"
-          {...register('subcityId')}
-          error={errors.subcityId?.message}
-        />
-        <TextInput
-          label="Woreda ID"
-          placeholder="Woreda UUID (optional)"
-          {...register('woredaId')}
-          error={errors.woredaId?.message}
-        />
-        <TextInput
-          label="Kebele ID"
-          placeholder="Kebele UUID (optional)"
-          {...register('kebeleId')}
-          error={errors.kebeleId?.message}
-        />
+      <LocationPicker
+        value={leafId}
+        onChainChange={handleChainChange}
+      />
+      <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="md" mt="md">
         <TextInput
           label="Street Address"
           placeholder="Street name, house number"
diff --git a/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx b/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
index 09628b3c0..63cb98df8 100644
--- a/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
+++ b/apps/portal/src/app/features/seafarer/pages/SeafarerRegistrationPage.tsx
@@ -33,9 +33,8 @@ import {
   IconUser,
 } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
-import { notify } from '@ema-platform/ui';
-import { BilingualInput } from '../../../components/BilingualInput';
-import type { BilingualValue } from '../../../components/BilingualInput';
+import { notify, BilingualInput } from '@ema-platform/ui';
+import type { BilingualValue } from '@ema-platform/ui';
 import { AmharicDatePicker, toEthiopicDateLabel } from '../../../components/AmharicDatePicker';
 import { LocationPicker } from '../../location/components/LocationPicker';
 
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
index f7fc1a158..62e6bd537 100644
--- a/libs/ui/src/index.ts
+++ b/libs/ui/src/index.ts
@@ -1,3 +1,4 @@
+export * from './lib/input/BilingualInput';
 export * from './lib/feedback/ConfirmModal';
 export * from './lib/feedback/ApiErrorAlert';
 export * from './lib/feedback/notify';
diff --git a/apps/portal/src/app/components/BilingualInput.tsx b/libs/ui/src/lib/input/BilingualInput.tsx
similarity index 77%
rename from apps/portal/src/app/components/BilingualInput.tsx
rename to libs/ui/src/lib/input/BilingualInput.tsx
index 8e55c64eb..3e0a9684d 100644
--- a/apps/portal/src/app/components/BilingualInput.tsx
+++ b/libs/ui/src/lib/input/BilingualInput.tsx
@@ -12,9 +12,20 @@ export interface BilingualValue {
 }
 
 interface BilingualInputProps
-  extends Omit<TextInputProps, 'value' | 'onChange' | 'rightSection' | 'rightSectionWidth'> {
+  extends Omit<TextInputProps, 'value' | 'onChange' | 'placeholder' | 'rightSection' | 'rightSectionWidth'> {
   value: BilingualValue;
   onChange: (value: BilingualValue) => void;
+  placeholder?: string | BilingualValue;
+}
+
+function resolvePlaceholder(placeholder: string | BilingualValue | undefined, lang: 'en' | 'am'): string {
+  if (!placeholder) {
+    return lang === 'en' ? 'Enter in English' : 'በአማርኛ ያስገቡ';
+  }
+  if (typeof placeholder === 'string') {
+    return placeholder;
+  }
+  return placeholder[lang];
 }
 
 export function BilingualInput({
@@ -33,7 +44,7 @@ export function BilingualInput({
     <TextInput
       label={label}
       required={required}
-      placeholder={placeholder ?? (lang === 'en' ? 'Enter in English' : 'በአማርኛ ያስገቡ')}
+      placeholder={resolvePlaceholder(placeholder, lang)}
       value={value[lang]}
       onChange={(e) => onChange({ ...value, [lang]: e.currentTarget.value })}
       rightSection={