diff --git a/apps/Administration-FE/scripts/check-contract-drift.mjs b/apps/Administration-FE/scripts/check-contract-drift.mjs
index b14fde0..61c1e4d 100644
--- a/apps/Administration-FE/scripts/check-contract-drift.mjs
+++ b/apps/Administration-FE/scripts/check-contract-drift.mjs
@@ -23,6 +23,13 @@ const required = [
   'admin-cloud-services.v1.ts',
   'admin-data-analytics.v1.ts',
   'admin-digital-transformation.v1.ts',
+  'admin-devops-consult.v1.ts',
+  'admin-infrastructure-management.v1.ts',
+  'admin-application-development.v1.ts',
+  'admin-application-modernization.v1.ts',
+  'admin-mobile-application-development.v1.ts',
+  'admin-user-centered-design.v1.ts',
+  'admin-overview.v1.ts',
 ];
 
 let failed = false;
diff --git a/apps/Administration-FE/scripts/check-i18n.mjs b/apps/Administration-FE/scripts/check-i18n.mjs
index deeda43..a64d733 100644
--- a/apps/Administration-FE/scripts/check-i18n.mjs
+++ b/apps/Administration-FE/scripts/check-i18n.mjs
@@ -16,6 +16,8 @@ const files = [
   'components/AuthorsList.tsx',
   'components/AuthorForm.tsx',
   'components/MediaPreview.tsx',
+  'components/MediaField.tsx',
+  'components/FormPageHeader.tsx',
   'components/CategoriesList.tsx',
   'components/CategoryForm.tsx',
   'components/ClientLogosList.tsx',
diff --git a/apps/Administration-FE/scripts/generate-client.mjs b/apps/Administration-FE/scripts/generate-client.mjs
index 89dd09a..2302f96 100644
--- a/apps/Administration-FE/scripts/generate-client.mjs
+++ b/apps/Administration-FE/scripts/generate-client.mjs
@@ -30,6 +30,28 @@ const digitalTransformationContractsDir = join(
   repoRoot,
   'specs/015-admin-digital-transformation/contracts',
 );
+const devopsConsultContractsDir = join(repoRoot, 'specs/016-admin-devops-consult/contracts');
+const infrastructureManagementContractsDir = join(
+  repoRoot,
+  'specs/017-admin-infrastructure-management/contracts',
+);
+const applicationDevelopmentContractsDir = join(
+  repoRoot,
+  'specs/018-admin-application-development/contracts',
+);
+const applicationModernizationContractsDir = join(
+  repoRoot,
+  'specs/019-admin-application-modernization/contracts',
+);
+const mobileApplicationDevelopmentContractsDir = join(
+  repoRoot,
+  'specs/020-admin-mobile-application-development/contracts',
+);
+const userCenteredDesignContractsDir = join(
+  repoRoot,
+  'specs/021-admin-user-centered-design/contracts',
+);
+const overviewContractsDir = join(repoRoot, 'specs/022-admin-overview/contracts');
 
 const contractSets = [
   {
@@ -90,6 +112,34 @@ const contractSets = [
     dir: digitalTransformationContractsDir,
     files: ['admin-digital-transformation.v1.yaml'],
   },
+  {
+    dir: devopsConsultContractsDir,
+    files: ['admin-devops-consult.v1.yaml'],
+  },
+  {
+    dir: infrastructureManagementContractsDir,
+    files: ['admin-infrastructure-management.v1.yaml'],
+  },
+  {
+    dir: applicationDevelopmentContractsDir,
+    files: ['admin-application-development.v1.yaml'],
+  },
+  {
+    dir: applicationModernizationContractsDir,
+    files: ['admin-application-modernization.v1.yaml'],
+  },
+  {
+    dir: mobileApplicationDevelopmentContractsDir,
+    files: ['admin-mobile-application-development.v1.yaml'],
+  },
+  {
+    dir: userCenteredDesignContractsDir,
+    files: ['admin-user-centered-design.v1.yaml'],
+  },
+  {
+    dir: overviewContractsDir,
+    files: ['admin-overview.v1.yaml'],
+  },
 ];
 
 mkdirSync(outDir, { recursive: true });
diff --git a/apps/Administration-FE/src/components/AdminShell.tsx b/apps/Administration-FE/src/components/AdminShell.tsx
index 8675018..6b62367 100644
--- a/apps/Administration-FE/src/components/AdminShell.tsx
+++ b/apps/Administration-FE/src/components/AdminShell.tsx
@@ -55,6 +55,9 @@ import DataAnalyticsList from './DataAnalyticsList';
 import DataAnalyticsForm from './DataAnalyticsForm';
 import DigitalTransformationList from './DigitalTransformationList';
 import DigitalTransformationForm from './DigitalTransformationForm';
+import LandingList from './LandingList';
+import LandingForm from './LandingForm';
+import { LANDING_SECTIONS, isLandingFormView, landingByView } from '../lib/landing-sections';
 
 type View = AdminView;
 
@@ -92,6 +95,7 @@ function applyRoute(
     setEditingCloudServiceId: (id: string | null) => void;
     setEditingDataAnalyticId: (id: string | null) => void;
     setEditingDigitalTransformationId: (id: string | null) => void;
+    setEditingLandingId: (id: string | null) => void;
   },
 ) {
   setters.setView(route.view);
@@ -121,6 +125,7 @@ function applyRoute(
   setters.setEditingDigitalTransformationId(
     route.view === 'digital_transformation_form' ? route.editingId : null,
   );
+  setters.setEditingLandingId(isLandingFormView(route.view) ? route.editingId : null);
 }
 
 export default function AdminShell() {
@@ -205,6 +210,10 @@ export default function AdminShell() {
     const route = readAdminLocation();
     return route.view === 'digital_transformation_form' ? route.editingId : null;
   });
+  const [editingLandingId, setEditingLandingId] = useState<string | null>(() => {
+    const route = readAdminLocation();
+    return isLandingFormView(route.view) ? route.editingId : null;
+  });
   const [session, setSession] = useState<SessionContext | null>(null);
   const [siteSettings, setSiteSettings] = useState<Record<string, unknown> | null>(null);
   const [message, setMessage] = useState<string | null>(null);
@@ -261,6 +270,7 @@ export default function AdminShell() {
       setEditingCloudServiceId,
       setEditingDataAnalyticId,
       setEditingDigitalTransformationId,
+      setEditingLandingId,
     });
   }, []);
 
@@ -358,6 +368,11 @@ export default function AdminShell() {
       document.title = t('admin.workspace.digital_transformation');
       return;
     }
+    const landing = landingByView(view);
+    if (landing) {
+      document.title = t(`admin.workspace.${landing.resource}`);
+      return;
+    }
     if (view === 'blogs' || view === 'blog_form') {
       document.title = t('admin.workspace.blogs');
       return;
@@ -574,6 +589,15 @@ export default function AdminShell() {
   const canPublishCloudServices = hasPermission(session, 'cloud_services.publish');
   const canPublishDataAnalytics = hasPermission(session, 'data_analytics.publish');
   const canPublishDigitalTransformation = hasPermission(session, 'digital_transformation.publish');
+  const canReadLandings = Object.fromEntries(
+    LANDING_SECTIONS.map((section) => [section.resource, canReadResource(session, section.resource)]),
+  );
+  const canPublishLandings = Object.fromEntries(
+    LANDING_SECTIONS.map((section) => [
+      section.resource,
+      hasPermission(session, `${section.resource}.publish`),
+    ]),
+  );
   const canManageRoles = canManageRolesFrom(session);
   const settingsCurrent = view === 'roles' || view === 'role_form';
   const initial = session.email.slice(0, 1).toUpperCase();
@@ -607,6 +631,7 @@ export default function AdminShell() {
       canReadCloudServices ||
       canReadDataAnalytics ||
       canReadDigitalTransformation ||
+      LANDING_SECTIONS.some((section) => canReadLandings[section.resource]) ||
       canReadBlogs ||
       canReadCaseStudies ||
       canReadIndustries ||
@@ -787,6 +812,25 @@ export default function AdminShell() {
               </a>
             </li>
             )}
+            {LANDING_SECTIONS.map(
+              (section) =>
+                canReadLandings[section.resource] && (
+                  <li key={section.resource}>
+                    <a
+                      href={adminListHref(section.listView as AdminView)}
+                      className={view === section.listView || view === section.formView ? 'active' : ''}
+                      aria-current={
+                        view === section.listView || view === section.formView ? 'page' : undefined
+                      }
+                      onClick={(event) =>
+                        onNavClick(event, adminListHref(section.listView as AdminView))
+                      }
+                    >
+                      {t(`admin.workspace.${section.resource}`)}
+                    </a>
+                  </li>
+                ),
+            )}
             {canReadBlogs && (
             <li>
               <a
@@ -1121,6 +1165,31 @@ export default function AdminShell() {
               }
             />
           )}
+          {LANDING_SECTIONS.map((section) =>
+            view === section.listView ? (
+              <LandingList
+                key={`${section.resource}-${listEpoch}`}
+                section={section}
+                notice={message}
+                onAdd={() => openForm(section.listView as AdminView, null)}
+                onEdit={(id) => openForm(section.listView as AdminView, id)}
+              />
+            ) : view === section.formView ? (
+              <LandingForm
+                key={`${section.resource}-form`}
+                section={section}
+                entryId={editingLandingId}
+                canPublish={Boolean(canPublishLandings[section.resource])}
+                onCancel={() => openList(section.listView as AdminView)}
+                onSaved={() =>
+                  afterListSave(
+                    () => openList(section.listView as AdminView),
+                    t(`${section.ns}.saved`),
+                  )
+                }
+              />
+            ) : null,
+          )}
           {view === 'blogs' && (
             <BlogsList
               key={`blogs-${listEpoch}`}
diff --git a/apps/Administration-FE/src/components/AiServiceForm.tsx b/apps/Administration-FE/src/components/AiServiceForm.tsx
index 46dfb6a..0c1629e 100644
--- a/apps/Administration-FE/src/components/AiServiceForm.tsx
+++ b/apps/Administration-FE/src/components/AiServiceForm.tsx
@@ -11,7 +11,8 @@ import {
 import { adminListHref } from '../lib/admin-routes';
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import MultiSelect from './MultiSelect';
 import RepeatableSection from './RepeatableSection';
 import RichTextEditor from './RichTextEditor';
@@ -220,9 +221,11 @@ export default function AiServiceForm({ entryId, canPublish, onCancel, onSaved }
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{entryId ? t('admin.ai_services.edit') : t('admin.ai_services.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={entryId ? t('admin.ai_services.edit') : t('admin.ai_services.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form
         onSubmit={(event: FormEvent) => {
           event.preventDefault();
@@ -238,18 +241,16 @@ export default function AiServiceForm({ entryId, canPublish, onCancel, onSaved }
             autoComplete="off"
           />
         </label>
-        <label>
-          {t('admin.ai_services.banner_image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setBannerFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={bannerFile ? [] : bannerKey ? [bannerKey] : []}
-          files={bannerFile ? [bannerFile] : []}
+        <MediaField
+          label={t('admin.ai_services.banner_image')}
           alt={bannerTitle || t('admin.ai_services.banner_image')}
+          storedKey={bannerKey}
+          file={bannerFile}
+          onFile={setBannerFile}
+          onClear={() => {
+            setBannerFile(null);
+            setBannerKey(null);
+          }}
         />
         <label>
           {t('admin.ai_services.introduction_title')}
@@ -329,26 +330,25 @@ export default function AiServiceForm({ entryId, canPublish, onCancel, onSaved }
                   maxLength={200}
                 />
               </label>
-              <label>
-                {t('admin.ai_services.industry_image')}
-                <input
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif,image/webp"
-                  onChange={(event) =>
-                    setIndustryItems((rows) =>
-                      rows.map((row, rowIndex) =>
-                        rowIndex === index
-                          ? { ...row, imageFile: event.target.files?.[0] || null }
-                          : row,
-                      ),
-                    )
-                  }
-                />
-              </label>
-              <MediaPreview
-                mediaKeys={item.imageFile ? [] : item.image_key ? [item.image_key] : []}
-                files={item.imageFile ? [item.imageFile] : []}
+              <MediaField
+                label={t('admin.ai_services.industry_image')}
                 alt={item.title || t('admin.ai_services.industry_image')}
+                storedKey={item.image_key}
+                file={item.imageFile}
+                onFile={(file) =>
+                  setIndustryItems((rows) =>
+                    rows.map((row, rowIndex) =>
+                      rowIndex === index ? { ...row, imageFile: file } : row,
+                    ),
+                  )
+                }
+                onClear={() =>
+                  setIndustryItems((rows) =>
+                    rows.map((row, rowIndex) =>
+                      rowIndex === index ? { ...row, imageFile: null, image_key: null } : row,
+                    ),
+                  )
+                }
               />
             </>
           )}
@@ -362,18 +362,16 @@ export default function AiServiceForm({ entryId, canPublish, onCancel, onSaved }
             autoComplete="off"
           />
         </label>
-        <label>
-          {t('admin.ai_services.ai_expertise_image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setExpertiseFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={expertiseFile ? [] : expertiseKey ? [expertiseKey] : []}
-          files={expertiseFile ? [expertiseFile] : []}
+        <MediaField
+          label={t('admin.ai_services.ai_expertise_image')}
           alt={expertiseTitle || t('admin.ai_services.ai_expertise_image')}
+          storedKey={expertiseKey}
+          file={expertiseFile}
+          onFile={setExpertiseFile}
+          onClear={() => {
+            setExpertiseFile(null);
+            setExpertiseKey(null);
+          }}
         />
         <RepeatableSection
           title={t('admin.ai_services.ai_expertise_accordion')}
diff --git a/apps/Administration-FE/src/components/AuthorForm.tsx b/apps/Administration-FE/src/components/AuthorForm.tsx
index f2b284a..06ef109 100644
--- a/apps/Administration-FE/src/components/AuthorForm.tsx
+++ b/apps/Administration-FE/src/components/AuthorForm.tsx
@@ -8,7 +8,8 @@ import {
   type AuthorWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 
 interface Props {
   authorId: string | null;
@@ -104,9 +105,11 @@ export default function AuthorForm({ authorId, onCancel, onSaved }: Props) {
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{authorId ? t('admin.authors.edit') : t('admin.authors.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={authorId ? t('admin.authors.edit') : t('admin.authors.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.authors.name')}
@@ -123,19 +126,14 @@ export default function AuthorForm({ authorId, onCancel, onSaved }: Props) {
           {t('admin.authors.bio')}
           <textarea value={bio} onChange={(event) => setBio(event.target.value)} rows={3} />
         </label>
-        <label>
-          {t('admin.authors.writer_images')}
-          <input
-            type="file"
-            multiple
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setWriterFiles(Array.from(event.target.files || []))}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={writerImageKeys}
-          files={writerFiles}
+        <MediaField
+          multiple
+          label={t('admin.authors.writer_images')}
           alt={t('admin.authors.writer_images')}
+          storedKeys={writerImageKeys}
+          files={writerFiles}
+          onFiles={setWriterFiles}
+          onStoredKeys={setWriterImageKeys}
         />
         <label>
           {t('admin.authors.designation')}
diff --git a/apps/Administration-FE/src/components/BlogForm.tsx b/apps/Administration-FE/src/components/BlogForm.tsx
index 88f0acf..c359490 100644
--- a/apps/Administration-FE/src/components/BlogForm.tsx
+++ b/apps/Administration-FE/src/components/BlogForm.tsx
@@ -14,7 +14,8 @@ import {
 } from '../lib/admin-api';
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
 import MultiSelect from './MultiSelect';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import RichTextEditor from './RichTextEditor';
 import { adminListHref } from '../lib/admin-routes';
 import { t } from '../lib/i18n';
@@ -150,9 +151,11 @@ export default function BlogForm({ blogId, onCancel, onSaved }: Props) {
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{blogId ? t('admin.blogs.edit') : t('admin.blogs.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={blogId ? t('admin.blogs.edit') : t('admin.blogs.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.blogs.field.title')}
@@ -201,18 +204,16 @@ export default function BlogForm({ blogId, onCancel, onSaved }: Props) {
             onChange={(event) => setReadingTime(Number(event.target.value))}
           />
         </label>
-        <label>
-          {t('admin.blogs.field.image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setImageFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={imageFile ? [] : imageKey ? [imageKey] : []}
-          files={imageFile ? [imageFile] : []}
+        <MediaField
+          label={t('admin.blogs.field.image')}
           alt={imageAlt || t('admin.blogs.field.image')}
+          storedKey={imageKey}
+          file={imageFile}
+          onFile={setImageFile}
+          onClear={() => {
+            setImageFile(null);
+            setImageKey(null);
+          }}
         />
         <label>
           {t('admin.blogs.field.image_alt')}
diff --git a/apps/Administration-FE/src/components/CaseStudyCategoryForm.tsx b/apps/Administration-FE/src/components/CaseStudyCategoryForm.tsx
index 8c8a070..612d4db 100644
--- a/apps/Administration-FE/src/components/CaseStudyCategoryForm.tsx
+++ b/apps/Administration-FE/src/components/CaseStudyCategoryForm.tsx
@@ -7,6 +7,7 @@ import {
   type CaseStudyCategoryWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
+import FormPageHeader from './FormPageHeader';
 
 interface Props {
   categoryId: string | null;
@@ -81,13 +82,13 @@ export default function CaseStudyCategoryForm({ categoryId, onCancel, onSaved }:
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>
-          {categoryId
-            ? t('admin.case_study_categories.edit')
-            : t('admin.case_study_categories.add')}
-        </h2>
-      </div>
+      <FormPageHeader
+        title={
+          categoryId ? t('admin.case_study_categories.edit') : t('admin.case_study_categories.add')
+        }
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.case_study_categories.name')}
diff --git a/apps/Administration-FE/src/components/CaseStudyForm.tsx b/apps/Administration-FE/src/components/CaseStudyForm.tsx
index 4341aa6..c4b4ca0 100644
--- a/apps/Administration-FE/src/components/CaseStudyForm.tsx
+++ b/apps/Administration-FE/src/components/CaseStudyForm.tsx
@@ -16,7 +16,8 @@ import {
 } from '../lib/admin-api';
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
 import MultiSelect from './MultiSelect';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import RichTextEditor from './RichTextEditor';
 import { adminListHref } from '../lib/admin-routes';
 import { t } from '../lib/i18n';
@@ -155,9 +156,11 @@ export default function CaseStudyForm({ caseStudyId, onCancel, onSaved }: Props)
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{caseStudyId ? t('admin.case_studies.edit') : t('admin.case_studies.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={caseStudyId ? t('admin.case_studies.edit') : t('admin.case_studies.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.case_studies.field.heading')}
@@ -231,18 +234,16 @@ export default function CaseStudyForm({ caseStudyId, onCancel, onSaved }: Props)
           selectedIds={technologyIds}
           onChange={setTechnologyIds}
         />
-        <label>
-          {t('admin.case_studies.field.image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setImageFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={imageFile ? [] : imageKey ? [imageKey] : []}
-          files={imageFile ? [imageFile] : []}
+        <MediaField
+          label={t('admin.case_studies.field.image')}
           alt={imageAlt || t('admin.case_studies.field.image')}
+          storedKey={imageKey}
+          file={imageFile}
+          onFile={setImageFile}
+          onClear={() => {
+            setImageFile(null);
+            setImageKey(null);
+          }}
         />
         <label>
           {t('admin.case_studies.field.image_alt')}
diff --git a/apps/Administration-FE/src/components/CategoryForm.tsx b/apps/Administration-FE/src/components/CategoryForm.tsx
index 4b4c942..240951c 100644
--- a/apps/Administration-FE/src/components/CategoryForm.tsx
+++ b/apps/Administration-FE/src/components/CategoryForm.tsx
@@ -7,6 +7,7 @@ import {
   type CategoryWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
+import FormPageHeader from './FormPageHeader';
 
 interface Props {
   categoryId: string | null;
@@ -81,9 +82,11 @@ export default function CategoryForm({ categoryId, onCancel, onSaved }: Props) {
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{categoryId ? t('admin.categories.edit') : t('admin.categories.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={categoryId ? t('admin.categories.edit') : t('admin.categories.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.categories.name')}
diff --git a/apps/Administration-FE/src/components/ClientLogoForm.tsx b/apps/Administration-FE/src/components/ClientLogoForm.tsx
index 520339c..bb32463 100644
--- a/apps/Administration-FE/src/components/ClientLogoForm.tsx
+++ b/apps/Administration-FE/src/components/ClientLogoForm.tsx
@@ -8,7 +8,8 @@ import {
   type ClientLogoWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 
 interface Props {
   logoId: string | null;
@@ -106,35 +107,33 @@ export default function ClientLogoForm({ logoId, onCancel, onSaved }: Props) {
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{logoId ? t('admin.client_logos.edit') : t('admin.client_logos.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={logoId ? t('admin.client_logos.edit') : t('admin.client_logos.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
-        <label>
-          {t('admin.client_logos.colour_logo')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setColourFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={colourFile ? [] : colourKey ? [colourKey] : []}
-          files={colourFile ? [colourFile] : []}
+        <MediaField
+          label={t('admin.client_logos.colour_logo')}
           alt={altText || t('admin.client_logos.colour_logo')}
+          storedKey={colourKey}
+          file={colourFile}
+          onFile={setColourFile}
+          onClear={() => {
+            setColourFile(null);
+            setColourKey(null);
+          }}
         />
-        <label>
-          {t('admin.client_logos.white_logo')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setWhiteFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={whiteFile ? [] : whiteKey ? [whiteKey] : []}
-          files={whiteFile ? [whiteFile] : []}
+        <MediaField
+          label={t('admin.client_logos.white_logo')}
           alt={altText || t('admin.client_logos.white_logo')}
+          storedKey={whiteKey}
+          file={whiteFile}
+          onFile={setWhiteFile}
+          onClear={() => {
+            setWhiteFile(null);
+            setWhiteKey(null);
+          }}
         />
         <label>
           {t('admin.client_logos.alt_text')}
diff --git a/apps/Administration-FE/src/components/ClientTestimonialForm.tsx b/apps/Administration-FE/src/components/ClientTestimonialForm.tsx
index 87b0bc6..569af39 100644
--- a/apps/Administration-FE/src/components/ClientTestimonialForm.tsx
+++ b/apps/Administration-FE/src/components/ClientTestimonialForm.tsx
@@ -8,7 +8,8 @@ import {
   type ClientTestimonialWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 
 interface Props {
   testimonialId: string | null;
@@ -136,13 +137,15 @@ export default function ClientTestimonialForm({ testimonialId, onCancel, onSaved
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>
-          {testimonialId
+      <FormPageHeader
+        title={
+          testimonialId
             ? t('admin.client_testimonials.edit')
-            : t('admin.client_testimonials.add')}
-        </h2>
-      </div>
+            : t('admin.client_testimonials.add')
+        }
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.client_testimonials.client_name')}
@@ -200,18 +203,16 @@ export default function ClientTestimonialForm({ testimonialId, onCancel, onSaved
             autoComplete="off"
           />
         </label>
-        <label>
-          {t('admin.client_testimonials.image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setImageFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={imageFile ? [] : imageKey ? [imageKey] : []}
-          files={imageFile ? [imageFile] : []}
+        <MediaField
+          label={t('admin.client_testimonials.image')}
           alt={altText || clientName || t('admin.client_testimonials.image')}
+          storedKey={imageKey}
+          file={imageFile}
+          onFile={setImageFile}
+          onClear={() => {
+            setImageFile(null);
+            setImageKey(null);
+          }}
         />
         <label>
           {t('admin.client_testimonials.alt_text')}
diff --git a/apps/Administration-FE/src/components/DigitalTransformationForm.tsx b/apps/Administration-FE/src/components/DigitalTransformationForm.tsx
index dc90c74..5d15680 100644
--- a/apps/Administration-FE/src/components/DigitalTransformationForm.tsx
+++ b/apps/Administration-FE/src/components/DigitalTransformationForm.tsx
@@ -9,7 +9,8 @@ import {
 } from '../lib/admin-api';
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import RepeatableSection from './RepeatableSection';
 import RichTextEditor from './RichTextEditor';
 import SeoFields, { emptySeo, seoValue, type ContentSeoValue } from './SeoFields';
@@ -164,9 +165,11 @@ export default function DigitalTransformationForm({
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{entryId ? t(`${ns}.edit`) : t(`${ns}.add`)}</h2>
-      </div>
+      <FormPageHeader
+        title={entryId ? t(`${ns}.edit`) : t(`${ns}.add`)}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form
         onSubmit={(event: FormEvent) => {
           event.preventDefault();
@@ -182,18 +185,16 @@ export default function DigitalTransformationForm({
             autoComplete="off"
           />
         </label>
-        <label>
-          {t(`${ns}.banner_image`)}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setBannerFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={bannerFile ? [] : bannerKey ? [bannerKey] : []}
-          files={bannerFile ? [bannerFile] : []}
+        <MediaField
+          label={t(`${ns}.banner_image`)}
           alt={bannerTitle || t(`${ns}.banner_image`)}
+          storedKey={bannerKey}
+          file={bannerFile}
+          onFile={setBannerFile}
+          onClear={() => {
+            setBannerFile(null);
+            setBannerKey(null);
+          }}
         />
         <label>
           {t(`${ns}.banner_tag_line`)}
@@ -269,18 +270,16 @@ export default function DigitalTransformationForm({
             </>
           )}
         </RepeatableSection>
-        <label>
-          {t(`${ns}.outcomes_image`)}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setOutcomesFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={outcomesFile ? [] : outcomesKey ? [outcomesKey] : []}
-          files={outcomesFile ? [outcomesFile] : []}
+        <MediaField
+          label={t(`${ns}.outcomes_image`)}
           alt={outcomesTitle || t(`${ns}.outcomes_image`)}
+          storedKey={outcomesKey}
+          file={outcomesFile}
+          onFile={setOutcomesFile}
+          onClear={() => {
+            setOutcomesFile(null);
+            setOutcomesKey(null);
+          }}
         />
         <label>
           {t(`${ns}.outcomes_title`)}
diff --git a/apps/Administration-FE/src/components/FormPageHeader.tsx b/apps/Administration-FE/src/components/FormPageHeader.tsx
new file mode 100644
index 0000000..1b68739
--- /dev/null
+++ b/apps/Administration-FE/src/components/FormPageHeader.tsx
@@ -0,0 +1,20 @@
+import { t } from '../lib/i18n';
+
+interface Props {
+  title: string;
+  onBack: () => void;
+  disabled?: boolean;
+}
+
+export default function FormPageHeader({ title, onBack, disabled }: Props) {
+  return (
+    <div className="panel-header form-page-header">
+      <div className="form-page-heading">
+        <button type="button" className="form-back" onClick={onBack} disabled={disabled}>
+          {t('admin.form.back')}
+        </button>
+        <h2>{title}</h2>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/Administration-FE/src/components/HomeForm.tsx b/apps/Administration-FE/src/components/HomeForm.tsx
index 4ad6eaf..88cfe05 100644
--- a/apps/Administration-FE/src/components/HomeForm.tsx
+++ b/apps/Administration-FE/src/components/HomeForm.tsx
@@ -13,7 +13,8 @@ import {
 } from '../lib/admin-api';
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
 import MultiSelect from './MultiSelect';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import RichTextEditor from './RichTextEditor';
 import SeoFields, { emptySeo, seoValue, type ContentSeoValue } from './SeoFields';
 import { adminListHref } from '../lib/admin-routes';
@@ -221,9 +222,11 @@ export default function HomeForm({ homeId, canPublish, onCancel, onSaved }: Prop
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{homeId ? t('admin.homes.edit') : t('admin.homes.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={homeId ? t('admin.homes.edit') : t('admin.homes.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.homes.field.title')}
@@ -235,18 +238,18 @@ export default function HomeForm({ homeId, canPublish, onCancel, onSaved }: Prop
             autoComplete="off"
           />
         </label>
-        <label>
-          {t('admin.homes.field.video')}
-          <input
-            type="file"
-            accept="video/mp4,video/webm,video/quicktime"
-            onChange={(event) => setVideoFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={videoFile ? [] : videoKey ? [videoKey] : []}
-          files={videoFile ? [videoFile] : []}
+        <MediaField
+          label={t('admin.homes.field.video')}
+          accept="video/mp4,video/webm,video/quicktime"
           alt={t('admin.homes.field.video')}
+          storedKey={videoKey}
+          file={videoFile}
+          onFile={setVideoFile}
+          onClear={() => {
+            setVideoFile(null);
+            setVideoKey(null);
+            setVideoType(null);
+          }}
         />
         <label>
           {t('admin.homes.field.banner_title')}
@@ -289,22 +292,13 @@ export default function HomeForm({ homeId, canPublish, onCancel, onSaved }: Prop
                   autoComplete="off"
                 />
               </label>
-              <label>
-                {t('admin.homes.field.services_image')}
-                <input
-                  type="file"
-                  accept="image/jpeg,image/png,image/gif,image/webp"
-                  onChange={(event) =>
-                    patchService(service.key, { imageFile: event.target.files?.[0] || null })
-                  }
-                />
-              </label>
-              <MediaPreview
-                mediaKeys={
-                  service.imageFile ? [] : service.services_image_key ? [service.services_image_key] : []
-                }
-                files={service.imageFile ? [service.imageFile] : []}
+              <MediaField
+                label={t('admin.homes.field.services_image')}
                 alt={t('admin.homes.field.services_image')}
+                storedKey={service.services_image_key}
+                file={service.imageFile}
+                onFile={(file) => patchService(service.key, { imageFile: file })}
+                onClear={() => patchService(service.key, { imageFile: null, services_image_key: null })}
               />
               <label>
                 {t('admin.homes.field.services_contents')}
diff --git a/apps/Administration-FE/src/components/IndustryForm.tsx b/apps/Administration-FE/src/components/IndustryForm.tsx
index f811313..e784f24 100644
--- a/apps/Administration-FE/src/components/IndustryForm.tsx
+++ b/apps/Administration-FE/src/components/IndustryForm.tsx
@@ -7,6 +7,7 @@ import {
   type IndustryWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
+import FormPageHeader from './FormPageHeader';
 
 interface Props {
   industryId: string | null;
@@ -81,9 +82,11 @@ export default function IndustryForm({ industryId, onCancel, onSaved }: Props) {
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{industryId ? t('admin.industries.edit') : t('admin.industries.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={industryId ? t('admin.industries.edit') : t('admin.industries.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.industries.name')}
diff --git a/apps/Administration-FE/src/components/LandingForm.tsx b/apps/Administration-FE/src/components/LandingForm.tsx
new file mode 100644
index 0000000..379843e
--- /dev/null
+++ b/apps/Administration-FE/src/components/LandingForm.tsx
@@ -0,0 +1,419 @@
+import { useEffect, useState, type FormEvent } from 'react';
+import {
+  apiErrorMessage,
+  createLanding,
+  getLanding,
+  updateLanding,
+  uploadMedia,
+  type LandingWritePayload,
+} from '../lib/admin-api';
+import { hydrateRichText, persistRichText } from '../lib/rich-text';
+import { t } from '../lib/i18n';
+import type { LandingSection } from '../lib/landing-sections';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
+import RepeatableSection from './RepeatableSection';
+import RichTextEditor from './RichTextEditor';
+import SeoFields, { emptySeo, seoValue, type ContentSeoValue } from './SeoFields';
+
+interface Props {
+  section: LandingSection;
+  entryId: string | null;
+  canPublish: boolean;
+  onCancel: () => void;
+  onSaved: () => void;
+}
+
+type AccordionDraft = { key: string; title: string; contents: string; order: number };
+
+function nextKey(): string {
+  return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+}
+
+function emptyAccordion(): AccordionDraft {
+  return { key: nextKey(), title: '', contents: '', order: 0 };
+}
+
+async function hydrateAccordion(rows: { title: string; contents: string; order: number }[]) {
+  if (!rows.length) return [emptyAccordion()];
+  return Promise.all(
+    rows.map(async (row) => ({
+      key: nextKey(),
+      title: row.title,
+      contents: await hydrateRichText(row.contents),
+      order: row.order,
+    })),
+  );
+}
+
+export default function LandingForm({ section, entryId, canPublish, onCancel, onSaved }: Props) {
+  const ns = section.ns;
+  const [bannerTitle, setBannerTitle] = useState('');
+  const [bannerKey, setBannerKey] = useState<string | null>(null);
+  const [bannerFile, setBannerFile] = useState<File | null>(null);
+  const [introductionTitle, setIntroductionTitle] = useState('');
+  const [introductionFirst, setIntroductionFirst] = useState('');
+  const [introductionSecond, setIntroductionSecond] = useState('');
+  const [introductionThird, setIntroductionThird] = useState('');
+  const [accordion, setAccordion] = useState<AccordionDraft[]>([emptyAccordion()]);
+  const [experienceTitle, setExperienceTitle] = useState('');
+  const [experienceAccordion, setExperienceAccordion] = useState<AccordionDraft[]>([emptyAccordion()]);
+  const [experienceKey, setExperienceKey] = useState<string | null>(null);
+  const [experienceFile, setExperienceFile] = useState<File | null>(null);
+  const [experienceDescription, setExperienceDescription] = useState('');
+  const [offeringKey, setOfferingKey] = useState<string | null>(null);
+  const [offeringFile, setOfferingFile] = useState<File | null>(null);
+  const [offeringTitle, setOfferingTitle] = useState('');
+  const [offeringDescription, setOfferingDescription] = useState('');
+  const [faqTitle, setFaqTitle] = useState('');
+  const [faqDescription, setFaqDescription] = useState('');
+  const [faqAccordion, setFaqAccordion] = useState<AccordionDraft[]>([emptyAccordion()]);
+  const [seo, setSeo] = useState<ContentSeoValue>(emptySeo);
+  const [seoImageFile, setSeoImageFile] = useState<File | null>(null);
+  const [status, setStatus] = useState<'draft' | 'publish'>('draft');
+  const [error, setError] = useState<string | null>(null);
+  const [ready, setReady] = useState(!entryId);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    if (!entryId) return;
+    getLanding(section.path, entryId)
+      .then(async (item) => {
+        setBannerTitle(item.banner_title);
+        setBannerKey(item.banner_image_key);
+        setIntroductionTitle(item.introduction_title);
+        setIntroductionFirst(item.introduction_first_paragraph);
+        setIntroductionSecond(item.introduction_second_paragraph);
+        setIntroductionThird(item.introduction_third_paragraph || '');
+        setAccordion(await hydrateAccordion(item.accordion || []));
+        setExperienceTitle(item.experience_title || '');
+        setExperienceAccordion(await hydrateAccordion(item.experience_accordion || []));
+        setExperienceKey(item.experience_image_key || null);
+        setExperienceDescription(await hydrateRichText(item.experience_description || ''));
+        setOfferingKey(item.offering_image_key || null);
+        setOfferingTitle(item.offering_title || '');
+        setOfferingDescription(await hydrateRichText(item.offering_description || ''));
+        setFaqTitle(item.faq_title || '');
+        setFaqDescription(item.faq_description || '');
+        setFaqAccordion(await hydrateAccordion(item.faq_accordion || []));
+        setSeo(seoValue(item.seo));
+        setStatus(item.status);
+        setReady(true);
+      })
+      .catch(() => {
+        setError(t('admin.workspace.request_failed'));
+        setReady(true);
+      });
+  }, [entryId, section.path]);
+
+  async function persist(nextStatus: 'draft' | 'publish') {
+    setError(null);
+    setSaving(true);
+    try {
+      const nextBanner = bannerFile ? (await uploadMedia(bannerFile)).key : bannerKey;
+      const nextExperience = experienceFile ? (await uploadMedia(experienceFile)).key : experienceKey;
+      const nextOffering = offeringFile ? (await uploadMedia(offeringFile)).key : offeringKey;
+      const nextSeoImage = seoImageFile ? (await uploadMedia(seoImageFile)).key : seo.image_key;
+      const payload: LandingWritePayload = {
+        banner_title: bannerTitle.trim(),
+        banner_image_key: nextBanner,
+        introduction_title: introductionTitle.trim(),
+        introduction_first_paragraph: introductionFirst.trim(),
+        introduction_second_paragraph: introductionSecond.trim(),
+        seo: { ...seo, image_key: nextSeoImage },
+        status: nextStatus,
+      };
+      if (section.hasThirdIntro) {
+        payload.introduction_third_paragraph = introductionThird.trim();
+      }
+      if (section.hasAccordion) {
+        payload.accordion = accordion.map((item, index) => ({
+          title: item.title.trim(),
+          contents: persistRichText(item.contents),
+          order: index,
+        }));
+      }
+      if (section.hasExperience) {
+        payload.experience_title = experienceTitle.trim();
+        payload.experience_accordion = experienceAccordion.map((item, index) => ({
+          title: item.title.trim(),
+          contents: persistRichText(item.contents),
+          order: index,
+        }));
+        payload.experience_image_key = nextExperience;
+        payload.experience_description = persistRichText(experienceDescription);
+      }
+      if (section.hasOffering) {
+        payload.offering_image_key = nextOffering;
+        payload.offering_title = offeringTitle.trim();
+        payload.offering_description = persistRichText(offeringDescription);
+      }
+      if (section.hasFaq) {
+        payload.faq_title = faqTitle.trim();
+        payload.faq_description = faqDescription.trim();
+        payload.faq_accordion = faqAccordion.map((item, index) => ({
+          title: item.title.trim(),
+          contents: persistRichText(item.contents),
+          order: index,
+        }));
+      }
+      if (entryId) await updateLanding(section.path, entryId, payload);
+      else await createLanding(section.path, payload);
+      onSaved();
+    } catch (caught) {
+      setError(apiErrorMessage(caught));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function accordionEditor(
+    items: AccordionDraft[],
+    setItems: (updater: (rows: AccordionDraft[]) => AccordionDraft[]) => void,
+    titleKey: string,
+    idPrefix: string,
+  ) {
+    return (
+      <RepeatableSection
+        title={t(`${ns}.${titleKey}`)}
+        addLabel={t(`${ns}.add_item`)}
+        removeLabel={t(`${ns}.remove_item`)}
+        items={items}
+        itemTitle={(item, index) => item.title.trim() || `${t(`${ns}.item`)} ${index + 1}`}
+        onAdd={() => setItems((rows) => [...rows, emptyAccordion()])}
+        onRemove={(key) => setItems((rows) => rows.filter((row) => row.key !== key))}
+      >
+        {(item, index) => (
+          <>
+            <label>
+              {t(`${ns}.accordion_title`)}
+              <input
+                value={item.title}
+                onChange={(event) =>
+                  setItems((rows) =>
+                    rows.map((row, rowIndex) =>
+                      rowIndex === index ? { ...row, title: event.target.value } : row,
+                    ),
+                  )
+                }
+                maxLength={200}
+              />
+            </label>
+            <RichTextEditor
+              id={`${idPrefix}-${item.key}`}
+              label={t(`${ns}.accordion_contents`)}
+              value={item.contents}
+              onChange={(value) =>
+                setItems((rows) =>
+                  rows.map((row, rowIndex) =>
+                    rowIndex === index ? { ...row, contents: value } : row,
+                  ),
+                )
+              }
+            />
+          </>
+        )}
+      </RepeatableSection>
+    );
+  }
+
+  if (!ready) {
+    return (
+      <section className="role-form-page">
+        <p className="loading-state" role="status">
+          <span className="spinner" aria-hidden="true" />
+          {t('admin.workspace.loading')}
+        </p>
+      </section>
+    );
+  }
+
+  return (
+    <section className="role-form-page">
+      <FormPageHeader
+        title={entryId ? t(`${ns}.edit`) : t(`${ns}.add`)}
+        onBack={onCancel}
+        disabled={saving}
+      />
+      <form
+        onSubmit={(event: FormEvent) => {
+          event.preventDefault();
+          persist(status).catch(() => undefined);
+        }}
+      >
+        <label>
+          {t(`${ns}.banner_title`)}
+          <input
+            value={bannerTitle}
+            onChange={(event) => setBannerTitle(event.target.value)}
+            maxLength={200}
+            autoComplete="off"
+          />
+        </label>
+        <MediaField
+          label={t(`${ns}.banner_image`)}
+          alt={bannerTitle || t(`${ns}.banner_image`)}
+          storedKey={bannerKey}
+          file={bannerFile}
+          onFile={setBannerFile}
+          onClear={() => {
+            setBannerFile(null);
+            setBannerKey(null);
+          }}
+        />
+        <label>
+          {t(`${ns}.introduction_title`)}
+          <input
+            value={introductionTitle}
+            onChange={(event) => setIntroductionTitle(event.target.value)}
+            maxLength={200}
+            autoComplete="off"
+          />
+        </label>
+        <label>
+          {t(`${ns}.introduction_first`)}
+          <textarea
+            value={introductionFirst}
+            onChange={(event) => setIntroductionFirst(event.target.value)}
+            rows={4}
+          />
+        </label>
+        <label>
+          {t(`${ns}.introduction_second`)}
+          <textarea
+            value={introductionSecond}
+            onChange={(event) => setIntroductionSecond(event.target.value)}
+            rows={4}
+          />
+        </label>
+        {section.hasThirdIntro && (
+          <label>
+            {t(`${ns}.introduction_third`)}
+            <textarea
+              value={introductionThird}
+              onChange={(event) => setIntroductionThird(event.target.value)}
+              rows={4}
+            />
+          </label>
+        )}
+        {section.hasAccordion && accordionEditor(accordion, setAccordion, 'accordion', `${ns}-accordion`)}
+        {section.hasExperience && (
+          <>
+            <label>
+              {t(`${ns}.experience_title`)}
+              <input
+                value={experienceTitle}
+                onChange={(event) => setExperienceTitle(event.target.value)}
+                maxLength={200}
+                autoComplete="off"
+              />
+            </label>
+            {accordionEditor(
+              experienceAccordion,
+              setExperienceAccordion,
+              'experience_accordion',
+              `${ns}-experience`,
+            )}
+            <MediaField
+              label={t(`${ns}.experience_image`)}
+              alt={experienceTitle || t(`${ns}.experience_image`)}
+              storedKey={experienceKey}
+              file={experienceFile}
+              onFile={setExperienceFile}
+              onClear={() => {
+                setExperienceFile(null);
+                setExperienceKey(null);
+              }}
+            />
+            <RichTextEditor
+              id={`${ns}-experience-description`}
+              label={t(`${ns}.experience_description`)}
+              value={experienceDescription}
+              onChange={setExperienceDescription}
+            />
+          </>
+        )}
+        {section.hasOffering && (
+          <>
+            <MediaField
+              label={t(`${ns}.offering_image`)}
+              alt={offeringTitle || t(`${ns}.offering_image`)}
+              storedKey={offeringKey}
+              file={offeringFile}
+              onFile={setOfferingFile}
+              onClear={() => {
+                setOfferingFile(null);
+                setOfferingKey(null);
+              }}
+            />
+            <label>
+              {t(`${ns}.offering_title`)}
+              <input
+                value={offeringTitle}
+                onChange={(event) => setOfferingTitle(event.target.value)}
+                maxLength={200}
+                autoComplete="off"
+              />
+            </label>
+            <RichTextEditor
+              id={`${ns}-offering-description`}
+              label={t(`${ns}.offering_description`)}
+              value={offeringDescription}
+              onChange={setOfferingDescription}
+            />
+          </>
+        )}
+        {section.hasFaq && (
+          <>
+            <label>
+              {t(`${ns}.faq_title`)}
+              <input
+                value={faqTitle}
+                onChange={(event) => setFaqTitle(event.target.value)}
+                maxLength={200}
+                autoComplete="off"
+              />
+            </label>
+            <label>
+              {t(`${ns}.faq_description`)}
+              <textarea
+                value={faqDescription}
+                onChange={(event) => setFaqDescription(event.target.value)}
+                rows={4}
+              />
+            </label>
+            {accordionEditor(faqAccordion, setFaqAccordion, 'faq_accordion', `${ns}-faq`)}
+          </>
+        )}
+        <SeoFields value={seo} imageFile={seoImageFile} onChange={setSeo} onImageFile={setSeoImageFile} />
+        {error && (
+          <p className="alert alert-error error" role="alert">
+            {error}
+          </p>
+        )}
+        <div className="actions panel-footer">
+          <button type="button" onClick={onCancel} disabled={saving}>
+            {t(`${ns}.cancel`)}
+          </button>
+          <button type="submit" className="primary" disabled={saving} aria-busy={saving}>
+            {t(`${ns}.save`)}
+          </button>
+          {status === 'publish' ? (
+            <button type="button" disabled={saving} onClick={() => persist('draft').catch(() => undefined)}>
+              {t(`${ns}.unpublish`)}
+            </button>
+          ) : (
+            <button
+              type="button"
+              className="primary"
+              disabled={saving || !canPublish}
+              onClick={() => persist('publish').catch(() => undefined)}
+            >
+              {t(`${ns}.publish`)}
+            </button>
+          )}
+        </div>
+      </form>
+    </section>
+  );
+}
diff --git a/apps/Administration-FE/src/components/LandingList.tsx b/apps/Administration-FE/src/components/LandingList.tsx
new file mode 100644
index 0000000..d428463
--- /dev/null
+++ b/apps/Administration-FE/src/components/LandingList.tsx
@@ -0,0 +1,211 @@
+import { useEffect, useRef, useState, type FormEvent } from 'react';
+import {
+  apiErrorMessage,
+  deleteLanding,
+  listLandings,
+  type LandingListPayload,
+} from '../lib/admin-api';
+import { t } from '../lib/i18n';
+import type { LandingSection } from '../lib/landing-sections';
+import TableLogo from './TableLogo';
+
+interface Props {
+  section: LandingSection;
+  onAdd: () => void;
+  onEdit: (id: string) => void;
+  notice: string | null;
+}
+
+function snippet(value: string): string {
+  const text = value.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
+  return text.length > 80 ? `${text.slice(0, 77)}…` : text;
+}
+
+export default function LandingList({ section, onAdd, onEdit, notice }: Props) {
+  const ns = section.ns;
+  const [query, setQuery] = useState('');
+  const [appliedQuery, setAppliedQuery] = useState('');
+  const [page, setPage] = useState(1);
+  const [data, setData] = useState<LandingListPayload | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const dialogRef = useRef<HTMLDialogElement>(null);
+
+  async function load(nextQuery: string, nextPage: number) {
+    setError(null);
+    try {
+      setData(await listLandings(section.path, nextQuery, nextPage));
+    } catch {
+      setError(t('admin.workspace.request_failed'));
+    }
+  }
+
+  useEffect(() => {
+    load(appliedQuery, page).catch(() => undefined);
+  }, [appliedQuery, page, section.path]);
+
+  function search(event: FormEvent) {
+    event.preventDefault();
+    setPage(1);
+    setAppliedQuery(query.trim());
+  }
+
+  async function confirmDelete() {
+    if (!pendingId) return;
+    try {
+      await deleteLanding(section.path, pendingId);
+      setPendingId(null);
+      dialogRef.current?.close();
+      await load(appliedQuery, page);
+    } catch (caught) {
+      dialogRef.current?.close();
+      setPendingId(null);
+      setError(apiErrorMessage(caught));
+    }
+  }
+
+  const totalPages = data ? Math.max(1, Math.ceil(data.total / data.per_page)) : 1;
+  const loading = data === null && !error;
+
+  return (
+    <section className="roles-page">
+      <div className="roles-toolbar">
+        <h2>{t(`${ns}.title`)}</h2>
+        <button type="button" className="primary" onClick={onAdd}>
+          {t(`${ns}.add`)}
+        </button>
+      </div>
+      {notice && (
+        <p role="status" className="roles-notice">
+          {notice}
+        </p>
+      )}
+      <form className="roles-search" onSubmit={search} role="search">
+        <label>
+          {t(`${ns}.search`)}
+          <input
+            type="search"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            autoComplete="off"
+          />
+        </label>
+        <button type="submit">{t(`${ns}.search.submit`)}</button>
+      </form>
+      {error && (
+        <p className="alert alert-error error" role="alert">
+          {error}
+        </p>
+      )}
+      {loading ? (
+        <p className="loading-state" role="status">
+          <span className="spinner" aria-hidden="true" />
+          {t('admin.workspace.loading')}
+        </p>
+      ) : (
+        <>
+          <table className="roles-table">
+            <thead>
+              <tr>
+                <th scope="col">{t(`${ns}.id`)}</th>
+                <th scope="col">{t(`${ns}.banner_title`)}</th>
+                <th scope="col">{t(`${ns}.banner_image`)}</th>
+                {section.listColumns.includes('introduction_title') && (
+                  <th scope="col">{t(`${ns}.introduction_title`)}</th>
+                )}
+                {section.listColumns.includes('introduction_first') && (
+                  <th scope="col">{t(`${ns}.introduction_first`)}</th>
+                )}
+                {section.listColumns.includes('seo') && <th scope="col">{t(`${ns}.seo`)}</th>}
+                {section.listColumns.includes('locale') && (
+                  <th scope="col">{t(`${ns}.content_available_in`)}</th>
+                )}
+                <th scope="col">{t(`${ns}.state`)}</th>
+                <th scope="col">{t(`${ns}.actions`)}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data?.items.map((item, index) => (
+                <tr key={item.id}>
+                  <td data-label={t(`${ns}.id`)}>{(data.page - 1) * data.per_page + index + 1}</td>
+                  <td data-label={t(`${ns}.banner_title`)}>{item.banner_title}</td>
+                  <td data-label={t(`${ns}.banner_image`)}>
+                    <TableLogo mediaKey={item.banner_image_key} alt={item.banner_title} />
+                  </td>
+                  {section.listColumns.includes('introduction_title') && (
+                    <td data-label={t(`${ns}.introduction_title`)}>{item.introduction_title}</td>
+                  )}
+                  {section.listColumns.includes('introduction_first') && (
+                    <td data-label={t(`${ns}.introduction_first`)} className="table-review-cell">
+                      {snippet(item.introduction_first_paragraph || '')}
+                    </td>
+                  )}
+                  {section.listColumns.includes('seo') && (
+                    <td data-label={t(`${ns}.seo`)} className="table-review-cell">
+                      {snippet(item.seo || '')}
+                    </td>
+                  )}
+                  {section.listColumns.includes('locale') && (
+                    <td data-label={t(`${ns}.content_available_in`)}>
+                      {item.content_available_in}
+                    </td>
+                  )}
+                  <td data-label={t(`${ns}.state`)}>
+                    {item.state === 'publish' ? t(`${ns}.status.publish`) : t(`${ns}.status.draft`)}
+                  </td>
+                  <td data-label={t(`${ns}.actions`)} className="roles-row-actions">
+                    <button type="button" onClick={() => onEdit(item.id)}>
+                      {t(`${ns}.edit_action`)}
+                    </button>
+                    <button
+                      type="button"
+                      className="danger"
+                      onClick={() => {
+                        setPendingId(item.id);
+                        dialogRef.current?.showModal();
+                      }}
+                    >
+                      {t(`${ns}.delete_action`)}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+          {data && data.items.length === 0 && (
+            <p className="roles-empty empty-state">{t(`${ns}.empty`)}</p>
+          )}
+          {data && data.total > data.per_page && (
+            <nav className="roles-pagination" aria-label={t(`${ns}.title`)}>
+              <button type="button" disabled={page <= 1} onClick={() => setPage((value) => value - 1)}>
+                {t(`${ns}.previous`)}
+              </button>
+              <span>
+                {t(`${ns}.page`)} {data.page} / {totalPages}
+              </span>
+              <button
+                type="button"
+                disabled={page >= totalPages}
+                onClick={() => setPage((value) => value + 1)}
+              >
+                {t(`${ns}.next`)}
+              </button>
+            </nav>
+          )}
+        </>
+      )}
+      <dialog ref={dialogRef}>
+        <h3>{t(`${ns}.delete.confirm`)}</h3>
+        <p>{t(`${ns}.delete.confirm_body`)}</p>
+        <div className="actions">
+          <button type="button" onClick={() => dialogRef.current?.close()}>
+            {t(`${ns}.delete.cancel`)}
+          </button>
+          <button type="button" className="danger" onClick={() => confirmDelete()}>
+            {t(`${ns}.delete_action`)}
+          </button>
+        </div>
+      </dialog>
+    </section>
+  );
+}
diff --git a/apps/Administration-FE/src/components/MediaField.tsx b/apps/Administration-FE/src/components/MediaField.tsx
new file mode 100644
index 0000000..59a3df5
--- /dev/null
+++ b/apps/Administration-FE/src/components/MediaField.tsx
@@ -0,0 +1,76 @@
+import { useRef } from 'react';
+import MediaPreview from './MediaPreview';
+
+export const IMAGE_ACCEPT = 'image/jpeg,image/png,image/gif,image/webp';
+
+type SingleProps = {
+  label: string;
+  accept?: string;
+  alt: string;
+  storedKey: string | null;
+  file: File | null;
+  onFile: (file: File | null) => void;
+  onClear: () => void;
+  multiple?: false;
+};
+
+type MultiProps = {
+  label: string;
+  accept?: string;
+  alt: string;
+  storedKeys: string[];
+  files: File[];
+  onFiles: (files: File[]) => void;
+  onStoredKeys: (keys: string[]) => void;
+  multiple: true;
+};
+
+export default function MediaField(props: SingleProps | MultiProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const accept = props.accept ?? IMAGE_ACCEPT;
+  const multiple = props.multiple === true;
+  const mediaKeys = multiple ? props.storedKeys : props.file ? [] : props.storedKey ? [props.storedKey] : [];
+  const files = multiple ? props.files : props.file ? [props.file] : [];
+
+  function resetInput() {
+    if (inputRef.current) inputRef.current.value = '';
+  }
+
+  function onRemoveAt(index: number) {
+    if (multiple) {
+      if (index < props.storedKeys.length) {
+        props.onStoredKeys(props.storedKeys.filter((_, itemIndex) => itemIndex !== index));
+        return;
+      }
+      const fileIndex = index - props.storedKeys.length;
+      const nextFiles = props.files.filter((_, itemIndex) => itemIndex !== fileIndex);
+      props.onFiles(nextFiles);
+      if (nextFiles.length === 0) resetInput();
+      return;
+    }
+    resetInput();
+    props.onClear();
+  }
+
+  return (
+    <div className="media-field">
+      <label>
+        {props.label}
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          multiple={multiple}
+          onChange={(event) => {
+            if (multiple) {
+              props.onFiles(Array.from(event.target.files || []));
+              return;
+            }
+            props.onFile(event.target.files?.[0] || null);
+          }}
+        />
+      </label>
+      <MediaPreview mediaKeys={mediaKeys} files={files} alt={props.alt} onRemoveAt={onRemoveAt} />
+    </div>
+  );
+}
diff --git a/apps/Administration-FE/src/components/MediaPreview.tsx b/apps/Administration-FE/src/components/MediaPreview.tsx
index 2258c4d..ba02aeb 100644
--- a/apps/Administration-FE/src/components/MediaPreview.tsx
+++ b/apps/Administration-FE/src/components/MediaPreview.tsx
@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 import { fetchMediaBlob } from '../lib/admin-api';
+import { t } from '../lib/i18n';
 
 interface Props {
   mediaKeys?: string[];
   files?: File[];
   alt: string;
+  onRemoveAt?: (index: number) => void;
 }
 
 function isVideoSource(file?: File, key?: string): boolean {
@@ -13,7 +15,7 @@ function isVideoSource(file?: File, key?: string): boolean {
   return false;
 }
 
-export default function MediaPreview({ mediaKeys = [], files = [], alt }: Props) {
+export default function MediaPreview({ mediaKeys = [], files = [], alt, onRemoveAt }: Props) {
   const [urls, setUrls] = useState<string[]>([]);
 
   useEffect(() => {
@@ -57,14 +59,26 @@ export default function MediaPreview({ mediaKeys = [], files = [], alt }: Props)
       {urls.map((url, index) => {
         const source = sources[index];
         const video = isVideoSource(source?.file, source?.key);
-        if (video) {
-          return (
-            <video key={url} className="media-preview media-preview-video" src={url} controls>
-              <track kind="captions" />
-            </video>
-          );
-        }
-        return <img key={url} className="media-preview" src={url} alt={alt} />;
+        return (
+          <div key={url} className="media-preview-item">
+            {video ? (
+              <video className="media-preview media-preview-video" src={url} controls>
+                <track kind="captions" />
+              </video>
+            ) : (
+              <img className="media-preview" src={url} alt={alt} />
+            )}
+            {onRemoveAt ? (
+              <button
+                type="button"
+                className="danger media-preview-remove"
+                onClick={() => onRemoveAt(index)}
+              >
+                {t('admin.media.remove')}
+              </button>
+            ) : null}
+          </div>
+        );
       })}
     </div>
   );
diff --git a/apps/Administration-FE/src/components/NamedPageForm.tsx b/apps/Administration-FE/src/components/NamedPageForm.tsx
index 62e079b..231c683 100644
--- a/apps/Administration-FE/src/components/NamedPageForm.tsx
+++ b/apps/Administration-FE/src/components/NamedPageForm.tsx
@@ -7,7 +7,8 @@ import {
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
 import { SERVICE_PAGE_NAMES, type NamedPageName } from '../lib/service-page-names';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import RepeatableSection from './RepeatableSection';
 import RichTextEditor from './RichTextEditor';
 import SeoFields, { emptySeo, seoValue, type ContentSeoValue } from './SeoFields';
@@ -216,9 +217,11 @@ export default function NamedPageForm({
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{entryId ? t(`${ns}.edit`) : t(`${ns}.add`)}</h2>
-      </div>
+      <FormPageHeader
+        title={entryId ? t(`${ns}.edit`) : t(`${ns}.add`)}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form
         onSubmit={(event: FormEvent) => {
           event.preventDefault();
@@ -247,18 +250,16 @@ export default function NamedPageForm({
             autoComplete="off"
           />
         </label>
-        <label>
-          {t(`${ns}.banner_image`)}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setBannerFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={bannerFile ? [] : bannerKey ? [bannerKey] : []}
-          files={bannerFile ? [bannerFile] : []}
+        <MediaField
+          label={t(`${ns}.banner_image`)}
           alt={bannerTitle || t(`${ns}.banner_image`)}
+          storedKey={bannerKey}
+          file={bannerFile}
+          onFile={setBannerFile}
+          onClear={() => {
+            setBannerFile(null);
+            setBannerKey(null);
+          }}
         />
         <label>
           {t(`${ns}.introduction_title`)}
@@ -325,18 +326,16 @@ export default function NamedPageForm({
             </>
           )}
         </RepeatableSection>
-        <label>
-          {t(`${ns}.offering_image`)}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setOfferingFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={offeringFile ? [] : offeringKey ? [offeringKey] : []}
-          files={offeringFile ? [offeringFile] : []}
+        <MediaField
+          label={t(`${ns}.offering_image`)}
           alt={offeringTitle || t(`${ns}.offering_image`)}
+          storedKey={offeringKey}
+          file={offeringFile}
+          onFile={setOfferingFile}
+          onClear={() => {
+            setOfferingFile(null);
+            setOfferingKey(null);
+          }}
         />
         <label>
           {t(`${ns}.offering_title`)}
diff --git a/apps/Administration-FE/src/components/RoleForm.tsx b/apps/Administration-FE/src/components/RoleForm.tsx
index 9cc4d65..3c8e531 100644
--- a/apps/Administration-FE/src/components/RoleForm.tsx
+++ b/apps/Administration-FE/src/components/RoleForm.tsx
@@ -9,6 +9,7 @@ import {
   type RoleWrite,
 } from '../lib/admin-api';
 import { resourceLabel, t } from '../lib/i18n';
+import FormPageHeader from './FormPageHeader';
 
 interface Props {
   roleId: string | null;
@@ -118,9 +119,11 @@ export default function RoleForm({ roleId, onCancel, onSaved }: Props) {
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{roleId ? t('admin.roles.edit') : t('admin.roles.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={roleId ? t('admin.roles.edit') : t('admin.roles.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.roles.name')}
diff --git a/apps/Administration-FE/src/components/SeoFields.tsx b/apps/Administration-FE/src/components/SeoFields.tsx
index f09da30..e75b751 100644
--- a/apps/Administration-FE/src/components/SeoFields.tsx
+++ b/apps/Administration-FE/src/components/SeoFields.tsx
@@ -1,4 +1,4 @@
-import MediaPreview from './MediaPreview';
+import MediaField from './MediaField';
 import { t } from '../lib/i18n';
 
 export type ContentSeoValue = {
@@ -93,14 +93,17 @@ export default function SeoFields({ value, imageFile, onChange, onImageFile }: P
           autoComplete="off"
         />
       </label>
-      <label>
-        {t('admin.seo.field.image')}
-        <input
-          type="file"
-          accept="image/jpeg,image/png,image/gif,image/webp"
-          onChange={(event) => onImageFile(event.target.files?.[0] || null)}
-        />
-      </label>
+      <MediaField
+        label={t('admin.seo.field.image')}
+        alt={value.image_alt || value.title || t('admin.seo.field.image')}
+        storedKey={value.image_key}
+        file={imageFile}
+        onFile={onImageFile}
+        onClear={() => {
+          onImageFile(null);
+          patch({ image_key: null });
+        }}
+      />
       <label>
         {t('admin.seo.field.image_alt')}
         <input
@@ -110,11 +113,6 @@ export default function SeoFields({ value, imageFile, onChange, onImageFile }: P
           autoComplete="off"
         />
       </label>
-      <MediaPreview
-        mediaKeys={imageFile ? [] : value.image_key ? [value.image_key] : []}
-        files={imageFile ? [imageFile] : []}
-        alt={value.image_alt || value.title || t('admin.seo.field.image')}
-      />
     </fieldset>
   );
 }
diff --git a/apps/Administration-FE/src/components/SolutionDetailForm.tsx b/apps/Administration-FE/src/components/SolutionDetailForm.tsx
index ef164ef..35dcb90 100644
--- a/apps/Administration-FE/src/components/SolutionDetailForm.tsx
+++ b/apps/Administration-FE/src/components/SolutionDetailForm.tsx
@@ -9,7 +9,8 @@ import {
   type SolutionDetailWrite,
 } from '../lib/admin-api';
 import { hydrateRichText, persistRichText } from '../lib/rich-text';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import RepeatableSection from './RepeatableSection';
 import RichTextEditor from './RichTextEditor';
 import SeoFields, { emptySeo, seoValue, type ContentSeoValue } from './SeoFields';
@@ -364,24 +365,21 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
                 setTypes(types.map((row) => (row.key === item.key ? { ...row, description: value } : row)))
               }
             />
-            <label>
-              {t('admin.solution_details.field.image')}
-              <input
-                type="file"
-                accept="image/jpeg,image/png,image/gif,image/webp"
-                onChange={(event) =>
-                  setTypes(
-                    types.map((row) =>
-                      row.key === item.key ? { ...row, imageFile: event.target.files?.[0] || null } : row,
-                    ),
-                  )
-                }
-              />
-            </label>
-            <MediaPreview
-              mediaKeys={item.imageFile ? [] : item.image_key ? [item.image_key] : []}
-              files={item.imageFile ? [item.imageFile] : []}
+            <MediaField
+              label={t('admin.solution_details.field.image')}
               alt={item.title}
+              storedKey={item.image_key}
+              file={item.imageFile}
+              onFile={(file) =>
+                setTypes(types.map((row) => (row.key === item.key ? { ...row, imageFile: file } : row)))
+              }
+              onClear={() =>
+                setTypes(
+                  types.map((row) =>
+                    row.key === item.key ? { ...row, imageFile: null, image_key: null } : row,
+                  ),
+                )
+              }
             />
           </>
         )}
@@ -402,9 +400,11 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{detailId ? t('admin.solution_details.edit') : t('admin.solution_details.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={detailId ? t('admin.solution_details.edit') : t('admin.solution_details.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form
         onSubmit={(event: FormEvent) => {
           event.preventDefault();
@@ -438,18 +438,16 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
         </label>
         <fieldset>
           <legend>{t('admin.solution_details.banner')}</legend>
-          <label>
-            {t('admin.solution_details.field.image')}
-            <input
-              type="file"
-              accept="image/jpeg,image/png,image/gif,image/webp"
-              onChange={(event) => setBannerFile(event.target.files?.[0] || null)}
-            />
-          </label>
-          <MediaPreview
-            mediaKeys={bannerFile ? [] : bannerKey ? [bannerKey] : []}
-            files={bannerFile ? [bannerFile] : []}
+          <MediaField
+            label={t('admin.solution_details.field.image')}
             alt={bannerTitle}
+            storedKey={bannerKey}
+            file={bannerFile}
+            onFile={setBannerFile}
+            onClear={() => {
+              setBannerFile(null);
+              setBannerKey(null);
+            }}
           />
           <label>
             {t('admin.solution_details.field.title')}
@@ -494,24 +492,23 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
             <p>{t('admin.solution_details.icons')}</p>
             {introIcons.map((item, index) => (
               <div key={item.key}>
-                <label>
-                  {t('admin.solution_details.icon')} {index + 1}
-                  <input
-                    type="file"
-                    accept="image/jpeg,image/png,image/gif,image/webp"
-                    onChange={(event) =>
-                      setIntroIcons((current) =>
-                        current.map((row) =>
-                          row.key === item.key ? { ...row, iconFile: event.target.files?.[0] || null } : row,
-                        ),
-                      )
-                    }
-                  />
-                </label>
-                <MediaPreview
-                  mediaKeys={item.iconFile ? [] : item.icon_key ? [item.icon_key] : []}
-                  files={item.iconFile ? [item.iconFile] : []}
+                <MediaField
+                  label={`${t('admin.solution_details.icon')} ${index + 1}`}
                   alt={t('admin.solution_details.icon')}
+                  storedKey={item.icon_key}
+                  file={item.iconFile}
+                  onFile={(file) =>
+                    setIntroIcons((current) =>
+                      current.map((row) => (row.key === item.key ? { ...row, iconFile: file } : row)),
+                    )
+                  }
+                  onClear={() =>
+                    setIntroIcons((current) =>
+                      current.map((row) =>
+                        row.key === item.key ? { ...row, iconFile: null, icon_key: null } : row,
+                      ),
+                    )
+                  }
                 />
                 {introIcons.length > 1 ? (
                   <button
@@ -538,18 +535,16 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
             value={introSubDescription}
             onChange={setIntroSubDescription}
           />
-          <label>
-            {t('admin.solution_details.field.image')}
-            <input
-              type="file"
-              accept="image/jpeg,image/png,image/gif,image/webp"
-              onChange={(event) => setIntroImageFile(event.target.files?.[0] || null)}
-            />
-          </label>
-          <MediaPreview
-            mediaKeys={introImageFile ? [] : introImageKey ? [introImageKey] : []}
-            files={introImageFile ? [introImageFile] : []}
+          <MediaField
+            label={t('admin.solution_details.field.image')}
             alt={introSubTitle}
+            storedKey={introImageKey}
+            file={introImageFile}
+            onFile={setIntroImageFile}
+            onClear={() => {
+              setIntroImageFile(null);
+              setIntroImageKey(null);
+            }}
           />
         </fieldset>
         <fieldset>
@@ -577,18 +572,16 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
             value={challengesDescription}
             onChange={setChallengesDescription}
           />
-          <label>
-            {t('admin.solution_details.field.image')}
-            <input
-              type="file"
-              accept="image/jpeg,image/png,image/gif,image/webp"
-              onChange={(event) => setChallengesImageFile(event.target.files?.[0] || null)}
-            />
-          </label>
-          <MediaPreview
-            mediaKeys={challengesImageFile ? [] : challengesImageKey ? [challengesImageKey] : []}
-            files={challengesImageFile ? [challengesImageFile] : []}
+          <MediaField
+            label={t('admin.solution_details.field.image')}
             alt={challengesName}
+            storedKey={challengesImageKey}
+            file={challengesImageFile}
+            onFile={setChallengesImageFile}
+            onClear={() => {
+              setChallengesImageFile(null);
+              setChallengesImageKey(null);
+            }}
           />
           <label>
             {t('admin.solution_details.name')}
@@ -637,18 +630,16 @@ export default function SolutionDetailForm({ detailId, canPublish, onCancel, onS
             {t('admin.solution_details.solution_title')}
             <input value={solutionsTitle} onChange={(event) => setSolutionsTitle(event.target.value)} maxLength={200} />
           </label>
-          <label>
-            {t('admin.solution_details.solution_image')}
-            <input
-              type="file"
-              accept="image/jpeg,image/png,image/gif,image/webp"
-              onChange={(event) => setSolutionsImageFile(event.target.files?.[0] || null)}
-            />
-          </label>
-          <MediaPreview
-            mediaKeys={solutionsImageFile ? [] : solutionsImageKey ? [solutionsImageKey] : []}
-            files={solutionsImageFile ? [solutionsImageFile] : []}
+          <MediaField
+            label={t('admin.solution_details.solution_image')}
             alt={solutionsTitle}
+            storedKey={solutionsImageKey}
+            file={solutionsImageFile}
+            onFile={setSolutionsImageFile}
+            onClear={() => {
+              setSolutionsImageFile(null);
+              setSolutionsImageKey(null);
+            }}
           />
           <label>
             {t('admin.solution_details.solution_description')}
diff --git a/apps/Administration-FE/src/components/SolutionForm.tsx b/apps/Administration-FE/src/components/SolutionForm.tsx
index eb9f8d3..43e3d17 100644
--- a/apps/Administration-FE/src/components/SolutionForm.tsx
+++ b/apps/Administration-FE/src/components/SolutionForm.tsx
@@ -7,7 +7,8 @@ import {
   uploadMedia,
   type SolutionWrite,
 } from '../lib/admin-api';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import SeoFields, { emptySeo, seoValue, type ContentSeoValue } from './SeoFields';
 import { t } from '../lib/i18n';
 
@@ -85,27 +86,27 @@ export default function SolutionForm({ solutionId, canPublish, onCancel, onSaved
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{solutionId ? t('admin.solutions.edit') : t('admin.solutions.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={solutionId ? t('admin.solutions.edit') : t('admin.solutions.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form
         onSubmit={(event: FormEvent) => {
           event.preventDefault();
           persist(status).catch(() => undefined);
         }}
       >
-        <label>
-          {t('admin.solutions.banner_image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setBannerFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={bannerFile ? [] : bannerKey ? [bannerKey] : []}
-          files={bannerFile ? [bannerFile] : []}
+        <MediaField
+          label={t('admin.solutions.banner_image')}
           alt={bannerTitle || t('admin.solutions.banner_image')}
+          storedKey={bannerKey}
+          file={bannerFile}
+          onFile={setBannerFile}
+          onClear={() => {
+            setBannerFile(null);
+            setBannerKey(null);
+          }}
         />
         <label>
           {t('admin.solutions.banner_title')}
diff --git a/apps/Administration-FE/src/components/SolutionProductForm.tsx b/apps/Administration-FE/src/components/SolutionProductForm.tsx
index 570d126..50dd1f1 100644
--- a/apps/Administration-FE/src/components/SolutionProductForm.tsx
+++ b/apps/Administration-FE/src/components/SolutionProductForm.tsx
@@ -8,7 +8,8 @@ import {
   uploadMedia,
   type SolutionProductWrite,
 } from '../lib/admin-api';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 import { t } from '../lib/i18n';
 
 interface Props {
@@ -111,9 +112,11 @@ export default function SolutionProductForm({ productId, canPublish, onCancel, o
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{productId ? t('admin.solution_products.edit') : t('admin.solution_products.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={productId ? t('admin.solution_products.edit') : t('admin.solution_products.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form
         onSubmit={(event: FormEvent) => {
           event.preventDefault();
@@ -145,44 +148,38 @@ export default function SolutionProductForm({ productId, canPublish, onCancel, o
           {t('admin.solution_products.product_tag')}
           <input value={productTag} onChange={(event) => setProductTag(event.target.value)} maxLength={120} />
         </label>
-        <label>
-          {t('admin.solution_products.product_logo')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setLogoFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={logoFile ? [] : logoKey ? [logoKey] : []}
-          files={logoFile ? [logoFile] : []}
+        <MediaField
+          label={t('admin.solution_products.product_logo')}
           alt={t('admin.solution_products.product_logo')}
+          storedKey={logoKey}
+          file={logoFile}
+          onFile={setLogoFile}
+          onClear={() => {
+            setLogoFile(null);
+            setLogoKey(null);
+          }}
         />
-        <label>
-          {t('admin.solution_products.product_card_image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setCardFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={cardFile ? [] : cardKey ? [cardKey] : []}
-          files={cardFile ? [cardFile] : []}
+        <MediaField
+          label={t('admin.solution_products.product_card_image')}
           alt={t('admin.solution_products.product_card_image')}
+          storedKey={cardKey}
+          file={cardFile}
+          onFile={setCardFile}
+          onClear={() => {
+            setCardFile(null);
+            setCardKey(null);
+          }}
         />
-        <label>
-          {t('admin.solution_products.product_banner_image')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setBannerFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={bannerFile ? [] : bannerKey ? [bannerKey] : []}
-          files={bannerFile ? [bannerFile] : []}
+        <MediaField
+          label={t('admin.solution_products.product_banner_image')}
           alt={t('admin.solution_products.product_banner_image')}
+          storedKey={bannerKey}
+          file={bannerFile}
+          onFile={setBannerFile}
+          onClear={() => {
+            setBannerFile(null);
+            setBannerKey(null);
+          }}
         />
         <label className="checkbox-field">
           <input type="checkbox" checked={cardOnRight} onChange={(event) => setCardOnRight(event.target.checked)} />
diff --git a/apps/Administration-FE/src/components/TechnologyForm.tsx b/apps/Administration-FE/src/components/TechnologyForm.tsx
index 419cbda..55ce085 100644
--- a/apps/Administration-FE/src/components/TechnologyForm.tsx
+++ b/apps/Administration-FE/src/components/TechnologyForm.tsx
@@ -8,7 +8,8 @@ import {
   type TechnologyWrite,
 } from '../lib/admin-api';
 import { t } from '../lib/i18n';
-import MediaPreview from './MediaPreview';
+import FormPageHeader from './FormPageHeader';
+import MediaField from './MediaField';
 
 interface Props {
   technologyId: string | null;
@@ -96,9 +97,11 @@ export default function TechnologyForm({ technologyId, onCancel, onSaved }: Prop
 
   return (
     <section className="role-form-page">
-      <div className="panel-header">
-        <h2>{technologyId ? t('admin.technologies.edit') : t('admin.technologies.add')}</h2>
-      </div>
+      <FormPageHeader
+        title={technologyId ? t('admin.technologies.edit') : t('admin.technologies.add')}
+        onBack={onCancel}
+        disabled={saving}
+      />
       <form onSubmit={save}>
         <label>
           {t('admin.technologies.name')}
@@ -111,18 +114,16 @@ export default function TechnologyForm({ technologyId, onCancel, onSaved }: Prop
             aria-invalid={Boolean(fieldError)}
           />
         </label>
-        <label>
-          {t('admin.technologies.logo')}
-          <input
-            type="file"
-            accept="image/jpeg,image/png,image/gif,image/webp"
-            onChange={(event) => setLogoFile(event.target.files?.[0] || null)}
-          />
-        </label>
-        <MediaPreview
-          mediaKeys={logoFile ? [] : logoKey ? [logoKey] : []}
-          files={logoFile ? [logoFile] : []}
+        <MediaField
+          label={t('admin.technologies.logo')}
           alt={name || t('admin.technologies.logo')}
+          storedKey={logoKey}
+          file={logoFile}
+          onFile={setLogoFile}
+          onClear={() => {
+            setLogoFile(null);
+            setLogoKey(null);
+          }}
         />
         {fieldError && (
           <p className="alert alert-error error" role="alert">
diff --git a/apps/Administration-FE/src/i18n/en.json b/apps/Administration-FE/src/i18n/en.json
index 4fdb85f..aca6be8 100644
--- a/apps/Administration-FE/src/i18n/en.json
+++ b/apps/Administration-FE/src/i18n/en.json
@@ -32,6 +32,8 @@
   "admin.publish": "Publish",
   "admin.publish.success": "Published. Rebuild the public site to see changes.",
   "admin.field.required": "This field is required.",
+  "admin.form.back": "Back",
+  "admin.media.remove": "Remove",
   "admin.csrf.failed": "Request could not be verified. Refresh and try again.",
   "admin.action.forbidden": "You do not have permission for this action.",
   "admin.roles.title": "Roles & Permissions",
@@ -768,5 +770,369 @@
   "admin.digital_transformation.accordion": "Digital Transformation Accordion",
   "admin.digital_transformation.outcomes_image": "Outcomes Image",
   "admin.digital_transformation.outcomes_title": "Outcomes Title",
-  "admin.digital_transformation.outcomes_description": "Outcomes Description"
+  "admin.digital_transformation.outcomes_description": "Outcomes Description",
+  "admin.workspace.devops_consult": "DevOps Consult",
+  "admin.roles.resource.devops_consult": "DevOps Consult",
+  "admin.devops_consult.title": "DevOps Consult",
+  "admin.devops_consult.add": "Create New Entry",
+  "admin.devops_consult.edit": "Edit DevOps Consult",
+  "admin.devops_consult.search": "Search devops consult",
+  "admin.devops_consult.search.submit": "Search",
+  "admin.devops_consult.id": "ID",
+  "admin.devops_consult.banner_image": "Banner Image",
+  "admin.devops_consult.banner_title": "Banner Title",
+  "admin.devops_consult.state": "State",
+  "admin.devops_consult.actions": "Actions",
+  "admin.devops_consult.edit_action": "Edit",
+  "admin.devops_consult.delete_action": "Delete",
+  "admin.devops_consult.empty": "No DevOps Consult entries match this search.",
+  "admin.devops_consult.previous": "Previous",
+  "admin.devops_consult.next": "Next",
+  "admin.devops_consult.page": "Page",
+  "admin.devops_consult.save": "Save",
+  "admin.devops_consult.cancel": "Cancel",
+  "admin.devops_consult.saved": "DevOps Consult entry saved",
+  "admin.devops_consult.publish": "Publish",
+  "admin.devops_consult.unpublish": "Unpublish",
+  "admin.devops_consult.status.draft": "Draft",
+  "admin.devops_consult.status.publish": "Published",
+  "admin.devops_consult.delete.confirm": "Delete DevOps Consult entry",
+  "admin.devops_consult.delete.confirm_body": "This DevOps Consult entry will be permanently deleted. This cannot be undone.",
+  "admin.devops_consult.delete.cancel": "Cancel",
+  "admin.devops_consult.introduction_title": "Introduction Title",
+  "admin.devops_consult.introduction_first": "Introduction First Paragraph",
+  "admin.devops_consult.introduction_second": "Introduction Second Paragraph",
+  "admin.devops_consult.introduction_third": "Introduction Third Paragraph",
+  "admin.devops_consult.faq_title": "FAQ Title",
+  "admin.devops_consult.faq_description": "FAQ Description",
+  "admin.devops_consult.faq_accordion": "FAQ Accordion",
+  "admin.devops_consult.add_item": "Add item",
+  "admin.devops_consult.remove_item": "Remove item",
+  "admin.devops_consult.item": "Item",
+  "admin.devops_consult.accordion_title": "Title",
+  "admin.devops_consult.accordion_contents": "Contents",
+  "admin.devops_consult.offering_title": "Offering Title",
+  "admin.devops_consult.offering_description": "Offering Description",
+  "admin.devops_consult.offering_image": "Offering Image",
+  "admin.devops_consult.not_found": "That entry could not be found.",
+  "admin.devops_consult.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.devops_consult.accordion": "Experience Accordion",
+  "admin.devops_consult.experience_title": "Experience Title",
+  "admin.devops_consult.experience_accordion": "Experience Accordion",
+  "admin.devops_consult.experience_image": "Experience Image",
+  "admin.devops_consult.experience_description": "Experience Description",
+  "admin.devops_consult.seo": "SEO",
+  "admin.devops_consult.content_available_in": "Content Available In",
+  "admin.workspace.infrastructure_management": "Infrastructure Management & Automation",
+  "admin.roles.resource.infrastructure_management": "Infrastructure Management & Automation",
+  "admin.infrastructure_management.title": "Infrastructure Management & Automation",
+  "admin.infrastructure_management.add": "Create New Entry",
+  "admin.infrastructure_management.edit": "Edit Infrastructure Management & Automation",
+  "admin.infrastructure_management.search": "Search infrastructure management & automation",
+  "admin.infrastructure_management.search.submit": "Search",
+  "admin.infrastructure_management.id": "ID",
+  "admin.infrastructure_management.banner_image": "Banner Image",
+  "admin.infrastructure_management.banner_title": "Banner Title",
+  "admin.infrastructure_management.state": "State",
+  "admin.infrastructure_management.actions": "Actions",
+  "admin.infrastructure_management.edit_action": "Edit",
+  "admin.infrastructure_management.delete_action": "Delete",
+  "admin.infrastructure_management.empty": "No Infrastructure Management & Automation entries match this search.",
+  "admin.infrastructure_management.previous": "Previous",
+  "admin.infrastructure_management.next": "Next",
+  "admin.infrastructure_management.page": "Page",
+  "admin.infrastructure_management.save": "Save",
+  "admin.infrastructure_management.cancel": "Cancel",
+  "admin.infrastructure_management.saved": "Infrastructure Management & Automation entry saved",
+  "admin.infrastructure_management.publish": "Publish",
+  "admin.infrastructure_management.unpublish": "Unpublish",
+  "admin.infrastructure_management.status.draft": "Draft",
+  "admin.infrastructure_management.status.publish": "Published",
+  "admin.infrastructure_management.delete.confirm": "Delete Infrastructure Management & Automation entry",
+  "admin.infrastructure_management.delete.confirm_body": "This Infrastructure Management & Automation entry will be permanently deleted. This cannot be undone.",
+  "admin.infrastructure_management.delete.cancel": "Cancel",
+  "admin.infrastructure_management.introduction_title": "Introduction Title",
+  "admin.infrastructure_management.introduction_first": "Introduction First Paragraph",
+  "admin.infrastructure_management.introduction_second": "Introduction Second Paragraph",
+  "admin.infrastructure_management.introduction_third": "Introduction Third Paragraph",
+  "admin.infrastructure_management.faq_title": "FAQ Title",
+  "admin.infrastructure_management.faq_description": "FAQ Description",
+  "admin.infrastructure_management.faq_accordion": "FAQ Accordion",
+  "admin.infrastructure_management.add_item": "Add item",
+  "admin.infrastructure_management.remove_item": "Remove item",
+  "admin.infrastructure_management.item": "Item",
+  "admin.infrastructure_management.accordion_title": "Title",
+  "admin.infrastructure_management.accordion_contents": "Contents",
+  "admin.infrastructure_management.offering_title": "Offering Title",
+  "admin.infrastructure_management.offering_description": "Offering Description",
+  "admin.infrastructure_management.offering_image": "Offering Image",
+  "admin.infrastructure_management.not_found": "That entry could not be found.",
+  "admin.infrastructure_management.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.infrastructure_management.accordion": "Accordion Section",
+  "admin.infrastructure_management.experience_title": "Experience Title",
+  "admin.infrastructure_management.experience_accordion": "Experience Accordion",
+  "admin.infrastructure_management.experience_image": "Experience Image",
+  "admin.infrastructure_management.experience_description": "Experience Description",
+  "admin.infrastructure_management.seo": "SEO",
+  "admin.infrastructure_management.content_available_in": "Content Available In",
+  "admin.workspace.application_development": "Application Development Service",
+  "admin.roles.resource.application_development": "Application Development Service",
+  "admin.application_development.title": "Application Development Service",
+  "admin.application_development.add": "Create New Entry",
+  "admin.application_development.edit": "Edit Application Development Service",
+  "admin.application_development.search": "Search application development service",
+  "admin.application_development.search.submit": "Search",
+  "admin.application_development.id": "ID",
+  "admin.application_development.banner_image": "Banner Image",
+  "admin.application_development.banner_title": "Banner Title",
+  "admin.application_development.state": "State",
+  "admin.application_development.actions": "Actions",
+  "admin.application_development.edit_action": "Edit",
+  "admin.application_development.delete_action": "Delete",
+  "admin.application_development.empty": "No Application Development Service entries match this search.",
+  "admin.application_development.previous": "Previous",
+  "admin.application_development.next": "Next",
+  "admin.application_development.page": "Page",
+  "admin.application_development.save": "Save",
+  "admin.application_development.cancel": "Cancel",
+  "admin.application_development.saved": "Application Development Service entry saved",
+  "admin.application_development.publish": "Publish",
+  "admin.application_development.unpublish": "Unpublish",
+  "admin.application_development.status.draft": "Draft",
+  "admin.application_development.status.publish": "Published",
+  "admin.application_development.delete.confirm": "Delete Application Development Service entry",
+  "admin.application_development.delete.confirm_body": "This Application Development Service entry will be permanently deleted. This cannot be undone.",
+  "admin.application_development.delete.cancel": "Cancel",
+  "admin.application_development.introduction_title": "Introduction Title",
+  "admin.application_development.introduction_first": "Introduction First Paragraph",
+  "admin.application_development.introduction_second": "Introduction Second Paragraph",
+  "admin.application_development.introduction_third": "Introduction Third Paragraph",
+  "admin.application_development.faq_title": "FAQ Title",
+  "admin.application_development.faq_description": "FAQ Description",
+  "admin.application_development.faq_accordion": "FAQ Accordion",
+  "admin.application_development.add_item": "Add item",
+  "admin.application_development.remove_item": "Remove item",
+  "admin.application_development.item": "Item",
+  "admin.application_development.accordion_title": "Title",
+  "admin.application_development.accordion_contents": "Contents",
+  "admin.application_development.offering_title": "Offering Title",
+  "admin.application_development.offering_description": "Offering Description",
+  "admin.application_development.offering_image": "Offering Image",
+  "admin.application_development.not_found": "That entry could not be found.",
+  "admin.application_development.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.application_development.accordion": "Application Development Accordion",
+  "admin.application_development.experience_title": "Experience Title",
+  "admin.application_development.experience_accordion": "Experience Accordion",
+  "admin.application_development.experience_image": "Experience Image",
+  "admin.application_development.experience_description": "Experience Description",
+  "admin.application_development.seo": "SEO",
+  "admin.application_development.content_available_in": "Content Available In",
+  "admin.workspace.application_modernization": "Application Modernization",
+  "admin.roles.resource.application_modernization": "Application Modernization",
+  "admin.application_modernization.title": "Application Modernization",
+  "admin.application_modernization.add": "Create New Entry",
+  "admin.application_modernization.edit": "Edit Application Modernization",
+  "admin.application_modernization.search": "Search application modernization",
+  "admin.application_modernization.search.submit": "Search",
+  "admin.application_modernization.id": "ID",
+  "admin.application_modernization.banner_image": "Banner Image",
+  "admin.application_modernization.banner_title": "Banner Title",
+  "admin.application_modernization.state": "State",
+  "admin.application_modernization.actions": "Actions",
+  "admin.application_modernization.edit_action": "Edit",
+  "admin.application_modernization.delete_action": "Delete",
+  "admin.application_modernization.empty": "No Application Modernization entries match this search.",
+  "admin.application_modernization.previous": "Previous",
+  "admin.application_modernization.next": "Next",
+  "admin.application_modernization.page": "Page",
+  "admin.application_modernization.save": "Save",
+  "admin.application_modernization.cancel": "Cancel",
+  "admin.application_modernization.saved": "Application Modernization entry saved",
+  "admin.application_modernization.publish": "Publish",
+  "admin.application_modernization.unpublish": "Unpublish",
+  "admin.application_modernization.status.draft": "Draft",
+  "admin.application_modernization.status.publish": "Published",
+  "admin.application_modernization.delete.confirm": "Delete Application Modernization entry",
+  "admin.application_modernization.delete.confirm_body": "This Application Modernization entry will be permanently deleted. This cannot be undone.",
+  "admin.application_modernization.delete.cancel": "Cancel",
+  "admin.application_modernization.introduction_title": "Introduction Title",
+  "admin.application_modernization.introduction_first": "Introduction First Paragraph",
+  "admin.application_modernization.introduction_second": "Introduction Second Paragraph",
+  "admin.application_modernization.introduction_third": "Introduction Third Paragraph",
+  "admin.application_modernization.faq_title": "FAQ Title",
+  "admin.application_modernization.faq_description": "FAQ Description",
+  "admin.application_modernization.faq_accordion": "FAQ Accordion",
+  "admin.application_modernization.add_item": "Add item",
+  "admin.application_modernization.remove_item": "Remove item",
+  "admin.application_modernization.item": "Item",
+  "admin.application_modernization.accordion_title": "Title",
+  "admin.application_modernization.accordion_contents": "Contents",
+  "admin.application_modernization.offering_title": "Offering Title",
+  "admin.application_modernization.offering_description": "Offering Description",
+  "admin.application_modernization.offering_image": "Application Modernization Offering Image",
+  "admin.application_modernization.not_found": "That entry could not be found.",
+  "admin.application_modernization.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.application_modernization.accordion": "Application Modernization Accordion",
+  "admin.application_modernization.experience_title": "Experience Title",
+  "admin.application_modernization.experience_accordion": "Experience Accordion",
+  "admin.application_modernization.experience_image": "Experience Image",
+  "admin.application_modernization.experience_description": "Experience Description",
+  "admin.application_modernization.seo": "SEO",
+  "admin.application_modernization.content_available_in": "Content Available In",
+  "admin.workspace.mobile_application_development": "Mobile Application Development",
+  "admin.roles.resource.mobile_application_development": "Mobile Application Development",
+  "admin.mobile_application_development.title": "Mobile Application Development",
+  "admin.mobile_application_development.add": "Create New Entry",
+  "admin.mobile_application_development.edit": "Edit Mobile Application Development",
+  "admin.mobile_application_development.search": "Search mobile application development",
+  "admin.mobile_application_development.search.submit": "Search",
+  "admin.mobile_application_development.id": "ID",
+  "admin.mobile_application_development.banner_image": "Banner Image",
+  "admin.mobile_application_development.banner_title": "Banner Title",
+  "admin.mobile_application_development.state": "State",
+  "admin.mobile_application_development.actions": "Actions",
+  "admin.mobile_application_development.edit_action": "Edit",
+  "admin.mobile_application_development.delete_action": "Delete",
+  "admin.mobile_application_development.empty": "No Mobile Application Development entries match this search.",
+  "admin.mobile_application_development.previous": "Previous",
+  "admin.mobile_application_development.next": "Next",
+  "admin.mobile_application_development.page": "Page",
+  "admin.mobile_application_development.save": "Save",
+  "admin.mobile_application_development.cancel": "Cancel",
+  "admin.mobile_application_development.saved": "Mobile Application Development entry saved",
+  "admin.mobile_application_development.publish": "Publish",
+  "admin.mobile_application_development.unpublish": "Unpublish",
+  "admin.mobile_application_development.status.draft": "Draft",
+  "admin.mobile_application_development.status.publish": "Published",
+  "admin.mobile_application_development.delete.confirm": "Delete Mobile Application Development entry",
+  "admin.mobile_application_development.delete.confirm_body": "This Mobile Application Development entry will be permanently deleted. This cannot be undone.",
+  "admin.mobile_application_development.delete.cancel": "Cancel",
+  "admin.mobile_application_development.introduction_title": "Introduction Title",
+  "admin.mobile_application_development.introduction_first": "Introduction First Paragraph",
+  "admin.mobile_application_development.introduction_second": "Introduction Second Paragraph",
+  "admin.mobile_application_development.introduction_third": "Introduction Third Paragraph",
+  "admin.mobile_application_development.faq_title": "FAQ Title",
+  "admin.mobile_application_development.faq_description": "FAQ Description",
+  "admin.mobile_application_development.faq_accordion": "FAQ Accordion",
+  "admin.mobile_application_development.add_item": "Add item",
+  "admin.mobile_application_development.remove_item": "Remove item",
+  "admin.mobile_application_development.item": "Item",
+  "admin.mobile_application_development.accordion_title": "Title",
+  "admin.mobile_application_development.accordion_contents": "Contents",
+  "admin.mobile_application_development.offering_title": "Offering Title",
+  "admin.mobile_application_development.offering_description": "Offering Description",
+  "admin.mobile_application_development.offering_image": "Offering Image",
+  "admin.mobile_application_development.not_found": "That entry could not be found.",
+  "admin.mobile_application_development.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.mobile_application_development.accordion": "Mobile Application Accordion",
+  "admin.mobile_application_development.experience_title": "Experience Title",
+  "admin.mobile_application_development.experience_accordion": "Experience Accordion",
+  "admin.mobile_application_development.experience_image": "Experience Image",
+  "admin.mobile_application_development.experience_description": "Experience Description",
+  "admin.mobile_application_development.seo": "SEO",
+  "admin.mobile_application_development.content_available_in": "Content Available In",
+  "admin.workspace.user_centered_design": "User Centered Design",
+  "admin.roles.resource.user_centered_design": "User Centered Design",
+  "admin.user_centered_design.title": "User Centered Design",
+  "admin.user_centered_design.add": "Create New Entry",
+  "admin.user_centered_design.edit": "Edit User Centered Design",
+  "admin.user_centered_design.search": "Search user centered design",
+  "admin.user_centered_design.search.submit": "Search",
+  "admin.user_centered_design.id": "ID",
+  "admin.user_centered_design.banner_image": "Banner Image",
+  "admin.user_centered_design.banner_title": "Banner Title",
+  "admin.user_centered_design.state": "State",
+  "admin.user_centered_design.actions": "Actions",
+  "admin.user_centered_design.edit_action": "Edit",
+  "admin.user_centered_design.delete_action": "Delete",
+  "admin.user_centered_design.empty": "No User Centered Design entries match this search.",
+  "admin.user_centered_design.previous": "Previous",
+  "admin.user_centered_design.next": "Next",
+  "admin.user_centered_design.page": "Page",
+  "admin.user_centered_design.save": "Save",
+  "admin.user_centered_design.cancel": "Cancel",
+  "admin.user_centered_design.saved": "User Centered Design entry saved",
+  "admin.user_centered_design.publish": "Publish",
+  "admin.user_centered_design.unpublish": "Unpublish",
+  "admin.user_centered_design.status.draft": "Draft",
+  "admin.user_centered_design.status.publish": "Published",
+  "admin.user_centered_design.delete.confirm": "Delete User Centered Design entry",
+  "admin.user_centered_design.delete.confirm_body": "This User Centered Design entry will be permanently deleted. This cannot be undone.",
+  "admin.user_centered_design.delete.cancel": "Cancel",
+  "admin.user_centered_design.introduction_title": "Introduction Title",
+  "admin.user_centered_design.introduction_first": "Introduction First Paragraph",
+  "admin.user_centered_design.introduction_second": "Introduction Second Paragraph",
+  "admin.user_centered_design.introduction_third": "Introduction Third Paragraph",
+  "admin.user_centered_design.faq_title": "FAQ Title",
+  "admin.user_centered_design.faq_description": "FAQ Description",
+  "admin.user_centered_design.faq_accordion": "FAQ Accordion",
+  "admin.user_centered_design.add_item": "Add item",
+  "admin.user_centered_design.remove_item": "Remove item",
+  "admin.user_centered_design.item": "Item",
+  "admin.user_centered_design.accordion_title": "Title",
+  "admin.user_centered_design.accordion_contents": "Contents",
+  "admin.user_centered_design.offering_title": "Offering Title",
+  "admin.user_centered_design.offering_description": "Offering Description",
+  "admin.user_centered_design.offering_image": "Offering Image",
+  "admin.user_centered_design.not_found": "That entry could not be found.",
+  "admin.user_centered_design.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.user_centered_design.accordion": "Accordion Section",
+  "admin.user_centered_design.experience_title": "Experience Title",
+  "admin.user_centered_design.experience_accordion": "Experience Accordion",
+  "admin.user_centered_design.experience_image": "Experience Image",
+  "admin.user_centered_design.experience_description": "Experience Description",
+  "admin.user_centered_design.seo": "SEO",
+  "admin.user_centered_design.content_available_in": "Content Available In",
+  "admin.workspace.overview": "Overview",
+  "admin.roles.resource.overview": "Overview",
+  "admin.overview.title": "Overview",
+  "admin.overview.add": "Create New Entry",
+  "admin.overview.edit": "Edit Overview",
+  "admin.overview.search": "Search overview",
+  "admin.overview.search.submit": "Search",
+  "admin.overview.id": "ID",
+  "admin.overview.banner_image": "Banner Image",
+  "admin.overview.banner_title": "Banner Title",
+  "admin.overview.state": "State",
+  "admin.overview.actions": "Actions",
+  "admin.overview.edit_action": "Edit",
+  "admin.overview.delete_action": "Delete",
+  "admin.overview.empty": "No Overview entries match this search.",
+  "admin.overview.previous": "Previous",
+  "admin.overview.next": "Next",
+  "admin.overview.page": "Page",
+  "admin.overview.save": "Save",
+  "admin.overview.cancel": "Cancel",
+  "admin.overview.saved": "Overview entry saved",
+  "admin.overview.publish": "Publish",
+  "admin.overview.unpublish": "Unpublish",
+  "admin.overview.status.draft": "Draft",
+  "admin.overview.status.publish": "Published",
+  "admin.overview.delete.confirm": "Delete Overview entry",
+  "admin.overview.delete.confirm_body": "This Overview entry will be permanently deleted. This cannot be undone.",
+  "admin.overview.delete.cancel": "Cancel",
+  "admin.overview.introduction_title": "Introduction Title",
+  "admin.overview.introduction_first": "Introduction First Paragraph",
+  "admin.overview.introduction_second": "Introduction Second Paragraph",
+  "admin.overview.introduction_third": "Introduction Third Paragraph",
+  "admin.overview.faq_title": "FAQ Title",
+  "admin.overview.faq_description": "FAQ Description",
+  "admin.overview.faq_accordion": "FAQ Accordion",
+  "admin.overview.add_item": "Add item",
+  "admin.overview.remove_item": "Remove item",
+  "admin.overview.item": "Item",
+  "admin.overview.accordion_title": "Title",
+  "admin.overview.accordion_contents": "Contents",
+  "admin.overview.offering_title": "Offering Title",
+  "admin.overview.offering_description": "Offering Description",
+  "admin.overview.offering_image": "Offering Image",
+  "admin.overview.not_found": "That entry could not be found.",
+  "admin.overview.slug.invalid": "A valid slug could not be generated from the banner title.",
+  "admin.overview.accordion": "Accordion Section",
+  "admin.overview.experience_title": "Experience Title",
+  "admin.overview.experience_accordion": "Experience Accordion",
+  "admin.overview.experience_image": "Experience Image",
+  "admin.overview.experience_description": "Experience Description",
+  "admin.overview.seo": "SEO",
+  "admin.overview.content_available_in": "Content Available In"
 }
diff --git a/apps/Administration-FE/src/lib/admin-api.ts b/apps/Administration-FE/src/lib/admin-api.ts
index b738a08..711ab36 100644
--- a/apps/Administration-FE/src/lib/admin-api.ts
+++ b/apps/Administration-FE/src/lib/admin-api.ts
@@ -13,6 +13,13 @@ import type { components as AiServicesComponents } from '../generated/admin-ai-s
 import type { components as CloudServicesComponents } from '../generated/admin-cloud-services.v1';
 import type { components as DataAnalyticsComponents } from '../generated/admin-data-analytics.v1';
 import type { components as DigitalTransformationComponents } from '../generated/admin-digital-transformation.v1';
+import type { components as DevOpsConsultComponents } from '../generated/admin-devops-consult.v1';
+import type { components as InfrastructureManagementComponents } from '../generated/admin-infrastructure-management.v1';
+import type { components as ApplicationDevelopmentComponents } from '../generated/admin-application-development.v1';
+import type { components as ApplicationModernizationComponents } from '../generated/admin-application-modernization.v1';
+import type { components as MobileApplicationDevelopmentComponents } from '../generated/admin-mobile-application-development.v1';
+import type { components as UserCenteredDesignComponents } from '../generated/admin-user-centered-design.v1';
+import type { components as OverviewComponents } from '../generated/admin-overview.v1';
 import {
   clearTokens,
   getAccessToken,
@@ -88,6 +95,62 @@ export type DataAnalyticWrite = DataAnalyticsComponents['schemas']['DataAnalytic
 export type DigitalTransformation = DigitalTransformationComponents['schemas']['DigitalTransformation'];
 export type DigitalTransformationList = DigitalTransformationComponents['schemas']['DigitalTransformationList'];
 export type DigitalTransformationWrite = DigitalTransformationComponents['schemas']['DigitalTransformationWrite'];
+export type DevOpsConsult = DevOpsConsultComponents['schemas']['DevOpsConsult'];
+export type InfrastructureManagement = InfrastructureManagementComponents['schemas']['InfrastructureManagement'];
+export type ApplicationDevelopment = ApplicationDevelopmentComponents['schemas']['ApplicationDevelopment'];
+export type ApplicationModernization = ApplicationModernizationComponents['schemas']['ApplicationModernization'];
+export type MobileApplicationDevelopment =
+  MobileApplicationDevelopmentComponents['schemas']['MobileApplicationDevelopment'];
+export type UserCenteredDesign = UserCenteredDesignComponents['schemas']['UserCenteredDesign'];
+export type OverviewEntry = OverviewComponents['schemas']['Overview'];
+
+export type LandingAccordionItem = { title: string; contents: string; order: number };
+
+export type LandingWritePayload = {
+  banner_title: string;
+  banner_image_key: string | null;
+  introduction_title: string;
+  introduction_first_paragraph: string;
+  introduction_second_paragraph: string;
+  introduction_third_paragraph?: string;
+  accordion?: LandingAccordionItem[];
+  experience_title?: string;
+  experience_accordion?: LandingAccordionItem[];
+  experience_image_key?: string | null;
+  experience_description?: string;
+  offering_image_key?: string | null;
+  offering_title?: string;
+  offering_description?: string;
+  faq_title?: string;
+  faq_description?: string;
+  faq_accordion?: LandingAccordionItem[];
+  seo: ContentSeo;
+  status: 'draft' | 'publish';
+};
+
+export type LandingDetail = LandingWritePayload & {
+  id: string;
+  slug: string;
+  content_available_in?: string[];
+};
+
+export type LandingSummary = {
+  id: string;
+  banner_title: string;
+  banner_image_key: string | null;
+  introduction_title?: string;
+  introduction_first_paragraph?: string;
+  content_available_in?: string;
+  seo?: string;
+  state: 'draft' | 'publish';
+};
+
+export type LandingListPayload = {
+  items: LandingSummary[];
+  page: number;
+  per_page: number;
+  total: number;
+};
 
 export class AdminApiError extends Error {
   status: number;
@@ -814,6 +877,36 @@ export async function deleteDigitalTransformation(id: string): Promise<void> {
   await api<void>(`/admin/digital-transformation/${id}`, { method: 'DELETE' });
 }
 
+export async function listLandings(
+  path: string,
+  q: string,
+  page: number,
+): Promise<LandingListPayload> {
+  return api<LandingListPayload>(
+    `${path}${queryString({ q: q.trim() || undefined, page, per_page: 10 })}`,
+  );
+}
+
+export async function getLanding(path: string, id: string): Promise<LandingDetail> {
+  return api<LandingDetail>(`${path}/${id}`);
+}
+
+export async function createLanding(path: string, payload: LandingWritePayload): Promise<LandingDetail> {
+  return api<LandingDetail>(path, { method: 'POST', body: JSON.stringify(payload) });
+}
+
+export async function updateLanding(
+  path: string,
+  id: string,
+  payload: LandingWritePayload,
+): Promise<LandingDetail> {
+  return api<LandingDetail>(`${path}/${id}`, { method: 'PATCH', body: JSON.stringify(payload) });
+}
+
+export async function deleteLanding(path: string, id: string): Promise<void> {
+  await api<void>(`${path}/${id}`, { method: 'DELETE' });
+}
+
 export function apiErrorMessage(caught: unknown, fallback = 'admin.workspace.request_failed'): string {
   if (caught instanceof AdminApiError) {
     const detail = caught.detail as {
diff --git a/apps/Administration-FE/src/lib/admin-routes.ts b/apps/Administration-FE/src/lib/admin-routes.ts
index 0098586..a328bf2 100644
--- a/apps/Administration-FE/src/lib/admin-routes.ts
+++ b/apps/Administration-FE/src/lib/admin-routes.ts
@@ -1,3 +1,5 @@
+import { LANDING_SECTIONS } from './landing-sections';
+
 export type AdminView =
   | 'site_settings'
   | 'home'
@@ -16,6 +18,20 @@ export type AdminView =
   | 'data_analytics_form'
   | 'digital_transformation'
   | 'digital_transformation_form'
+  | 'devops_consult'
+  | 'devops_consult_form'
+  | 'infrastructure_management'
+  | 'infrastructure_management_form'
+  | 'application_development'
+  | 'application_development_form'
+  | 'application_modernization'
+  | 'application_modernization_form'
+  | 'mobile_application_development'
+  | 'mobile_application_development_form'
+  | 'user_centered_design'
+  | 'user_centered_design_form'
+  | 'overview'
+  | 'overview_form'
   | 'blogs'
   | 'blog_form'
   | 'case_studies'
@@ -58,6 +74,11 @@ const SECTIONS: SectionConfig[] = [
   { segment: 'cloud-services', list: 'cloud_services', form: 'cloud_service_form' },
   { segment: 'data-analytics', list: 'data_analytics', form: 'data_analytics_form' },
   { segment: 'digital-transformation', list: 'digital_transformation', form: 'digital_transformation_form' },
+  ...LANDING_SECTIONS.map((section) => ({
+    segment: section.segment,
+    list: section.listView as AdminView,
+    form: section.formView as AdminView,
+  })),
   { segment: 'blogs', list: 'blogs', form: 'blog_form' },
   { segment: 'case-studies', list: 'case_studies', form: 'case_study_form' },
   { segment: 'industries', list: 'industries', form: 'industry_form' },
@@ -81,6 +102,13 @@ const LIST_HREF: Record<string, string> = {
   cloud_services: '/admin/cloud-services/',
   data_analytics: '/admin/data-analytics/',
   digital_transformation: '/admin/digital-transformation/',
+  devops_consult: '/admin/devops-consult/',
+  infrastructure_management: '/admin/infrastructure-management/',
+  application_development: '/admin/application-development/',
+  application_modernization: '/admin/application-modernization/',
+  mobile_application_development: '/admin/mobile-application-development/',
+  user_centered_design: '/admin/user-centered-design/',
+  overview: '/admin/overview/',
   blogs: '/admin/blogs/',
   case_studies: '/admin/case-studies/',
   industries: '/admin/industries/',
diff --git a/apps/Administration-FE/src/lib/landing-sections.ts b/apps/Administration-FE/src/lib/landing-sections.ts
new file mode 100644
index 0000000..1081bb7
--- /dev/null
+++ b/apps/Administration-FE/src/lib/landing-sections.ts
@@ -0,0 +1,141 @@
+export type LandingListColumn = 'introduction_title' | 'introduction_first' | 'seo' | 'locale';
+
+export type LandingSection = {
+  id: string;
+  resource: string;
+  segment: string;
+  listView: string;
+  formView: string;
+  ns: string;
+  path: string;
+  hasThirdIntro: boolean;
+  hasAccordion: boolean;
+  accordionKey: 'accordion' | 'experience_accordion';
+  hasExperience: boolean;
+  hasOffering: boolean;
+  hasFaq: boolean;
+  listColumns: LandingListColumn[];
+};
+
+export const LANDING_SECTIONS: LandingSection[] = [
+  {
+    id: 'devops_consult',
+    resource: 'devops_consult',
+    segment: 'devops-consult',
+    listView: 'devops_consult',
+    formView: 'devops_consult_form',
+    ns: 'admin.devops_consult',
+    path: '/admin/devops-consult',
+    hasThirdIntro: false,
+    hasAccordion: false,
+    accordionKey: 'experience_accordion',
+    hasExperience: true,
+    hasOffering: false,
+    hasFaq: true,
+    listColumns: ['introduction_title'],
+  },
+  {
+    id: 'infrastructure_management',
+    resource: 'infrastructure_management',
+    segment: 'infrastructure-management',
+    listView: 'infrastructure_management',
+    formView: 'infrastructure_management_form',
+    ns: 'admin.infrastructure_management',
+    path: '/admin/infrastructure-management',
+    hasThirdIntro: false,
+    hasAccordion: false,
+    accordionKey: 'accordion',
+    hasExperience: false,
+    hasOffering: false,
+    hasFaq: true,
+    listColumns: ['introduction_title'],
+  },
+  {
+    id: 'application_development',
+    resource: 'application_development',
+    segment: 'application-development',
+    listView: 'application_development',
+    formView: 'application_development_form',
+    ns: 'admin.application_development',
+    path: '/admin/application-development',
+    hasThirdIntro: false,
+    hasAccordion: true,
+    accordionKey: 'accordion',
+    hasExperience: false,
+    hasOffering: true,
+    hasFaq: true,
+    listColumns: ['introduction_first', 'locale'],
+  },
+  {
+    id: 'application_modernization',
+    resource: 'application_modernization',
+    segment: 'application-modernization',
+    listView: 'application_modernization',
+    formView: 'application_modernization_form',
+    ns: 'admin.application_modernization',
+    path: '/admin/application-modernization',
+    hasThirdIntro: false,
+    hasAccordion: true,
+    accordionKey: 'accordion',
+    hasExperience: false,
+    hasOffering: true,
+    hasFaq: true,
+    listColumns: ['seo'],
+  },
+  {
+    id: 'mobile_application_development',
+    resource: 'mobile_application_development',
+    segment: 'mobile-application-development',
+    listView: 'mobile_application_development',
+    formView: 'mobile_application_development_form',
+    ns: 'admin.mobile_application_development',
+    path: '/admin/mobile-application-development',
+    hasThirdIntro: true,
+    hasAccordion: true,
+    accordionKey: 'accordion',
+    hasExperience: false,
+    hasOffering: true,
+    hasFaq: true,
+    listColumns: ['seo'],
+  },
+  {
+    id: 'user_centered_design',
+    resource: 'user_centered_design',
+    segment: 'user-centered-design',
+    listView: 'user_centered_design',
+    formView: 'user_centered_design_form',
+    ns: 'admin.user_centered_design',
+    path: '/admin/user-centered-design',
+    hasThirdIntro: false,
+    hasAccordion: true,
+    accordionKey: 'accordion',
+    hasExperience: false,
+    hasOffering: true,
+    hasFaq: true,
+    listColumns: ['introduction_title'],
+  },
+  {
+    id: 'overview',
+    resource: 'overview',
+    segment: 'overview',
+    listView: 'overview',
+    formView: 'overview_form',
+    ns: 'admin.overview',
+    path: '/admin/overview',
+    hasThirdIntro: false,
+    hasAccordion: false,
+    accordionKey: 'accordion',
+    hasExperience: false,
+    hasOffering: false,
+    hasFaq: false,
+    listColumns: ['introduction_title'],
+  },
+];
+
+export function landingByView(view: string): LandingSection | undefined {
+  return LANDING_SECTIONS.find((item) => item.listView === view || item.formView === view);
+}
+
+export function isLandingFormView(view: string): boolean {
+  return LANDING_SECTIONS.some((item) => item.formView === view);
+}
diff --git a/apps/Administration-FE/src/pages/admin/application-development.astro b/apps/Administration-FE/src/pages/admin/application-development.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/application-development.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/pages/admin/application-modernization.astro b/apps/Administration-FE/src/pages/admin/application-modernization.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/application-modernization.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/pages/admin/devops-consult.astro b/apps/Administration-FE/src/pages/admin/devops-consult.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/devops-consult.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/pages/admin/infrastructure-management.astro b/apps/Administration-FE/src/pages/admin/infrastructure-management.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/infrastructure-management.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/pages/admin/mobile-application-development.astro b/apps/Administration-FE/src/pages/admin/mobile-application-development.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/mobile-application-development.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/pages/admin/overview.astro b/apps/Administration-FE/src/pages/admin/overview.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/overview.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/pages/admin/user-centered-design.astro b/apps/Administration-FE/src/pages/admin/user-centered-design.astro
new file mode 100644
index 0000000..3761e32
--- /dev/null
+++ b/apps/Administration-FE/src/pages/admin/user-centered-design.astro
@@ -0,0 +1,4 @@
+---
+import AdminApp from '../../components/AdminApp.astro';
+---
+<AdminApp />
diff --git a/apps/Administration-FE/src/styles/admin.css b/apps/Administration-FE/src/styles/admin.css
index eccaaa7..7c47cc2 100644
--- a/apps/Administration-FE/src/styles/admin.css
+++ b/apps/Administration-FE/src/styles/admin.css
@@ -143,7 +143,13 @@ p {
 .admin-sidebar {
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100dvh;
+  max-height: 100dvh;
+  min-height: 0;
+  overflow: hidden;
   padding: var(--space-md);
   background: var(--color-sidebar);
   color: var(--color-sidebar-text);
@@ -152,6 +158,7 @@ p {
 
 .admin-brand {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-sm) var(--space-lg);
@@ -285,6 +292,10 @@ p {
 
 .admin-nav {
   flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scrollbar-color: rgb(255 255 255 / 0.28) transparent;
 }
 
 .admin-nav ul {
@@ -610,6 +621,19 @@ input[type='search'] {
   margin: 0;
 }
 
+.form-page-heading {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+.form-back {
+  min-height: 2.25rem;
+  padding: 0.35rem 0.75rem;
+}
+
 .panel-footer {
   margin-top: var(--space-lg);
   padding-top: var(--space-lg);
@@ -907,6 +931,18 @@ select[multiple] {
   box-shadow: var(--shadow-sm);
 }
 
+.media-field {
+  margin: 0;
+}
+
+.media-field .media-preview-row {
+  margin-bottom: 0;
+}
+
+.media-field > label {
+  margin-bottom: var(--space-sm);
+}
+
 .media-preview-row {
   display: flex;
   flex-wrap: wrap;
@@ -914,6 +950,18 @@ select[multiple] {
   margin: 0 0 var(--space-md);
 }
 
+.media-preview-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-xs);
+}
+
+.media-preview-remove {
+  min-height: 2.25rem;
+  padding: 0.35rem 0.75rem;
+}
+
 .media-preview:not(.media-preview-video) {
   display: block;
   width: auto;
@@ -1063,7 +1111,10 @@ select[multiple] {
     inset: 0 auto 0 0;
     z-index: 40;
     width: min(var(--sidebar-width), 86vw);
-    min-height: 100dvh;
+    height: 100dvh;
+    max-height: 100dvh;
+    min-height: 0;
+    overflow: hidden;
     transform: translateX(-105%);
     transition: transform 0.2s ease;
     box-shadow: var(--shadow-md);
@@ -1073,8 +1124,7 @@ select[multiple] {
     transform: none;
   }
 
-  .admin-frame,
-  .admin-sidebar {
+  .admin-frame {
     min-height: auto;
   }
 
diff --git a/apps/Administration-FE/tests/unit/admin-routes.test.ts b/apps/Administration-FE/tests/unit/admin-routes.test.ts
index a555786..716a7bc 100644
--- a/apps/Administration-FE/tests/unit/admin-routes.test.ts
+++ b/apps/Administration-FE/tests/unit/admin-routes.test.ts
@@ -30,6 +30,21 @@ describe('parseAdminLocation', () => {
     expect(parseAdminLocation('/admin/digital-transformation/').view).toBe(
       'digital_transformation',
     );
+    expect(parseAdminLocation('/admin/devops-consult/').view).toBe('devops_consult');
+    expect(parseAdminLocation('/admin/infrastructure-management/').view).toBe(
+      'infrastructure_management',
+    );
+    expect(parseAdminLocation('/admin/application-development/').view).toBe(
+      'application_development',
+    );
+    expect(parseAdminLocation('/admin/application-modernization/').view).toBe(
+      'application_modernization',
+    );
+    expect(parseAdminLocation('/admin/mobile-application-development/').view).toBe(
+      'mobile_application_development',
+    );
+    expect(parseAdminLocation('/admin/user-centered-design/').view).toBe('user_centered_design');
+    expect(parseAdminLocation('/admin/overview/').view).toBe('overview');
     expect(parseAdminLocation('/admin/home/', '?new=1').view).toBe('home_form');
     expect(parseAdminLocation('/admin/home/', '?id=abc')).toEqual({
       view: 'home_form',
@@ -74,6 +89,15 @@ describe('admin href helpers', () => {
     expect(adminListHref('cloud_services')).toBe('/admin/cloud-services/');
     expect(adminListHref('data_analytics')).toBe('/admin/data-analytics/');
     expect(adminListHref('digital_transformation')).toBe('/admin/digital-transformation/');
+    expect(adminListHref('devops_consult')).toBe('/admin/devops-consult/');
+    expect(adminListHref('infrastructure_management')).toBe('/admin/infrastructure-management/');
+    expect(adminListHref('application_development')).toBe('/admin/application-development/');
+    expect(adminListHref('application_modernization')).toBe('/admin/application-modernization/');
+    expect(adminListHref('mobile_application_development')).toBe(
+      '/admin/mobile-application-development/',
+    );
+    expect(adminListHref('user_centered_design')).toBe('/admin/user-centered-design/');
+    expect(adminListHref('overview')).toBe('/admin/overview/');
     expect(adminFormHref('blogs', null)).toBe('/admin/blogs/?new=1');
     expect(adminFormHref('blogs', 'post-1')).toBe('/admin/blogs/?id=post-1');
   });
diff --git a/apps/Backend/alembic/versions/024_service_landing_pages.py b/apps/Backend/alembic/versions/024_service_landing_pages.py
new file mode 100644
index 0000000..17e8d55
--- /dev/null
+++ b/apps/Backend/alembic/versions/024_service_landing_pages.py
@@ -0,0 +1,114 @@
+"""Service landing CMS tables.
+
+Revision ID: 024
+Revises: 023
+Create Date: 2026-08-28
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+from sqlalchemy.dialects import postgresql
+
+revision: str = "024"
+down_revision: Union[str, None] = "023"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def _common(content_status):
+    return [
+        sa.Column("id", postgresql.UUID(as_uuid=True), primary_key=True),
+        sa.Column("slug", sa.String(128), nullable=False),
+        sa.Column("banner_title", sa.String(200), nullable=False),
+        sa.Column("banner_image_key", sa.String(255), nullable=True),
+        sa.Column("introduction_title", sa.String(200), nullable=False),
+        sa.Column("introduction_first_paragraph", sa.Text(), nullable=False),
+        sa.Column("introduction_second_paragraph", sa.Text(), nullable=False),
+        sa.Column("seo", sa.JSON(), nullable=False),
+        sa.Column("status", content_status, nullable=False),
+        sa.Column("created_at", sa.DateTime(timezone=True), nullable=False),
+        sa.Column("updated_at", sa.DateTime(timezone=True), nullable=False),
+    ]
+
+
+def upgrade() -> None:
+    content_status = postgresql.ENUM(
+        "draft", "publish", name="content_status", create_type=False
+    )
+    faq_cols = [
+        sa.Column("faq_title", sa.String(200), nullable=False),
+        sa.Column("faq_description", sa.Text(), nullable=False),
+        sa.Column("faq_accordion", sa.JSON(), nullable=False),
+    ]
+    offering_cols = [
+        sa.Column("accordion", sa.JSON(), nullable=False),
+        sa.Column("offering_image_key", sa.String(255), nullable=True),
+        sa.Column("offering_title", sa.String(200), nullable=False),
+        sa.Column("offering_description", sa.Text(), nullable=False),
+    ]
+    op.create_table(
+        "devops_consults",
+        *_common(content_status),
+        sa.Column("experience_title", sa.String(200), nullable=False),
+        sa.Column("experience_accordion", sa.JSON(), nullable=False),
+        sa.Column("experience_image_key", sa.String(255), nullable=True),
+        sa.Column("experience_description", sa.Text(), nullable=False),
+        *faq_cols,
+        sa.UniqueConstraint("slug", name="uq_devops_consults_slug"),
+    )
+    op.create_table(
+        "infrastructure_managements",
+        *_common(content_status),
+        *faq_cols,
+        sa.UniqueConstraint("slug", name="uq_infrastructure_managements_slug"),
+    )
+    op.create_table(
+        "application_developments",
+        *_common(content_status),
+        *offering_cols,
+        *faq_cols,
+        sa.Column("content_available_in", sa.JSON(), nullable=False),
+        sa.UniqueConstraint("slug", name="uq_application_developments_slug"),
+    )
+    op.create_table(
+        "application_modernizations",
+        *_common(content_status),
+        *offering_cols,
+        *faq_cols,
+        sa.UniqueConstraint("slug", name="uq_application_modernizations_slug"),
+    )
+    op.create_table(
+        "mobile_application_developments",
+        *_common(content_status),
+        sa.Column("introduction_third_paragraph", sa.Text(), nullable=False),
+        *offering_cols,
+        *faq_cols,
+        sa.UniqueConstraint("slug", name="uq_mobile_application_developments_slug"),
+    )
+    op.create_table(
+        "user_centered_designs",
+        *_common(content_status),
+        *offering_cols,
+        *faq_cols,
+        sa.UniqueConstraint("slug", name="uq_user_centered_designs_slug"),
+    )
+    op.create_table(
+        "overviews",
+        *_common(content_status),
+        sa.UniqueConstraint("slug", name="uq_overviews_slug"),
+    )
+
+
+def downgrade() -> None:
+    for table in [
+        "overviews",
+        "user_centered_designs",
+        "mobile_application_developments",
+        "application_modernizations",
+        "application_developments",
+        "infrastructure_managements",
+        "devops_consults",
+    ]:
+        op.drop_table(table)
diff --git a/apps/Backend/src/flycatch_api/api/landing_pages.py b/apps/Backend/src/flycatch_api/api/landing_pages.py
new file mode 100644
index 0000000..97d9afa
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/api/landing_pages.py
@@ -0,0 +1,132 @@
+from flycatch_api.api.landing_routers import admin_landing_router, public_landing_router
+from flycatch_api.schemas import admin_landings as admin
+from flycatch_api.schemas.public_landings import (
+    PublicApplicationDevelopment,
+    PublicApplicationModernization,
+    PublicDevOpsConsult,
+    PublicInfrastructureManagement,
+    PublicLandingList,
+    PublicMobileApplicationDevelopment,
+    PublicOverview,
+    PublicUserCenteredDesign,
+)
+from flycatch_api.services import landing_sections as sections
+
+admin_devops_consult = admin_landing_router(
+    prefix="/admin/devops-consult",
+    tags="admin-devops-consult",
+    resource="devops_consult",
+    service=sections.DEVOPS,
+    list_model=admin.DevOpsConsultList,
+    detail_model=admin.DevOpsConsult,
+    write_model=admin.DevOpsConsultWrite,
+)
+public_devops_consult = public_landing_router(
+    prefix="/public/devops-consult",
+    tags="public-devops-consult",
+    service=sections.DEVOPS,
+    list_model=PublicLandingList,
+    detail_model=PublicDevOpsConsult,
+)
+
+admin_infrastructure_management = admin_landing_router(
+    prefix="/admin/infrastructure-management",
+    tags="admin-infrastructure-management",
+    resource="infrastructure_management",
+    service=sections.INFRASTRUCTURE,
+    list_model=admin.InfrastructureManagementList,
+    detail_model=admin.InfrastructureManagement,
+    write_model=admin.InfrastructureManagementWrite,
+)
+public_infrastructure_management = public_landing_router(
+    prefix="/public/infrastructure-management",
+    tags="public-infrastructure-management",
+    service=sections.INFRASTRUCTURE,
+    list_model=PublicLandingList,
+    detail_model=PublicInfrastructureManagement,
+)
+
+admin_application_development = admin_landing_router(
+    prefix="/admin/application-development",
+    tags="admin-application-development",
+    resource="application_development",
+    service=sections.APPLICATION_DEVELOPMENT,
+    list_model=admin.ApplicationDevelopmentList,
+    detail_model=admin.ApplicationDevelopment,
+    write_model=admin.ApplicationDevelopmentWrite,
+)
+public_application_development = public_landing_router(
+    prefix="/public/application-development",
+    tags="public-application-development",
+    service=sections.APPLICATION_DEVELOPMENT,
+    list_model=PublicLandingList,
+    detail_model=PublicApplicationDevelopment,
+)
+
+admin_application_modernization = admin_landing_router(
+    prefix="/admin/application-modernization",
+    tags="admin-application-modernization",
+    resource="application_modernization",
+    service=sections.APPLICATION_MODERNIZATION,
+    list_model=admin.ApplicationModernizationList,
+    detail_model=admin.ApplicationModernization,
+    write_model=admin.ApplicationModernizationWrite,
+)
+public_application_modernization = public_landing_router(
+    prefix="/public/application-modernization",
+    tags="public-application-modernization",
+    service=sections.APPLICATION_MODERNIZATION,
+    list_model=PublicLandingList,
+    detail_model=PublicApplicationModernization,
+)
+
+admin_mobile_application_development = admin_landing_router(
+    prefix="/admin/mobile-application-development",
+    tags="admin-mobile-application-development",
+    resource="mobile_application_development",
+    service=sections.MOBILE_APPLICATION,
+    list_model=admin.MobileApplicationDevelopmentList,
+    detail_model=admin.MobileApplicationDevelopment,
+    write_model=admin.MobileApplicationDevelopmentWrite,
+)
+public_mobile_application_development = public_landing_router(
+    prefix="/public/mobile-application-development",
+    tags="public-mobile-application-development",
+    service=sections.MOBILE_APPLICATION,
+    list_model=PublicLandingList,
+    detail_model=PublicMobileApplicationDevelopment,
+)
+
+admin_user_centered_design = admin_landing_router(
+    prefix="/admin/user-centered-design",
+    tags="admin-user-centered-design",
+    resource="user_centered_design",
+    service=sections.USER_CENTERED_DESIGN,
+    list_model=admin.UserCenteredDesignList,
+    detail_model=admin.UserCenteredDesign,
+    write_model=admin.UserCenteredDesignWrite,
+)
+public_user_centered_design = public_landing_router(
+    prefix="/public/user-centered-design",
+    tags="public-user-centered-design",
+    service=sections.USER_CENTERED_DESIGN,
+    list_model=PublicLandingList,
+    detail_model=PublicUserCenteredDesign,
+)
+
+admin_overview = admin_landing_router(
+    prefix="/admin/overview",
+    tags="admin-overview",
+    resource="overview",
+    service=sections.OVERVIEW,
+    list_model=admin.OverviewList,
+    detail_model=admin.Overview,
+    write_model=admin.OverviewWrite,
+)
+public_overview = public_landing_router(
+    prefix="/public/overview",
+    tags="public-overview",
+    service=sections.OVERVIEW,
+    list_model=PublicLandingList,
+    detail_model=PublicOverview,
+)
diff --git a/apps/Backend/src/flycatch_api/api/landing_routers.py b/apps/Backend/src/flycatch_api/api/landing_routers.py
new file mode 100644
index 0000000..52ed721
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/api/landing_routers.py
@@ -0,0 +1,124 @@
+from uuid import UUID
+
+from fastapi import APIRouter, Depends, HTTPException, Query, Response, status
+from sqlalchemy.orm import Session
+
+from flycatch_api.db import get_db
+from flycatch_api.security.dependencies import (
+    CurrentSession,
+    assert_resource_action,
+    assert_write_permissions,
+)
+from flycatch_api.services.author_service import CatalogError
+from flycatch_api.services.industry_service import PER_PAGE
+from flycatch_api.services.landing_catalog import LandingCatalogService
+
+
+def _raise(error: CatalogError) -> None:
+    raise HTTPException(status_code=error.status_code, detail=error.payload)
+
+
+def admin_landing_router(
+    *,
+    prefix: str,
+    tags: str,
+    resource: str,
+    service: LandingCatalogService,
+    list_model,
+    detail_model,
+    write_model,
+) -> APIRouter:
+    router = APIRouter(prefix=prefix, tags=[tags])
+
+    @router.get("", response_model=list_model, operation_id=f"list_{resource}")
+    def list_entries(
+        session: CurrentSession,
+        db: Session = Depends(get_db),
+        q: str | None = Query(default=None),
+        page: int = Query(default=1, ge=1),
+        per_page: int = Query(default=PER_PAGE, ge=1, le=PER_PAGE),
+    ):
+        assert_resource_action(db, session.administrator_id, resource, "read")
+        return service.list_entries(db, q, page, per_page)
+
+    @router.post(
+        "",
+        response_model=detail_model,
+        status_code=status.HTTP_201_CREATED,
+        operation_id=f"create_{resource}",
+    )
+    def create_entry(payload: write_model, session: CurrentSession, db: Session = Depends(get_db)):
+        assert_write_permissions(
+            db, session.administrator_id, resource, action="create", status_value=payload.status
+        )
+        try:
+            return service.create(db, payload)
+        except CatalogError as error:
+            _raise(error)
+
+    @router.get("/{entry_id}", response_model=detail_model, operation_id=f"get_{resource}")
+    def get_entry(entry_id: UUID, session: CurrentSession, db: Session = Depends(get_db)):
+        assert_resource_action(db, session.administrator_id, resource, "read")
+        try:
+            return service.get(db, entry_id)
+        except CatalogError as error:
+            _raise(error)
+
+    @router.patch("/{entry_id}", response_model=detail_model, operation_id=f"update_{resource}")
+    def update_entry(
+        entry_id: UUID,
+        payload: write_model,
+        session: CurrentSession,
+        db: Session = Depends(get_db),
+    ):
+        assert_write_permissions(
+            db, session.administrator_id, resource, action="update", status_value=payload.status
+        )
+        try:
+            return service.update(db, entry_id, payload)
+        except CatalogError as error:
+            _raise(error)
+
+    @router.delete(
+        "/{entry_id}",
+        status_code=status.HTTP_204_NO_CONTENT,
+        operation_id=f"delete_{resource}",
+    )
+    def delete_entry(entry_id: UUID, session: CurrentSession, db: Session = Depends(get_db)):
+        assert_resource_action(db, session.administrator_id, resource, "delete")
+        try:
+            service.delete(db, entry_id)
+        except CatalogError as error:
+            _raise(error)
+        return Response(status_code=status.HTTP_204_NO_CONTENT)
+
+    return router
+
+
+def public_landing_router(
+    *,
+    prefix: str,
+    tags: str,
+    service: LandingCatalogService,
+    list_model,
+    detail_model,
+) -> APIRouter:
+    router = APIRouter(prefix=prefix, tags=[tags])
+
+    @router.get("", response_model=list_model, operation_id=f"list_public_{tags}")
+    def list_published(
+        db: Session = Depends(get_db),
+        q: str | None = Query(default=None),
+        page: int = Query(default=1, ge=1),
+        per_page: int = Query(default=PER_PAGE, ge=1, le=PER_PAGE),
+    ):
+        return service.list_published(db, q, page, per_page)
+
+    @router.get("/{slug}", response_model=detail_model, operation_id=f"get_public_{tags}")
+    def get_published(slug: str, db: Session = Depends(get_db)):
+        try:
+            return service.get_published_by_slug(db, slug)
+        except CatalogError as error:
+            raise HTTPException(status_code=error.status_code, detail=error.payload) from error
+
+    return router
diff --git a/apps/Backend/src/flycatch_api/main.py b/apps/Backend/src/flycatch_api/main.py
index 3baf63a..d17353c 100644
--- a/apps/Backend/src/flycatch_api/main.py
+++ b/apps/Backend/src/flycatch_api/main.py
@@ -25,6 +25,7 @@
     admin_solution_products,
     admin_solutions,
     admin_technologies,
+    landing_pages,
     public_ai_services,
     public_authors,
     public_blogs,
@@ -105,6 +106,13 @@ async def security_headers(request: Request, call_next):
 app.include_router(admin_cloud_services.router, prefix="/api/v1")
 app.include_router(admin_data_analytics.router, prefix="/api/v1")
 app.include_router(admin_digital_transformation.router, prefix="/api/v1")
+app.include_router(landing_pages.admin_devops_consult, prefix="/api/v1")
+app.include_router(landing_pages.admin_infrastructure_management, prefix="/api/v1")
+app.include_router(landing_pages.admin_application_development, prefix="/api/v1")
+app.include_router(landing_pages.admin_application_modernization, prefix="/api/v1")
+app.include_router(landing_pages.admin_mobile_application_development, prefix="/api/v1")
+app.include_router(landing_pages.admin_user_centered_design, prefix="/api/v1")
+app.include_router(landing_pages.admin_overview, prefix="/api/v1")
 app.include_router(admin_media.router, prefix="/api/v1")
 app.include_router(publish.router, prefix="/api/v1")
 app.include_router(public_blogs.router, prefix="/api/v1")
@@ -122,6 +130,13 @@ async def security_headers(request: Request, call_next):
 app.include_router(public_cloud_services.router, prefix="/api/v1")
 app.include_router(public_data_analytics.router, prefix="/api/v1")
 app.include_router(public_digital_transformation.router, prefix="/api/v1")
+app.include_router(landing_pages.public_devops_consult, prefix="/api/v1")
+app.include_router(landing_pages.public_infrastructure_management, prefix="/api/v1")
+app.include_router(landing_pages.public_application_development, prefix="/api/v1")
+app.include_router(landing_pages.public_application_modernization, prefix="/api/v1")
+app.include_router(landing_pages.public_mobile_application_development, prefix="/api/v1")
+app.include_router(landing_pages.public_user_centered_design, prefix="/api/v1")
+app.include_router(landing_pages.public_overview, prefix="/api/v1")
 app.include_router(public_media.router, prefix="/api/v1")
 app.include_router(stubs.router, prefix="/api/v1")
 
diff --git a/apps/Backend/src/flycatch_api/models/__init__.py b/apps/Backend/src/flycatch_api/models/__init__.py
index 173291e..61667fe 100644
--- a/apps/Backend/src/flycatch_api/models/__init__.py
+++ b/apps/Backend/src/flycatch_api/models/__init__.py
@@ -1,6 +1,7 @@
 from flycatch_api.models.admin_session import AdminSession
 from flycatch_api.models.administrator import Administrator
 from flycatch_api.models.administrator_role import AdministratorRole
+from flycatch_api.models.ai_service import AiService, AiServiceSolution
 from flycatch_api.models.author import Author, BlogAuthor
 from flycatch_api.models.blog import Blog, BlogStatus
 from flycatch_api.models.case_study import CaseStudy, ContentStatus
@@ -8,15 +9,23 @@
 from flycatch_api.models.category import BlogCategory, Category
 from flycatch_api.models.client_logo import ClientLogo
 from flycatch_api.models.client_testimonial import ClientTestimonial
+from flycatch_api.models.cloud_service import CloudService
+from flycatch_api.models.data_analytics import DataAnalytics
+from flycatch_api.models.digital_transformation import DigitalTransformation
 from flycatch_api.models.home import Home, HomeCaseStudy
 from flycatch_api.models.industry import CaseStudyIndustry, Industry
+from flycatch_api.models.landing_pages import (
+    ApplicationDevelopment,
+    ApplicationModernization,
+    DevOpsConsult,
+    InfrastructureManagement,
+    MobileApplicationDevelopment,
+    Overview,
+    UserCenteredDesign,
+)
 from flycatch_api.models.managed_record import ManagedRecord, RecordType
 from flycatch_api.models.role import Role
 from flycatch_api.models.role_permission import PermissionName, RolePermission
-from flycatch_api.models.ai_service import AiService, AiServiceSolution
-from flycatch_api.models.cloud_service import CloudService
-from flycatch_api.models.data_analytics import DataAnalytics
-from flycatch_api.models.digital_transformation import DigitalTransformation
 from flycatch_api.models.solution import Solution
 from flycatch_api.models.solution_detail import SolutionDetail
 from flycatch_api.models.solution_product import SolutionProduct
@@ -44,6 +53,13 @@
     "CloudService",
     "ContentStatus",
     "DataAnalytics",
+    "ApplicationDevelopment",
+    "ApplicationModernization",
+    "DevOpsConsult",
+    "InfrastructureManagement",
+    "MobileApplicationDevelopment",
+    "Overview",
+    "UserCenteredDesign",
     "DigitalTransformation",
     "Home",
     "HomeCaseStudy",
diff --git a/apps/Backend/src/flycatch_api/models/landing_pages.py b/apps/Backend/src/flycatch_api/models/landing_pages.py
new file mode 100644
index 0000000..ace4454
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/models/landing_pages.py
@@ -0,0 +1,106 @@
+from __future__ import annotations
+
+import uuid
+from datetime import datetime
+
+from sqlalchemy import DateTime, Enum, String, Text
+from sqlalchemy.dialects.postgresql import UUID
+from sqlalchemy.orm import Mapped, mapped_column
+from sqlalchemy.types import JSON
+
+from flycatch_api.db import Base
+from flycatch_api.models.case_study import ContentStatus
+
+
+class LandingBase(Base):
+    __abstract__ = True
+
+    id: Mapped[uuid.UUID] = mapped_column(UUID(as_uuid=True), primary_key=True, default=uuid.uuid4)
+    slug: Mapped[str] = mapped_column(String(128), unique=True, nullable=False)
+    banner_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    banner_image_key: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    introduction_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    introduction_first_paragraph: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    introduction_second_paragraph: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    seo: Mapped[dict] = mapped_column(JSON, nullable=False, default=dict)
+    status: Mapped[ContentStatus] = mapped_column(
+        Enum(ContentStatus, name="content_status", create_type=False),
+        nullable=False,
+        default=ContentStatus.draft,
+    )
+    created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), nullable=False)
+    updated_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), nullable=False)
+
+
+class DevOpsConsult(LandingBase):
+    __tablename__ = "devops_consults"
+
+    experience_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    experience_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+    experience_image_key: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    experience_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    faq_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+
+
+class InfrastructureManagement(LandingBase):
+    __tablename__ = "infrastructure_managements"
+
+    faq_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    faq_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+
+
+class ApplicationDevelopment(LandingBase):
+    __tablename__ = "application_developments"
+
+    accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+    offering_image_key: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    offering_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    offering_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    faq_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+    content_available_in: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+
+
+class ApplicationModernization(LandingBase):
+    __tablename__ = "application_modernizations"
+
+    accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+    offering_image_key: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    offering_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    offering_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    faq_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+
+
+class MobileApplicationDevelopment(LandingBase):
+    __tablename__ = "mobile_application_developments"
+
+    introduction_third_paragraph: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+    offering_image_key: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    offering_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    offering_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    faq_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+
+
+class UserCenteredDesign(LandingBase):
+    __tablename__ = "user_centered_designs"
+
+    accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+    offering_image_key: Mapped[str | None] = mapped_column(String(255), nullable=True)
+    offering_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    offering_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_title: Mapped[str] = mapped_column(String(200), nullable=False, default="")
+    faq_description: Mapped[str] = mapped_column(Text, nullable=False, default="")
+    faq_accordion: Mapped[list] = mapped_column(JSON, nullable=False, default=list)
+
+
+class Overview(LandingBase):
+    __tablename__ = "overviews"
diff --git a/apps/Backend/src/flycatch_api/schemas/admin_landings.py b/apps/Backend/src/flycatch_api/schemas/admin_landings.py
new file mode 100644
index 0000000..ec292fd
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/schemas/admin_landings.py
@@ -0,0 +1,253 @@
+from datetime import datetime
+from uuid import UUID
+
+from pydantic import BaseModel, ConfigDict, Field
+
+from flycatch_api.models.case_study import ContentStatus
+from flycatch_api.schemas.admin_ai_services import AccordionItem
+from flycatch_api.schemas.admin_homes import ContentSeo
+
+
+class LandingWriteBase(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    banner_title: str = Field(default="", max_length=200)
+    banner_image_key: str | None = None
+    introduction_title: str = Field(default="", max_length=200)
+    introduction_first_paragraph: str = ""
+    introduction_second_paragraph: str = ""
+    seo: ContentSeo = Field(default_factory=ContentSeo)
+    status: ContentStatus = ContentStatus.draft
+
+
+class DevOpsConsultWrite(LandingWriteBase):
+    experience_title: str = Field(default="", max_length=200)
+    experience_accordion: list[AccordionItem] = Field(default_factory=list)
+    experience_image_key: str | None = None
+    experience_description: str = ""
+    faq_title: str = Field(default="", max_length=200)
+    faq_description: str = ""
+    faq_accordion: list[AccordionItem] = Field(default_factory=list)
+
+
+class InfrastructureManagementWrite(LandingWriteBase):
+    faq_title: str = Field(default="", max_length=200)
+    faq_description: str = ""
+    faq_accordion: list[AccordionItem] = Field(default_factory=list)
+
+
+class ApplicationDevelopmentWrite(LandingWriteBase):
+    accordion: list[AccordionItem] = Field(default_factory=list)
+    offering_image_key: str | None = None
+    offering_title: str = Field(default="", max_length=200)
+    offering_description: str = ""
+    faq_title: str = Field(default="", max_length=200)
+    faq_description: str = ""
+    faq_accordion: list[AccordionItem] = Field(default_factory=list)
+
+
+class ApplicationModernizationWrite(LandingWriteBase):
+    accordion: list[AccordionItem] = Field(default_factory=list)
+    offering_image_key: str | None = None
+    offering_title: str = Field(default="", max_length=200)
+    offering_description: str = ""
+    faq_title: str = Field(default="", max_length=200)
+    faq_description: str = ""
+    faq_accordion: list[AccordionItem] = Field(default_factory=list)
+
+
+class MobileApplicationDevelopmentWrite(LandingWriteBase):
+    introduction_third_paragraph: str = ""
+    accordion: list[AccordionItem] = Field(default_factory=list)
+    offering_image_key: str | None = None
+    offering_title: str = Field(default="", max_length=200)
+    offering_description: str = ""
+    faq_title: str = Field(default="", max_length=200)
+    faq_description: str = ""
+    faq_accordion: list[AccordionItem] = Field(default_factory=list)
+
+
+class UserCenteredDesignWrite(LandingWriteBase):
+    accordion: list[AccordionItem] = Field(default_factory=list)
+    offering_image_key: str | None = None
+    offering_title: str = Field(default="", max_length=200)
+    offering_description: str = ""
+    faq_title: str = Field(default="", max_length=200)
+    faq_description: str = ""
+    faq_accordion: list[AccordionItem] = Field(default_factory=list)
+
+
+class OverviewWrite(LandingWriteBase):
+    pass
+
+
+class LandingCore(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    id: UUID
+    slug: str
+    banner_title: str
+    banner_image_key: str | None
+    introduction_title: str
+    introduction_first_paragraph: str
+    introduction_second_paragraph: str
+    seo: ContentSeo
+    status: ContentStatus
+    created_at: datetime
+
+
+class DevOpsConsult(LandingCore):
+    experience_title: str
+    experience_accordion: list[AccordionItem]
+    experience_image_key: str | None
+    experience_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class InfrastructureManagement(LandingCore):
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class ApplicationDevelopment(LandingCore):
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+    content_available_in: list[str]
+
+
+class ApplicationModernization(LandingCore):
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class MobileApplicationDevelopment(LandingCore):
+    introduction_third_paragraph: str
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class UserCenteredDesign(LandingCore):
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class Overview(LandingCore):
+    pass
+
+
+class IntroTitleSummary(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    id: UUID
+    banner_title: str
+    banner_image_key: str | None
+    introduction_title: str
+    state: ContentStatus
+
+
+class IntroFirstSummary(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    id: UUID
+    banner_title: str
+    banner_image_key: str | None
+    introduction_first_paragraph: str
+    content_available_in: str
+    state: ContentStatus
+
+
+class SeoSummary(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    id: UUID
+    banner_title: str
+    banner_image_key: str | None
+    seo: str
+    state: ContentStatus
+
+
+class DevOpsConsultSummary(IntroTitleSummary):
+    pass
+
+
+class InfrastructureManagementSummary(IntroTitleSummary):
+    pass
+
+
+class ApplicationDevelopmentSummary(IntroFirstSummary):
+    pass
+
+
+class ApplicationModernizationSummary(SeoSummary):
+    pass
+
+
+class MobileApplicationDevelopmentSummary(SeoSummary):
+    pass
+
+
+class UserCenteredDesignSummary(IntroTitleSummary):
+    pass
+
+
+class OverviewSummary(IntroTitleSummary):
+    pass
+
+
+class LandingListBase(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    page: int = Field(ge=1)
+    per_page: int = Field(ge=1)
+    total: int = Field(ge=0)
+
+
+class DevOpsConsultList(LandingListBase):
+    items: list[DevOpsConsultSummary]
+
+
+class InfrastructureManagementList(LandingListBase):
+    items: list[InfrastructureManagementSummary]
+
+
+class ApplicationDevelopmentList(LandingListBase):
+    items: list[ApplicationDevelopmentSummary]
+
+
+class ApplicationModernizationList(LandingListBase):
+    items: list[ApplicationModernizationSummary]
+
+
+class MobileApplicationDevelopmentList(LandingListBase):
+    items: list[MobileApplicationDevelopmentSummary]
+
+
+class UserCenteredDesignList(LandingListBase):
+    items: list[UserCenteredDesignSummary]
+
+
+class OverviewList(LandingListBase):
+    items: list[OverviewSummary]
diff --git a/apps/Backend/src/flycatch_api/schemas/public_landings.py b/apps/Backend/src/flycatch_api/schemas/public_landings.py
new file mode 100644
index 0000000..a6d0c70
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/schemas/public_landings.py
@@ -0,0 +1,95 @@
+from pydantic import BaseModel, ConfigDict, Field
+
+from flycatch_api.schemas.admin_ai_services import AccordionItem
+from flycatch_api.schemas.admin_homes import ContentSeo
+
+
+class PublicLandingSummary(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    slug: str
+    banner_title: str
+    banner_image_key: str | None
+
+
+class PublicLandingList(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    items: list[PublicLandingSummary]
+    page: int = Field(ge=1)
+    per_page: int = Field(ge=1)
+    total: int = Field(ge=0)
+
+
+class PublicLandingCore(BaseModel):
+    model_config = ConfigDict(extra="forbid")
+
+    slug: str
+    banner_title: str
+    banner_image_key: str | None
+    introduction_title: str
+    introduction_first_paragraph: str
+    introduction_second_paragraph: str
+    seo: ContentSeo
+
+
+class PublicDevOpsConsult(PublicLandingCore):
+    experience_title: str
+    experience_accordion: list[AccordionItem]
+    experience_image_key: str | None
+    experience_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class PublicInfrastructureManagement(PublicLandingCore):
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class PublicApplicationDevelopment(PublicLandingCore):
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+    content_available_in: list[str]
+
+
+class PublicApplicationModernization(PublicLandingCore):
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class PublicMobileApplicationDevelopment(PublicLandingCore):
+    introduction_third_paragraph: str
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class PublicUserCenteredDesign(PublicLandingCore):
+    accordion: list[AccordionItem]
+    offering_image_key: str | None
+    offering_title: str
+    offering_description: str
+    faq_title: str
+    faq_description: str
+    faq_accordion: list[AccordionItem]
+
+
+class PublicOverview(PublicLandingCore):
+    pass
diff --git a/apps/Backend/src/flycatch_api/services/landing_catalog.py b/apps/Backend/src/flycatch_api/services/landing_catalog.py
new file mode 100644
index 0000000..be1f31b
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/services/landing_catalog.py
@@ -0,0 +1,291 @@
+from __future__ import annotations
+
+from dataclasses import dataclass
+from datetime import UTC, datetime
+from typing import Any
+from uuid import UUID
+
+from sqlalchemy import func, or_
+from sqlalchemy.orm import Session
+
+from flycatch_api.models.case_study import ContentStatus
+from flycatch_api.schemas.admin_ai_services import AccordionItem
+from flycatch_api.schemas.admin_auth import FieldErrorDetail, FieldErrors
+from flycatch_api.schemas.admin_case_studies import EntityNotFound
+from flycatch_api.schemas.admin_homes import ContentSeo
+from flycatch_api.schemas.public_landings import PublicLandingList, PublicLandingSummary
+from flycatch_api.services.author_service import CatalogError
+from flycatch_api.services.content_blocks import accordion_dicts, optional_key, seo_dict
+from flycatch_api.services.home_service import DEFAULT_LOCALE, LOCALE_LABEL
+from flycatch_api.services.industry_service import PER_PAGE, coerce_status
+from flycatch_api.services.text import is_valid_slug, sanitize_html, slugify
+
+
+@dataclass(frozen=True)
+class LandingFeatures:
+    has_third_intro: bool = False
+    has_accordion: bool = False
+    has_experience: bool = False
+    has_offering: bool = False
+    has_faq: bool = False
+    has_locale: bool = False
+    list_kind: str = "intro_title"  # intro_title | intro_first | seo
+
+
+def _items(value: list | None) -> list[AccordionItem]:
+    return [AccordionItem.model_validate(item) for item in (value or [])]
+
+
+def seo_snippet(seo: dict | None) -> str:
+    data = seo or {}
+    titles = (data.get("title") or "", data.get("description") or "")
+    return " ".join(part for part in titles if part).strip()
+
+
+class LandingCatalogService:
+    def __init__(
+        self,
+        *,
+        model: type[Any],
+        detail_schema: type[Any],
+        write_schema: type[Any],
+        summary_schema: type[Any],
+        list_schema: type[Any],
+        public_schema: type[Any],
+        resource: str,
+        features: LandingFeatures,
+    ) -> None:
+        self.model = model
+        self.detail_schema = detail_schema
+        self.write_schema = write_schema
+        self.summary_schema = summary_schema
+        self.list_schema = list_schema
+        self.public_schema = public_schema
+        self.resource = resource
+        self.features = features
+
+    def list_entries(self, db: Session, q: str | None, page: int, per_page: int):
+        page, per_page, rows, total = self._page(db, q, page, per_page, published_only=False)
+        return self.list_schema(
+            items=[self._summary(row) for row in rows],
+            page=page,
+            per_page=per_page,
+            total=total,
+        )
+
+    def list_published(
+        self, db: Session, q: str | None, page: int, per_page: int
+    ) -> PublicLandingList:
+        page, per_page, rows, total = self._page(db, q, page, per_page, published_only=True)
+        return PublicLandingList(
+            items=[
+                PublicLandingSummary(
+                    slug=row.slug,
+                    banner_title=row.banner_title,
+                    banner_image_key=row.banner_image_key,
+                )
+                for row in rows
+            ],
+            page=page,
+            per_page=per_page,
+            total=total,
+        )
+
+    def get_published_by_slug(self, db: Session, slug: str):
+        row = (
+            db.query(self.model)
+            .filter(
+                func.lower(self.model.slug) == slug.strip().lower(),
+                self.model.status == ContentStatus.publish,
+            )
+            .first()
+        )
+        if row is None:
+            raise CatalogError(
+                404,
+                EntityNotFound(message_key=f"public.{self.resource}.not_found").model_dump(),
+            )
+        return self._public(row)
+
+    def get(self, db: Session, entry_id: UUID):
+        return self._detail(self._row(db, entry_id))
+
+    def create(self, db: Session, payload):
+        now = datetime.now(UTC)
+        row = self.model(created_at=now, updated_at=now)
+        self._apply(db, row, payload, None)
+        db.add(row)
+        db.commit()
+        return self._detail(row)
+
+    def update(self, db: Session, entry_id: UUID, payload):
+        row = self._row(db, entry_id)
+        self._apply(db, row, payload, row.id)
+        row.updated_at = datetime.now(UTC)
+        db.commit()
+        return self._detail(row)
+
+    def delete(self, db: Session, entry_id: UUID) -> None:
+        row = self._row(db, entry_id)
+        db.delete(row)
+        db.commit()
+
+    def _unique_slug(self, db: Session, title: str, exclude_id: UUID | None) -> str:
+        base = slugify(title) or "entry"
+        if not is_valid_slug(base):
+            raise CatalogError(
+                422,
+                FieldErrors(
+                    fields={
+                        "banner_title": FieldErrorDetail(
+                            message_key=f"admin.{self.resource}.slug.invalid"
+                        )
+                    }
+                ).model_dump(),
+            )
+        slug = base
+        suffix = 2
+        while True:
+            existing = (
+                db.query(self.model)
+                .filter(func.lower(self.model.slug) == slug.lower())
+                .first()
+            )
+            if existing is None or existing.id == exclude_id:
+                return slug
+            slug = f"{base}-{suffix}"
+            suffix += 1
+
+    def _page(
+        self,
+        db: Session,
+        q: str | None,
+        page: int,
+        per_page: int,
+        *,
+        published_only: bool,
+    ):
+        page = max(page, 1)
+        per_page = min(max(per_page, 1), PER_PAGE)
+        query = db.query(self.model)
+        if published_only:
+            query = query.filter(self.model.status == ContentStatus.publish)
+        if q and q.strip():
+            term = f"%{q.strip()}%"
+            query = query.filter(
+                or_(
+                    self.model.banner_title.ilike(term),
+                    self.model.introduction_title.ilike(term),
+                    self.model.slug.ilike(term),
+                )
+            )
+        total = query.count()
+        rows = (
+            query.order_by(self.model.created_at.desc())
+            .offset((page - 1) * per_page)
+            .limit(per_page)
+            .all()
+        )
+        return page, per_page, rows, total
+
+    def _row(self, db: Session, entry_id: UUID):
+        row = db.get(self.model, entry_id)
+        if row is None:
+            raise CatalogError(
+                404,
+                EntityNotFound(message_key=f"admin.{self.resource}.not_found").model_dump(),
+            )
+        return row
+
+    def _core_dict(self, row) -> dict[str, Any]:
+        payload: dict[str, Any] = {
+            "id": row.id,
+            "slug": row.slug,
+            "banner_title": row.banner_title,
+            "banner_image_key": row.banner_image_key,
+            "introduction_title": row.introduction_title,
+            "introduction_first_paragraph": row.introduction_first_paragraph,
+            "introduction_second_paragraph": row.introduction_second_paragraph,
+            "seo": ContentSeo.model_validate(row.seo or {}),
+            "status": row.status,
+            "created_at": row.created_at,
+        }
+        if self.features.has_third_intro:
+            payload["introduction_third_paragraph"] = row.introduction_third_paragraph
+        if self.features.has_accordion:
+            payload["accordion"] = _items(row.accordion)
+        if self.features.has_experience:
+            payload["experience_title"] = row.experience_title
+            payload["experience_accordion"] = _items(row.experience_accordion)
+            payload["experience_image_key"] = row.experience_image_key
+            payload["experience_description"] = row.experience_description
+        if self.features.has_offering:
+            payload["offering_image_key"] = row.offering_image_key
+            payload["offering_title"] = row.offering_title
+            payload["offering_description"] = row.offering_description
+        if self.features.has_faq:
+            payload["faq_title"] = row.faq_title
+            payload["faq_description"] = row.faq_description
+            payload["faq_accordion"] = _items(row.faq_accordion)
+        if self.features.has_locale:
+            payload["content_available_in"] = list(row.content_available_in or [DEFAULT_LOCALE])
+        return payload
+
+    def _detail(self, row):
+        return self.detail_schema.model_validate(self._core_dict(row))
+
+    def _public(self, row):
+        data = self._core_dict(row)
+        data.pop("id")
+        data.pop("status")
+        data.pop("created_at")
+        return self.public_schema.model_validate(data)
+
+    def _summary(self, row):
+        base = {
+            "id": row.id,
+            "banner_title": row.banner_title,
+            "banner_image_key": row.banner_image_key,
+            "state": row.status,
+        }
+        if self.features.list_kind == "intro_first":
+            base["introduction_first_paragraph"] = row.introduction_first_paragraph
+            base["content_available_in"] = LOCALE_LABEL
+        elif self.features.list_kind == "seo":
+            base["seo"] = seo_snippet(row.seo)
+        else:
+            base["introduction_title"] = row.introduction_title
+        return self.summary_schema.model_validate(base)
+
+    def _apply(self, db: Session, row, payload, entry_id: UUID | None) -> None:
+        row.slug = self._unique_slug(db, payload.banner_title, entry_id)
+        row.banner_title = payload.banner_title.strip()
+        row.banner_image_key = optional_key(payload.banner_image_key, "banner_image_key")
+        row.introduction_title = payload.introduction_title.strip()
+        row.introduction_first_paragraph = payload.introduction_first_paragraph.strip()
+        row.introduction_second_paragraph = payload.introduction_second_paragraph.strip()
+        row.seo = seo_dict(payload.seo)
+        row.status = coerce_status(payload.status)
+        if self.features.has_third_intro:
+            row.introduction_third_paragraph = payload.introduction_third_paragraph.strip()
+        if self.features.has_accordion:
+            row.accordion = accordion_dicts(payload.accordion, "accordion", html=True)
+        if self.features.has_experience:
+            row.experience_title = payload.experience_title.strip()
+            row.experience_accordion = accordion_dicts(
+                payload.experience_accordion, "experience_accordion", html=True
+            )
+            row.experience_image_key = optional_key(
+                payload.experience_image_key, "experience_image_key"
+            )
+            row.experience_description = sanitize_html(payload.experience_description)
+        if self.features.has_offering:
+            row.offering_image_key = optional_key(payload.offering_image_key, "offering_image_key")
+            row.offering_title = payload.offering_title.strip()
+            row.offering_description = sanitize_html(payload.offering_description)
+        if self.features.has_faq:
+            row.faq_title = payload.faq_title.strip()
+            row.faq_description = payload.faq_description.strip()
+            row.faq_accordion = accordion_dicts(payload.faq_accordion, "faq_accordion", html=True)
+        if self.features.has_locale:
+            row.content_available_in = [DEFAULT_LOCALE]
diff --git a/apps/Backend/src/flycatch_api/services/landing_sections.py b/apps/Backend/src/flycatch_api/services/landing_sections.py
new file mode 100644
index 0000000..5221bed
--- /dev/null
+++ b/apps/Backend/src/flycatch_api/services/landing_sections.py
@@ -0,0 +1,103 @@
+from __future__ import annotations
+
+from flycatch_api.models.landing_pages import (
+    ApplicationDevelopment,
+    ApplicationModernization,
+    DevOpsConsult,
+    InfrastructureManagement,
+    MobileApplicationDevelopment,
+    Overview,
+    UserCenteredDesign,
+)
+from flycatch_api.schemas import admin_landings as admin
+from flycatch_api.schemas import public_landings as public
+from flycatch_api.services.landing_catalog import LandingCatalogService, LandingFeatures
+
+DEVOPS = LandingCatalogService(
+    model=DevOpsConsult,
+    detail_schema=admin.DevOpsConsult,
+    write_schema=admin.DevOpsConsultWrite,
+    summary_schema=admin.DevOpsConsultSummary,
+    list_schema=admin.DevOpsConsultList,
+    public_schema=public.PublicDevOpsConsult,
+    resource="devops_consult",
+    features=LandingFeatures(has_experience=True, has_faq=True),
+)
+
+INFRASTRUCTURE = LandingCatalogService(
+    model=InfrastructureManagement,
+    detail_schema=admin.InfrastructureManagement,
+    write_schema=admin.InfrastructureManagementWrite,
+    summary_schema=admin.InfrastructureManagementSummary,
+    list_schema=admin.InfrastructureManagementList,
+    public_schema=public.PublicInfrastructureManagement,
+    resource="infrastructure_management",
+    features=LandingFeatures(has_faq=True),
+)
+
+APPLICATION_DEVELOPMENT = LandingCatalogService(
+    model=ApplicationDevelopment,
+    detail_schema=admin.ApplicationDevelopment,
+    write_schema=admin.ApplicationDevelopmentWrite,
+    summary_schema=admin.ApplicationDevelopmentSummary,
+    list_schema=admin.ApplicationDevelopmentList,
+    public_schema=public.PublicApplicationDevelopment,
+    resource="application_development",
+    features=LandingFeatures(
+        has_accordion=True,
+        has_offering=True,
+        has_faq=True,
+        has_locale=True,
+        list_kind="intro_first",
+    ),
+)
+
+APPLICATION_MODERNIZATION = LandingCatalogService(
+    model=ApplicationModernization,
+    detail_schema=admin.ApplicationModernization,
+    write_schema=admin.ApplicationModernizationWrite,
+    summary_schema=admin.ApplicationModernizationSummary,
+    list_schema=admin.ApplicationModernizationList,
+    public_schema=public.PublicApplicationModernization,
+    resource="application_modernization",
+    features=LandingFeatures(has_accordion=True, has_offering=True, has_faq=True, list_kind="seo"),
+)
+
+MOBILE_APPLICATION = LandingCatalogService(
+    model=MobileApplicationDevelopment,
+    detail_schema=admin.MobileApplicationDevelopment,
+    write_schema=admin.MobileApplicationDevelopmentWrite,
+    summary_schema=admin.MobileApplicationDevelopmentSummary,
+    list_schema=admin.MobileApplicationDevelopmentList,
+    public_schema=public.PublicMobileApplicationDevelopment,
+    resource="mobile_application_development",
+    features=LandingFeatures(
+        has_third_intro=True,
+        has_accordion=True,
+        has_offering=True,
+        has_faq=True,
+        list_kind="seo",
+    ),
+)
+
+USER_CENTERED_DESIGN = LandingCatalogService(
+    model=UserCenteredDesign,
+    detail_schema=admin.UserCenteredDesign,
+    write_schema=admin.UserCenteredDesignWrite,
+    summary_schema=admin.UserCenteredDesignSummary,
+    list_schema=admin.UserCenteredDesignList,
+    public_schema=public.PublicUserCenteredDesign,
+    resource="user_centered_design",
+    features=LandingFeatures(has_accordion=True, has_offering=True, has_faq=True),
+)
+
+OVERVIEW = LandingCatalogService(
+    model=Overview,
+    detail_schema=admin.Overview,
+    write_schema=admin.OverviewWrite,
+    summary_schema=admin.OverviewSummary,
+    list_schema=admin.OverviewList,
+    public_schema=public.PublicOverview,
+    resource="overview",
+    features=LandingFeatures(),
+)
diff --git a/apps/Backend/src/flycatch_api/services/role_service.py b/apps/Backend/src/flycatch_api/services/role_service.py
index d4e26eb..8188cc5 100644
--- a/apps/Backend/src/flycatch_api/services/role_service.py
+++ b/apps/Backend/src/flycatch_api/services/role_service.py
@@ -35,6 +35,17 @@
     RoleResource(id="cloud_services", type="cloud_services", slug="default"),
     RoleResource(id="data_analytics", type="data_analytics", slug="default"),
     RoleResource(id="digital_transformation", type="digital_transformation", slug="default"),
+    RoleResource(id="devops_consult", type="devops_consult", slug="default"),
+    RoleResource(id="infrastructure_management", type="infrastructure_management", slug="default"),
+    RoleResource(id="application_development", type="application_development", slug="default"),
+    RoleResource(id="application_modernization", type="application_modernization", slug="default"),
+    RoleResource(
+        id="mobile_application_development",
+        type="mobile_application_development",
+        slug="default",
+    ),
+    RoleResource(id="user_centered_design", type="user_centered_design", slug="default"),
+    RoleResource(id="overview", type="overview", slug="default"),
     RoleResource(id="blogs", type="blogs", slug="default"),
     RoleResource(id="case_studies", type="case_studies", slug="default"),
     RoleResource(id="industries", type="industries", slug="default"),
diff --git a/apps/Backend/tests/contract/test_openapi_parity.py b/apps/Backend/tests/contract/test_openapi_parity.py
index 806e4f4..2c7f29e 100644
--- a/apps/Backend/tests/contract/test_openapi_parity.py
+++ b/apps/Backend/tests/contract/test_openapi_parity.py
@@ -26,6 +26,20 @@
     SPECS / "014-admin-data-analytics" / "contracts" / "public-data-analytics.v1.yaml",
     SPECS / "015-admin-digital-transformation" / "contracts" / "admin-digital-transformation.v1.yaml",
     SPECS / "015-admin-digital-transformation" / "contracts" / "public-digital-transformation.v1.yaml",
+    SPECS / "016-admin-devops-consult" / "contracts" / "admin-devops-consult.v1.yaml",
+    SPECS / "016-admin-devops-consult" / "contracts" / "public-devops-consult.v1.yaml",
+    SPECS / "017-admin-infrastructure-management" / "contracts" / "admin-infrastructure-management.v1.yaml",
+    SPECS / "017-admin-infrastructure-management" / "contracts" / "public-infrastructure-management.v1.yaml",
+    SPECS / "018-admin-application-development" / "contracts" / "admin-application-development.v1.yaml",
+    SPECS / "018-admin-application-development" / "contracts" / "public-application-development.v1.yaml",
+    SPECS / "019-admin-application-modernization" / "contracts" / "admin-application-modernization.v1.yaml",
+    SPECS / "019-admin-application-modernization" / "contracts" / "public-application-modernization.v1.yaml",
+    SPECS / "020-admin-mobile-application-development" / "contracts" / "admin-mobile-application-development.v1.yaml",
+    SPECS / "020-admin-mobile-application-development" / "contracts" / "public-mobile-application-development.v1.yaml",
+    SPECS / "021-admin-user-centered-design" / "contracts" / "admin-user-centered-design.v1.yaml",
+    SPECS / "021-admin-user-centered-design" / "contracts" / "public-user-centered-design.v1.yaml",
+    SPECS / "022-admin-overview" / "contracts" / "admin-overview.v1.yaml",
+    SPECS / "022-admin-overview" / "contracts" / "public-overview.v1.yaml",
 ]
 
 
diff --git a/apps/Backend/tests/integration/test_admin_landings.py b/apps/Backend/tests/integration/test_admin_landings.py
new file mode 100644
index 0000000..6a029f9
--- /dev/null
+++ b/apps/Backend/tests/integration/test_admin_landings.py
@@ -0,0 +1,110 @@
+from fastapi.testclient import TestClient
+
+
+def _sign_in(client: TestClient, email: str, password: str):
+    return client.post("/api/v1/admin/auth/sign-in", json={"email": email, "password": password})
+
+
+def _admin(client, bootstrapped):
+    tokens = _sign_in(client, bootstrapped["admin_email"], bootstrapped["admin_password"]).json()
+    return {"Authorization": f"Bearer {tokens['access_token']}"}
+
+
+def test_editor_cannot_publish_landing(client, bootstrapped):
+    tokens = _sign_in(client, bootstrapped["editor_email"], bootstrapped["editor_password"]).json()
+    headers = {"Authorization": f"Bearer {tokens['access_token']}"}
+    response = client.post(
+        "/api/v1/admin/overview",
+        headers=headers,
+        json={"banner_title": "Editor Publish", "status": "publish"},
+    )
+    assert response.status_code == 403
+    assert client.get("/api/v1/admin/devops-consult").status_code == 401
+    assert client.get("/api/v1/admin/overview").status_code == 401
+
+
+def test_landing_crud_publish_and_public(client, bootstrapped):
+    headers = _admin(client, bootstrapped)
+    draft = client.post(
+        "/api/v1/admin/devops-consult",
+        headers=headers,
+        json={"banner_title": "Hidden Consult", "status": "draft"},
+    )
+    published = client.post(
+        "/api/v1/admin/devops-consult",
+        headers=headers,
+        json={
+            "banner_title": "Live Consult",
+            "introduction_title": "Intro",
+            "experience_accordion": [
+                {"title": "One", "contents": "<p>Go</p><script>x</script>", "order": 0}
+            ],
+            "status": "publish",
+        },
+    )
+    assert draft.status_code == 201, draft.text
+    assert published.status_code == 201, published.text
+    assert "<script>" not in published.json()["experience_accordion"][0]["contents"]
+    listed = client.get("/api/v1/admin/devops-consult?q=Live", headers=headers)
+    assert listed.status_code == 200
+    assert listed.json()["per_page"] == 10
+    assert listed.json()["items"][0]["introduction_title"] == "Intro"
+
+    public_list = client.get("/api/v1/public/devops-consult")
+    slugs = [item["slug"] for item in public_list.json()["items"]]
+    assert "live-consult" in slugs
+    assert "hidden-consult" not in slugs
+    assert client.get("/api/v1/public/devops-consult/hidden-consult").status_code == 404
+    live = client.get("/api/v1/public/devops-consult/live-consult")
+    assert live.status_code == 200
+    assert "id" not in live.json()
+    assert "status" not in live.json()
+
+    overview = client.post(
+        "/api/v1/admin/overview",
+        headers=headers,
+        json={"banner_title": "Company Overview", "status": "publish"},
+    )
+    assert overview.status_code == 201, overview.text
+    assert client.get("/api/v1/public/overview/company-overview").status_code == 200
+
+    app_dev = client.post(
+        "/api/v1/admin/application-development",
+        headers=headers,
+        json={
+            "banner_title": "Custom Apps",
+            "introduction_first_paragraph": "A" * 120,
+            "status": "publish",
+        },
+    )
+    assert app_dev.status_code == 201, app_dev.text
+    listed_dev = client.get("/api/v1/admin/application-development", headers=headers)
+    item = listed_dev.json()["items"][0]
+    assert item["content_available_in"] == "En"
+    assert item["introduction_first_paragraph"].startswith("A")
+
+    modern = client.post(
+        "/api/v1/admin/application-modernization",
+        headers=headers,
+        json={
+            "banner_title": "Modernize",
+            "seo": {"title": "SEO Title", "description": "SEO Description"},
+            "status": "publish",
+        },
+    )
+    assert modern.status_code == 201, modern.text
+    modern_list = client.get("/api/v1/admin/application-modernization", headers=headers)
+    assert "SEO Title" in modern_list.json()["items"][0]["seo"]
+
+    catalogue = client.get("/api/v1/admin/roles/catalogue", headers=headers)
+    resources = {item["id"] for item in catalogue.json()["resources"]}
+    for resource in [
+        "devops_consult",
+        "infrastructure_management",
+        "application_development",
+        "application_modernization",
+        "mobile_application_development",
+        "user_centered_design",
+        "overview",
+    ]:
+        assert resource in resources
diff --git a/specs/016-admin-devops-consult/contracts/admin-devops-consult.v1.yaml b/specs/016-admin-devops-consult/contracts/admin-devops-consult.v1.yaml
new file mode 100644
index 0000000..a8dddb3
--- /dev/null
+++ b/specs/016-admin-devops-consult/contracts/admin-devops-consult.v1.yaml
@@ -0,0 +1,242 @@
+openapi: 3.1.0
+info:
+  title: Administration DevOps Consult
+  version: 1.0.0
+  summary: CRUD for DevOps Consult entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/devops-consult:
+    get:
+      operationId: listDevOpsConsult
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/DevOpsConsultList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createDevOpsConsult
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DevOpsConsultWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/DevOpsConsult'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/devops-consult/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getDevOpsConsult
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/DevOpsConsult'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateDevOpsConsult
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DevOpsConsultWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/DevOpsConsult'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteDevOpsConsult
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    DevOpsConsult:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, experience_title, experience_accordion, experience_image_key, experience_description, faq_title, faq_description, faq_accordion, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        experience_title: { type: string }
+        experience_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        experience_image_key: { type: string, nullable: true }
+        experience_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    DevOpsConsultSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, introduction_title, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    DevOpsConsultList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/DevOpsConsultSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    DevOpsConsultWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+        experience_title: { type: string, maxLength: 200, default: '' }
+        experience_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        experience_image_key: { type: string, nullable: true }
+        experience_description: { type: string, default: '' }
+        faq_title: { type: string, maxLength: 200, default: '' }
+        faq_description: { type: string, default: '' }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/016-admin-devops-consult/contracts/public-devops-consult.v1.yaml b/specs/016-admin-devops-consult/contracts/public-devops-consult.v1.yaml
new file mode 100644
index 0000000..263136c
--- /dev/null
+++ b/specs/016-admin-devops-consult/contracts/public-devops-consult.v1.yaml
@@ -0,0 +1,106 @@
+openapi: 3.1.0
+info:
+  title: Public DevOps Consult
+  version: 1.0.0
+  summary: Read-only published DevOps Consult for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/devops-consult:
+    get:
+      operationId: listPublicDevOpsConsult
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicDevOpsConsultList'
+  /public/devops-consult/{slug}:
+    get:
+      operationId: getPublicDevOpsConsult
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicDevOpsConsult'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicDevOpsConsultSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicDevOpsConsultList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicDevOpsConsultSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicDevOpsConsult:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, experience_title, experience_accordion, experience_image_key, experience_description, faq_title, faq_description, faq_accordion, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        experience_title: { type: string }
+        experience_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        experience_image_key: { type: string, nullable: true }
+        experience_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/016-admin-devops-consult/data-model.md b/specs/016-admin-devops-consult/data-model.md
new file mode 100644
index 0000000..4e40ee6
--- /dev/null
+++ b/specs/016-admin-devops-consult/data-model.md
@@ -0,0 +1,31 @@
+# Data Model: DevOps Consult
+
+## DevOpsConsult
+
+Table: `devops_consults`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+| experience_title | string(200) | |
+| experience_accordion | JSON | `{title, contents HTML, order}` |
+| experience_image_key | string(255) | nullable |
+| experience_description | text | HTML |
+| faq_title | string(200) | |
+| faq_description | text | |
+| faq_accordion | JSON | `{title, contents HTML, order}` |
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/016-admin-devops-consult/quickstart.md b/specs/016-admin-devops-consult/quickstart.md
new file mode 100644
index 0000000..441f7dc
--- /dev/null
+++ b/specs/016-admin-devops-consult/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: DevOps Consult
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `devops_consult.read` and `devops_consult.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/devops-consult` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/devops-consult/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-devops-consult.v1.yaml](./contracts/admin-devops-consult.v1.yaml) and [contracts/public-devops-consult.v1.yaml](./contracts/public-devops-consult.v1.yaml).
diff --git a/specs/016-admin-devops-consult/spec.md b/specs/016-admin-devops-consult/spec.md
new file mode 100644
index 0000000..a2312ef
--- /dev/null
+++ b/specs/016-admin-devops-consult/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration DevOps Consult and Public Reads
+
+**Feature Branch**: `016-admin-devops-consult`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for DevOps Consult (banner, intro, experience (title/accordion/image/description), FAQ, SEO); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, Introduction Title, State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `devops_consult.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `devops_consult.read` MUST list and read entries on `/api/v1/admin/devops-consult`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `devops_consult.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-devops-consult.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **DevOpsConsult**: banner, intro, experience (title/accordion/image/description), FAQ, SEO, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-devops-consult.v1.yaml](./contracts/admin-devops-consult.v1.yaml) | Bearer | `/admin/devops-consult` |
+| Public | [contracts/public-devops-consult.v1.yaml](./contracts/public-devops-consult.v1.yaml) | None | `/public/devops-consult` |
diff --git a/specs/017-admin-infrastructure-management/contracts/admin-infrastructure-management.v1.yaml b/specs/017-admin-infrastructure-management/contracts/admin-infrastructure-management.v1.yaml
new file mode 100644
index 0000000..b1f359c
--- /dev/null
+++ b/specs/017-admin-infrastructure-management/contracts/admin-infrastructure-management.v1.yaml
@@ -0,0 +1,230 @@
+openapi: 3.1.0
+info:
+  title: Administration Infrastructure Management & Automation
+  version: 1.0.0
+  summary: CRUD for Infrastructure Management & Automation entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/infrastructure-management:
+    get:
+      operationId: listInfrastructureManagement
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/InfrastructureManagementList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createInfrastructureManagement
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/InfrastructureManagementWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/InfrastructureManagement'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/infrastructure-management/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getInfrastructureManagement
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/InfrastructureManagement'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateInfrastructureManagement
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/InfrastructureManagementWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/InfrastructureManagement'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteInfrastructureManagement
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    InfrastructureManagement:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, faq_title, faq_description, faq_accordion, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    InfrastructureManagementSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, introduction_title, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    InfrastructureManagementList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/InfrastructureManagementSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    InfrastructureManagementWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+        faq_title: { type: string, maxLength: 200, default: '' }
+        faq_description: { type: string, default: '' }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/017-admin-infrastructure-management/contracts/public-infrastructure-management.v1.yaml b/specs/017-admin-infrastructure-management/contracts/public-infrastructure-management.v1.yaml
new file mode 100644
index 0000000..015e076
--- /dev/null
+++ b/specs/017-admin-infrastructure-management/contracts/public-infrastructure-management.v1.yaml
@@ -0,0 +1,100 @@
+openapi: 3.1.0
+info:
+  title: Public Infrastructure Management & Automation
+  version: 1.0.0
+  summary: Read-only published Infrastructure Management & Automation for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/infrastructure-management:
+    get:
+      operationId: listPublicInfrastructureManagement
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicInfrastructureManagementList'
+  /public/infrastructure-management/{slug}:
+    get:
+      operationId: getPublicInfrastructureManagement
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicInfrastructureManagement'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicInfrastructureManagementSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicInfrastructureManagementList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicInfrastructureManagementSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicInfrastructureManagement:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, faq_title, faq_description, faq_accordion, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/017-admin-infrastructure-management/data-model.md b/specs/017-admin-infrastructure-management/data-model.md
new file mode 100644
index 0000000..8080861
--- /dev/null
+++ b/specs/017-admin-infrastructure-management/data-model.md
@@ -0,0 +1,27 @@
+# Data Model: Infrastructure Management & Automation
+
+## InfrastructureManagement
+
+Table: `infrastructure_managements`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+| faq_title | string(200) | |
+| faq_description | text | |
+| faq_accordion | JSON | `{title, contents HTML, order}` |
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/017-admin-infrastructure-management/quickstart.md b/specs/017-admin-infrastructure-management/quickstart.md
new file mode 100644
index 0000000..d343f66
--- /dev/null
+++ b/specs/017-admin-infrastructure-management/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: Infrastructure Management & Automation
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `infrastructure_management.read` and `infrastructure_management.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/infrastructure-management` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/infrastructure-management/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-infrastructure-management.v1.yaml](./contracts/admin-infrastructure-management.v1.yaml) and [contracts/public-infrastructure-management.v1.yaml](./contracts/public-infrastructure-management.v1.yaml).
diff --git a/specs/017-admin-infrastructure-management/spec.md b/specs/017-admin-infrastructure-management/spec.md
new file mode 100644
index 0000000..ce85edd
--- /dev/null
+++ b/specs/017-admin-infrastructure-management/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration Infrastructure Management & Automation and Public Reads
+
+**Feature Branch**: `017-admin-infrastructure-management`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for Infrastructure Management & Automation (banner, intro, FAQ, SEO); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, Introduction Title, State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `infrastructure_management.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `infrastructure_management.read` MUST list and read entries on `/api/v1/admin/infrastructure-management`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `infrastructure_management.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-infrastructure-management.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **InfrastructureManagement**: banner, intro, FAQ, SEO, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-infrastructure-management.v1.yaml](./contracts/admin-infrastructure-management.v1.yaml) | Bearer | `/admin/infrastructure-management` |
+| Public | [contracts/public-infrastructure-management.v1.yaml](./contracts/public-infrastructure-management.v1.yaml) | None | `/public/infrastructure-management` |
diff --git a/specs/018-admin-application-development/contracts/admin-application-development.v1.yaml b/specs/018-admin-application-development/contracts/admin-application-development.v1.yaml
new file mode 100644
index 0000000..a8926f5
--- /dev/null
+++ b/specs/018-admin-application-development/contracts/admin-application-development.v1.yaml
@@ -0,0 +1,244 @@
+openapi: 3.1.0
+info:
+  title: Administration Application Development Service
+  version: 1.0.0
+  summary: CRUD for Application Development Service entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/application-development:
+    get:
+      operationId: listApplicationDevelopment
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationDevelopmentList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createApplicationDevelopment
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ApplicationDevelopmentWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationDevelopment'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/application-development/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getApplicationDevelopment
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationDevelopment'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateApplicationDevelopment
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ApplicationDevelopmentWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationDevelopment'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteApplicationDevelopment
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    ApplicationDevelopment:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, content_available_in, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        content_available_in: { type: array, items: { type: string } }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    ApplicationDevelopmentSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, introduction_first_paragraph, content_available_in, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_first_paragraph: { type: string }
+        content_available_in: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    ApplicationDevelopmentList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/ApplicationDevelopmentSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    ApplicationDevelopmentWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string, maxLength: 200, default: '' }
+        offering_description: { type: string, default: '' }
+        faq_title: { type: string, maxLength: 200, default: '' }
+        faq_description: { type: string, default: '' }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/018-admin-application-development/contracts/public-application-development.v1.yaml b/specs/018-admin-application-development/contracts/public-application-development.v1.yaml
new file mode 100644
index 0000000..e3b972c
--- /dev/null
+++ b/specs/018-admin-application-development/contracts/public-application-development.v1.yaml
@@ -0,0 +1,107 @@
+openapi: 3.1.0
+info:
+  title: Public Application Development Service
+  version: 1.0.0
+  summary: Read-only published Application Development Service for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/application-development:
+    get:
+      operationId: listPublicApplicationDevelopment
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicApplicationDevelopmentList'
+  /public/application-development/{slug}:
+    get:
+      operationId: getPublicApplicationDevelopment
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicApplicationDevelopment'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicApplicationDevelopmentSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicApplicationDevelopmentList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicApplicationDevelopmentSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicApplicationDevelopment:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, content_available_in, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        content_available_in: { type: array, items: { type: string } }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/018-admin-application-development/data-model.md b/specs/018-admin-application-development/data-model.md
new file mode 100644
index 0000000..8b54a67
--- /dev/null
+++ b/specs/018-admin-application-development/data-model.md
@@ -0,0 +1,34 @@
+# Data Model: Application Development Service
+
+## ApplicationDevelopment
+
+Table: `application_developments`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+| accordion | JSON | `{title, contents HTML, order}` |
+| offering_image_key | string(255) | nullable |
+| offering_title | string(200) | |
+| offering_description | text | HTML |
+| faq_title | string(200) | |
+| faq_description | text | |
+| faq_accordion | JSON | `{title, contents HTML, order}` |
+| content_available_in | JSON | default `["en"]` |
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+Admin list `content_available_in` is the label `En`.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/018-admin-application-development/quickstart.md b/specs/018-admin-application-development/quickstart.md
new file mode 100644
index 0000000..5e9b084
--- /dev/null
+++ b/specs/018-admin-application-development/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: Application Development Service
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `application_development.read` and `application_development.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/application-development` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/application-development/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-application-development.v1.yaml](./contracts/admin-application-development.v1.yaml) and [contracts/public-application-development.v1.yaml](./contracts/public-application-development.v1.yaml).
diff --git a/specs/018-admin-application-development/spec.md b/specs/018-admin-application-development/spec.md
new file mode 100644
index 0000000..389e5a9
--- /dev/null
+++ b/specs/018-admin-application-development/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration Application Development Service and Public Reads
+
+**Feature Branch**: `018-admin-application-development`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for Application Development Service (banner, intro, application development accordion, offering, FAQ, SEO; list Content Available In En); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, Introduction First Paragraph (truncated), Content Available In, State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `application_development.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `application_development.read` MUST list and read entries on `/api/v1/admin/application-development`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `application_development.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-application-development.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **ApplicationDevelopment**: banner, intro, application development accordion, offering, FAQ, SEO; list Content Available In En, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-application-development.v1.yaml](./contracts/admin-application-development.v1.yaml) | Bearer | `/admin/application-development` |
+| Public | [contracts/public-application-development.v1.yaml](./contracts/public-application-development.v1.yaml) | None | `/public/application-development` |
diff --git a/specs/019-admin-application-modernization/contracts/admin-application-modernization.v1.yaml b/specs/019-admin-application-modernization/contracts/admin-application-modernization.v1.yaml
new file mode 100644
index 0000000..ce6b866
--- /dev/null
+++ b/specs/019-admin-application-modernization/contracts/admin-application-modernization.v1.yaml
@@ -0,0 +1,242 @@
+openapi: 3.1.0
+info:
+  title: Administration Application Modernization
+  version: 1.0.0
+  summary: CRUD for Application Modernization entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/application-modernization:
+    get:
+      operationId: listApplicationModernization
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationModernizationList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createApplicationModernization
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ApplicationModernizationWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationModernization'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/application-modernization/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getApplicationModernization
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationModernization'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateApplicationModernization
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/ApplicationModernizationWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/ApplicationModernization'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteApplicationModernization
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    ApplicationModernization:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    ApplicationModernizationSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, seo, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        seo: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    ApplicationModernizationList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/ApplicationModernizationSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    ApplicationModernizationWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string, maxLength: 200, default: '' }
+        offering_description: { type: string, default: '' }
+        faq_title: { type: string, maxLength: 200, default: '' }
+        faq_description: { type: string, default: '' }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/019-admin-application-modernization/contracts/public-application-modernization.v1.yaml b/specs/019-admin-application-modernization/contracts/public-application-modernization.v1.yaml
new file mode 100644
index 0000000..0a4f799
--- /dev/null
+++ b/specs/019-admin-application-modernization/contracts/public-application-modernization.v1.yaml
@@ -0,0 +1,106 @@
+openapi: 3.1.0
+info:
+  title: Public Application Modernization
+  version: 1.0.0
+  summary: Read-only published Application Modernization for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/application-modernization:
+    get:
+      operationId: listPublicApplicationModernization
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicApplicationModernizationList'
+  /public/application-modernization/{slug}:
+    get:
+      operationId: getPublicApplicationModernization
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicApplicationModernization'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicApplicationModernizationSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicApplicationModernizationList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicApplicationModernizationSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicApplicationModernization:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/019-admin-application-modernization/data-model.md b/specs/019-admin-application-modernization/data-model.md
new file mode 100644
index 0000000..199498a
--- /dev/null
+++ b/specs/019-admin-application-modernization/data-model.md
@@ -0,0 +1,31 @@
+# Data Model: Application Modernization
+
+## ApplicationModernization
+
+Table: `application_modernizations`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+| accordion | JSON | `{title, contents HTML, order}` |
+| offering_image_key | string(255) | nullable |
+| offering_title | string(200) | |
+| offering_description | text | HTML |
+| faq_title | string(200) | |
+| faq_description | text | |
+| faq_accordion | JSON | `{title, contents HTML, order}` |
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/019-admin-application-modernization/quickstart.md b/specs/019-admin-application-modernization/quickstart.md
new file mode 100644
index 0000000..b31cf58
--- /dev/null
+++ b/specs/019-admin-application-modernization/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: Application Modernization
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `application_modernization.read` and `application_modernization.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/application-modernization` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/application-modernization/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-application-modernization.v1.yaml](./contracts/admin-application-modernization.v1.yaml) and [contracts/public-application-modernization.v1.yaml](./contracts/public-application-modernization.v1.yaml).
diff --git a/specs/019-admin-application-modernization/spec.md b/specs/019-admin-application-modernization/spec.md
new file mode 100644
index 0000000..a57940a
--- /dev/null
+++ b/specs/019-admin-application-modernization/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration Application Modernization and Public Reads
+
+**Feature Branch**: `019-admin-application-modernization`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for Application Modernization (banner, intro, accordion, offering, FAQ, SEO; list truncated SEO); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, SEO (truncated), State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `application_modernization.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `application_modernization.read` MUST list and read entries on `/api/v1/admin/application-modernization`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `application_modernization.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-application-modernization.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **ApplicationModernization**: banner, intro, accordion, offering, FAQ, SEO; list truncated SEO, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-application-modernization.v1.yaml](./contracts/admin-application-modernization.v1.yaml) | Bearer | `/admin/application-modernization` |
+| Public | [contracts/public-application-modernization.v1.yaml](./contracts/public-application-modernization.v1.yaml) | None | `/public/application-modernization` |
diff --git a/specs/020-admin-mobile-application-development/contracts/admin-mobile-application-development.v1.yaml b/specs/020-admin-mobile-application-development/contracts/admin-mobile-application-development.v1.yaml
new file mode 100644
index 0000000..1e203d5
--- /dev/null
+++ b/specs/020-admin-mobile-application-development/contracts/admin-mobile-application-development.v1.yaml
@@ -0,0 +1,244 @@
+openapi: 3.1.0
+info:
+  title: Administration Mobile Application Development
+  version: 1.0.0
+  summary: CRUD for Mobile Application Development entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/mobile-application-development:
+    get:
+      operationId: listMobileApplicationDevelopment
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MobileApplicationDevelopmentList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createMobileApplicationDevelopment
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MobileApplicationDevelopmentWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MobileApplicationDevelopment'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/mobile-application-development/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getMobileApplicationDevelopment
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MobileApplicationDevelopment'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateMobileApplicationDevelopment
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/MobileApplicationDevelopmentWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/MobileApplicationDevelopment'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteMobileApplicationDevelopment
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    MobileApplicationDevelopment:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, introduction_third_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        introduction_third_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    MobileApplicationDevelopmentSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, seo, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        seo: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    MobileApplicationDevelopmentList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/MobileApplicationDevelopmentSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    MobileApplicationDevelopmentWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+        introduction_third_paragraph: { type: string, default: '' }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string, maxLength: 200, default: '' }
+        offering_description: { type: string, default: '' }
+        faq_title: { type: string, maxLength: 200, default: '' }
+        faq_description: { type: string, default: '' }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/020-admin-mobile-application-development/contracts/public-mobile-application-development.v1.yaml b/specs/020-admin-mobile-application-development/contracts/public-mobile-application-development.v1.yaml
new file mode 100644
index 0000000..29a0e3f
--- /dev/null
+++ b/specs/020-admin-mobile-application-development/contracts/public-mobile-application-development.v1.yaml
@@ -0,0 +1,107 @@
+openapi: 3.1.0
+info:
+  title: Public Mobile Application Development
+  version: 1.0.0
+  summary: Read-only published Mobile Application Development for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/mobile-application-development:
+    get:
+      operationId: listPublicMobileApplicationDevelopment
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicMobileApplicationDevelopmentList'
+  /public/mobile-application-development/{slug}:
+    get:
+      operationId: getPublicMobileApplicationDevelopment
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicMobileApplicationDevelopment'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicMobileApplicationDevelopmentSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicMobileApplicationDevelopmentList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicMobileApplicationDevelopmentSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicMobileApplicationDevelopment:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, introduction_third_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        introduction_third_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/020-admin-mobile-application-development/data-model.md b/specs/020-admin-mobile-application-development/data-model.md
new file mode 100644
index 0000000..8b344a3
--- /dev/null
+++ b/specs/020-admin-mobile-application-development/data-model.md
@@ -0,0 +1,32 @@
+# Data Model: Mobile Application Development
+
+## MobileApplicationDevelopment
+
+Table: `mobile_application_developments`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+| introduction_third_paragraph | text | |
+| accordion | JSON | `{title, contents HTML, order}` |
+| offering_image_key | string(255) | nullable |
+| offering_title | string(200) | |
+| offering_description | text | HTML |
+| faq_title | string(200) | |
+| faq_description | text | |
+| faq_accordion | JSON | `{title, contents HTML, order}` |
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/020-admin-mobile-application-development/quickstart.md b/specs/020-admin-mobile-application-development/quickstart.md
new file mode 100644
index 0000000..6e14464
--- /dev/null
+++ b/specs/020-admin-mobile-application-development/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: Mobile Application Development
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `mobile_application_development.read` and `mobile_application_development.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/mobile-application-development` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/mobile-application-development/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-mobile-application-development.v1.yaml](./contracts/admin-mobile-application-development.v1.yaml) and [contracts/public-mobile-application-development.v1.yaml](./contracts/public-mobile-application-development.v1.yaml).
diff --git a/specs/020-admin-mobile-application-development/spec.md b/specs/020-admin-mobile-application-development/spec.md
new file mode 100644
index 0000000..f8fca59
--- /dev/null
+++ b/specs/020-admin-mobile-application-development/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration Mobile Application Development and Public Reads
+
+**Feature Branch**: `020-admin-mobile-application-development`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for Mobile Application Development (banner, intro (three paragraphs), accordion, offering, FAQ, SEO; list truncated SEO); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, SEO (truncated), State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `mobile_application_development.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `mobile_application_development.read` MUST list and read entries on `/api/v1/admin/mobile-application-development`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `mobile_application_development.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-mobile-application-development.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **MobileApplicationDevelopment**: banner, intro (three paragraphs), accordion, offering, FAQ, SEO; list truncated SEO, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-mobile-application-development.v1.yaml](./contracts/admin-mobile-application-development.v1.yaml) | Bearer | `/admin/mobile-application-development` |
+| Public | [contracts/public-mobile-application-development.v1.yaml](./contracts/public-mobile-application-development.v1.yaml) | None | `/public/mobile-application-development` |
diff --git a/specs/021-admin-user-centered-design/contracts/admin-user-centered-design.v1.yaml b/specs/021-admin-user-centered-design/contracts/admin-user-centered-design.v1.yaml
new file mode 100644
index 0000000..f144272
--- /dev/null
+++ b/specs/021-admin-user-centered-design/contracts/admin-user-centered-design.v1.yaml
@@ -0,0 +1,242 @@
+openapi: 3.1.0
+info:
+  title: Administration User Centered Design
+  version: 1.0.0
+  summary: CRUD for User Centered Design entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/user-centered-design:
+    get:
+      operationId: listUserCenteredDesign
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserCenteredDesignList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createUserCenteredDesign
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/UserCenteredDesignWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserCenteredDesign'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/user-centered-design/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getUserCenteredDesign
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserCenteredDesign'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateUserCenteredDesign
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/UserCenteredDesignWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/UserCenteredDesign'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteUserCenteredDesign
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    UserCenteredDesign:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    UserCenteredDesignSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, introduction_title, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    UserCenteredDesignList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/UserCenteredDesignSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    UserCenteredDesignWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string, maxLength: 200, default: '' }
+        offering_description: { type: string, default: '' }
+        faq_title: { type: string, maxLength: 200, default: '' }
+        faq_description: { type: string, default: '' }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/021-admin-user-centered-design/contracts/public-user-centered-design.v1.yaml b/specs/021-admin-user-centered-design/contracts/public-user-centered-design.v1.yaml
new file mode 100644
index 0000000..912c7fc
--- /dev/null
+++ b/specs/021-admin-user-centered-design/contracts/public-user-centered-design.v1.yaml
@@ -0,0 +1,106 @@
+openapi: 3.1.0
+info:
+  title: Public User Centered Design
+  version: 1.0.0
+  summary: Read-only published User Centered Design for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/user-centered-design:
+    get:
+      operationId: listPublicUserCenteredDesign
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicUserCenteredDesignList'
+  /public/user-centered-design/{slug}:
+    get:
+      operationId: getPublicUserCenteredDesign
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicUserCenteredDesign'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicUserCenteredDesignSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicUserCenteredDesignList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicUserCenteredDesignSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicUserCenteredDesign:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, accordion, offering_image_key, offering_title, offering_description, faq_title, faq_description, faq_accordion, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+        accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        offering_image_key: { type: string, nullable: true }
+        offering_title: { type: string }
+        offering_description: { type: string }
+        faq_title: { type: string }
+        faq_description: { type: string }
+        faq_accordion:
+          type: array
+          items: { $ref: '#/components/schemas/AccordionItem' }
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/021-admin-user-centered-design/data-model.md b/specs/021-admin-user-centered-design/data-model.md
new file mode 100644
index 0000000..0a407b7
--- /dev/null
+++ b/specs/021-admin-user-centered-design/data-model.md
@@ -0,0 +1,31 @@
+# Data Model: User Centered Design
+
+## UserCenteredDesign
+
+Table: `user_centered_designs`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+| accordion | JSON | `{title, contents HTML, order}` |
+| offering_image_key | string(255) | nullable |
+| offering_title | string(200) | |
+| offering_description | text | HTML |
+| faq_title | string(200) | |
+| faq_description | text | |
+| faq_accordion | JSON | `{title, contents HTML, order}` |
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/021-admin-user-centered-design/quickstart.md b/specs/021-admin-user-centered-design/quickstart.md
new file mode 100644
index 0000000..c72a97e
--- /dev/null
+++ b/specs/021-admin-user-centered-design/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: User Centered Design
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `user_centered_design.read` and `user_centered_design.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/user-centered-design` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/user-centered-design/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-user-centered-design.v1.yaml](./contracts/admin-user-centered-design.v1.yaml) and [contracts/public-user-centered-design.v1.yaml](./contracts/public-user-centered-design.v1.yaml).
diff --git a/specs/021-admin-user-centered-design/spec.md b/specs/021-admin-user-centered-design/spec.md
new file mode 100644
index 0000000..d1533d3
--- /dev/null
+++ b/specs/021-admin-user-centered-design/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration User Centered Design and Public Reads
+
+**Feature Branch**: `021-admin-user-centered-design`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for User Centered Design (banner, intro, accordion, offering, FAQ, SEO); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, Introduction Title, State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `user_centered_design.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `user_centered_design.read` MUST list and read entries on `/api/v1/admin/user-centered-design`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `user_centered_design.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-user-centered-design.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **UserCenteredDesign**: banner, intro, accordion, offering, FAQ, SEO, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-user-centered-design.v1.yaml](./contracts/admin-user-centered-design.v1.yaml) | Bearer | `/admin/user-centered-design` |
+| Public | [contracts/public-user-centered-design.v1.yaml](./contracts/public-user-centered-design.v1.yaml) | None | `/public/user-centered-design` |
diff --git a/specs/022-admin-overview/contracts/admin-overview.v1.yaml b/specs/022-admin-overview/contracts/admin-overview.v1.yaml
new file mode 100644
index 0000000..14c1902
--- /dev/null
+++ b/specs/022-admin-overview/contracts/admin-overview.v1.yaml
@@ -0,0 +1,222 @@
+openapi: 3.1.0
+info:
+  title: Administration Overview
+  version: 1.0.0
+  summary: CRUD for Overview entries.
+servers:
+  - url: /api/v1
+security:
+  - bearerAuth: []
+paths:
+  /admin/overview:
+    get:
+      operationId: listOverview
+      summary: List with search and pagination of 10
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/OverviewList'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+    post:
+      operationId: createOverview
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/OverviewWrite'
+      responses:
+        '201':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Overview'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+  /admin/overview/{entry_id}:
+    parameters:
+      - name: entry_id
+        in: path
+        required: true
+        schema:
+          type: string
+          format: uuid
+    get:
+      operationId: getOverview
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Overview'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+    patch:
+      operationId: updateOverview
+      requestBody:
+        required: true
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/OverviewWrite'
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/Overview'
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+        '422':
+          $ref: '#/components/responses/FieldErrors'
+    delete:
+      operationId: deleteOverview
+      responses:
+        '204':
+          description: Deleted
+        '401':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/Unauthenticated'
+        '403':
+          $ref: '../../002-auth-rbac/contracts/admin-rbac.v1.yaml#/components/responses/PermissionDenied'
+        '404':
+          $ref: '#/components/responses/NotFound'
+
+components:
+  securitySchemes:
+    bearerAuth:
+      type: http
+      scheme: bearer
+      bearerFormat: JWT
+  schemas:
+    ContentStatus:
+      type: string
+      enum: [draft, publish]
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        description: { type: string, default: '', maxLength: 500 }
+        canonical_url: { type: string, default: '', maxLength: 500 }
+        meta_title: { type: string, default: '', maxLength: 200 }
+        h1_tag: { type: string, default: '', maxLength: 200 }
+        image_alt: { type: string, default: '', maxLength: 200 }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '', maxLength: 200 }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    Overview:
+      type: object
+      additionalProperties: false
+      required: [id, slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, seo, status, created_at]
+      properties:
+        id: { type: string, format: uuid }
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status: { $ref: '#/components/schemas/ContentStatus' }
+        created_at: { type: string, format: date-time }
+    OverviewSummary:
+      type: object
+      additionalProperties: false
+      required: [id, banner_title, banner_image_key, introduction_title, state]
+      properties:
+        id: { type: string, format: uuid }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        state: { $ref: '#/components/schemas/ContentStatus' }
+    OverviewList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/OverviewSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    OverviewWrite:
+      type: object
+      additionalProperties: false
+      properties:
+        banner_title: { type: string, maxLength: 200, default: '' }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string, maxLength: 200, default: '' }
+        introduction_first_paragraph: { type: string, default: '' }
+        introduction_second_paragraph: { type: string, default: '' }
+
+        seo: { $ref: '#/components/schemas/ContentSeo' }
+        status:
+          $ref: '#/components/schemas/ContentStatus'
+          default: draft
+    FieldErrorDetail:
+      type: object
+      additionalProperties: false
+      required: [message_key]
+      properties:
+        message_key: { type: string }
+    FieldErrors:
+      type: object
+      additionalProperties: false
+      required: [fields]
+      properties:
+        fields:
+          type: object
+          additionalProperties:
+            $ref: '#/components/schemas/FieldErrorDetail'
+  responses:
+    FieldErrors:
+      description: Field-level validation errors
+      content:
+        application/json:
+          schema:
+            $ref: '#/components/schemas/FieldErrors'
+    NotFound:
+      description: Unknown entry
+      content:
+        application/json:
+          schema:
+            type: object
+            additionalProperties: false
+            required: [code, message_key]
+            properties:
+              code: { type: string, const: not_found }
+              message_key: { type: string }
diff --git a/specs/022-admin-overview/contracts/public-overview.v1.yaml b/specs/022-admin-overview/contracts/public-overview.v1.yaml
new file mode 100644
index 0000000..cd9270c
--- /dev/null
+++ b/specs/022-admin-overview/contracts/public-overview.v1.yaml
@@ -0,0 +1,96 @@
+openapi: 3.1.0
+info:
+  title: Public Overview
+  version: 1.0.0
+  summary: Read-only published Overview for the website frontend.
+servers:
+  - url: /api/v1
+security: []
+paths:
+  /public/overview:
+    get:
+      operationId: listPublicOverview
+      parameters:
+        - name: q
+          in: query
+          schema: { type: string }
+        - name: page
+          in: query
+          schema: { type: integer, minimum: 1, default: 1 }
+        - name: per_page
+          in: query
+          schema: { type: integer, minimum: 1, maximum: 10, default: 10 }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicOverviewList'
+  /public/overview/{slug}:
+    get:
+      operationId: getPublicOverview
+      parameters:
+        - name: slug
+          in: path
+          required: true
+          schema: { type: string }
+      responses:
+        '200':
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/PublicOverview'
+        '404':
+          description: Unknown or unpublished slug
+components:
+  schemas:
+    ContentSeo:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        description: { type: string, default: '' }
+        canonical_url: { type: string, default: '' }
+        meta_title: { type: string, default: '' }
+        h1_tag: { type: string, default: '' }
+        image_alt: { type: string, default: '' }
+        image_key: { type: string, nullable: true }
+    AccordionItem:
+      type: object
+      additionalProperties: false
+      properties:
+        title: { type: string, default: '' }
+        contents: { type: string, default: '' }
+        order: { type: integer, minimum: 0, default: 0 }
+    PublicOverviewSummary:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+    PublicOverviewList:
+      type: object
+      additionalProperties: false
+      required: [items, page, per_page, total]
+      properties:
+        items:
+          type: array
+          items: { $ref: '#/components/schemas/PublicOverviewSummary' }
+        page: { type: integer, minimum: 1 }
+        per_page: { type: integer, minimum: 1 }
+        total: { type: integer, minimum: 0 }
+    PublicOverview:
+      type: object
+      additionalProperties: false
+      required: [slug, banner_title, banner_image_key, introduction_title, introduction_first_paragraph, introduction_second_paragraph, seo]
+      properties:
+        slug: { type: string }
+        banner_title: { type: string }
+        banner_image_key: { type: string, nullable: true }
+        introduction_title: { type: string }
+        introduction_first_paragraph: { type: string }
+        introduction_second_paragraph: { type: string }
+
+        seo: { $ref: '#/components/schemas/ContentSeo' }
diff --git a/specs/022-admin-overview/data-model.md b/specs/022-admin-overview/data-model.md
new file mode 100644
index 0000000..eac9bc1
--- /dev/null
+++ b/specs/022-admin-overview/data-model.md
@@ -0,0 +1,25 @@
+# Data Model: Overview
+
+## Overview
+
+Table: `overviews`.
+
+| Field | Type | Rules |
+|-------|------|--------|
+| id | UUID | Primary key |
+| slug | string(128) | Unique, generated from banner_title |
+| banner_title | string(200) | |
+| banner_image_key | string(255) | nullable |
+| introduction_title | string(200) | |
+| introduction_first_paragraph | text | |
+| introduction_second_paragraph | text | |
+
+| seo | JSON | ContentSeo |
+| status | `draft` \| `publish` | Default `draft` |
+| created_at / updated_at | timestamptz | |
+
+No page_name column.
+
+## Search
+
+Admin `q` matches banner_title, introduction_title, or slug. Public detail by slug 404 if missing or draft.
diff --git a/specs/022-admin-overview/quickstart.md b/specs/022-admin-overview/quickstart.md
new file mode 100644
index 0000000..b84d1b0
--- /dev/null
+++ b/specs/022-admin-overview/quickstart.md
@@ -0,0 +1,15 @@
+# Quickstart: Overview
+
+## Prerequisites
+
+Database migrated through revision `024`. Staff user with `overview.read` and `overview.create`.
+
+## Validate
+
+1. `GET /api/v1/admin/overview` — 200, `per_page` 10.
+2. `POST` with banner title — 201, draft, slug generated.
+3. `PATCH` with `status: publish`.
+4. `GET /api/v1/public/overview/{slug}` — 200, no `status`.
+5. Draft slug returns 404 on public detail.
+
+See [contracts/admin-overview.v1.yaml](./contracts/admin-overview.v1.yaml) and [contracts/public-overview.v1.yaml](./contracts/public-overview.v1.yaml).
diff --git a/specs/022-admin-overview/spec.md b/specs/022-admin-overview/spec.md
new file mode 100644
index 0000000..f1c71eb
--- /dev/null
+++ b/specs/022-admin-overview/spec.md
@@ -0,0 +1,51 @@
+# Feature Specification: Administration Overview and Public Reads
+
+**Feature Branch**: `022-admin-overview`
+
+**Created**: 2026-08-28
+
+**Status**: Draft
+
+**Input**: Staff Administration CRUD for Overview (banner, intro, SEO); plus unauthenticated public list and slug detail of published entries.
+
+**Constitution alignment**: Contract-first (III), security (VIII), i18n (V), quality gates (XIII). Public SEO (I): drafts MUST NOT appear on public routes.
+
+## Scope
+
+### In scope
+
+- Administration list, create, edit, and delete
+- Search and pagination of ten
+- List columns: ID, Banner Title, Banner Image, Introduction Title, State, Actions
+- Slug generated from Banner Title; unique
+- SEO via existing ContentSeo shape
+- Status `draft` or `publish`; default draft
+- RBAC: `overview.create|read|update|delete|publish`
+- Public list and `GET` by slug of published rows only
+
+### Out of scope
+
+- Public writes
+- Website frontend pages
+- Page Name field
+
+## Requirements
+
+- **FR-001**: Staff with `overview.read` MUST list and read entries on `/api/v1/admin/overview`.
+- **FR-002**: Create/update/delete require matching write actions; publish status requires `overview.publish`.
+- **FR-003**: Unauthenticated or under-privileged admin requests MUST be rejected (401 or 403).
+- **FR-004**: Nested accordion `order` values MUST be ≥ 0 where accordions exist.
+- **FR-005**: Slug MUST be unique (case-insensitive) and valid `^[a-z0-9]+(?:-[a-z0-9]+)*$`.
+- **FR-006**: Unauthenticated public routes return only `publish` rows and omit staff `id`/`status`.
+- **FR-007**: `contracts/public-overview.v1.yaml` MUST NOT be generated into the Administration FE client.
+
+## Key Entities
+
+- **Overview**: banner, intro, SEO, slug, status.
+
+## Contracts
+
+| Surface | File | Auth | Paths |
+|---------|------|------|-------|
+| Administration | [contracts/admin-overview.v1.yaml](./contracts/admin-overview.v1.yaml) | Bearer | `/admin/overview` |
+| Public | [contracts/public-overview.v1.yaml](./contracts/public-overview.v1.yaml) | None | `/public/overview` |