diff --git a/src/app/features/content-management/components/static-pages-editor.component.html b/src/app/features/content-management/components/static-pages-editor.component.html
index bb0aab8..a167f93 100644
--- a/src/app/features/content-management/components/static-pages-editor.component.html
+++ b/src/app/features/content-management/components/static-pages-editor.component.html
@@ -1,55 +1,78 @@
 <section class="editor-section-card">
   <div class="editor-actions">
     <h2>{{ 'builder.staticPages' | translate }}</h2>
-    <button type="button" (click)="createPage()">{{ 'builder.createPage' | translate }}</button>
+    <app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
   </div>
 
   @if (validation().duplicateSlugs.length > 0) {
-    <p class="editor-error">{{ 'staticPages.duplicateSlug' | translate }}</p>
+    <app-badge variant="danger">{{ 'staticPages.duplicateSlug' | translate }}</app-badge>
   }
   @if (validation().emptyTitles.length > 0) {
-    <p class="editor-error">{{ 'staticPages.emptyTitle' | translate }}</p>
+    <app-badge variant="danger">{{ 'staticPages.emptyTitle' | translate }}</app-badge>
+  }
+
+  @if (pages().length === 0) {
+    <app-empty-state [title]="'builder.staticPages' | translate" [description]="'builder.createPage' | translate">
+      <span slot="actions">
+        <app-button variant="primary" (click)="createPage()">{{ 'builder.createPage' | translate }}</app-button>
+      </span>
+    </app-empty-state>
   }
 
   <div class="stack-list">
     @for (page of pages(); track page.id) {
-      <article class="sub-card">
-        <div class="editor-actions">
-          <h3>{{ page.id }}</h3>
-          <div class="editor-actions">
-            <button type="button" class="secondary" (click)="move(page.id, -1)">↑</button>
-            <button type="button" class="secondary" (click)="move(page.id, 1)">↓</button>
-            <button type="button" class="secondary" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</button>
+      <app-card padding="md">
+        <div class="page-card">
+          <div class="page-card__header">
+            <h3 class="page-card__title">{{ page.id }}</h3>
+            <div class="editor-actions">
+              <app-button variant="ghost" size="sm" (click)="move(page.id, -1)">&uarr;</app-button>
+              <app-button variant="ghost" size="sm" (click)="move(page.id, 1)">&darr;</app-button>
+              <app-button variant="danger" size="sm" (click)="deletePage(page.id)">{{ 'builder.deletePage' | translate }}</app-button>
+            </div>
           </div>
-        </div>
-        <div class="editor-grid three">
-          <label><span>{{ 'builder.pageId' | translate }}</span><input type="text" [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" /></label>
-          <label><span>{{ 'builder.slug' | translate }}</span><input type="text" [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" /></label>
-          <label><span>{{ 'builder.iconLabel' | translate }}</span><input type="text" [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" /></label>
-          <label class="toggle-row"><input type="checkbox" [checked]="page.showInFooter" (change)="updatePage(page.id, { showInFooter: $any($event.target).checked })" /><span>{{ 'builder.showInFooter' | translate }}</span></label>
-          <label class="toggle-row"><input type="checkbox" [checked]="page.showInHeader" (change)="updatePage(page.id, { showInHeader: $any($event.target).checked })" /><span>{{ 'builder.showInHeader' | translate }}</span></label>
-          <label class="toggle-row"><input type="checkbox" [checked]="page.showInSitemap" (change)="updatePage(page.id, { showInSitemap: $any($event.target).checked })" /><span>{{ 'builder.showInSitemap' | translate }}</span></label>
-          <label class="toggle-row"><input type="checkbox" [checked]="page.requiresAuthentication" (change)="updatePage(page.id, { requiresAuthentication: $any($event.target).checked })" /><span>{{ 'builder.requiresAuthentication' | translate }}</span></label>
-          <label><span>{{ 'builder.footerGroup' | translate }}</span><input type="text" [ngModel]="page.footerGroup || ''" (ngModelChange)="updatePage(page.id, { footerGroup: $event })" /></label>
-          <label><span>{{ 'builder.orderLabel' | translate }}</span><input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" /></label>
-        </div>
 
-        @for (locale of locales(); track locale) {
-          <div class="editor-grid two">
-            <label>
-              <span>{{ 'builder.translationTitle' | translate }} {{ locale }}</span>
-              <input type="text" [ngModel]="page.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(page.id, locale, 'title', $event)" />
-            </label>
-            <label class="full">
-              <span>{{ 'builder.htmlPreview' | translate }} {{ locale }}</span>
-              <app-marketplace-html-editor
-                [html]="page.translations[locale]?.html || ''"
-                (htmlChange)="updateTranslation(page.id, locale, 'html', $event)"
-              />
-            </label>
+          <div class="editor-grid three">
+            <app-form-field [label]="'builder.pageId' | translate">
+              <app-input [ngModel]="page.id" (ngModelChange)="updatePage(page.id, { id: $event })" />
+            </app-form-field>
+            <app-form-field [label]="'builder.slug' | translate">
+              <app-input [ngModel]="page.slug" (ngModelChange)="updatePage(page.id, { slug: $event })" />
+            </app-form-field>
+            <app-form-field [label]="'builder.iconLabel' | translate">
+              <app-input [ngModel]="page.icon || ''" (ngModelChange)="updatePage(page.id, { icon: $event })" />
+            </app-form-field>
+            <app-form-field [label]="'builder.footerGroup' | translate">
+              <app-input [ngModel]="page.footerGroup || ''" (ngModelChange)="updatePage(page.id, { footerGroup: $event })" />
+            </app-form-field>
+            <app-form-field [label]="'builder.orderLabel' | translate">
+              <app-input type="number" [ngModel]="page.order" (ngModelChange)="updatePage(page.id, { order: +$event })" />
+            </app-form-field>
           </div>
-        }
-      </article>
+
+          <div class="toggle-grid">
+            <label class="toggle-row"><input type="checkbox" [checked]="page.showInFooter" (change)="updatePage(page.id, { showInFooter: $any($event.target).checked })" /><span>{{ 'builder.showInFooter' | translate }}</span></label>
+            <label class="toggle-row"><input type="checkbox" [checked]="page.showInHeader" (change)="updatePage(page.id, { showInHeader: $any($event.target).checked })" /><span>{{ 'builder.showInHeader' | translate }}</span></label>
+            <label class="toggle-row"><input type="checkbox" [checked]="page.showInSitemap" (change)="updatePage(page.id, { showInSitemap: $any($event.target).checked })" /><span>{{ 'builder.showInSitemap' | translate }}</span></label>
+            <label class="toggle-row"><input type="checkbox" [checked]="page.requiresAuthentication" (change)="updatePage(page.id, { requiresAuthentication: $any($event.target).checked })" /><span>{{ 'builder.requiresAuthentication' | translate }}</span></label>
+          </div>
+
+          @for (locale of locales(); track locale) {
+            <div class="editor-grid two">
+              <app-form-field [label]="(('builder.translationTitle' | translate) + ' ' + locale)">
+                <app-input [ngModel]="page.translations[locale]?.title || ''" (ngModelChange)="updateTranslation(page.id, locale, 'title', $event)" />
+              </app-form-field>
+              <label class="full">
+                <span>{{ 'builder.htmlPreview' | translate }} {{ locale }}</span>
+                <app-marketplace-html-editor
+                  [html]="page.translations[locale]?.html || ''"
+                  (htmlChange)="updateTranslation(page.id, locale, 'html', $event)"
+                />
+              </label>
+            </div>
+          }
+        </div>
+      </app-card>
     }
   </div>
 </section>
diff --git a/src/app/features/content-management/components/static-pages-editor.component.scss b/src/app/features/content-management/components/static-pages-editor.component.scss
new file mode 100644
index 0000000..2fafaba
--- /dev/null
+++ b/src/app/features/content-management/components/static-pages-editor.component.scss
@@ -0,0 +1,31 @@
+.page-card {
+  display: grid;
+  gap: 14px;
+}
+
+.page-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.page-card__title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--text-primary, #1e3c38);
+}
+
+.toggle-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 12px;
+}
+
+@media (max-width: 900px) {
+  .toggle-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
diff --git a/src/app/features/content-management/components/static-pages-editor.component.ts b/src/app/features/content-management/components/static-pages-editor.component.ts
index fa463f9..b09462e 100644
--- a/src/app/features/content-management/components/static-pages-editor.component.ts
+++ b/src/app/features/content-management/components/static-pages-editor.component.ts
@@ -5,13 +5,29 @@ import { ContentManagementFacade } from '../facade/content-management.facade';
 import { ContentPage } from '../models/content-page.model';
 import { TranslatePipe } from '../../../i18n/translate.pipe';
 import { MarketplaceHtmlEditorComponent } from '../../project-editor/components/html-editor/marketplace-html-editor.component';
+import { ButtonComponent } from '../../../shared/ui/button/button.component';
+import { InputComponent } from '../../../shared/ui/input/input.component';
+import { CardComponent } from '../../../shared/ui/card/card.component';
+import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
+import { BadgeComponent } from '../../../shared/ui/badge/badge.component';
+import { EmptyStateComponent } from '../../../shared/ui/empty-state/empty-state.component';
 
 @Component({
   selector: 'app-static-pages-editor',
   standalone: true,
-  imports: [FormsModule, TranslatePipe, MarketplaceHtmlEditorComponent],
+  imports: [
+    FormsModule,
+    TranslatePipe,
+    MarketplaceHtmlEditorComponent,
+    ButtonComponent,
+    InputComponent,
+    CardComponent,
+    FormFieldComponent,
+    BadgeComponent,
+    EmptyStateComponent
+  ],
   templateUrl: './static-pages-editor.component.html',
-  styleUrls: ['../../project-editor/sections/section.shared.scss'],
+  styleUrls: ['../../project-editor/sections/section.shared.scss', './static-pages-editor.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class StaticPagesEditorComponent {
diff --git a/src/app/features/content-management/services/content-page.service.ts b/src/app/features/content-management/services/content-page.service.ts
index d1c9cb6..35e42ed 100644
--- a/src/app/features/content-management/services/content-page.service.ts
+++ b/src/app/features/content-management/services/content-page.service.ts
@@ -27,8 +27,8 @@ export class ContentPageService {
       }));
     }
 
-    return Object.values(config)
-      .map((page, index) => this.normalizePage(page as ContentPageBootstrapInput, index))
+    return Object.entries(config)
+      .map(([key, page], index) => this.normalizePage(page as ContentPageBootstrapInput, index, key))
       .sort((left, right) => left.order - right.order);
   }
 
@@ -117,7 +117,7 @@ export class ContentPageService {
     }, {});
   }
 
-  private normalizePage(page: ContentPageBootstrapInput, index: number): ContentPage {
+  private normalizePage(page: ContentPageBootstrapInput, index: number, key: string): ContentPage {
     const titleMap = typeof page.title === 'object' && page.title ? page.title : {};
     const htmlMap = typeof page.html === 'object' && page.html ? page.html : {};
     const translations = { ...(page.translations ?? {}) };
@@ -131,9 +131,9 @@ export class ContentPageService {
     }
 
     return {
-      id: page.id,
-      slug: this.normalizeSlug(page.slug || page.id),
-      title: typeof page.title === 'string' ? page.title : Object.values(titleMap)[0] ?? page.id,
+      id: page.id || key,
+      slug: this.normalizeSlug(page.slug || page.id || key),
+      title: typeof page.title === 'string' ? page.title : Object.values(titleMap)[0] ?? page.id ?? key,
       icon: page.icon,
       order: page.order ?? index + 1,
       showInFooter: page.showInFooter !== false,