From faf1d954768390b869aca6aa166e9ead6d7a26ee Mon Sep 17 00:00:00 2001
From: mengstabketemaw <mengstabrealk28@gmail.com>
Date: Mon, 29 Jun 2026 16:04:03 +0300
Subject: [PATCH] style: update UI component styles and structure commit

---
 .../app/features/configuration/pages/ConfigurationPage.tsx   | 4 ++--
 libs/ui/src/lib/layout/AppHeader.tsx                         | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
index 687b5991b..15e39f07f 100644
--- a/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
+++ b/apps/backoffice/src/app/features/configuration/pages/ConfigurationPage.tsx
@@ -218,8 +218,8 @@ function ProfessionTab() {
 
   return (
     <>
-      <Group justify="space-between" mb="md">
-        <Text fw={600} size="sm">{t('configuration.professionsList')}</Text>
+      <Group justify="space-between" align="flex-end" mb="md">
+        <Title order={2}>{t('configuration.professionsList')}</Title>
         {!showProfForm && (
           <Button
             variant="light"
diff --git a/libs/ui/src/lib/layout/AppHeader.tsx b/libs/ui/src/lib/layout/AppHeader.tsx
index 7281d8938..1bd043216 100644
--- a/libs/ui/src/lib/layout/AppHeader.tsx
+++ b/libs/ui/src/lib/layout/AppHeader.tsx
@@ -1,5 +1,6 @@
 import {
   Anchor,
+  Box,
   Burger,
   Group,
   Indicator,
@@ -52,7 +53,7 @@ export function AppHeader({
     <Group h="100%" px="lg" justify="space-between" wrap="nowrap">
       <Group gap="md" wrap="nowrap">
         {/* Hamburger — styled like user-management Top.tsx */}
-        <UnstyledButton
+        <Box
           onClick={isMobile ? onToggleNav : onToggleSidebar}
           style={{
             display: 'flex',
@@ -91,7 +92,7 @@ export function AppHeader({
               burger: { '--burger-color': 'currentColor' },
             }}
           />
-        </UnstyledButton>
+        </Box>
 
         {/* Breadcrumbs — card container with pill-style crumbs */}
         <Group