diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e9715b..fc125be 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Agentation } from 'agentation'
 
@@ -6,22 +6,65 @@ import { ThemeProvider } from '@/app/providers/theme-provider'
 import AutoScrollToTop from '@/components/scroll/auto-scroll-to-top'
 import { scheduleTokenRefresh } from '@/core/shared/auth-refresh'
 import { getAccessTokenFromLS } from '@/core/shared/storage'
+import { useAuthStore } from '@/core/store/features/auth/authStore'
 import useRoutesElements from '@/hooks/routes/use-router-element'
 
 import '@/styles/theme.css'
+import { useUserInfo } from './hooks/tanstack-query/auth/use-query-auth'
+import { type UserRole } from './models/user/types'
 
-const App = () => {
+const AppContent = () => {
   const router = useRoutesElements()
+  return <>{router}</>
+}
+
+const App = () => {
+  const [isAppLoading, setIsAppLoading] = useState(true)
+  const logout = useAuthStore((state) => state.logout)
+  const updateUser = useAuthStore((state) => state.updateUser)
+  const { data: userData } = useUserInfo()
 
-  // F5/mở lại tab mà còn token → khởi động timer proactive refresh theo exp.
   useEffect(() => {
-    if (getAccessTokenFromLS()) scheduleTokenRefresh()
-  }, [])
+    const initializeApp = async () => {
+      const accessToken = getAccessTokenFromLS()
+      if (accessToken) {
+        try {
+          updateUser({
+            userId: userData?.id || '',
+            fullName: userData?.fullName || '',
+            email: userData?.email || '',
+            phone: userData?.phone || '',
+            location: userData?.location || '',
+            avatarUrl: userData?.avatarUrl || '',
+            roleName: userData?.roleName as UserRole
+          })
+          scheduleTokenRefresh()
+        } catch (error: any) {
+          console.error('Failed to fetch user info on app initialize:', error)
+          if (error.response && [401, 403].includes(error.response.status)) {
+            logout()
+          }
+        }
+      }
+      setIsAppLoading(false)
+    }
+
+    initializeApp()
+  }, [logout, updateUser, userData?.avatarUrl, userData?.email, userData?.fullName, userData?.id, userData?.location, userData?.phone, userData?.roleName])
+
+  if (isAppLoading) {
+    return (
+      <div className='h-screen w-screen flex flex-col items-center justify-center bg-background-primary'>
+        <div className='animate-spin rounded-full h-12 w-12 border-4 border-primary border-t-transparent'></div>
+        <p className='text-sm text-text-description mt-4 font-medium'>Đang khởi tạo ứng dụng...</p>
+      </div>
+    )
+  }
 
   return (
     <ThemeProvider>
       <AutoScrollToTop behavior='smooth' />
-      {router}
+      <AppContent />
       {import.meta.env.DEV && <Agentation />}
     </ThemeProvider>
   )
diff --git a/frontend/src/_mocks/lawyer.mock.ts b/frontend/src/_mocks/lawyer.mock.ts
index 99e5081..bdcdcb4 100644
--- a/frontend/src/_mocks/lawyer.mock.ts
+++ b/frontend/src/_mocks/lawyer.mock.ts
@@ -12,7 +12,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.9,
     successfulCases: 120,
     specializations: ['Doanh nghiệp & Thương mại', 'Lao động'],
-    city: 'Đà Nẵng'
+    location: 'Đà Nẵng'
   },
   {
     id: 'lyr-2',
@@ -23,7 +23,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.8,
     successfulCases: 95,
     specializations: ['Dân sự & Thừa kế'],
-    city: 'Hà Nội'
+    location: 'Hà Nội'
   },
   {
     id: 'lyr-3',
@@ -34,7 +34,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 5.0,
     successfulCases: 210,
     specializations: ['Hình sự', 'Hành chính'],
-    city: 'TP. Hồ Chí Minh'
+    location: 'TP. Hồ Chí Minh'
   },
   {
     id: 'lyr-4',
@@ -45,7 +45,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.7,
     successfulCases: 65,
     specializations: ['Sở hữu trí tuệ', 'Đất đai & Bất động sản'],
-    city: 'Cần Thơ'
+    location: 'Cần Thơ'
   },
   {
     id: 'lyr-5',
@@ -56,7 +56,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.9,
     successfulCases: 85,
     specializations: ['Doanh nghiệp & Thương mại'],
-    city: 'Đà Nẵng'
+    location: 'Đà Nẵng'
   },
   {
     id: 'lyr-6',
@@ -67,7 +67,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.6,
     successfulCases: 42,
     specializations: ['Hôn nhân & Gia đình', 'Dân sự & Thừa kế'],
-    city: 'Hải Phòng'
+    location: 'Hải Phòng'
   },
   {
     id: 'lyr-7',
@@ -78,7 +78,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.8,
     successfulCases: 67,
     specializations: ['Lao động', 'Hành chính'],
-    city: 'Quảng Nam'
+    location: 'Quảng Nam'
   },
   {
     id: 'lyr-8',
@@ -89,7 +89,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.9,
     successfulCases: 180,
     specializations: ['Đất đai & Bất động sản'],
-    city: 'Đà Nẵng'
+    location: 'Đà Nẵng'
   },
   {
     id: 'lyr-9',
@@ -100,7 +100,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.8,
     successfulCases: 140,
     specializations: ['Đất đai & Bất động sản', 'Dân sự & Thừa kế'],
-    city: 'Hà Nội'
+    location: 'Hà Nội'
   },
   {
     id: 'lyr-10',
@@ -111,7 +111,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.9,
     successfulCases: 165,
     specializations: ['Doanh nghiệp & Thương mại'],
-    city: 'TP. Hồ Chí Minh'
+    location: 'TP. Hồ Chí Minh'
   },
   {
     id: 'lyr-11',
@@ -122,7 +122,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.6,
     successfulCases: 50,
     specializations: ['Sở hữu trí tuệ'],
-    city: 'Đà Nẵng'
+    location: 'Đà Nẵng'
   },
   {
     id: 'lyr-12',
@@ -133,7 +133,7 @@ export const MOCK_LAWYERS: Lawyer[] = [
     averageRating: 4.8,
     successfulCases: 135,
     specializations: ['Hôn nhân & Gia đình'],
-    city: 'TP. Hồ Chí Minh'
+    location: 'TP. Hồ Chí Minh'
   }
 ]
 
@@ -152,7 +152,7 @@ export const getLawyerListMock = (
   size: number = 8,
   filters?: {
     category?: string
-    city?: string
+    location?: string
     searchQuery?: string
     sortBy?: 'default' | 'rating' | 'cases'
   }
@@ -164,7 +164,7 @@ export const getLawyerListMock = (
     filtered = filtered.filter(
       (l) =>
         l.fullName.toLowerCase().includes(query) ||
-        l.bio.toLowerCase().includes(query) ||
+        (l.bio || '').toLowerCase().includes(query) ||
         l.specializations.some((s) => s.toLowerCase().includes(query))
     )
   }
@@ -174,8 +174,8 @@ export const getLawyerListMock = (
     filtered = filtered.filter((l) => l.specializations.includes(category))
   }
 
-  if (filters?.city && filters.city !== 'Tất cả') {
-    filtered = filtered.filter((l) => l.city === filters.city)
+  if (filters?.location && filters.location !== 'Tất cả') {
+    filtered = filtered.filter((l) => l.location === filters.location)
   }
 
   if (filters?.sortBy === 'rating') {
@@ -205,27 +205,36 @@ export const getLawyerListMock = (
 export const getLawyerDetailMock = (id: string): LawyerDetailResponse => {
   const lawyer = MOCK_LAWYERS.find((l) => l.id === id) || MOCK_LAWYERS[0]
   
-  const expMatch = lawyer.careerHistory.match(/\d+/)
+  const expMatch = (lawyer.careerHistory || '').match(/\d+/)
   const experienceYears = expMatch ? parseInt(expMatch[0], 10) : 5
 
   return {
     data: {
       items: [],
       summary: {
+        id: lawyer.id,
+        email: 'lawyer@legalai.vn',
+        phone: '0987654321',
+        name: lawyer.fullName,
+        roleName: 'LAWYER',
+        bio: lawyer.bio,
         averageRating: lawyer.averageRating,
         careerHistory: lawyer.careerHistory,
         careerMilestones: [],
         consultingFee: 500000,
         experienceYears,
+        successfulCases: lawyer.successfulCases || 10,
+        lawyerStatus: 'AVAILABLE',
+        status: 'ACTIVE',
         licenseInfo: {
           isVerified: true,
           licenseFileUrl: null,
           licenseIssuer: 'Bộ Tư pháp',
           licenseNumber: `LS-${lawyer.id.replace('lyr-', '1000')}`
         },
-        name: lawyer.fullName,
-        role: 'Luật sư thành viên',
-        specializations: lawyer.specializations
+        specializations: lawyer.specializations,
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString()
       }
     }
   }
diff --git a/frontend/src/app/layout/layout-main.tsx b/frontend/src/app/layout/layout-main.tsx
index 1f24555..718877d 100644
--- a/frontend/src/app/layout/layout-main.tsx
+++ b/frontend/src/app/layout/layout-main.tsx
@@ -2,6 +2,7 @@ import { type ReactNode, Suspense } from 'react'
 
 import { Outlet } from 'react-router-dom'
 
+import BottomNav from '@/components/bottom-nav/bottom-nav'
 import SideBar from '@/components/side-bar/side-bar'
 import TopBar from '@/components/top-bar/top-bar'
 import LoadingSpinner from '@/components/ui/loading-spinner'
@@ -16,7 +17,7 @@ const LayoutMain = ({ children }: LayoutMainProps) => {
     <div>
       <div className='flex min-h-screen'>
         <SideBar />
-        <div className='flex flex-col flex-1 min-w-0 min-h-0 bg-background-secondary'>
+        <div className='flex flex-col flex-1 min-w-0 min-h-0 bg-background-secondary pb-20 lg:pb-0 relative'>
           <TopBar />
           <main
             className={cn(
@@ -40,8 +41,8 @@ const LayoutMain = ({ children }: LayoutMainProps) => {
               <div className='mx-auto max-w-none h-full'>
                 <div
                   className={cn(
-                    'rounded-2xl border min-h-[calc(100vh-140px)] border-border-secondary',
-                    'shadow-2xl backdrop-blur-xl bg-background-primary',
+                    'sm:rounded-2xl rounded-none sm:border border-none min-h-[calc(100vh-140px)] border-border-secondary',
+                    'shadow-none sm:shadow-2xl backdrop-blur-xl bg-background-primary',
                     'h-full transition-all duration-300 hover:shadow-3xl',
                     'mx-auto',
                     'flex flex-col'
@@ -58,6 +59,7 @@ const LayoutMain = ({ children }: LayoutMainProps) => {
               </div>
             </div>
           </main>
+          <BottomNav />
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/providers/query-provider.tsx b/frontend/src/app/providers/query-provider.tsx
index eb1b487..a0bce78 100644
--- a/frontend/src/app/providers/query-provider.tsx
+++ b/frontend/src/app/providers/query-provider.tsx
@@ -7,7 +7,8 @@ interface QueryProviderProps {
   children: ReactNode
 }
 
-const queryClient = new QueryClient({
+// eslint-disable-next-line react-refresh/only-export-components
+export const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchIntervalInBackground: false,
@@ -20,6 +21,15 @@ const queryClient = new QueryClient({
   }
 })
 
+// Set specific staleTime defaults (5 minutes for userInfo, 3 minutes for lawyers, templates, and laws)
+queryClient.setQueryDefaults(['userInfo'], { staleTime: 5 * 60 * 1000 })
+queryClient.setQueryDefaults(['lawyers'], { staleTime: 3 * 60 * 1000 })
+queryClient.setQueryDefaults(['lawyerDetail'], { staleTime: 3 * 60 * 1000 })
+queryClient.setQueryDefaults(['templates'], { staleTime: 3 * 60 * 1000 })
+queryClient.setQueryDefaults(['templateDetail'], { staleTime: 3 * 60 * 1000 })
+queryClient.setQueryDefaults(['laws'], { staleTime: 3 * 60 * 1000 })
+queryClient.setQueryDefaults(['lawDetail'], { staleTime: 3 * 60 * 1000 })
+
 export default function QueryProvider({ children }: QueryProviderProps) {
   return (
     <QueryClientProvider client={queryClient}>
diff --git a/frontend/src/components/bottom-nav/bottom-nav.tsx b/frontend/src/components/bottom-nav/bottom-nav.tsx
new file mode 100644
index 0000000..f1120d8
--- /dev/null
+++ b/frontend/src/components/bottom-nav/bottom-nav.tsx
@@ -0,0 +1,99 @@
+import { Home, MessageCircle, MessageSquare, Scale, User } from 'lucide-react'
+import { Link, useLocation } from 'react-router-dom'
+
+import { ROUTE } from '@/core/constants/path'
+import { cn } from '@/core/lib/utils'
+
+export default function BottomNav() {
+  const location = useLocation()
+
+  const isActive = (path: string) => {
+    if (path === ROUTE.USER.ROOT) {
+      return location.pathname === ROUTE.USER.ROOT
+    }
+    return location.pathname === path || location.pathname.startsWith(`${path}/`)
+  }
+
+  const items = [
+    {
+      icon: Home,
+      path: ROUTE.USER.ROOT,
+      label: 'Trang chủ'
+    },
+    {
+      icon: MessageCircle,
+      path: ROUTE.USER.MESSAGES,
+      label: 'Tin nhắn'
+    },
+    {
+      icon: MessageSquare,
+      path: ROUTE.USER.CHAT_AI,
+      label: 'Phân tích pháp luật',
+      isCenter: true
+    },
+    {
+      icon: Scale,
+      path: ROUTE.USER.LEGAL,
+      label: 'Văn bản pháp luật'
+    },
+    {
+      icon: User,
+      path: ROUTE.PROFILE.ROOT,
+      label: 'Trang cá nhân'
+    }
+  ]
+
+  return (
+    <div className='lg:hidden fixed bottom-6 left-1/2 -translate-x-1/2 z-40 w-[calc(100%-2rem)] max-w-[420px]'>
+      <div className='h-16 rounded-full bg-white/30 dark:bg-black/30 border border-white/25 dark:border-white/10 shadow-[0_8px_32px_0_rgba(0,0,0,0.1)] backdrop-blur-2xl flex items-center justify-around px-2 relative'>
+        {items.map((item, idx) => {
+          const Icon = item.icon
+          const active = isActive(item.path)
+
+          const handleClick = (e: React.MouseEvent) => {
+            if (active && item.path === ROUTE.USER.ROOT) {
+              e.preventDefault()
+              window.scrollTo({ top: 0, behavior: 'smooth' })
+              setTimeout(() => {
+                window.location.reload()
+              }, 150)
+            }
+          }
+
+          if (item.isCenter) {
+            return (
+              <Link
+                key={idx}
+                to={item.path}
+                onClick={handleClick}
+                className='relative -translate-y-5 flex items-center justify-center w-14 h-14 rounded-full bg-gradient-to-r from-rose-500 via-pink-500 to-red-500 text-white shadow-[0_8px_20px_0_rgba(244,63,94,0.4)] hover:scale-105 active:scale-95 transition-all duration-300'
+                aria-label={item.label}
+              >
+                {/* Glow Ring Effect */}
+                <span className='absolute inset-0 rounded-full border border-white/30 animate-pulse' />
+                <Icon className='w-6 h-6' />
+              </Link>
+            )
+          }
+
+          return (
+            <Link
+              key={idx}
+              to={item.path}
+              onClick={handleClick}
+              className={cn(
+                'flex items-center justify-center p-3 rounded-full transition-all duration-200',
+                active 
+                  ? 'text-primary dark:text-blue-400 bg-primary/10 dark:bg-blue-500/10' 
+                  : 'text-text-description hover:text-text-primary'
+              )}
+              aria-label={item.label}
+            >
+              <Icon className='w-5 h-5' />
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/side-bar/components/user-side-bar.tsx b/frontend/src/components/side-bar/components/user-side-bar.tsx
index 1ea6bf4..f99d050 100644
--- a/frontend/src/components/side-bar/components/user-side-bar.tsx
+++ b/frontend/src/components/side-bar/components/user-side-bar.tsx
@@ -45,7 +45,7 @@ export default function UserSideBar() {
   return (
     <aside
       className={cn(
-        'flex relative flex-col h-full bg-background-primary border-r border-border-secondary shadow-xl transition-all duration-500 md:flex',
+        'flex relative flex-col h-full bg-background-primary backdrop-blur-xl border-r border-border-secondary shadow-xl transition-all duration-500 md:flex',
         sidebarOpen ? 'w-72' : 'w-20'
       )}
       aria-label='User Sidebar navigation'
@@ -98,25 +98,19 @@ export default function UserSideBar() {
               <Link
                 to={link.path}
                 className={cn(
-                  'flex items-center gap-4 rounded-xl text-small font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary group relative overflow-hidden',
-                  sidebarOpen ? 'px-4 py-3' : 'px-3 py-3 justify-center',
+                  'flex items-center gap-4 rounded-xl text-small font-medium transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-primary group relative overflow-hidden h-12 p-4',
                   isLinkActive
-                    ? 'bg-gradient-to-r from-primary to-primary-400 text-white shadow-lg shadow-primary/25 transform scale-[1.02]'
+                    ? 'bg-gradient-to-r from-primary to-primary-400 text-white shadow-lg shadow-primary/25'
                     : 'text-text-description hover:text-text-main hover:bg-background-secondary hover:shadow-lg hover:transform hover:scale-[1.02]'
                 )}
                 title={!sidebarOpen ? linkText : undefined}
                 style={{ animationDelay: `${index * 50}ms` }}
               >
-                {/* Active indicator */}
-                {isLinkActive && (
-                  <div className='absolute top-0 bottom-0 left-0 w-1 bg-gradient-to-b from-primary to-primary-400 rounded-r-full' />
-                )}
-
                 {/* Icon */}
                 <span
                   className={cn(
-                    'flex-shrink-0 transition-all duration-300 relative z-10',
-                    sidebarOpen ? 'w-5 h-5' : 'w-6 h-6',
+                    'flex-shrink-0 transition-all duration-300 relative z-10 w-5 h-5',
+
                     isLinkActive
                       ? 'text-white'
                       : 'text-tertiary group-hover:text-text-main'
@@ -184,7 +178,7 @@ export default function UserSideBar() {
                   )}
                 >
                   {/* Sử dụng optional chaining an toàn để tránh crash khi chưa có dữ liệu */}
-                  <AvatarImage src='/images/avatar.png' alt={user?.fullName} />
+                  <AvatarImage src={user?.avatarUrl || '/images/avatar.png'} alt={user?.fullName} />
                   <AvatarFallback className='bg-primary text-white font-bold'>
                     {getInitials(user?.fullName || '')}
                   </AvatarFallback>
diff --git a/frontend/src/components/side-bar/side-bar.tsx b/frontend/src/components/side-bar/side-bar.tsx
index f5e341c..e326aea 100644
--- a/frontend/src/components/side-bar/side-bar.tsx
+++ b/frontend/src/components/side-bar/side-bar.tsx
@@ -1,6 +1,8 @@
 import { ROLE_ADMIN, ROLE_LAWYER } from '@/core/configs/consts'
 import isEqual from '@/core/configs/is-equal'
+import { cn } from '@/core/lib/utils'
 import { useAuthStore } from '@/core/store/features/auth/authStore'
+import useToggleSideBar from '@/core/store/features/sidebar'
 
 import AdminSideBar from './components/admin-side-bar'
 import LawyerSideBar from './components/lawyer-side-bar'
@@ -9,7 +11,7 @@ import UserSideBar from './components/user-side-bar'
 
 const SideBar = () => {
   const user = useAuthStore((state) => state.user)
-
+  const { sidebarOpen, toggleSidebar } = useToggleSideBar()
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
 
   if (isAuthenticated && !user) {
@@ -24,15 +26,33 @@ const SideBar = () => {
   const isLawyer = isEqual(user?.roleName, ROLE_LAWYER)
 
   return (
-    <div className='h-screen sticky top-0 hidden lg:flex'>
-      {isAdmin ? (
-        <AdminSideBar />
-      ) : isLawyer ? (
-        <LawyerSideBar />
-      ) : (
-        <UserSideBar />
+    <>
+      {/* Mobile Backdrop */}
+      {sidebarOpen && (
+        <button 
+          className='fixed inset-0 z-40 bg-black/40 backdrop-blur-sm lg:hidden animate-in fade-in duration-200 border-none cursor-pointer' 
+          onClick={toggleSidebar}
+          aria-label='Close sidebar'
+        />
       )}
-    </div>
+
+      {/* Sidebar Container */}
+      <div
+        className={cn(
+          'h-screen sticky top-0 z-50 transition-all duration-300',
+          'lg:flex hidden',
+          sidebarOpen && 'flex fixed inset-y-0 left-0 lg:sticky shadow-2xl lg:shadow-none'
+        )}
+      >
+        {isAdmin ? (
+          <AdminSideBar />
+        ) : isLawyer ? (
+          <LawyerSideBar />
+        ) : (
+          <UserSideBar />
+        )}
+      </div>
+    </>
   )
 }
 
diff --git a/frontend/src/components/top-bar/components/search-bar.tsx b/frontend/src/components/top-bar/components/search-bar.tsx
index 703ef42..1b952bd 100644
--- a/frontend/src/components/top-bar/components/search-bar.tsx
+++ b/frontend/src/components/top-bar/components/search-bar.tsx
@@ -1,20 +1,57 @@
-import { Search } from 'lucide-react'
+import { useState } from 'react'
+
+import { Search, ArrowLeft } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 export default function SearchBar() {
   const { t } = useTranslation('navBar')
+  const [isExpanded, setIsExpanded] = useState(false)
 
   return (
-    <div className='hidden relative md:block'>
-      <Search className='absolute left-3 top-1/2 w-4 h-4 text-gray-400 transform -translate-y-1/2' />
-      <input
-        type='text'
-        placeholder={t('search_placeholder')}
-        className='py-2 pr-4 pl-10 w-80 text-sm rounded-xl border transition-all duration-300 bg-background-secondary dark:bg-gray-800/50 border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-info/20 focus:border-info placeholder:text-gray-400'
-      />
-      <kbd className='absolute right-3 top-1/2 px-2 py-1 font-mono text-xs text-text-description rounded border transform -translate-y-1/2 bg-background-secondary border-border-secondary'>
-        ⌘K
-      </kbd>
-    </div>
+    <>
+      {/* Desktop Search Bar (always visible) */}
+      <div className='hidden relative md:block'>
+        <Search className='absolute left-3 top-1/2 w-4 h-4 text-gray-400 transform -translate-y-1/2' />
+        <input
+          type='text'
+          placeholder={t('search_placeholder')}
+          className='py-2 pr-4 pl-10 w-80 text-sm rounded-xl border transition-all duration-300 bg-background-secondary dark:bg-gray-800/50 border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-info/20 focus:border-info placeholder:text-gray-400'
+        />
+        <kbd className='absolute right-3 top-1/2 px-2 py-1 font-mono text-xs text-text-description rounded border transform -translate-y-1/2 bg-background-secondary border-border-secondary'>
+          ⌘K
+        </kbd>
+      </div>
+
+      {/* Mobile Search Button (collapsed icon) */}
+      <button 
+        onClick={() => setIsExpanded(true)}
+        className='md:hidden p-2 rounded-lg hover:bg-background-secondary text-text-secondary hover:text-text-primary transition-colors border-none bg-transparent cursor-pointer'
+        aria-label='Search'
+      >
+        <Search className='w-5 h-5' />
+      </button>
+
+      {/* Mobile Search Overlay (expanded overlay) */}
+      {isExpanded && (
+        <div className='fixed inset-x-0 top-0 h-16 bg-background-primary px-4 flex items-center gap-3 z-50 md:hidden animate-in fade-in slide-in-from-top duration-200'>
+          <button 
+            onClick={() => setIsExpanded(false)}
+            className='p-2 rounded-lg hover:bg-background-secondary text-text-secondary hover:text-text-primary transition-colors border-none bg-transparent cursor-pointer'
+            aria-label='Close search'
+          >
+            <ArrowLeft className='w-5 h-5' />
+          </button>
+          <div className='relative flex-1'>
+            <Search className='absolute left-3 top-1/2 w-4 h-4 text-gray-400 transform -translate-y-1/2' />
+            <input
+              autoFocus
+              type='text'
+              placeholder={t('search_placeholder')}
+              className='py-2 pr-4 pl-10 w-full text-sm rounded-xl border transition-all duration-300 bg-background-secondary dark:bg-gray-800/50 border-slate-200 dark:border-gray-700 focus:outline-none focus:ring-2 focus:ring-info/20 focus:border-info placeholder:text-gray-400'
+            />
+          </div>
+        </div>
+      )}
+    </>
   )
 }
diff --git a/frontend/src/components/top-bar/components/user-top-bar.tsx b/frontend/src/components/top-bar/components/user-top-bar.tsx
index 5c65741..14abf04 100644
--- a/frontend/src/components/top-bar/components/user-top-bar.tsx
+++ b/frontend/src/components/top-bar/components/user-top-bar.tsx
@@ -1,13 +1,26 @@
+import { Menu } from 'lucide-react'
+
 import { ThemeToggle } from '@/components/theme/theme-toogle'
+import useToggleSideBar from '@/core/store/features/sidebar'
 
 import Messages from './messages'
 import Notifications from './notifications'
 import SearchBar from './search-bar'
 
 export default function UserTopBar() {
+  const { toggleSidebar } = useToggleSideBar()
+
   return (
     <header className='flex sticky top-0 z-30 justify-between items-center px-4 h-16 border-b shadow-lg backdrop-blur-xl border-border-secondary bg-background-primary'>
-      <div className='flex gap-6 items-center'>
+      <div className='flex gap-4 items-center'>
+        {/* Mobile Hamburger Toggle Button */}
+        <button 
+          onClick={toggleSidebar}
+          className='lg:hidden p-2 rounded-lg hover:bg-background-secondary text-text-secondary hover:text-text-primary transition-colors border-none bg-transparent cursor-pointer'
+          aria-label='Toggle sidebar'
+        >
+          <Menu className='w-6 h-6' />
+        </button>
         <SearchBar />
       </div>
 
diff --git a/frontend/src/components/ui/card.tsx b/frontend/src/components/ui/card.tsx
index bee42c9..60fcc14 100644
--- a/frontend/src/components/ui/card.tsx
+++ b/frontend/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border border-oklch(0.922 0 0) bg-oklch(1 0 0) text-oklch(0.145 0 0) shadow dark:border-oklch(1 0 0 / 10%) dark:bg-oklch(0.205 0 0) dark:text-oklch(0.985 0 0)",
+      "bg-oklch(1 0 0) text-oklch(0.145 0 0) dark:text-oklch(0.985 0 0)",
       className
     )}
     {...props}
@@ -23,7 +23,7 @@ const CardHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    className={cn("flex flex-col space-y-1.5", className)}
     {...props}
   />
 ))
@@ -57,7 +57,7 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div ref={ref} className={cn("p-4 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -67,7 +67,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center p-4 pt-0", className)}
     {...props}
   />
 ))
diff --git a/frontend/src/core/constants/general.const.tsx b/frontend/src/core/constants/general.const.tsx
index 249a02c..a9b01cd 100644
--- a/frontend/src/core/constants/general.const.tsx
+++ b/frontend/src/core/constants/general.const.tsx
@@ -9,13 +9,12 @@ import {
   Network,
   PieChart,
   Scale,
-  Settings,
-  ShoppingCart,
   TrendingUp,
   Users,
   UserCheck,
   MessageCircle,
-  User
+  User,
+  Settings
 } from 'lucide-react'
 
 import { ROUTE } from '@/core/constants/path'
@@ -40,6 +39,12 @@ export const adminSidebarLinks: TSidebarLinks[] = [
     icon: <Network className='w-5 h-5' />,
     path: ROUTE.ADMIN.LAW_INSPECT
   },
+  {
+    title: 'Quản lý người dùng',
+    titleKey: 'users',
+    icon: <Users className='w-5 h-5' />,
+    path: ROUTE.ADMIN.USERS,
+  },
   {
     title: 'Phân tích',
     titleKey: 'analytics',
@@ -68,86 +73,6 @@ export const adminSidebarLinks: TSidebarLinks[] = [
       }
     ]
   },
-  {
-    title: 'Quản lý người dùng',
-    titleKey: 'users',
-    icon: <Users className='w-5 h-5' />,
-    path: ROUTE.ADMIN.USERS,
-    children: [
-      {
-        // title: 'Tất cả người dùng',
-        // path: 'users/all'
-        title: 'All Users',
-        path: 'users'
-      },
-      {
-        title: 'Đang hoạt động',
-        path: 'users/active'
-      },
-      {
-        title: 'Ngừng hoạt động',
-        path: 'users/inactive'
-      },
-      {
-        title: 'Vai trò',
-        path: 'users/roles'
-      },
-      {
-        title: 'Phân quyền',
-        path: 'users/permissions'
-      }
-    ]
-  },
-  {
-    title: 'Thương mại điện tử',
-    icon: <ShoppingCart className='w-5 h-5' />,
-    path: 'ecommerce',
-    children: [
-      {
-        title: 'Đơn hàng',
-        path: 'ecommerce/orders'
-      },
-      {
-        title: 'Sản phẩm',
-        path: 'ecommerce/products'
-      },
-      {
-        title: 'Danh mục',
-        path: 'ecommerce/categories'
-      },
-      {
-        title: 'Kho hàng',
-        path: 'ecommerce/inventory'
-      },
-      {
-        title: 'Mã giảm giá',
-        path: 'ecommerce/coupons'
-      }
-    ]
-  },
-  {
-    title: 'Nội dung',
-    icon: <FileText className='w-5 h-5' />,
-    path: 'content',
-    children: [
-      {
-        title: 'Bài viết',
-        path: 'content/posts'
-      },
-      {
-        title: 'Trang',
-        path: 'content/pages'
-      },
-      {
-        title: 'Thư viện media',
-        path: 'content/media'
-      },
-      {
-        title: 'Bình luận',
-        path: 'content/comments'
-      }
-    ]
-  },
   {
     title: 'Thanh toán',
     icon: <CreditCard className='w-5 h-5' />,
@@ -179,75 +104,12 @@ export const adminSidebarLinks: TSidebarLinks[] = [
   {
     title: 'Tin nhắn',
     icon: <Mail className='w-5 h-5' />,
-    path: 'messages',
-    children: [
-      {
-        title: 'Hộp thư đến',
-        path: 'messages/inbox'
-      },
-      {
-        title: 'Đã gửi',
-        path: 'messages/sent'
-      },
-      {
-        title: 'Bản nháp',
-        path: 'messages/drafts'
-      },
-      {
-        title: 'Mẫu tin nhắn',
-        path: 'messages/templates'
-      }
-    ]
+    path: 'messages'
   },
   {
     title: 'Báo cáo',
     icon: <TrendingUp className='w-5 h-5' />,
     path: 'reports',
-    children: [
-      {
-        title: 'Báo cáo doanh thu',
-        path: 'reports/sales'
-      },
-      {
-        title: 'Báo cáo người dùng',
-        path: 'reports/users'
-      },
-      {
-        title: 'Báo cáo tài chính',
-        path: 'reports/financial'
-      },
-      {
-        title: 'Báo cáo hệ thống',
-        path: 'reports/system'
-      }
-    ]
-  },
-  {
-    title: 'Cài đặt',
-    icon: <Settings className='w-5 h-5' />,
-    path: 'settings',
-    children: [
-      {
-        title: 'Chung',
-        path: 'settings/general'
-      },
-      {
-        title: 'Bảo mật',
-        path: 'settings/security'
-      },
-      {
-        title: 'Thông báo',
-        path: 'settings/notifications'
-      },
-      {
-        title: 'Tích hợp',
-        path: 'settings/integrations'
-      },
-      {
-        title: 'Sao lưu',
-        path: 'settings/backup'
-      }
-    ]
   }
 ]
 
@@ -301,15 +163,9 @@ export const userSideBarLinks: TSidebarLinks[] = [
     path: ROUTE.USER.REPORT
   },
   {
-    title: 'Quản lý người dùng',
-    titleKey: 'users',
-    icon: <Users className='w-5 h-5' />,
-    path: ROUTE.USER.INFO
-  },
-  {
-    title: 'Cài đặt',
-    titleKey: 'setting',
-    icon: <Settings className='w-5 h-5' />,
+    title: 'Trang cá nhân',
+    titleKey: 'profile',
+    icon: <User className='w-5 h-5' />,
     path: ROUTE.PROFILE.ROOT
   }
 ]
diff --git a/frontend/src/core/constants/path.ts b/frontend/src/core/constants/path.ts
index edffc6b..6786b63 100644
--- a/frontend/src/core/constants/path.ts
+++ b/frontend/src/core/constants/path.ts
@@ -5,7 +5,8 @@ export const ROUTE = {
     REGISTER: '/register',
     VERIFY_ACCOUNT_EMAIL: '/verify-account-email',
     FORGOT_PASSWORD: '/forgot-password',
-    RESET_PASSWORD: '/reset-password'
+    RESET_PASSWORD: '/reset-password',
+    BANNED: '/banned'
   },
   PROFILE: {
     ROOT: '/profile',
diff --git a/frontend/src/core/services/ai-client.ts b/frontend/src/core/services/ai-client.ts
index 24d90b4..2726f1e 100644
--- a/frontend/src/core/services/ai-client.ts
+++ b/frontend/src/core/services/ai-client.ts
@@ -5,13 +5,10 @@ import axios, { HttpStatusCode } from 'axios'
 
 import config from '@/core/configs/env'
 import isEqual from '@/core/configs/is-equal'
-import { authApi } from '@/core/services/auth.service'
-import { forceLogout } from '@/core/shared/auth-refresh'
+import { forceLogout, doRefresh } from '@/core/shared/auth-refresh'
 import {
   getAccessTokenFromLS,
-  getRefreshTokenFromLS,
-  setAccessTokenToLS,
-  setRefreshTokenToLS
+  getRefreshTokenFromLS
 } from '@/core/shared/storage'
 
 // Hàng đợi refresh: nhiều request 401 cùng lúc → chỉ refresh 1 lần, các request khác
@@ -43,10 +40,6 @@ aiClient.interceptors.response.use(
   (response) => response.data,
   async (error) => {
     const originalRequest = error.config
-
-    // Token AI là token Node phát (sống 15m). Hết hạn → AI BE verify fail → 401.
-    // Bắt 401 (1 lần/request) → refresh bằng refresh_token → retry. KHÔNG refresh cho
-    // chính request refresh (tránh lặp vô hạn).
     const isRefreshCall = originalRequest?.url?.includes('refresh')
     if (
       error.response &&
@@ -75,17 +68,13 @@ aiClient.interceptors.response.use(
           forceLogout() // không còn refresh token → đá về /login
           return Promise.reject(error)
         }
-
-        // Node BE rotate token: lưu CẢ refresh token mới (xem axios-client.ts).
-        const { accessToken, refreshToken } = await authApi.refreshToken(refresh_token)
-        setAccessTokenToLS(accessToken)
-        if (refreshToken) setRefreshTokenToLS(refreshToken)
+        
+        const accessToken = await doRefresh()
         originalRequest.headers.Authorization = `Bearer ${accessToken}`
         processQueue(null, accessToken)
         return aiClient(originalRequest)
       } catch (refreshError) {
         processQueue(refreshError, null)
-        forceLogout() // refresh token hết 7 ngày / bị revoke → đá về /login
         return Promise.reject(error)
       } finally {
         isRefreshing = false
diff --git a/frontend/src/core/services/axios-ai-client.ts b/frontend/src/core/services/axios-ai-client.ts
deleted file mode 100644
index 32df9bf..0000000
--- a/frontend/src/core/services/axios-ai-client.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import axios from 'axios'
-
-import config from '@/core/configs/env'
-import { getAccessTokenFromLS } from '@/core/shared/storage'
-
-const axiosAiClient = axios.create({
-  baseURL: config.aiBaseUrl,
-  headers: {
-    'Content-Type': 'application/json'
-  }
-})
-
-// Request interceptor for propagating Authorization token
-axiosAiClient.interceptors.request.use(
-  (config) => {
-    const token = getAccessTokenFromLS()
-    if (token) {
-      config.headers.Authorization = `Bearer ${token}`
-    }
-    return config
-  },
-  (error) => {
-    return Promise.reject(error)
-  }
-)
-
-// Response interceptor to extract data directly
-axiosAiClient.interceptors.response.use(
-  (response) => {
-    return response.data
-  },
-  (error) => {
-    return Promise.reject(error)
-  }
-)
-
-export default axiosAiClient
diff --git a/frontend/src/core/services/axios-client.ts b/frontend/src/core/services/axios-client.ts
index d359da2..a372e78 100644
--- a/frontend/src/core/services/axios-client.ts
+++ b/frontend/src/core/services/axios-client.ts
@@ -1,21 +1,35 @@
 import axios, { HttpStatusCode } from 'axios'
 
+import { queryClient } from '@/app/providers/query-provider'
 import { AUTH_ENDPOINTS } from '@/core/configs/consts'
 import config from '@/core/configs/env'
 import isEqual from '@/core/configs/is-equal'
-import { authApi } from '@/core/services/auth.service'
-import { forceLogout } from '@/core/shared/auth-refresh'
+import { ROUTE } from '@/core/constants/path'
+import { forceLogout, doRefresh } from '@/core/shared/auth-refresh'
 import {
+  clearLS,
   getAccessTokenFromLS,
-  getRefreshTokenFromLS,
-  setAccessTokenToLS,
-  setRefreshTokenToLS
+  getRefreshTokenFromLS
 } from '@/core/shared/storage'
+import { useAuthStore } from '@/core/store/features/auth/authStore'
 
 const controllers = new Map<string, AbortController>()
 let isRefreshing = false
 let failedQueue: { resolve: (value?: unknown) => void; reject: (reason?: unknown) => void }[] = []
 
+export const handleBannedUser = (reason: string | null = null, bannedAt: string | null = null) => {
+  clearLS()
+  useAuthStore.getState().logout()
+  try {
+    queryClient.clear()
+  } catch (e) {
+    console.error('Failed to clear React Query cache', e)
+  }
+  const reasonParam = reason ? encodeURIComponent(reason) : ''
+  const atParam = bannedAt ? encodeURIComponent(bannedAt) : ''
+  window.location.href = `${ROUTE.AUTH.BANNED}?reason=${reasonParam}&at=${atParam}`
+}
+
 const processQueue = (error: unknown, token: string | null = null) => {
   failedQueue.forEach((prom) => {
     if (error) {
@@ -68,11 +82,50 @@ axiosClient.interceptors.response.use(
     if (response.config.url) {
       controllers.delete(response.config.url)
     }
+
+    // Check if response indicates user is banned
+    const dataObj = response.data as any
+    const user = dataObj?.data?.user || dataObj?.user
+    const userStatus = user?.status || dataObj?.data?.status || dataObj?.status
+    if (userStatus === 'BANNED' || userStatus === 'banned') {
+      handleBannedUser(
+        user?.banReason || dataObj?.data?.banReason || dataObj?.banReason,
+        user?.bannedAt || dataObj?.data?.bannedAt || dataObj?.bannedAt
+      )
+      return new Promise(() => {}) // Block execution
+    }
+
     return response.data
   },
   async (error) => {
     const originalRequest = error.config
 
+    // Check if error response indicates user is banned
+    const errorStatus = error.response?.status
+    const errorData = error.response?.data as any
+    const errorMessage = errorData?.message || ''
+
+    if (
+      errorStatus === 403 ||
+      errorStatus === 401 ||
+      errorMessage.toLowerCase().includes('banned') ||
+      errorData?.status === 'BANNED' ||
+      errorData?.status === 'banned'
+    ) {
+      if (
+        errorMessage.toLowerCase().includes('banned') ||
+        errorData?.status === 'BANNED' ||
+        errorData?.status === 'banned' ||
+        errorData?.code === 'BANNED'
+      ) {
+        handleBannedUser(
+          errorData?.banReason || errorData?.reason || 'Tài khoản đã bị khóa',
+          errorData?.bannedAt || errorData?.banTime
+        )
+        return new Promise(() => {}) // Block execution
+      }
+    }
+
     // Check if the request is an auth request (login, register...)
     const isAuthRequest = AUTH_ENDPOINTS.some(
       (endpoint) => originalRequest.url && originalRequest.url.includes(endpoint)
@@ -109,18 +162,12 @@ axiosClient.interceptors.response.use(
           return Promise.reject(error)
         }
 
-        // Node BE ROTATE token: refresh trả CẢ accessToken + refreshToken mới (refresh
-        // token cũ bị upsert ghi đè). PHẢI lưu cả 2 — nếu chỉ lưu access thì lần refresh
-        // sau dùng refresh token cũ đã vô hiệu → fail → đá ra login sớm (trước 7 ngày).
-        const { accessToken, refreshToken } = await authApi.refreshToken(refresh_token)
-        setAccessTokenToLS(accessToken)
-        if (refreshToken) setRefreshTokenToLS(refreshToken)
+        const accessToken = await doRefresh()
         originalRequest.headers.Authorization = `Bearer ${accessToken}`
         processQueue(null, accessToken)
         return axiosClient(originalRequest)
       } catch (refreshError) {
         processQueue(refreshError, null)
-        forceLogout() // refresh token hết 7 ngày / bị revoke → đá về /login
         return Promise.reject(error)
       } finally {
         isRefreshing = false
diff --git a/frontend/src/core/services/chat-simple.service.ts b/frontend/src/core/services/chat-simple.service.ts
index 3ee936d..8ba522a 100644
--- a/frontend/src/core/services/chat-simple.service.ts
+++ b/frontend/src/core/services/chat-simple.service.ts
@@ -1,4 +1,4 @@
-import axiosAiClient from '@/core/services/axios-ai-client'
+import aiClient from '@/core/services/ai-client'
 import { type ChatSimpleRequest, type ChatSimpleResponse } from '@/models/ai-chat/chat-simple.type'
 import { type AiSimpleApi } from '@/models/types/api/ai-simple.type'
 
@@ -6,6 +6,6 @@ const API_CHAT_SIMPLE = '/chat/simple'
 
 export const chatSimpleApi: AiSimpleApi = {
   postAISimple: (request: ChatSimpleRequest): Promise<ChatSimpleResponse> => {
-    return axiosAiClient.post(API_CHAT_SIMPLE, request)
+    return aiClient.post(API_CHAT_SIMPLE, request)
   }
 }
diff --git a/frontend/src/core/services/lawyer.service.ts b/frontend/src/core/services/lawyer.service.ts
index 18bdbc0..e403718 100644
--- a/frontend/src/core/services/lawyer.service.ts
+++ b/frontend/src/core/services/lawyer.service.ts
@@ -22,7 +22,7 @@ export const createLawyerService = ( client: AxiosInstance ) : LawyerApi => ({
   getLawyerDetail: async (id: string) => {
     try {
       const res = await client.get(API_LAWYER_DETAIL(id))
-      return res.data
+      return res
     } catch (error) {
       return Promise.reject(error)
     }
diff --git a/frontend/src/core/shared/auth-refresh.ts b/frontend/src/core/shared/auth-refresh.ts
index 729489c..a70e927 100644
--- a/frontend/src/core/shared/auth-refresh.ts
+++ b/frontend/src/core/shared/auth-refresh.ts
@@ -1,5 +1,5 @@
 // Auth refresh trung tâm: proactive (timer theo exp) + lưới reactive (401 ở client).
-// Dùng axios RAW (không qua axios-client/ai-client) để tránh vòng lặp interceptor.
+// Dùng axios RAW (không qua axios-clientư/ai-client) để tránh vòng lặp interceptor.
 import axios from 'axios'
 
 import { LOGIN_ROUTE } from '@/core/configs/consts'
@@ -12,10 +12,8 @@ import {
   setRefreshTokenToLS
 } from '@/core/shared/storage'
 
-// Refresh KHI access token còn <= ngưỡng này (giây). 75s: an toàn cho lệch giờ + RTT.
 const REFRESH_BEFORE_SEC = 75
 let refreshTimer: ReturnType<typeof setTimeout> | null = null
-// Chống refresh chồng (timer + nhiều 401 cùng lúc gọi doRefresh): chia sẻ 1 promise.
 let inflight: Promise<string> | null = null
 
 /** Giải mã payload JWT (base64url) → object. null nếu hỏng. KHÔNG cần lib jwt-decode. */
@@ -73,8 +71,10 @@ export async function doRefresh(): Promise<string> {
       if (refreshToken) setRefreshTokenToLS(refreshToken)
       scheduleTokenRefresh() // hẹn lại theo exp token mới
       return accessToken
-    } catch (err) {
-      forceLogout() // refresh token hết 7 ngày / bị revoke → đá ra login
+    } catch (err: any) {
+      if (err.response && [400, 401, 403].includes(err.response.status)) {
+        forceLogout() // chỉ logout khi refresh token bị từ chối/hết hạn thực sự
+      }
       throw err
     }
   })()
@@ -85,11 +85,6 @@ export async function doRefresh(): Promise<string> {
   }
 }
 
-/**
- * PROACTIVE: hẹn timer tự refresh khi access token còn ~75s. Gọi lúc app mount (nếu có
- * token) + sau login. Clear timer cũ trước khi đặt mới (tránh nhiều timer). Nếu token đã
- * sắp/đã hết → refresh ngay.
- */
 export function scheduleTokenRefresh(): void {
   clearTokenRefresh()
   const token = getAccessTokenFromLS()
@@ -104,7 +99,6 @@ export function scheduleTokenRefresh(): void {
   }, delayMs)
 }
 
-/** Hủy timer (logout). */
 export function clearTokenRefresh(): void {
   if (refreshTimer) {
     clearTimeout(refreshTimer)
diff --git a/frontend/src/core/shared/auth.ts b/frontend/src/core/shared/auth.ts
index ba2e4ad..6437a4f 100644
--- a/frontend/src/core/shared/auth.ts
+++ b/frontend/src/core/shared/auth.ts
@@ -1,13 +1,12 @@
-import { getAccessTokenFromLS, getRefreshTokenFromLS, getUserFromLocalStorage } from '@/core/shared/storage'
+import { getAccessTokenFromLS, getRefreshTokenFromLS } from '@/core/shared/storage'
 import { type AuthState } from '@/core/store/features/auth/types'
 
 export const getPersistedAuth = (): Partial<AuthState> => {
   const access_token = getAccessTokenFromLS()
   const refresh_token = getRefreshTokenFromLS()
-  const user = getUserFromLocalStorage()
 
-  return access_token ? { access_token, refresh_token, user, isAuthenticated: true } : {}
+  return access_token ? { access_token, refresh_token, user: null, isAuthenticated: true } : {}
 }
 
 export const isAuthenticated = (): boolean => !!getPersistedAuth().access_token
-export const getCurrentUser = () => getPersistedAuth().user
+export const getCurrentUser = () => null
diff --git a/frontend/src/core/shared/storage.ts b/frontend/src/core/shared/storage.ts
index 0f4001d..f891e45 100644
--- a/frontend/src/core/shared/storage.ts
+++ b/frontend/src/core/shared/storage.ts
@@ -31,21 +31,11 @@ export const getAccessTokenFromLS = () => localStorage.getItem(ACCESS_TOKEN_LOCA
 export const getRefreshTokenFromLS = () => localStorage.getItem(REFRESH_TOKEN_LOCAL_STORAGE_KEY) || ''
 
 export const getUserFromLocalStorage = (): UserResponseType | null => {
-  const user = localStorage.getItem(USER_LOCAL_STORAGE_KEY)
-  if (!user || user === 'undefined' || user === 'null') {
-    return null
-  }
-  try {
-    return JSON.parse(user)
-  } catch (error) {
-    localStorage.removeItem(USER_LOCAL_STORAGE_KEY)
-    return null
-  }
+  return null
 }
 
 export const removeAccessTokenFromLS = () => localStorage.removeItem(ACCESS_TOKEN_LOCAL_STORAGE_KEY)
 
-export const setUserToLS = (user: UserResponseType) =>
-  localStorage.setItem(USER_LOCAL_STORAGE_KEY, JSON.stringify(user))
+export const setUserToLS = (_user: UserResponseType) => {}
 
 export const removeRefreshTokenFromLS = () => localStorage.removeItem(REFRESH_TOKEN_LOCAL_STORAGE_KEY)
diff --git a/frontend/src/core/store/features/auth/authStore.ts b/frontend/src/core/store/features/auth/authStore.ts
index 70083f7..4226291 100644
--- a/frontend/src/core/store/features/auth/authStore.ts
+++ b/frontend/src/core/store/features/auth/authStore.ts
@@ -2,7 +2,7 @@ import { create } from 'zustand'
 
 import { getPersistedAuth } from '@/core/shared/auth'
 import { clearTokenRefresh, scheduleTokenRefresh } from '@/core/shared/auth-refresh'
-import { clearLS, setToken, setUserToLS } from '@/core/shared/storage'
+import { clearLS, setToken } from '@/core/shared/storage'
 import { type LoginResponse } from '@/models/interface/auth.interface'
 
 import { type AuthState, type AuthStore } from './types'
@@ -39,7 +39,6 @@ export const useAuthStore = create<AuthStore>((set) => ({
       refresh_token: data?.refreshToken,
       error: null
     })
-    if (data?.user) setUserToLS(data?.user)
     scheduleTokenRefresh() // proactive: hẹn tự refresh trước khi access token hết hạn
   },
 
@@ -80,9 +79,6 @@ export const useAuthStore = create<AuthStore>((set) => ({
   },
 
   updateUser: (user: LoginResponse['user']) => {
-    if (user) {
-      setUserToLS(user)
-    }
     set({
       user
     })
diff --git a/frontend/src/hooks/lawyers/use-lawyer.ts b/frontend/src/hooks/lawyers/use-lawyer.ts
index eb5d55e..29af8ab 100644
--- a/frontend/src/hooks/lawyers/use-lawyer.ts
+++ b/frontend/src/hooks/lawyers/use-lawyer.ts
@@ -55,10 +55,11 @@ export const useLawyerDetail = (id?: string) => {
     queryFn: async () => {
       if (!id) return null
       const res = await lawyerApi.getLawyerDetail(id) as any
+      const innerData = res?.data?.data || res?.data || res
       return {
         data: {
-          items: res?.items || [],
-          summary: res?.summary || null
+          items: innerData?.items || [],
+          summary: innerData?.summary || null
         }
       }
     },
diff --git a/frontend/src/hooks/routes/use-router-element.tsx b/frontend/src/hooks/routes/use-router-element.tsx
index e11efb5..8750285 100644
--- a/frontend/src/hooks/routes/use-router-element.tsx
+++ b/frontend/src/hooks/routes/use-router-element.tsx
@@ -18,6 +18,7 @@ const Register = lazy(() => import('@/pages/register/Register'))
 const VerifyAcountEmail = lazy(() => import('@/pages/verify-account-email/VerifyAcountEmail'))
 const ForgotPassword = lazy(() => import('@/pages/forgot-password/ForgotPassword'))
 const ResetPassword = lazy(() => import('@/pages/reset-password/ResetPassword'))
+const Banned = lazy(() => import('@/pages/banned/Banned'))
 const Dashboard = lazy(() => import('@/pages/admin/dashboard'))
 const Users = lazy(() => import('@/pages/admin/users'))
 const LegalDocuments = lazy(() => import('@/pages/admin/legal-documents'))
@@ -26,7 +27,6 @@ const PageNotFound = lazy(() => import('@/pages/404/PageNotFound'))
 const Profile = lazy(() => import('@/pages/profile/Profile'))
 const HomePage = lazy(() => import('@/pages/home/HomePage'))
 const UserDashboard = lazy(() => import('@/pages/users/dashboard/Dashboard'))
-const ProfileEdit = lazy(() => import('@/pages/profile/ProfileEdit'))
 const AIChat = lazy(() => import('@/pages/users/ai-chat/AIChat'))
 const Messages = lazy(() => import('@/pages/users/messages/Messages'))
 const LegalAnalysis = lazy(() => import('@/pages/users/legal-analysis/LegalAnalysis'))
@@ -75,7 +75,6 @@ export default function useRoutesElements() {
               <Route path={ROUTE.USER.ROOT} element={<LayoutMain />}>
                 <Route index element={<UserDashboard />} />
                 <Route path={ROUTE.USER.PROFILE} element={<Profile />} />
-                <Route path={ROUTE.USER.EDIT} element={<ProfileEdit />} />
                 <Route path={ROUTE.USER.CHAT_AI} element={<AIChat />} />
                 <Route path={ROUTE.USER.MESSAGES} element={<Messages />} />
                 <Route path={ROUTE.USER.TEMPLATE} element={<Template />} />
@@ -111,14 +110,7 @@ export default function useRoutesElements() {
         <Route path={ROUTE.AUTH.FORGOT_PASSWORD} element={<ForgotPassword />} />
         <Route path={ROUTE.AUTH.VERIFY_ACCOUNT_EMAIL} element={<VerifyAcountEmail />} />
         <Route path={ROUTE.AUTH.RESET_PASSWORD} element={<ResetPassword />} />
-
-        {/* Client protected routes */}
-        <Route element={<ProtectedRoute redirectPath={ROUTE.AUTH.LOGIN} />}>
-          <Route path={ROUTE.PROFILE.ROOT} element={<LayoutClient />}>
-            <Route index element={<Profile />} />
-            <Route path='edit' element={<ProfileEdit />} />
-          </Route>
-        </Route>
+        <Route path={ROUTE.AUTH.BANNED} element={<Banned />} />
 
         {/* Admin protected routes */}
         <Route element={<ProtectedRoute redirectPath={ROUTE.AUTH.LOGIN} />}>
diff --git a/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts b/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts
index c025198..29802c6 100644
--- a/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts
+++ b/frontend/src/hooks/tanstack-query/auth/use-query-auth.ts
@@ -1,4 +1,6 @@
-import { useMutation, useQuery } from '@tanstack/react-query'
+import { useEffect } from 'react'
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { type AxiosError } from 'axios'
 import { useNavigate } from 'react-router-dom'
 import { type z } from 'zod'
@@ -18,6 +20,7 @@ import {
   type LoginApiResponse,
   type ResetPasswordReq
 } from '@/models/interface/auth.interface'
+import { type UserRole } from '@/models/user/types'
 
 // Login
 export const useLoginAuth = () => {
@@ -26,8 +29,19 @@ export const useLoginAuth = () => {
     mutationKey: [MUTATION_KEYS.login],
     mutationFn: (data: Account) => authApi.login(data),
     onSuccess: (response: LoginApiResponse) => {
-      processLoginSuccess(response, navigate)
-      toastifyCommon.success('Đăng nhập thành công')
+      const user = response.data?.user
+      const userStatus = user?.status || 'ACTIVE'
+
+      if (userStatus === 'ACTIVE') {
+        processLoginSuccess(response, navigate)
+        toastifyCommon.success('Đăng nhập thành công')
+      } else if (userStatus === 'INACTIVE') {
+        toastifyCommon.error('Tài khoản chưa được xác thực!')
+        navigate(ROUTE.AUTH.VERIFY_ACCOUNT_EMAIL, { state: { email: user?.email } })
+      } else if (userStatus === 'BANNED') {
+        toastifyCommon.error('Tài khoản của bạn đã bị khóa!')
+        navigate(ROUTE.AUTH.BANNED)
+      }
     },
     onError: (error: AxiosError, variables) => {
       const errorResponse = error.response?.data as LoginErrorResponse
@@ -116,13 +130,63 @@ export const useResetPasswordAuth = () => {
 
 export const useUserInfo = () => {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated)
+  const updateUser = useAuthStore((state) => state.updateUser)
 
-  return useQuery({
+  const query = useQuery({
     queryKey: [QUERY_KEYS.userInfo],
     queryFn: async () => {
-      const userData = await authApi.getUserInfo()
+      const userData = await authApi.getUserInfo() as Account
       return userData
     },
     enabled: isAuthenticated
   })
+
+  useEffect(() => {
+    if (query.data) {
+      // Map Account to UserResponseType structure
+      const account = query.data
+      updateUser({
+        userId: account.id || '',
+        fullName: account.fullName || '',
+        email: account.email || '',
+        phone: account.phone,
+        location: account.location,
+        avatarUrl: account.avatarUrl,
+        roleName: account.roleName as UserRole
+      })
+    }
+  }, [query.data, updateUser])
+
+  return query
+}
+
+export const useUpdateProfile = () => {
+  const queryClient = useQueryClient()
+  const updateUser = useAuthStore((state) => state.updateUser)
+  const user = useAuthStore((state) => state.user)
+
+  return useMutation({
+    mutationKey: ['updateProfile'],
+    mutationFn: (data: Account) => authApi.updateProfile(data),
+    onSuccess: (res: any) => {
+      toastifyCommon.success('Cập nhật thông tin thành công!')
+      
+      // Sync the newly updated profile data into the authStore (LocalStorage)
+      const updatedProfile = res?.data || res
+      if (updatedProfile && user) {
+        updateUser({
+          ...user,
+          fullName: updatedProfile.fullName || user.fullName,
+          phone: updatedProfile.phone || user.phone,
+          location: updatedProfile.location || user.location,
+          avatarUrl: updatedProfile.avatarUrl || user.avatarUrl
+        })
+      }
+
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.userInfo] })
+    },
+    onError: (error: AxiosError) => {
+      handleError(error, 'Cập nhật thông tin thất bại')
+    }
+  })
 }
\ No newline at end of file
diff --git a/frontend/src/hooks/users/use-users.ts b/frontend/src/hooks/users/use-users.ts
index 403a672..71d466e 100644
--- a/frontend/src/hooks/users/use-users.ts
+++ b/frontend/src/hooks/users/use-users.ts
@@ -72,24 +72,12 @@ export const useDeleteUser = () => {
 }
 
 export const useBanUser = () => {
-  const queryClient = useQueryClient()
+  // const queryClient = useQueryClient()
   return useMutation({
     mutationKey: [MUTATION_KEYS.banUser],
     mutationFn: ({ id, reason }: { id: string; reason: string }) => usersApi.banUser(id, reason),
-    onSuccess: (_, variables) => {
+    onSuccess: () => {
       toastifyCommon.success('Khóa tài khoản thành công')
-      queryClient.setQueriesData<UsersListResponse>({ queryKey: [QUERY_KEYS.users] }, (oldData) => {
-        if (!oldData) return oldData
-        return {
-          ...oldData,
-          data: {
-            ...oldData.data,
-            items: oldData.data.items.map((user) =>
-              user.id === variables.id ? { ...user, status: 'banned' } : user
-            )
-          }
-        }
-      })
     },
     onError: (error) => {
       handleError(error, 'Khóa tài khoản thất bại')
@@ -98,24 +86,11 @@ export const useBanUser = () => {
 }
 
 export const useUnbanUser = () => {
-  const queryClient = useQueryClient()
   return useMutation({
     mutationKey: [MUTATION_KEYS.unbanUser],
     mutationFn: ({ id, reason }: { id: string; reason: string }) => usersApi.unbanUser(id, reason),
-    onSuccess: (_, variables) => {
+    onSuccess: () => {
       toastifyCommon.success('Kích hoạt tài khoản thành công')
-      queryClient.setQueriesData<UsersListResponse>({ queryKey: [QUERY_KEYS.users] }, (oldData) => {
-        if (!oldData) return oldData
-        return {
-          ...oldData,
-          data: {
-            ...oldData.data,
-            items: oldData.data.items.map((user) =>
-              user.id === variables.id ? { ...user, status: 'active' } : user
-            )
-          }
-        }
-      })
     },
     onError: (error) => {
       handleError(error, 'Kích hoạt tài khoản thất bại')
diff --git a/frontend/src/locales/vi/nav-bar.json b/frontend/src/locales/vi/nav-bar.json
index f0ef64f..2a7dc6c 100644
--- a/frontend/src/locales/vi/nav-bar.json
+++ b/frontend/src/locales/vi/nav-bar.json
@@ -1,5 +1,5 @@
 {
-  "dashboard": "Bảng điều khiển",
+  "dashboard": "Trang chủ",
   "analytics": "Phân tích",
   "overview": "Tổng quan",
   "sales": "Phân tích doanh thu",
@@ -23,7 +23,7 @@
   "system_status": "Trạng thái hệ thống",
   "online_secure": "Hoạt động & An toàn",
   "account": "Tài khoản",
-  "profile": "Hồ sơ cá nhân",
+  "profile": "Trang cá nhân",
   "edit_profile": "Chỉnh sửa hồ sơ",
   "logout": "Đăng xuất",
   "appointments": "Lịch hẹn tư vấn"
diff --git a/frontend/src/models/interface/auth.interface.ts b/frontend/src/models/interface/auth.interface.ts
index 542a093..7c5398e 100644
--- a/frontend/src/models/interface/auth.interface.ts
+++ b/frontend/src/models/interface/auth.interface.ts
@@ -1,6 +1,7 @@
 import type HttpStatusCode from '@/core/constants/http'
 
 import { type RoleSystem, type RoleUser } from '../types/role.type'
+import { type UserStatus } from '../user/types'
 
 import { type UserResponseType } from './user.interface'
 
@@ -47,7 +48,9 @@ export interface Account {
   dateOfBirth?: string
   location?: string
   subscription?: Subscription
+  subscriptions?: Subscription
   createdAt?: string
+  status?: UserStatus
 }
 
 // define the RegisterReponse interface
diff --git a/frontend/src/models/interface/authentication.txt b/frontend/src/models/interface/authentication.txt
new file mode 100644
index 0000000..efc93a6
--- /dev/null
+++ b/frontend/src/models/interface/authentication.txt
@@ -0,0 +1,19 @@
+Hãy viết mã xử lý luồng Xác thực (Authentication) bằng React (sử dụng TypeScript, Zustand làm state manager và Axios làm thư viện gọi API) tuân thủ chính xác theo cấu trúc API sau:
+
+1. Khi Login thành công, response trả về có dạng:
+response.data.data.accessToken (Lưu vào State của Zustand, không lưu localStorage)
+response.data.data.refreshToken (Lưu vào localStorage với key là 'rt_token')
+
+2. Viết Axios Request Interceptor để lấy accessToken từ Zustand store đính vào header 'Authorization: Bearer <token>' cho mỗi request.
+
+3. Viết Axios Response Interceptor xử lý lỗi 401 (Hết hạn Access Token):
+- Đóng băng request lỗi và xếp vào hàng đợi (Queue).
+- Tự động gọi API: POST '/auth/refresh-token' với body truyền lên bắt buộc là JSON Object có key dạng snake_case: { "refresh_token": localStorage.getItem('rt_token') }
+- Nếu thành công: Cập nhật accessToken mới vào Zustand, giải phóng hàng đợi và chạy lại các request cũ.
+- Nếu thất bại hoặc refresh token hết hạn: Xóa sạch token, chuyển hướng về '/login'.
+
+4. Viết luồng xử lý Silent Refresh tại file App.tsx khi người dùng nhấn F5 hoặc mở tab mới:
+- Dùng biến `isAppLoading` quản lý màn hình chờ.
+- Kiểm tra 'rt_token' trong localStorage, nếu có thì tự động gọi API POST '/auth/refresh-token' để lấy accessToken nạp vào Zustand store trước rồi mới set `isAppLoading = false`.
+
+Hãy viết code sạch, tối ưu, xử lý bất đồng bộ chuẩn xác và giải thích bằng comment ngắn gọn.
\ No newline at end of file
diff --git a/frontend/src/models/interface/user.interface.ts b/frontend/src/models/interface/user.interface.ts
index 9331063..7fc05d0 100644
--- a/frontend/src/models/interface/user.interface.ts
+++ b/frontend/src/models/interface/user.interface.ts
@@ -1,9 +1,12 @@
-import { type RoleSystem } from '../types/role.type'
+import { type UserStatus, type UserRole } from '../user/types'
 
 export interface UserResponseType {
   userId: string
   fullName: string
   email: string
-  roleName: RoleSystem
-  status?: string
+  avatarUrl?: string
+  phone?: string
+  location?: string
+  roleName: UserRole
+  status?: UserStatus
 }
diff --git a/frontend/src/models/lawyer/lawyer.type.ts b/frontend/src/models/lawyer/lawyer.type.ts
index 5303678..0c1554b 100644
--- a/frontend/src/models/lawyer/lawyer.type.ts
+++ b/frontend/src/models/lawyer/lawyer.type.ts
@@ -1,3 +1,7 @@
+import { type UserStatus, type UserRole } from "../user/types";
+
+type LawyerStatus = 'AVAILABLE' | 'BUSY' | 'OFFLINE';
+
 export interface LicenseInfo {
   isVerified: boolean;
   licenseFileUrl: string | null;
@@ -6,15 +10,27 @@ export interface LicenseInfo {
 }
 
 export interface LawyerDetail {
+  id: string;
+  email: string;
+  phone: string | null;
+  location?: string | null;
+  avatarUrl?: string | null;
+  avatar?: string | null;
+  name: string;
+  roleName: UserRole;
+  bio: string | null;
   averageRating: number;
-  careerHistory: string;
+  careerHistory: string | null;
   careerMilestones: string[];
   consultingFee: number;
   experienceYears: number;
+  successfulCases: number;
+  lawyerStatus: LawyerStatus;
+  status: UserStatus;
   licenseInfo: LicenseInfo;
-  name: string;
-  role: string;
   specializations: string[];
+  createdAt: string;
+  updatedAt: string;
 }
 
 export interface LawyerDetailResponse {
diff --git a/frontend/src/models/lawyer/list-lawyer.type.ts b/frontend/src/models/lawyer/list-lawyer.type.ts
index cd0b418..1ad7f4d 100644
--- a/frontend/src/models/lawyer/list-lawyer.type.ts
+++ b/frontend/src/models/lawyer/list-lawyer.type.ts
@@ -4,12 +4,13 @@ export interface Lawyer {
   id: string;
   fullName: string;
   avatar?: string | null;
-  careerHistory: string;
-  bio: string;
+  avatarUrl?: string | null;
+  careerHistory: string | null;
+  bio: string | null;
   averageRating: number;
   successfulCases: number;
   specializations: string[];
-  city: VietnamCity;
+  location: string | VietnamCity;
 }
 
 export interface Pagination {
diff --git a/frontend/src/models/user/types.ts b/frontend/src/models/user/types.ts
index 77ab028..4d22b74 100644
--- a/frontend/src/models/user/types.ts
+++ b/frontend/src/models/user/types.ts
@@ -1,6 +1,6 @@
 export type UserRole = 'ADMIN' | 'USER' | 'MODERATOR' | 'LAWYER'
 
-export type UserStatus = 'active' | 'inactive' | 'banned'
+export type UserStatus = 'ACTIVE' | 'INACTIVE' | 'BANNED'
 
 export type UserSortField = 'created_at' | 'updated_at' | 'email' | 'full_name'
 
diff --git a/frontend/src/pages/admin/users/index.tsx b/frontend/src/pages/admin/users/index.tsx
index 676c209..bc234e2 100644
--- a/frontend/src/pages/admin/users/index.tsx
+++ b/frontend/src/pages/admin/users/index.tsx
@@ -18,7 +18,7 @@ import {
   useUpdateUserRole
 } from '@/hooks/users/use-users'
 import { type UserItem } from '@/models/user/interfaces'
-import { type UserRole } from '@/models/user/types'
+import { type UserStatus, type UserRole } from '@/models/user/types'
 
 import { BanDialog } from './components/banDialog'
 import { DeleteDialog } from './components/deleteDialog'
@@ -230,7 +230,7 @@ export default function UsersPage() {
   }
 
   return (
-    <main className='p-6 md:p-10 space-y-6 bg-background-secondary/35 min-h-screen animate-in fade-in slide-in-from-bottom-2 duration-300'>
+    <main className='p-2 md:p-6 space-y-6 min-h-screen animate-in fade-in slide-in-from-bottom-2 duration-300'>
       {/* Top Header Section - Clean & Uncluttered Layout */}
       <section className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 pb-2'>
         <div>
@@ -424,21 +424,21 @@ export default function UsersPage() {
                   sortedUsersList.map((user) => {
                     // Custom status badge styles
                     const statusStyles = {
-                      active: {
+                      ACTIVE: {
                         label: 'Hoạt động',
-                        class: 'bg-success-primary/10 text-success-primary'
+                        class: 'text-success-primary'
                       },
-                      inactive: {
+                      INACTIVE: {
                         label: 'Chờ kích hoạt',
-                        class: 'bg-warning-primary/10 text-warning-primary'
+                        class: 'text-warning-primary'
                       },
-                      banned: {
+                      BANNED: {
                         label: 'Đã khóa',
-                        class: 'bg-error-primary/10 text-error-primary'
+                        class: 'text-error-primary'
                       }
                     }
 
-                    const userStatus = user.status || 'inactive'
+                    const userStatus = (user.status || 'INACTIVE').toUpperCase() as UserStatus
                     const currentStatusConfig = statusStyles[userStatus]
                     const isSelected = selectedUserIds.includes(user.id)
 
@@ -523,7 +523,7 @@ export default function UsersPage() {
                             </Button>
 
                             {/* Ban / Unban toggler */}
-                            {user.status === 'banned' ? (
+                            {user.status?.toUpperCase() === 'BANNED' ? (
                               <Button
                                 size='icon'
                                 variant='ghost'
diff --git a/frontend/src/pages/banned/Banned.tsx b/frontend/src/pages/banned/Banned.tsx
new file mode 100644
index 0000000..73cbd2b
--- /dev/null
+++ b/frontend/src/pages/banned/Banned.tsx
@@ -0,0 +1,88 @@
+import { Calendar, FileText, LogIn, ShieldAlert } from 'lucide-react'
+import { useLocation, useNavigate } from 'react-router-dom'
+
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { ROUTE } from '@/core/constants/path'
+
+
+export default function Banned() {
+  const location = useLocation()
+  const navigate = useNavigate()
+  
+  // Extract ban details from router state or search query parameters (from axios interceptor direct page reloads)
+  const queryParams = new URLSearchParams(location.search)
+  const banReason = (location.state as { banReason?: string })?.banReason || queryParams.get('reason') || 'Vi phạm điều khoản dịch vụ hệ thống.'
+  const bannedAt = (location.state as { bannedAt?: string })?.bannedAt || queryParams.get('at') || ''
+
+  const formattedDate = bannedAt 
+    ? new Date(bannedAt).toLocaleString('vi-VN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit'
+      })
+    : 'Không xác định'
+
+  return (
+    <div className='min-h-screen w-full flex items-center justify-center bg-background-primary p-4 relative overflow-hidden'>
+      {/* Decorative background glows */}
+      <div className='absolute top-1/4 left-1/4 w-96 h-96 bg-red-500/10 rounded-full blur-3xl -z-10' />
+      <div className='absolute bottom-1/4 right-1/4 w-96 h-96 bg-orange-500/10 rounded-full blur-3xl -z-10' />
+
+      <Card className='max-w-lg w-full p-8 space-y-6 text-center border-none shadow-2xl bg-background-secondary/40 backdrop-blur-xl relative overflow-hidden rounded-2xl'>
+        {/* Glow effect border header */}
+        <div className='absolute top-0 left-0 right-0 h-[3px] bg-gradient-to-r from-red-500 via-orange-500 to-yellow-500' />
+
+        {/* Banned Icon Header */}
+        <div className='flex flex-col items-center space-y-3 pt-2'>
+          <div className='w-16 h-16 rounded-full bg-red-500/10 text-red-500 flex items-center justify-center border border-red-500/25 animate-pulse shadow-lg shadow-red-500/10'>
+            <ShieldAlert className='w-8 h-8' />
+          </div>
+          <h1 className='text-h3 font-bold text-text-primary tracking-tight'>Tài khoản đã bị khóa</h1>
+          <p className='text-xs text-text-description uppercase tracking-wider font-semibold'>
+            Quy định bảo mật LegalAI
+          </p>
+        </div>
+
+        {/* Ban Details Container */}
+        <div className='space-y-4 bg-background-secondary/85 p-6 rounded-xl border border-border-secondary text-left'>
+          {/* Reason */}
+          <div className='space-y-1.5'>
+            <span className='text-xs text-text-description font-semibold flex items-center gap-1.5'>
+              <FileText className='w-3.5 h-3.5' /> Lý do khóa tài khoản:
+            </span>
+            <p className='text-sm text-text-primary leading-relaxed font-medium bg-red-500/5 p-3 rounded-lg border border-red-500/10 italic text-red-400'>
+              {banReason || 'Vi phạm điều khoản dịch vụ hệ thống.'}
+            </p>
+          </div>
+
+          {/* Time */}
+          <div className='space-y-1.5 pt-2 border-t border-border-secondary/50'>
+            <span className='text-xs text-text-description font-semibold flex items-center gap-1.5'>
+              <Calendar className='w-3.5 h-3.5' /> Thời gian khóa:
+            </span>
+            <p className='text-sm text-text-primary font-semibold'>
+              {formattedDate}
+            </p>
+          </div>
+        </div>
+
+        {/* Note / Action */}
+        <p className='text-xs text-text-description leading-relaxed px-4'>
+          Nếu bạn cho rằng đây là một sự nhầm lẫn, vui lòng liên hệ với bộ phận hỗ trợ khách hàng của LegalAI qua email <strong>support@legalai.vn</strong>.
+        </p>
+
+        <div className='pt-2'>
+          <Button 
+            onClick={() => navigate(ROUTE.AUTH.LOGIN)} 
+            className='w-full py-6 rounded-xl bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-500 hover:to-orange-500 text-white font-bold transition-all shadow-lg shadow-red-500/20 flex items-center justify-center gap-2 border-none'
+          >
+            <LogIn className='w-5 h-5' /> Quay lại đăng nhập
+          </Button>
+        </div>
+      </Card>
+    </div>
+  )
+}
diff --git a/frontend/src/pages/lawyers/profile/LawyerProfileEdit.tsx b/frontend/src/pages/lawyers/profile/LawyerProfileEdit.tsx
index c51b27f..e7d899f 100644
--- a/frontend/src/pages/lawyers/profile/LawyerProfileEdit.tsx
+++ b/frontend/src/pages/lawyers/profile/LawyerProfileEdit.tsx
@@ -33,8 +33,9 @@ export default function LawyerProfileEdit() {
       setLoading(true)
       try {
         const res = await lawyerApi.getLawyerDetail(currentUserId) as any
-        if (res && res.summary) {
-          const s = res.summary
+        const innerData = res?.data?.data || res?.data || res
+        if (innerData && innerData.summary) {
+          const s = innerData.summary
           setSpecialty(s.specializations?.join(', ') || '')
           setExperience(s.experienceYears ? `${s.experienceYears} năm` : '0 năm')
           setFee(s.consultingFee ? `${s.consultingFee.toLocaleString('vi-VN')} đ/giờ` : '0 đ/giờ')
diff --git a/frontend/src/pages/profile/Profile.tsx b/frontend/src/pages/profile/Profile.tsx
index 337d92d..43d4550 100644
--- a/frontend/src/pages/profile/Profile.tsx
+++ b/frontend/src/pages/profile/Profile.tsx
@@ -1,83 +1,201 @@
 import { useState } from 'react'
 
-import { Camera, Mail, MapPin, Phone } from 'lucide-react'
+import { Camera, MapPin, Briefcase, Star, ArrowRight, Phone, Calendar, Clock, CreditCard } from 'lucide-react'
+
 
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Button } from '@/components/ui/button'
-import { Card, CardDescription, CardTitle } from '@/components/ui/card'
+import { Card } from '@/components/ui/card'
 import FileUpload from '@/components/upload-file/file-upload'
+import { getInitials } from '@/core/helpers/get-initials'
 import { useUserInfo } from '@/hooks/tanstack-query/auth/use-query-auth'
-import AccountSetting from '@/pages/profile/components/account-setting'
-import RecentActivity from '@/pages/profile/components/recent-activity'
 
-export default function Profile() {
+import ProfileEditDialog from './components/profile-edit-dialog'
 
+// Static array for Call-To-Action cards
+const CTA_CARDS = [
+  {
+    title: 'Sẵn sàng làm việc',
+    description: 'Hiển thị cho các nhà tuyển dụng thấy bạn đã sẵn sàng làm việc.'
+  },
+  {
+    title: 'Chia sẻ bài đăng',
+    description: 'Chia sẻ những tin tức mới nhất để kết nối với mọi người.'
+  },
+  {
+    title: 'Cập nhật hồ sơ',
+    description: 'Giúp hồ sơ luôn mới để người xem hiểu rõ hơn về bạn.'
+  }
+]
+
+export default function Profile() {
+  const [isEditOpen, setIsEditOpen] = useState(false)
   const { data: user } = useUserInfo()
-  const [isEditing, setIsEditing] = useState(false)
 
   const handleAvatarUpload = (files: FileList | null) => {
     if (files && files[0]) {
       // TODO: handle upload or preview here
-      // Example: uploadAvatar(files[0])
-      // For now, just log
     }
   }
 
-  const getInitials = (name: string) => {
-    return name
-      .split(' ')
-      .map((n) => n[0])
-      .join('')
-      .toUpperCase()
-  }
-
   return (
-    <div className='max-w-5xl mx-auto px-4 py-10'>
-      <div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
-        <Card className='col-span-1 flex flex-col items-center p-0 overflow-hidden'>
-          <div className='w-full h-28 bg-gradient-to-r from-blue-500 to-purple-500 relative flex items-center justify-center'>
-            <div className='absolute left-1/2 top-full -translate-x-1/2 -translate-y-1/2'>
-              <Avatar className='h-24 w-24 border-4 border-white shadow-lg'>
-                <AvatarImage src='/images/avatar.png' alt={user?.fullName} />
-                <AvatarFallback className='text-lg'>{getInitials(user?.fullName || '')}</AvatarFallback>
+    <div className='space-y-6 mx-auto'>
+      {/* Profile Header Card */}
+      <Card className='w-full overflow-hidden text-left bg-background-primary border-none rounded-none sm:rounded-2xl'>
+        {/* Banner with colorful gradient */}
+        <div className='w-full h-44 md:h-60 bg-gradient-to-r from-amber-400 via-orange-400 to-sky-400 relative group'>
+          {/* Edit Banner Button */}
+          <button className='absolute top-4 right-4 h-12 w-12 rounded-full bg-white/20 hover:bg-white/30 backdrop-blur-md flex items-center justify-center text-white transition-all shadow-sm cursor-pointer border-none' aria-label="Edit banner">
+            <Camera className='w-6 h-6' />
+          </button>
+        </div>
+
+        {/* Profile Details Area */}
+        <div className='px-6 md:px-10 pb-8 relative'>
+          {/* Avatar - overlaps the banner */}
+          <div className='absolute -top-16 md:-top-20 left-1/2 -translate-x-1/2 md:left-10 md:translate-x-0 z-10'>
+            <div className='relative group'>
+              <Avatar className='h-28 w-28 md:h-36 md:w-36 border-4 border-background-primary shadow-md bg-background-primary rounded-full overflow-hidden'>
+                <AvatarImage src={user?.avatarUrl || '/images/avatar.png'} alt={user?.fullName} />
+                <AvatarFallback className='text-xl font-bold bg-background-secondary text-text-secondary'>
+                  {getInitials(user?.fullName || '')}
+                </AvatarFallback>
               </Avatar>
+              {/* Upload avatar overlay */}
+              <FileUpload onChange={handleAvatarUpload} ariaLabel='Upload avatar'>
+                <div className='absolute inset-0 bg-black/40 rounded-full opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white cursor-pointer'>
+                  <Camera className='w-6 h-6' />
+                </div>
+              </FileUpload>
             </div>
           </div>
-          <div className='mt-16 w-full flex flex-col items-center px-6 pb-8'>
-            <CardTitle className='text-2xl text-center'>{user?.fullName}</CardTitle>
-            <CardDescription className='text-base text-center'>{user?.email}</CardDescription>
-            <div className='flex flex-col gap-2 mt-6 w-full'>
-              <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 justify-center'>
-                <Mail className='h-4 w-4' />
-                <span>{user?.email}</span>
+
+          {/* Grid layout for left/right content */}
+          <div className='grid grid-cols-1 lg:grid-cols-12 gap-6 pt-16 md:pt-20'>
+            {/* Left Column: Name, Subtitle, Location, Actions */}
+            <div className='lg:col-span-7 space-y-4 text-center md:text-left'>
+              <div className='space-y-2 flex flex-col items-center md:items-start'>
+                <h1 className='text-h2 md:text-h2 text-text-main tracking-tight'>
+                  {user?.fullName || 'User'}
+                </h1>
+                <p className='text-sm md:text-base font-semibold text-text-main'>
+                  {user?.roleName === 'LAWYER' ? 'Luật sư tư vấn' : user?.roleName === 'ADMIN' ? 'Quản trị viên' : 'Khách hàng'}
+                </p>
+                
+                {/* Meta details list */}
+                <div className='text-xs md:text-sm text-text-description flex flex-wrap justify-center md:justify-start gap-x-4 gap-y-1.5 pt-1'>
+                  <span className='flex items-center gap-1.5'>
+                    <MapPin className='w-4 h-4 text-text-description shrink-0' /> 
+                    {user?.location || 'Chưa thiết lập vị trí'}
+                  </span>
+                  {user?.phone && (
+                    <span className='flex items-center gap-1.5'>
+                      <Phone className='w-4 h-4 text-text-description shrink-0' />
+                      {user.phone}
+                    </span>
+                  )}
+                  {user?.dateOfBirth && (
+                    <span className='flex items-center gap-1.5'>
+                      <Calendar className='w-4 h-4 text-text-description shrink-0' />
+                      {new Date(user.dateOfBirth).toLocaleDateString('vi-VN')}
+                    </span>
+                  )}
+                  {user?.createdAt && (
+                    <span className='flex items-center gap-1.5'>
+                      <Clock className='w-4 h-4 text-text-description shrink-0' />
+                      {`Gia nhập: ${new Date(user.createdAt).toLocaleDateString('vi-VN')}`}
+                    </span>
+                  )}
+                </div>
               </div>
-              <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 justify-center'>
-                <Phone className='h-4 w-4' />
-                <span>{'0912832123'}</span>
+
+              {/* Action Buttons */}
+              <div className='flex flex-wrap items-center justify-center md:justify-start gap-3 pt-2'>
+                <Button 
+                  onClick={() => setIsEditOpen(true)}
+                >
+                  Edit Profile
+                </Button>
+                <Button 
+                  variant='outline'
+                >
+                  Settings
+                </Button>
+              </div>
+            </div>
+
+            {/* Right Column: Current Role & Skills */}
+            <div className='lg:col-span-5 flex flex-col justify-start items-center lg:items-end gap-5 text-center lg:text-right'>
+              <div className='flex flex-wrap justify-center lg:justify-end gap-x-6 gap-y-3'>
+                {/* Current Role Block */}
+                <div className='space-y-1.5 flex flex-col items-center lg:items-end'>
+                  <div className='flex items-center gap-1.5 text-xs font-semibold text-text-description tracking-wider justify-center lg:justify-end'>
+                    <span>Vai trò</span>
+                    <Briefcase className='w-3.5 h-3.5 text-text-description' />
+                  </div>
+                  <div className='inline-flex items-center bg-background-secondary text-text-secondary text-xs font-semibold px-4 py-1.5 rounded-full'>
+                    {user?.roleName === 'LAWYER' ? 'Chuyên gia Pháp lý' : user?.roleName === 'ADMIN' ? 'Hệ thống Quản trị' : 'Thành viên sử dụng'}
+                  </div>
+                </div>
+
+                {/* Subscription Plan Block */}
+                <div className='space-y-1.5 flex flex-col items-center lg:items-end'>
+                  <div className='flex items-center gap-1.5 text-xs font-semibold text-text-description tracking-wider justify-center lg:justify-end'>
+                    <span>Gói dịch vụ</span>
+                    <CreditCard className='w-3.5 h-3.5 text-text-description' />
+                  </div>
+                  <div className='inline-flex items-center bg-primary/10 text-primary text-xs font-semibold px-4 py-1.5 rounded-full'>
+                    {user?.subscription?.planName || user?.subscriptions?.planName || 'Thành viên Thường'}
+                  </div>
+                </div>
               </div>
-              <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400 justify-center'>
-                <MapPin className='h-4 w-4' />
-                <span>Location not set</span>
+
+              {/* Skills Block */}
+              <div className='space-y-2 flex flex-col items-center lg:items-end w-full'>
+                <div className='flex items-center gap-1.5 text-xs font-semibold text-text-description tracking-wider justify-center lg:justify-end'>
+                  <span>Kỹ năng / Lĩnh vực</span>
+                  <Star className='w-3.5 h-3.5 text-text-description' />
+                </div>
+                <div className='flex flex-wrap justify-center lg:justify-end gap-2'>
+                  {user?.roleName === 'LAWYER' ? (
+                    ['Tư vấn Luật', 'Hôn nhân & Gia đình', 'Hình sự', 'Dân sự', 'Hợp đồng'].map(skill => (
+                      <span key={skill} className='bg-amber-50 text-amber-900 border border-amber-100 text-xs font-semibold px-3 py-1 rounded-full whitespace-nowrap'>
+                        {skill}
+                      </span>
+                    ))
+                  ) : (
+                    ['Tra cứu luật', 'Hỏi đáp AI', 'Đặt lịch Luật sư', 'Lưu biểu mẫu'].map(skill => (
+                      <span key={skill} className='bg-amber-50 text-amber-900 border border-amber-100 text-xs font-semibold px-3 py-1 rounded-full whitespace-nowrap'>
+                        {skill}
+                      </span>
+                    ))
+                  )}
+                </div>
               </div>
             </div>
-            <FileUpload onChange={handleAvatarUpload} ariaLabel='Upload avatar'>
-              <Button
-                variant='outline'
-                size='icon'
-                className='rounded-full mt-6'
-                aria-label='Upload avatar'
-                tabIndex={0}
-              >
-                <Camera className='h-4 w-4' />
-              </Button>
-            </FileUpload>
           </div>
-        </Card>
+        </div>
+      </Card>
 
-        <AccountSetting user={user} isEditing={isEditing} setIsEditing={setIsEditing} />
+      {/* 3 Call-To-Action Cards */}
+      <div className='grid grid-cols-1 md:grid-cols-3 gap-4 px-10'>
+        {CTA_CARDS.map((card, idx) => (
+          <div 
+            key={idx} 
+            className='bg-background-secondary p-4 rounded-sm flex items-center justify-between transition-all group cursor-pointer border-none'
+          >
+            <div className='space-y-1 text-left'>
+              <h4 className='text-small font-semibold text-text-primary'>{card.title}</h4>
+              <p className='text-sm text-text-description leading-normal'>{card.description}</p>
+            </div>
+            <button className='h-8 w-8 rounded-full border border-blue-200 bg-background-primary group-hover:bg-blue-50 text-blue-600 flex items-center justify-center transition-all shrink-0 ml-4 cursor-pointer'>
+              <ArrowRight className='w-4 h-4' />
+            </button>
+          </div>
+        ))}
       </div>
 
-      <RecentActivity />
+      <ProfileEditDialog user={user} isOpen={isEditOpen} onOpenChange={setIsEditOpen} />
     </div>
   )
 }
diff --git a/frontend/src/pages/profile/ProfileEdit.tsx b/frontend/src/pages/profile/ProfileEdit.tsx
deleted file mode 100644
index 0d83977..0000000
--- a/frontend/src/pages/profile/ProfileEdit.tsx
+++ /dev/null
@@ -1,151 +0,0 @@
-import { useState, useEffect } from 'react'
-
-import { User, Save } from 'lucide-react'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import toastifyCommon from '@/core/lib/toastify-common'
-import { authApi } from '@/core/services/auth.service'
-import { useAuthStore } from '@/core/store/features/auth/authStore'
-
-export default function ProfileEdit() {
-  const user = useAuthStore((state) => state.user)
-  const updateUser = useAuthStore((state) => state.updateUser)
-
-  const [fullName, setFullName] = useState(user?.fullName || '')
-  const [phone, setPhone] = useState('')
-  const [location, setLocation] = useState('')
-  const [email, setEmail] = useState(user?.email || '')
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    async function loadProfile() {
-      setLoading(true)
-      try {
-        const res = await authApi.getUserInfo() as any
-        if (res && res.data) {
-          const profile = res.data
-          setFullName(profile.fullName || '')
-          setEmail(profile.email || '')
-          setPhone(profile.phone || '')
-          setLocation(profile.location || '')
-        }
-      } catch (err) {
-        console.error('Failed to load profile:', err)
-      } finally {
-        setLoading(false)
-      }
-    }
-    loadProfile()
-  }, [])
-
-  const handleSave = async () => {
-    if (!fullName.trim()) {
-      toastifyCommon.error('Họ tên không được để trống!')
-      return
-    }
-
-    try {
-      await authApi.updateProfile({
-        fullName,
-        phone,
-        location
-      })
-
-      if (user) {
-        updateUser({
-          ...user,
-          fullName
-        })
-      }
-      toastifyCommon.success('Cập nhật thông tin cá nhân thành công!')
-    } catch (err) {
-      console.error(err)
-      toastifyCommon.error('Cập nhật thông tin thất bại. Vui lòng thử lại!')
-    }
-  }
-
-  if (loading) {
-    return (
-      <div className='flex items-center justify-center min-h-[400px] bg-background-primary'>
-        <div className='w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin'></div>
-      </div>
-    )
-  }
-
-  return (
-    <div className='max-w-xl mx-auto lg:p-6 p-4 space-y-6'>
-      <div>
-        <h1 className='text-h4 font-bold text-text-main flex items-center gap-2'>
-          <User className='w-6 h-6 text-primary' />
-          Chỉnh sửa thông tin cá nhân
-        </h1>
-        <p className='text-xs text-text-description mt-1'>
-          Quản lý thông tin họ tên, số điện thoại liên lạc và địa chỉ của bạn trên hệ thống.
-        </p>
-      </div>
-
-      <Card className='p-6 border border-border-secondary bg-background-primary shadow-sm space-y-5 text-left'>
-        <CardTitle className='text-sm uppercase tracking-wider text-text-main font-bold border-b border-border-secondary pb-3'>
-          Thông tin tài khoản
-        </CardTitle>
-
-        <div className='space-y-4'>
-          <div className='space-y-1.5'>
-            <label className='text-xs font-semibold text-text-main'>Họ và tên</label>
-            <Input
-              type='text'
-              value={fullName}
-              onChange={(e) => setFullName(e.target.value)}
-              className='rounded-lg text-sm bg-background-primary border-border-secondary'
-              placeholder='Họ và tên đầy đủ'
-            />
-          </div>
-
-          <div className='space-y-1.5'>
-            <label className='text-xs font-semibold text-text-main'>Email tài khoản</label>
-            <Input
-              type='email'
-              value={email}
-              disabled
-              className='rounded-lg text-sm bg-slate-50 border-border-secondary cursor-not-allowed opacity-75'
-            />
-          </div>
-
-          <div className='space-y-1.5'>
-            <label className='text-xs font-semibold text-text-main'>Số điện thoại</label>
-            <Input
-              type='text'
-              value={phone}
-              onChange={(e) => setPhone(e.target.value)}
-              className='rounded-lg text-sm bg-background-primary border-border-secondary'
-              placeholder='Số điện thoại liên lạc'
-            />
-          </div>
-
-          <div className='space-y-1.5'>
-            <label className='text-xs font-semibold text-text-main'>Địa chỉ sinh sống (Tỉnh/Thành phố)</label>
-            <Input
-              type='text'
-              value={location}
-              onChange={(e) => setLocation(e.target.value)}
-              className='rounded-lg text-sm bg-background-primary border-border-secondary'
-              placeholder='Ví dụ: Hà Nội, Việt Nam'
-            />
-          </div>
-        </div>
-
-        <div className='flex justify-end pt-2 border-t border-border-secondary pt-4'>
-          <Button
-            onClick={handleSave}
-            className='bg-primary hover:bg-primary-600 text-white rounded-lg flex items-center gap-2 px-4 shadow-sm'
-          >
-            <Save className='w-4 h-4' />
-            <span>Lưu thông tin</span>
-          </Button>
-        </div>
-      </Card>
-    </div>
-  )
-}
diff --git a/frontend/src/pages/profile/components/account-setting.tsx b/frontend/src/pages/profile/components/account-setting.tsx
deleted file mode 100644
index cf41e28..0000000
--- a/frontend/src/pages/profile/components/account-setting.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { useState, useEffect } from 'react'
-
-import { useQueryClient } from '@tanstack/react-query'
-
-import { Button } from '@/components/ui/button'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
-import { QUERY_KEYS } from '@/core/helpers/key-tanstack'
-import toastifyCommon from '@/core/lib/toastify-common'
-import { authApi } from '@/core/services/auth.service'
-import { useAuthStore } from '@/core/store/features/auth/authStore'
-import { type Account } from '@/models/interface/auth.interface'
-
-interface AccountSettingProps {
-  user: Account | undefined
-  isEditing: boolean
-  setIsEditing: (isEditing: boolean) => void
-}
-
-export default function AccountSetting({ user, isEditing, setIsEditing }: AccountSettingProps) {
-  const globalUser = useAuthStore((state) => state.user)
-  const updateUser = useAuthStore((state) => state.updateUser)
-  const queryClient = useQueryClient()
-
-  const [fullName, setFullName] = useState('')
-  const [phone, setPhone] = useState('')
-  const [submitting, setSubmitting] = useState(false)
-
-  useEffect(() => {
-    if (user) {
-      setFullName(user.fullName || '')
-      setPhone(user.phone || '0912832123')
-    }
-  }, [user])
-
-  const handleToggleEdit = async () => {
-    if (isEditing) {
-      // Save profile changes
-      if (!fullName.trim()) {
-        toastifyCommon.error('Họ tên không được để trống!')
-        return
-      }
-
-      setSubmitting(true)
-      try {
-        await authApi.updateProfile({
-          fullName,
-          phone,
-          location: user?.location
-        })
-
-        if (globalUser) {
-          updateUser({
-            ...globalUser,
-            fullName
-          })
-        }
-
-        queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.userInfo] })
-        toastifyCommon.success('Cập nhật thông tin cá nhân thành công!')
-        setIsEditing(false)
-      } catch (err) {
-        console.error(err)
-        toastifyCommon.error('Cập nhật thông tin thất bại. Vui lòng thử lại!')
-      } finally {
-        setSubmitting(false)
-      }
-    } else {
-      setIsEditing(true)
-    }
-  }
-
-  return (
-    <Card className='col-span-1 md:col-span-2 text-left'>
-      <CardHeader>
-        <CardTitle>Account Settings</CardTitle>
-        <CardDescription>Manage your account settings and preferences</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <Tabs defaultValue='profile' className='w-full'>
-          <TabsList className='grid w-full grid-cols-2 mb-6'>
-            <TabsTrigger value='profile'>Profile</TabsTrigger>
-            <TabsTrigger value='security'>Security</TabsTrigger>
-          </TabsList>
-          <TabsContent value='profile' className='space-y-4'>
-            <div className='space-y-4'>
-              <div className='space-y-2'>
-                <Label htmlFor='name'>Full Name</Label>
-                <div className='flex gap-2'>
-                  <Input
-                    id='name'
-                    value={fullName}
-                    onChange={(e) => setFullName(e.target.value)}
-                    disabled={!isEditing}
-                  />
-                  <Button variant='outline' disabled={submitting} onClick={handleToggleEdit}>
-                    {isEditing ? (submitting ? 'Saving...' : 'Save') : 'Edit'}
-                  </Button>
-                </div>
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='email'>Email</Label>
-                <Input id='email' defaultValue={user?.email} disabled />
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='phone'>Phone</Label>
-                <Input
-                  id='phone'
-                  value={phone}
-                  onChange={(e) => setPhone(e.target.value)}
-                  disabled={!isEditing}
-                />
-              </div>
-            </div>
-          </TabsContent>
-          <TabsContent value='security' className='space-y-4'>
-            <div className='space-y-4'>
-              <div className='space-y-2'>
-                <Label htmlFor='current-password'>Current Password</Label>
-                <Input id='current-password' type='password' />
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='new-password'>New Password</Label>
-                <Input id='new-password' type='password' />
-              </div>
-              <div className='space-y-2'>
-                <Label htmlFor='confirm-password'>Confirm New Password</Label>
-                <Input id='confirm-password' type='password' />
-              </div>
-              <Button className='w-full'>Update Password</Button>
-            </div>
-          </TabsContent>
-        </Tabs>
-      </CardContent>
-    </Card>
-  )
-}
diff --git a/frontend/src/pages/profile/components/profile-edit-dialog.tsx b/frontend/src/pages/profile/components/profile-edit-dialog.tsx
new file mode 100644
index 0000000..ac97f13
--- /dev/null
+++ b/frontend/src/pages/profile/components/profile-edit-dialog.tsx
@@ -0,0 +1,107 @@
+import { useRef } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useUpdateProfile } from '@/hooks/tanstack-query/auth/use-query-auth'
+import { type Account } from '@/models/interface/auth.interface'
+
+interface ProfileEditDialogProps {
+  user: Account | undefined
+  isOpen: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export default function ProfileEditDialog({ user, isOpen, onOpenChange }: ProfileEditDialogProps) {
+  const { mutate: updateProfile, isPending } = useUpdateProfile()
+
+  const nameRef = useRef<HTMLInputElement>(null)
+  const phoneRef = useRef<HTMLInputElement>(null)
+  const dobRef = useRef<HTMLInputElement>(null)
+  const locationRef = useRef<HTMLInputElement>(null)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    const fullName = nameRef.current?.value || user?.fullName
+    const phone = phoneRef.current?.value || ''
+    const dateOfBirth = dobRef.current?.value ? new Date(dobRef.current.value).toISOString() : undefined
+    const location = locationRef.current?.value || ''
+
+    // Sanitize payload: Joi validator on backend rejects 'null' values.
+    // Replace all null/undefined values with empty string or omit them.
+    const payload: Account = {
+      fullName: fullName || '',
+      phone: phone || '',
+      location: location || '',
+      avatarUrl: user?.avatarUrl || ''
+    }
+
+    if (dateOfBirth) {
+      payload.dateOfBirth = dateOfBirth
+    }
+
+    updateProfile(payload, {
+      onSuccess: () => {
+        onOpenChange(false)
+      }
+    })
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent className='sm:max-w-[480px] bg-background-primary border border-border-primary text-left rounded-2xl'>
+        <DialogHeader>
+          <DialogTitle className='text-h2 font-bold text-text-main'>Chỉnh sửa thông tin</DialogTitle>
+          <DialogDescription className='text-xs text-text-description'>Cập nhật thông tin cá nhân của bạn</DialogDescription>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className='space-y-4 py-2'>
+          <div className='space-y-2'>
+            <Label htmlFor='name' className='text-xs font-semibold text-text-secondary'>Họ và tên</Label>
+            <Input ref={nameRef} id='name' defaultValue={user?.fullName} placeholder='Nhập họ tên' required />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='email' className='text-xs font-semibold text-text-secondary'>Email</Label>
+            <Input id='email' defaultValue={user?.email} disabled className='bg-background-secondary cursor-not-allowed opacity-80' />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='phone' className='text-xs font-semibold text-text-secondary'>Số điện thoại</Label>
+            <Input ref={phoneRef} id='phone' defaultValue={user?.phone || ''} placeholder='Chưa thiết lập số điện thoại' />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='dob' className='text-xs font-semibold text-text-secondary'>Ngày sinh</Label>
+            <Input 
+              ref={dobRef}
+              id='dob' 
+              type='date'
+              defaultValue={user?.dateOfBirth ? user.dateOfBirth.split('T')[0] : ''} 
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='location' className='text-xs font-semibold text-text-secondary'>Địa chỉ / Vị trí</Label>
+            <Input 
+              ref={locationRef}
+              id='location' 
+              defaultValue={user?.location || ''} 
+              placeholder='Ví dụ: Hà Nội, Việt Nam'
+            />
+          </div>
+
+          <DialogFooter className='pt-4 border-t border-border-secondary gap-2 flex-row justify-end'>
+            <Button type='button' variant='outline' onClick={() => onOpenChange(false)} disabled={isPending}>
+              Hủy
+            </Button>
+            <Button type='submit' disabled={isPending} className='px-6'>
+              {isPending ? 'Đang lưu...' : 'Lưu thay đổi'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontend/src/pages/profile/components/recent-activity.tsx b/frontend/src/pages/profile/components/recent-activity.tsx
index 6fde326..4a8611e 100644
--- a/frontend/src/pages/profile/components/recent-activity.tsx
+++ b/frontend/src/pages/profile/components/recent-activity.tsx
@@ -2,7 +2,7 @@ import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/com
 
 export default function RecentActivity() {
   return (
-    <Card className='mt-10'>
+    <Card className='col-span-1 h-full'>
       <CardHeader>
         <CardTitle>Recent Activity</CardTitle>
         <CardDescription>Your recent activities and interactions</CardDescription>
diff --git a/frontend/src/pages/users/appointments/Appointments.tsx b/frontend/src/pages/users/appointments/Appointments.tsx
index dde81e6..2409a16 100644
--- a/frontend/src/pages/users/appointments/Appointments.tsx
+++ b/frontend/src/pages/users/appointments/Appointments.tsx
@@ -23,6 +23,7 @@ import { useAppointmentStore } from '@/core/store/features/appointments'
 interface Attachment {
   name: string
   size: string
+  url?: string
 }
 
 interface AppointmentRequest {
@@ -107,11 +108,11 @@ export default function Appointments() {
   }
 
   return (
-    <div className='p-4 space-y-6 max-w-6xl mx-auto text-left'>
+    <div className='p-4 space-y-6 mx-auto text-left'>
       {/* Title Header */}
       <div className='flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-border-secondary pb-5'>
         <div>
-          <h1 className='text-h2 font-bold text-text-primary tracking-tight'>
+          <h1 className='text-h3 text-text-main'>
             {t('common.appointments.title')}
           </h1>
           <p className='text-sm text-text-secondary mt-1.5'>
@@ -412,7 +413,12 @@ export default function Appointments() {
                           <Button
                             variant='ghost'
                             size='sm'
-                            className='h-7 w-7 p-0 rounded-full hover:bg-background-tertiary text-text-description hover:text-text-primary shrink-0'
+                            className={`h-7 w-7 p-0 rounded-full hover:bg-background-tertiary text-text-description hover:text-text-primary shrink-0 ${!file.url ? 'pointer-events-none opacity-50' : ''}`}
+                            onClick={() => {
+                              if (file.url) {
+                                window.open(file.url, '_blank', 'noopener,noreferrer')
+                              }
+                            }}
                           >
                             <Download className='w-3.5 h-3.5' />
                           </Button>
diff --git a/frontend/src/pages/users/dashboard/components/main-menu.tsx b/frontend/src/pages/users/dashboard/components/main-menu.tsx
index 5fbf2c7..9c53d47 100644
--- a/frontend/src/pages/users/dashboard/components/main-menu.tsx
+++ b/frontend/src/pages/users/dashboard/components/main-menu.tsx
@@ -1,5 +1,5 @@
 import { Lightbulb, TrendingUp } from 'lucide-react'
-import { useNavigate } from 'react-router-dom'
+import { Link, useNavigate } from 'react-router-dom'
 
 import { DASHBOARD_ACTIVITY, DASHBOARD_DATA } from '@/_mocks/data-dashboard'
 import { RECENT_DOCUMENTS, FEATURED_UPDATE } from '@/_mocks/recent.document.mock'
@@ -73,7 +73,7 @@ export default function MainMenu() {
       </section>
 
       {/* Main Content Grid */}
-      <section className='grid grid-cols-1 gap-8 lg:grid-cols-3'>
+      <section className='grid grid-cols-1 gap-8 lg:grid-cols-3 px-2'>
         {/* Left Column: Recent Updates */}
         <div className='lg:col-span-2 space-y-4'>
           <div className='flex items-center justify-between'>
@@ -130,7 +130,9 @@ export default function MainMenu() {
                   variant='link'
                   className='text-primary font-bold p-0 flex items-center gap-1 hover:gap-2 transition-all h-auto text-btn-small'
                 >
-                  {FEATURED_UPDATE.actionText} →
+                  <Link to={'/legal'}>
+                    {FEATURED_UPDATE.actionText} →
+                  </Link>
                 </Button>
               </div>
             </FadeUp>
diff --git a/frontend/src/pages/users/dashboard/dashboard-ui-refactor.md b/frontend/src/pages/users/dashboard/dashboard-ui-refactor.md
deleted file mode 100644
index e69de29..0000000
diff --git a/frontend/src/pages/users/lawyer/LawyerList.tsx b/frontend/src/pages/users/lawyer/LawyerList.tsx
index fc01d38..ca562e5 100644
--- a/frontend/src/pages/users/lawyer/LawyerList.tsx
+++ b/frontend/src/pages/users/lawyer/LawyerList.tsx
@@ -85,7 +85,7 @@ export default function LawyerList() {
       {/* Header Section */}
       <div className='flex-col md:flex-row md:items-end gap-4 pb-4 space-y-4'>
         <div className='w-full pb-4 border-b border-border-primary'>
-          <h1 className='text-h2 text-main mb-2 tracking-tight'>Danh bạ Luật sư</h1>
+          <h1 className='text-h2 font-semibold text-main mb-2 tracking-tight'>Danh bạ Luật sư</h1>
           <p className='text-text-description text-p'>Tìm kiếm chuyên gia pháp lý phù hợp với nhu cầu của bạn</p>
         </div>
 
@@ -176,63 +176,60 @@ export default function LawyerList() {
           <p className='text-small text-text-tertiary mt-1'>Vui lòng thay đổi từ khóa tìm kiếm hoặc bộ lọc.</p>
         </div>
       ) : (
-        <div className='space-y-8'>
-          <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4'>
-            {filteredLawyers.map((lawyer) => {
-              return (
-                <LawyerCard
-                  key={lawyer.id}
-                  lawyer={lawyer}
-                  onContact={handleOpenContact}
-                />
-              )
-            })}
-          </div>
+        <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4'>
+          {filteredLawyers.map((lawyer) => {
+            return (
+              <LawyerCard
+                key={lawyer.id}
+                lawyer={lawyer}
+                onContact={handleOpenContact}
+              />
+            )
+          })}
+        </div>
+      )}
 
-          {/* Pagination component */}
-          {pagination.totalPages && pagination.totalPages > 1 && (
-            <div className='flex items-center justify-center gap-2 pt-6 border-t border-border-primary'>
-              <Button
-                variant='ghost'
-                size='lg'
-                onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-                disabled={currentPage === 1}
-                className='h-9 text-xs rounded-full hover:bg-background-tertiary transition-colors cursor-pointer'
-              >
-                Trước
-              </Button>
- 
-              {Array.from({ length: pagination.totalPages }, (_, index) => {
-                const pageNum = index + 1
-                const isActive = pageNum === currentPage
-                return (
-                  <Button
-                    key={pageNum}
-                    variant={isActive ? 'default' : 'outline'}
-                    size='sm'
-                    onClick={() => setCurrentPage(pageNum)}
-                    className={`h-9 w-9 text-lg rounded-full cursor-pointer ${
-                      isActive
-                        ? 'bg-background-secondary text-main font-bold'
-                        : 'text-text-secondary hover:bg-background-tertiary hover:text-text-primary'
-                    }`}
-                  >
-                    {pageNum}
-                  </Button>
-                )
-              })}
- 
+      {/* Pagination component */}
+      {pagination.totalPages && pagination.totalPages > 1 && (
+        <div className='flex items-center justify-center gap-2 pt-6 border-t border-border-primary'>
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+            disabled={currentPage === 1}
+            className='h-9 px-4 rounded-full text-xs hover:bg-background-secondary transition-colors cursor-pointer'
+          >
+            Trước
+          </Button>
+
+          {Array.from({ length: pagination.totalPages }, (_, index) => {
+            const pageNum = index + 1
+            const isActive = pageNum === currentPage
+            return (
               <Button
-                variant='ghost'
-                size='lg'
-                onClick={() => setCurrentPage((prev) => Math.min(prev + 1, pagination.totalPages || 1))}
-                disabled={currentPage === pagination.totalPages}
-                className='h-9 text-xs rounded-full hover:bg-background-tertiary transition-colors cursor-pointer'
+                key={pageNum}
+                variant={isActive ? 'default' : 'outline'}
+                onClick={() => setCurrentPage(pageNum)}
+                className={`h-9 w-9 p-0 text-sm rounded-full cursor-pointer flex items-center justify-center font-medium ${
+                  isActive
+                    ? 'bg-primary text-white shadow-md shadow-primary/10 hover:opacity-90'
+                    : 'text-text-secondary hover:bg-background-secondary hover:text-text-primary'
+                }`}
               >
-                Sau
+                {pageNum}
               </Button>
-            </div>
-          )}
+            )
+          })}
+
+          <Button
+            variant='outline'
+            size='sm'
+            onClick={() => setCurrentPage((prev) => Math.min(prev + 1, pagination.totalPages || 1))}
+            disabled={currentPage === pagination.totalPages}
+            className='h-9 px-4 rounded-full text-xs hover:bg-background-secondary transition-colors cursor-pointer'
+          >
+            Sau
+          </Button>
         </div>
       )}
 
diff --git a/frontend/src/pages/users/lawyer/LawyerProfile.tsx b/frontend/src/pages/users/lawyer/LawyerProfile.tsx
index 3fcdb58..39e9457 100644
--- a/frontend/src/pages/users/lawyer/LawyerProfile.tsx
+++ b/frontend/src/pages/users/lawyer/LawyerProfile.tsx
@@ -1,39 +1,23 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useMemo } from 'react'
 
-import { ArrowLeft, Star, ShieldCheck, DollarSign, Briefcase, Award, MapPin, MessageSquare } from 'lucide-react'
+import { ArrowLeft, Star, ShieldCheck, DollarSign, MapPin, Mail, Phone, CheckCircle2 } from 'lucide-react'
 import { useParams, useNavigate } from 'react-router-dom'
 
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { getOptimizedImageUrl } from '@/core/helpers/image'
-import toastifyCommon from '@/core/lib/toastify-common'
-import { chatRequestApi } from '@/core/services/chat-request.service'
+import { cn } from '@/core/lib/utils'
 import { useLawyerDetail } from '@/hooks/lawyers/use-lawyer'
+import { type Lawyer } from '@/models/lawyer/list-lawyer.type'
+
+import { LawyerContactDialog } from './components/LawyerContactDialog'
 
 export default function LawyerProfile() {
   const { id } = useParams<{ id: string }>()
   const navigate = useNavigate()
-  const [isSending, setIsSending] = useState(false)
-  const [isSent, setIsSent] = useState(false)
-
-  const handleRequestConsultation = async () => {
-    if (!id) return
-    setIsSending(true)
-    try {
-      await chatRequestApi.createChatRequest({
-        lawyerId: id,
-        analysisId: ''
-      })
-      setIsSent(true)
-      toastifyCommon.success('Gửi yêu cầu tư vấn thành công! Luật sư sẽ liên hệ với bạn sớm nhất.')
-    } catch (err) {
-      console.error(err)
-      toastifyCommon.error('Gửi yêu cầu thất bại. Vui lòng thử lại sau.')
-    } finally {
-      setIsSending(false)
-    }
-  }
+  const [activeTab, setActiveTab] = useState<'bio' | 'specializations' | 'history' | 'reviews'>('bio')
+  const [isContactModalOpen, setIsContactModalOpen] = useState(false)
 
   useEffect(() => {
     window.scrollTo({ top: 0, behavior: 'auto' })
@@ -42,6 +26,52 @@ export default function LawyerProfile() {
   // Call API with React Query hook
   const { data: detailResponse, isLoading, error } = useLawyerDetail(id)
 
+  const detailSummary = detailResponse?.data?.summary
+
+  const contactLawyer = useMemo<Lawyer | null>(() => {
+    if (!detailSummary) return null
+    const rawUrl = detailSummary.avatarUrl || detailSummary.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=lawyer'
+    return {
+      id: id || '',
+      fullName: detailSummary.name || '',
+      avatar: rawUrl,
+      avatarUrl: getOptimizedImageUrl(rawUrl, 200),
+      careerHistory: detailSummary.careerHistory || '',
+      bio: detailSummary.bio || 'Chuyên gia tư vấn pháp lý chuyên nghiệp.',
+      averageRating: detailSummary.averageRating || 0,
+      successfulCases: detailSummary.successfulCases || 0,
+      specializations: detailSummary.specializations || [],
+      location: detailSummary.location || 'Việt Nam'
+    }
+  }, [id, detailSummary])
+
+  const mockReviews = useMemo(() => {
+    if (!detailSummary) return []
+    return [
+      {
+        id: 'r1',
+        userName: 'Nguyễn Văn Nam',
+        rating: 5,
+        date: '2026-06-15',
+        comment: `Luật sư ${detailSummary.name} tư vấn rất tận tâm, giải thích chi tiết các quy định pháp luật và đưa ra phương án giải quyết vụ việc rất rõ ràng. Cảm ơn luật sư rất nhiều!`
+      },
+      {
+        id: 'r2',
+        userName: 'Trần Thị Mai',
+        rating: Math.floor(detailSummary.averageRating),
+        date: '2026-05-20',
+        comment: 'Tôi rất hài lòng về phong cách làm việc chuyên nghiệp và nhanh chóng của luật sư. Sẽ tiếp tục nhờ luật sư hỗ trợ nếu có vấn đề phát sinh.'
+      },
+      {
+        id: 'r3',
+        userName: 'Phạm Minh Đức',
+        rating: 5,
+        date: '2026-04-12',
+        comment: 'Tư vấn nhiệt tình, có chuyên môn cao và am hiểu sâu sắc về lĩnh vực doanh nghiệp. Rất đáng tin cậy!'
+      }
+    ]
+  }, [detailSummary])
+
   if (isLoading) {
     return (
       <div className='p-8 text-center flex flex-col items-center justify-center min-h-[400px]'>
@@ -63,25 +93,84 @@ export default function LawyerProfile() {
 
   const detail = detailResponse.data.summary
 
+  // Extract avatar and bio from API summary
   const rawAvatarUrl = detail.avatarUrl || detail.avatar || 'https://api.dicebear.com/7.x/avataaars/svg?seed=lawyer'
   const avatarUrl = getOptimizedImageUrl(rawAvatarUrl, 200)
   const bioText = detail.bio || 'Chuyên gia tư vấn pháp lý chuyên nghiệp.'
   const cityText = detail.location || 'Việt Nam'
 
+  const statusMap = {
+    AVAILABLE: { label: 'Sẵn sàng tư vấn', className: 'bg-emerald-500/10 text-emerald-500 border-emerald-500/20' },
+    BUSY: { label: 'Đang bận', className: 'bg-amber-500/10 text-amber-500 border-amber-500/20' },
+    OFFLINE: { label: 'Ngoại tuyến', className: 'bg-slate-500/10 text-slate-500 border-slate-500/20' }
+  }
+  const statusKey = detail.lawyerStatus || detail.status
+  const currentStatus = statusMap[statusKey as keyof typeof statusMap] || {
+    label: statusKey || 'Ngoại tuyến',
+    className: 'bg-slate-500/10 text-slate-500 border-slate-500/20'
+  }
+
+  const stats = [
+    {
+      label: 'Đánh giá',
+      labelClass: 'text-sm',
+      value: (
+        <div className='flex items-center gap-1 mt-1 text-warning-primary font-semibold text-small'>
+          <Star className='w-5 h-5 fill-current' />
+          {detail.averageRating.toFixed(1)}
+        </div>
+      )
+    },
+    {
+      label: 'Kinh nghiệm',
+      labelClass: 'text-sm',
+      value: (
+        <div className='mt-1 text-text-primary font-semibold text-small'>
+          {detail.experienceYears} năm
+        </div>
+      )
+    },
+    {
+      label: 'Vụ thành công',
+      labelClass: 'text-sm',
+      value: (
+        <div className='mt-1 text-text-main font-semibold text-small'>
+          {detail.successfulCases} vụ
+        </div>
+      )
+    },
+    {
+      label: 'Chứng chỉ',
+      labelClass: 'text-sm',
+      value: (
+        <div className='mt-1 text-text-main font-semibold text-small'>
+          {detail.licenseInfo?.licenseNumber}
+        </div>
+      )
+    }
+  ]
+
+  const tabItems = [
+    { id: 'bio', label: 'Giới thiệu' },
+    { id: 'specializations', label: 'Lĩnh vực chuyên môn' },
+    { id: 'history', label: 'Lịch sử hoạt động' },
+    { id: 'reviews', label: 'Đánh giá' }
+  ] as const
+  
   return (
-    <div className='p-4 md:p-6 max-w-7xl mx-auto space-y-6 text-left'>
+    <div className=' text-left'>
       {/* Back Button */}
       <button
         onClick={() => navigate('/lawyers')}
-        className='flex items-center gap-2 text-text-secondary hover:text-text-primary transition-colors text-sm font-medium cursor-pointer'
+        className='p-4 md:p-6 flex items-center gap-2 text-text-description hover:text-text-primary transition-colors text-small font-medium cursor-pointer border-none bg-transparent'
       >
-        <ArrowLeft className='w-4 h-4' />
+        <ArrowLeft className='w-6 h-6' />
         Quay lại danh bạ
       </button>
 
       {/* Hero Card */}
-      <Card className='p-6 border-border-secondary bg-background-primary flex flex-col md:flex-row items-center md:items-start gap-6 rounded-lg shadow-400 relative overflow-hidden'>
-        <div className='w-32 h-32 md:w-40 md:h-40 rounded-full border-4 border-background-secondary overflow-hidden shrink-0 shadow-200'>
+      <Card className='px-4 py-8 bg-background-secondary flex flex-col md:flex-row items-center md:items-start gap-6 border-none shadow-none relative overflow-hidden'>
+        <div className='w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden shrink-0 shadow-none border-4 border-background-primary'>
           <img
             src={avatarUrl}
             alt={detail.name}
@@ -94,109 +183,239 @@ export default function LawyerProfile() {
         </div>
 
         <div className='flex-1 space-y-4 text-center md:text-left w-full'>
-          <div className='space-y-1.5'>
+          <div className='space-y-2.5'>
             <div className='flex flex-wrap items-center justify-center md:justify-start gap-2.5'>
               <h1 className='text-h2 font-bold text-text-primary'>{detail.name}</h1>
-              {detail.licenseInfo.isVerified && (
-                <Badge className='bg-success-primary/10 border-success-primary/20 text-success-secondary gap-1 hover:bg-success-primary/10 py-0.5 px-2.5 rounded-full text-xs font-semibold'>
-                  <ShieldCheck className='w-3.5 h-3.5 fill-current' />
-                  Đã xác thực
-                </Badge>
+              {detail.licenseInfo?.isVerified && (
+                <span className='text-success-secondary flex items-center justify-center' title='Đã xác thực'>
+                  <ShieldCheck className='w-5 h-5 fill-current' />
+                </span>
+              )}
+              <Badge className={`gap-1 py-0.5 px-2.5 rounded-full text-xs font-semibold border ${currentStatus.className}`}>
+                {currentStatus.label}
+              </Badge>
+            </div>
+            
+            <p className='text-main font-medium text-p'>{detail.roleName === 'LAWYER' ? 'Luật sư tư vấn' : (detail.roleName || 'Luật sư')}</p>
+            
+            {/* Contact & Location details */}
+            <div className='flex flex-wrap items-center justify-center md:justify-start gap-x-4 gap-y-1.5 text-xs text-text-description pt-0.5'>
+              {cityText && (
+                <span className='flex items-center gap-1.5'>
+                  <MapPin className='w-3.5 h-3.5 shrink-0 text-text-description' /> {cityText}
+                </span>
+              )}
+              {detail.email && (
+                <span className='flex items-center gap-1.5'>
+                  <Mail className='w-3.5 h-3.5 shrink-0 text-text-description' /> {detail.email}
+                </span>
+              )}
+              {detail.phone && (
+                <span className='flex items-center gap-1.5'>
+                  <Phone className='w-3.5 h-3.5 shrink-0 text-text-description' /> {detail.phone}
+                </span>
               )}
             </div>
-            <p className='text-main font-medium text-p'>{detail.role}</p>
-            <p className='text-xs text-text-description flex items-center justify-center md:justify-start gap-1'>
-              <MapPin className='w-3.5 h-3.5' /> {cityText}, Việt Nam
-            </p>
           </div>
 
           <div className='flex flex-wrap items-center justify-center md:justify-start gap-6 pt-2 border-t border-border-primary'>
-            <div className='text-center md:text-left'>
-              <div className='text-xs text-text-tertiary font-bold uppercase tracking-wider'>Đánh giá</div>
-              <div className='flex items-center gap-1 mt-1 text-warning-secondary font-bold text-lg'>
-                <Star className='w-5 h-5 fill-current' />
-                {detail.averageRating.toFixed(1)}
-              </div>
-            </div>
-
-            <div className='text-center md:text-left'>
-              <div className='text-xs text-text-tertiary font-bold uppercase tracking-wider'>Kinh nghiệm</div>
-              <div className='mt-1 text-text-primary font-bold text-lg'>
-                {detail.experienceYears} năm
-              </div>
-            </div>
-
-            <div className='text-center md:text-left'>
-              <div className='text-xs text-text-tertiary font-bold uppercase tracking-wider'>Chứng chỉ</div>
-              <div className='mt-1 text-text-secondary text-sm font-semibold'>
-                {detail.licenseInfo.licenseNumber}
+            {stats.map((stat, idx) => (
+              <div key={idx} className='text-center md:text-left'>
+                <div className={cn(stat.labelClass, 'text-text-description font-medium tracking-wider')}>
+                  {stat.label}
+                </div>
+                {stat.value}
               </div>
-            </div>
+            ))}
           </div>
+
         </div>
       </Card>
 
       {/* Main Grid Content */}
-      <div className='grid grid-cols-1 lg:grid-cols-3 gap-6'>
+      <div className='grid grid-cols-1 lg:grid-cols-3 gap-6 p-4 md:p-6'>
         {/* Left Column: Details */}
         <div className='lg:col-span-2 space-y-6'>
-          {/* Bio */}
-          <Card className='p-6 border-border-secondary bg-background-primary space-y-4 rounded-lg'>
-            <h3 className='text-h4 font-bold text-text-primary border-b border-border-primary pb-2.5'>Giới thiệu</h3>
-            <p className='text-text-secondary leading-relaxed text-sm whitespace-pre-line'>{bioText}</p>
-          </Card>
-
-          {/* Specializations */}
-          <Card className='p-6 border-border-secondary bg-background-primary space-y-4 rounded-lg'>
-            <h3 className='text-h4 font-bold text-text-primary border-b border-border-primary pb-2.5'>Lĩnh vực chuyên môn</h3>
-            <div className='flex flex-wrap gap-2.5'>
-              {detail.specializations.map((spec: string) => (
-                <Badge
-                  key={spec}
-                  variant='secondary'
-                  className='px-3.5 py-1 text-xs font-semibold text-text-secondary border border-border-primary rounded-full bg-background-secondary'
+          {/* Tab Navigation */}
+          <div className='flex border-b border-border-primary gap-6 mb-4'>
+            {tabItems.map((tab) => {
+              const isActive = activeTab === tab.id
+              return (
+                <button
+                  key={tab.id}
+                  onClick={() => setActiveTab(tab.id)}
+                  className={cn(
+                    "text-small font-medium text-text-description transition-all duration-200 pb-2 rounded-none border-b-2 border-transparent bg-transparent shadow-none cursor-pointer",
+                    "hover:text-info",
+                    "data-[state=active]:border-b-info",
+                    "data-[state=active]:bg-transparent",
+                    "data-[state=active]:shadow-none",
+                    "dark:text-info dark:data-[state=active]:text-info dark:data-[state=active]:border-info",
+                    isActive
+                      ? 'text-info border-info'
+                      : 'text-text-description hover:text-text-primary border-transparent'
+                  )}
                 >
-                  {spec}
-                </Badge>
-              ))}
-            </div>
-          </Card>
+                  {tab.label}
+                </button>
+              )
+            })}
+          </div>
 
-          {/* Career Milestones / History */}
-          <Card className='p-6 border-border-secondary bg-background-primary space-y-4 rounded-lg'>
-            <h3 className='text-h4 font-bold text-text-primary border-b border-border-primary pb-2.5'>Lịch sử hoạt động</h3>
-            <div className='space-y-4'>
-              <div className='flex gap-3 items-start'>
-                <div className='p-2 bg-primary/10 rounded-lg text-primary mt-0.5'>
-                  <Briefcase className='w-4 h-4' />
+          {/* Tab Contents */}
+          <div className='transition-all duration-300'>
+            {activeTab === 'bio' && (
+              <Card className='space-y-4 rounded-lg border-none shadow-none'>
+                <h3 className='text-h4 font-semibold text-text-main border-b border-border-primary pb-2'>Giới thiệu</h3>
+                <p className='text-text-secondary leading-relaxed text-sm whitespace-pre-line'>{bioText}</p>
+              </Card>
+            )}
+
+            {activeTab === 'specializations' && (
+              <Card className='space-y-4 rounded-lg border-none shadow-none'>
+                <h3 className='text-h4 font-semibold text-text-main border-b border-border-primary pb-2'>Lĩnh vực chuyên môn</h3>
+                <div className='flex flex-wrap gap-2.5'>
+                  {detail.specializations && detail.specializations.length > 0 ? (
+                    detail.specializations.map((spec: string) => (
+                      <Badge
+                        key={spec}
+                        variant='secondary'
+                        className='px-3.5 py-1 text-xs font-semibold text-text-secondary border border-border-primary rounded-full bg-background-secondary'
+                      >
+                        {spec}
+                      </Badge>
+                    ))
+                  ) : (
+                    <span className='text-sm text-text-description'>Chưa cập nhật lĩnh vực chuyên môn</span>
+                  )}
                 </div>
-                <div>
-                  <h4 className='text-sm font-bold text-text-primary'>Kinh nghiệm làm việc</h4>
-                  <p className='text-xs text-text-description mt-0.5'>{detail.careerHistory}</p>
+              </Card>
+            )}
+
+            {activeTab === 'history' && (
+              <Card className=' space-y-4 rounded-lg border-none shadow-none'>
+                <h3 className='text-h4 font-semibold text-text-main border-b border-border-primary pb-2'>Lịch sử hoạt động</h3>
+                <div className='space-y-5'>
+                  {/* Working history */}
+                  {detail.careerHistory && (
+                    <div className='gap-3 items-start'>
+                      <h4 className='text-small font-semibold text-text-main'>Kinh nghiệm làm việc</h4>
+                      <p className='text-sm text-text-description mt-1 leading-relaxed'>{detail.careerHistory}</p>
+                    </div>
+                  )}
+
+                  {/* License issuer */}
+                  {detail.licenseInfo?.licenseIssuer && (
+                    <div className='gap-3 items-start'>
+                      <h4 className='text-small font-semibold text-text-main'>Đơn vị cấp thẻ hành nghề</h4>
+                      <p className='text-sm text-text-description mt-1'>{detail.licenseInfo.licenseIssuer}</p>
+                    </div>
+                  )}
+
+                  {/* License file URL if available */}
+                  {detail.licenseInfo?.licenseFileUrl && (
+                    <div className='flex gap-3 items-start pt-1'>
+                      <div>
+                        <h4 className='text-sm font-bold text-text-primary'>Bằng cấp / Chứng chỉ số</h4>
+                        <a 
+                          href={detail.licenseInfo.licenseFileUrl} 
+                          target='_blank' 
+                          rel='noopener noreferrer'
+                          className='text-xs text-primary hover:underline mt-1 block font-medium'
+                        >
+                          Xem chứng chỉ hành nghề đính kèm
+                        </a>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Career Milestones */}
+                  {detail.careerMilestones && detail.careerMilestones.length > 0 && (
+                    <div className='border-t border-border-secondary pt-4 mt-4 space-y-3'>
+                      <h4 className='text-sm font-bold text-text-primary flex items-center gap-2'>
+                        <CheckCircle2 className='w-4 h-4 text-emerald-500 shrink-0' />
+                        Mốc sự nghiệp nổi bật
+                      </h4>
+                      <ul className='list-disc pl-5 text-xs text-text-description space-y-1.5'>
+                        {detail.careerMilestones.map((milestone: string, idx: number) => (
+                          <li key={idx} className='leading-relaxed'>{milestone}</li>
+                        ))}
+                      </ul>
+                    </div>
+                  )}
                 </div>
-              </div>
-              <div className='flex gap-3 items-start'>
-                <div className='p-2 bg-primary/10 rounded-lg text-primary mt-0.5'>
-                  <Award className='w-4 h-4' />
+              </Card>
+            )}
+
+            {activeTab === 'reviews' && (
+              <Card className='space-y-6 rounded-lg border-none shadow-none'>
+                <div className='border-b border-border-primary pb-4'>
+                  <h3 className='text-h4 font-semibold text-text-main pb-2'>Đánh giá từ khách hàng</h3>
+                  <div className='flex flex-col sm:flex-row items-start sm:items-center gap-6 mt-2 bg-background-secondary p-4 rounded-xl border border-border-primary/50'>
+                    <div className='text-center border-r border-border-primary pr-6 shrink-0'>
+                      <div className='text-4xl font-extrabold text-text-primary'>{detail.averageRating.toFixed(1)}</div>
+                      <div className='flex items-center gap-0.5 justify-center mt-1 text-warning-primary'>
+                        {Array.from({ length: 5 }).map((_, i) => (
+                          <Star 
+                            key={i} 
+                            className={`w-4 h-4 ${i < Math.round(detail.averageRating) ? 'fill-current' : 'text-text-description'}`} 
+                          />
+                        ))}
+                      </div>
+                      <div className='text-xs text-text-description mt-1.5 font-medium'>
+                        {mockReviews.length} đánh giá
+                      </div>
+                    </div>
+                    <div className='text-sm text-text-secondary leading-relaxed'>
+                      Đánh giá trung bình phản ánh sự hài lòng của khách hàng sau khi nhận tư vấn trực tiếp và trực tuyến từ Luật sư {detail.name}.
+                    </div>
+                  </div>
                 </div>
-                <div>
-                  <h4 className='text-sm font-bold text-text-primary'>Đơn vị cấp thẻ hành nghề</h4>
-                  <p className='text-xs text-text-description mt-0.5'>{detail.licenseInfo.licenseIssuer}</p>
+
+                <div className='space-y-5 divide-y divide-border-primary/50'>
+                  {mockReviews.map((review) => (
+                    <div key={review.id} className='pt-5 first:pt-0 space-y-2.5'>
+                      <div className='flex items-center justify-between'>
+                        <div className='flex items-center gap-3'>
+                          <div className='w-9 h-9 rounded-full bg-primary/10 text-primary flex items-center justify-center font-bold text-sm border border-primary/25 shadow-sm'>
+                            {review.userName.charAt(0)}
+                          </div>
+                          <div>
+                            <h4 className='text-sm font-semibold text-text-primary'>{review.userName}</h4>
+                            <div className='flex items-center gap-0.5 mt-0.5 text-warning-primary'>
+                              {Array.from({ length: 5 }).map((_, i) => (
+                                <Star 
+                                  key={i} 
+                                  className={`w-3 h-3 ${i < review.rating ? 'fill-current' : 'text-text-description'}`} 
+                                />
+                              ))}
+                            </div>
+                          </div>
+                        </div>
+                        <span className='text-xs text-text-description font-medium'>
+                          {new Date(review.date).toLocaleDateString('vi-VN')}
+                        </span>
+                      </div>
+                      <p className='text-sm text-text-secondary leading-relaxed pl-12 italic'>
+                        "{review.comment}"
+                      </p>
+                    </div>
+                  ))}
                 </div>
-              </div>
-            </div>
-          </Card>
+              </Card>
+            )}
+          </div>
         </div>
 
         {/* Right Column: Pricing & Booking */}
         <div className='space-y-6'>
-          <Card className='p-6 border-border-secondary bg-background-primary space-y-5 rounded-lg shadow-200 sticky top-6'>
+          <Card className='p-6 bg-background-secondary space-y-5 rounded-sm border-none sticky top-6'>
             <div className='space-y-1.5'>
-              <h3 className='text-xs font-bold uppercase tracking-wider text-text-tertiary'>Phí tư vấn cơ bản</h3>
+              <h3 className='text-small font-semibold text-text-main'>Phí tư vấn cơ bản</h3>
               <div className='flex items-baseline gap-1 text-primary font-bold text-2xl'>
                 <DollarSign className='w-6 h-6 self-center text-primary-400' />
                 {detail.consultingFee.toLocaleString('vi-VN')}
-                <span className='text-xs text-text-description font-normal ml-1'>/ giờ</span>
+                <span className='text-sm text-text-description font-normal ml-1'>/ giờ</span>
               </div>
             </div>
 
@@ -212,30 +431,13 @@ export default function LawyerProfile() {
               <div className='flex justify-between items-center text-sm'>
                 <span className='text-text-secondary'>Hỗ trợ bảo mật</span>
                 <span className='font-semibold text-success-secondary flex items-center gap-0.5'>
-                  <ShieldCheck className='w-4 h-4 fill-current' /> 100%
+                  100%
                 </span>
               </div>
             </div>
 
-            <Button
-              onClick={handleRequestConsultation}
-              disabled={isSent || isSending}
-              className={`w-full py-5 rounded-md font-bold gap-2 text-sm cursor-pointer shadow-md transition-all ${
-                isSent
-                  ? 'bg-slate-100 text-slate-400 border border-slate-200 hover:bg-slate-100 cursor-not-allowed shadow-none'
-                  : 'bg-primary hover:bg-primary-600 text-white shadow-primary/15'
-              }`}
-            >
-              {isSending ? (
-                <div className='w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin'></div>
-              ) : isSent ? (
-                'Đã gửi yêu cầu tư vấn'
-              ) : (
-                <>
-                  <MessageSquare className='w-4 h-4' />
-                  Yêu cầu tư vấn
-                </>
-              )}
+            <Button className='w-full' onClick={() => setIsContactModalOpen(true)}>
+              Yêu cầu tư vấn
             </Button>
             
             <p className='text-[11px] text-text-description text-center leading-relaxed'>
@@ -244,6 +446,11 @@ export default function LawyerProfile() {
           </Card>
         </div>
       </div>
+      <LawyerContactDialog
+        lawyer={contactLawyer}
+        isOpen={isContactModalOpen}
+        onOpenChange={setIsContactModalOpen}
+      />
     </div>
   )
 }
diff --git a/frontend/src/pages/users/lawyer/components/LawyerCard.tsx b/frontend/src/pages/users/lawyer/components/LawyerCard.tsx
index dd52b4f..85bb770 100644
--- a/frontend/src/pages/users/lawyer/components/LawyerCard.tsx
+++ b/frontend/src/pages/users/lawyer/components/LawyerCard.tsx
@@ -38,7 +38,7 @@ export const LawyerCard = memo(function LawyerCard({
         {/* Avatar */}
         <div className='w-40 h-40 rounded-full border-2 border-background-primary shadow-200 overflow-hidden mb-2 group-hover:scale-105 transition-transform shrink-0 mx-auto'>
           <img
-            src={getOptimizedImageUrl(lawyer.avatar, 160)}
+            src={getOptimizedImageUrl(lawyer.avatar || lawyer.avatarUrl || 'https://api.dicebear.com/7.x/avataaars/svg?seed=lawyer', 160)}
             alt={lawyer.fullName}
             className='w-full h-full object-cover'
             width={160}
@@ -60,7 +60,7 @@ export const LawyerCard = memo(function LawyerCard({
           </h3>
           <div className='flex items-center justify-center gap-1 text-text-description text-xs'>
             <MapPin className='w-4 h-4 text-text-tertiary' />
-            {lawyer.city}
+            {lawyer.location}
           </div>
         </div>
 
diff --git a/frontend/src/pages/users/lawyer/components/LawyerContactDialog.tsx b/frontend/src/pages/users/lawyer/components/LawyerContactDialog.tsx
index 0ada1f2..d3f5418 100644
--- a/frontend/src/pages/users/lawyer/components/LawyerContactDialog.tsx
+++ b/frontend/src/pages/users/lawyer/components/LawyerContactDialog.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-import { MapPin, Star, Check, Paperclip, X } from 'lucide-react'
+import { MapPin, Star, Check, Paperclip, X, Loader2 } from 'lucide-react'
 import { useNavigate } from 'react-router-dom'
 
 import { Button } from '@/components/ui/button'
@@ -9,10 +9,19 @@ import { Input } from '@/components/ui/input'
 import FileUpload from '@/components/upload-file/file-upload'
 import toastifyCommon from '@/core/lib/toastify-common'
 import { consultationApi } from '@/core/services/consultation.service'
+import { lawApi } from '@/core/services/law.service'
 import { useAppointmentStore } from '@/core/store/features/appointments'
 import { useUserInfo } from '@/hooks/tanstack-query/auth/use-query-auth'
 import { type Lawyer } from '@/models/lawyer/list-lawyer.type'
 
+interface UploadedFile {
+  name: string
+  size: number
+  url?: string
+  isUploading?: boolean
+  error?: boolean
+}
+
 interface LawyerContactDialogProps {
   lawyer: Lawyer | null
   isOpen: boolean
@@ -38,9 +47,9 @@ export function LawyerContactDialog({
 }: LawyerContactDialogProps) {
   const [step, setStep] = useState<1 | 2 | 3>(1)
   const [contactForm, setContactForm] = useState({ name: '', phone: '', email: '', message: '' })
-  const [selectedFiles, setSelectedFiles] = useState<File[]>([])
+  const [selectedFiles, setSelectedFiles] = useState<UploadedFile[]>([])
   const [prepopulatedFiles, setPrepopulatedFiles] = useState<any[]>([])
-  const [submitting, setSubmitting] = useState(false)
+  // const [submitting, setSubmitting] = useState(false)
 
   const { data: user } = useUserInfo()
   const navigate = useNavigate()
@@ -65,7 +74,7 @@ export function LawyerContactDialog({
 
   const handleContactSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setSubmitting(true)
+    // setSubmitting(true)
     try {
       // Create a real consultation process in the database with the user's manually typed context/message
       await consultationApi.createConsultation({
@@ -74,32 +83,36 @@ export function LawyerContactDialog({
         message: contactForm.message
       })
 
-      // Add new request to the global appointments store
-      const addRequest = useAppointmentStore.getState().addRequest
-      addRequest({
-        lawyerName: lawyer.fullName,
-        lawyerAvatar: lawyer.avatar || '',
-        topicVI: lawyer.specializations[0] || 'Tư vấn pháp lý',
-        topicEN: lawyer.specializations[0] || 'Legal Consultation',
-        message: contactForm.message,
-        attachments: [
-          ...prepopulatedFiles.map((file) => ({
-            name: file.name,
-            size: file.size || 'N/A'
-          })),
-          ...selectedFiles.map((file) => ({
+    // Add new request to the global appointments store
+    const addRequest = useAppointmentStore.getState().addRequest
+    addRequest({
+      lawyerName: lawyer.fullName,
+      lawyerAvatar: lawyer.avatar || '',
+      topicVI: lawyer.specializations[0] || 'Tư vấn pháp lý',
+      topicEN: lawyer.specializations[0] || 'Legal Consultation',
+      message: contactForm.message,
+      attachments: [
+        ...prepopulatedFiles.map((file) => ({
+          name: file.name,
+          size: file.size || 'N/A',
+          url: file.url
+        })),
+        ...selectedFiles
+          .filter((file) => !file.isUploading && !file.error)
+          .map((file) => ({
             name: file.name,
-            size: formatContactFileSize(file.size)
+            size: formatContactFileSize(file.size),
+            url: file.url
           }))
-        ]
-      })
+      ]
+    })
 
       setStep(3)
     } catch (err) {
       console.error('Failed to create consultation:', err)
       toastifyCommon.error('Đăng ký tư vấn thất bại. Vui lòng thử lại!')
     } finally {
-      setSubmitting(false)
+      // setSubmitting(false)
     }
   }
 
@@ -125,7 +138,7 @@ export function LawyerContactDialog({
                 <div>
                   <h4 className='text-p-medium font-bold text-text-primary'>{lawyer.fullName}</h4>
                   <p className='text-xs text-text-description font-medium flex items-center gap-1 mt-0.5'>
-                    <MapPin className='w-3 h-3' /> {lawyer.city}
+                    <MapPin className='w-3 h-3' /> {lawyer.location}
                   </p>
                   <div className='flex gap-4 items-center mt-1.5'>
                     <span className='text-xs font-bold text-warning-secondary flex items-center gap-0.5'>
@@ -180,15 +193,15 @@ export function LawyerContactDialog({
                   <img src={lawyer.avatar || ''} alt={lawyer.fullName} className='w-full h-full object-cover' />
                 </div>
                 <div>
-                  <h4 className='text-sm font-bold text-text-primary'>Đăng ký tư vấn với Luật sư {lawyer.fullName}</h4>
-                  <p className='text-xs text-text-description'>{lawyer.city}</p>
+                  <h4 className='text-sm font-semibold text-text-main'>Luật sư {lawyer.fullName}</h4>
+                  <p className='text-xs text-text-description'>{lawyer.location}</p>
                 </div>
               </div>
 
               <div className='space-y-3'>
                 <div className='grid grid-cols-2 gap-3'>
                   <div className='space-y-1'>
-                    <label className='text-xs font-bold text-text-secondary'>Họ và tên của bạn</label>
+                    <label className='text-sm font-medium text-text-secondary'>Họ và tên</label>
                     <Input
                       value={contactForm.name}
                       onChange={(e) => setContactForm({ ...contactForm, name: e.target.value })}
@@ -197,7 +210,7 @@ export function LawyerContactDialog({
                     />
                   </div>
                   <div className='space-y-1'>
-                    <label className='text-xs font-bold text-text-secondary'>Số điện thoại</label>
+                    <label className='text-sm font-medium text-text-secondary'>Số điện thoại</label>
                     <Input
                       value={contactForm.phone}
                       onChange={(e) => setContactForm({ ...contactForm, phone: e.target.value })}
@@ -208,7 +221,7 @@ export function LawyerContactDialog({
                 </div>
 
                 <div className='space-y-1'>
-                  <label className='text-xs font-bold text-text-secondary'>Email liên hệ</label>
+                  <label className='text-sm font-medium text-text-secondary'>Email liên hệ</label>
                   <Input
                     type='email'
                     value={contactForm.email}
@@ -219,7 +232,7 @@ export function LawyerContactDialog({
                 </div>
 
                 <div className='space-y-1'>
-                  <label className='text-xs font-bold text-text-secondary'>Nội dung yêu cầu tư vấn</label>
+                  <label className='text-sm font-medium text-text-secondary'>Nội dung yêu cầu tư vấn</label>
                   <textarea
                     required
                     value={contactForm.message}
@@ -231,14 +244,42 @@ export function LawyerContactDialog({
                 </div>
 
                 <div className='space-y-1.5'>
-                  <label className='text-xs font-bold text-text-secondary block'>Tài liệu đính kèm</label>
+                  <label className='text-sm font-medium text-text-secondary block'>Tài liệu đính kèm</label>
                   <FileUpload
                     multiple
                     accept='.pdf,.doc,.docx,.png,.jpg,.jpeg,.txt'
                     onChange={(files) => {
                       if (files) {
                         const fileList = Array.from(files)
-                        setSelectedFiles((prev) => [...prev, ...fileList])
+                        fileList.forEach((file) => {
+                          const newFile: UploadedFile = {
+                            name: file.name,
+                            size: file.size,
+                            isUploading: true
+                          }
+                          setSelectedFiles((prev) => [...prev, newFile])
+
+                          lawApi.uploadFile(file)
+                            .then((res) => {
+                              setSelectedFiles((prev) =>
+                                prev.map((item) =>
+                                  item.name === file.name && item.isUploading
+                                    ? { ...item, url: res.url, isUploading: false }
+                                    : item
+                                )
+                              )
+                            })
+                            .catch((error) => {
+                              console.error('Failed to upload file:', error)
+                              setSelectedFiles((prev) =>
+                                prev.map((item) =>
+                                  item.name === file.name && item.isUploading
+                                    ? { ...item, isUploading: false, error: true }
+                                    : item
+                                )
+                              )
+                            })
+                        })
                       }
                     }}
                   >
@@ -301,9 +342,17 @@ export function LawyerContactDialog({
                           className='flex items-center justify-between p-2 bg-background-tertiary rounded-md border border-border-primary text-xs'
                         >
                           <div className='flex items-center gap-2 overflow-hidden mr-2'>
-                            <Paperclip className='w-3.5 h-3.5 text-text-tertiary shrink-0' />
-                            <span className='font-medium truncate text-text-primary'>{file.name}</span>
-                            <span className='text-text-description shrink-0'>({formatContactFileSize(file.size)})</span>
+                            {file.isUploading ? (
+                              <Loader2 className='w-3.5 h-3.5 text-primary shrink-0 animate-spin' />
+                            ) : (
+                              <Paperclip className={`w-3.5 h-3.5 shrink-0 ${file.error ? 'text-error-primary' : 'text-text-tertiary'}`} />
+                            )}
+                            <span className={`font-medium truncate ${file.error ? 'text-error-primary line-through' : 'text-text-primary'}`}>
+                              {file.name}
+                            </span>
+                            <span className='text-text-description shrink-0'>
+                              {file.isUploading ? '(Đang tải lên...)' : file.error ? '(Lỗi tải lên)' : `(${formatContactFileSize(file.size)})`}
+                            </span>
                           </div>
                           <button
                             type='button'
@@ -329,10 +378,11 @@ export function LawyerContactDialog({
                   </Button>
                   <Button
                     type='submit'
-                    disabled={submitting}
+                    // disabled={submitting}
                     className='w-full'
+                    disabled={selectedFiles.some((f) => f.isUploading)}
                   >
-                    {submitting ? 'Đang gửi...' : 'Gửi yêu cầu'}
+                    {selectedFiles.some((f) => f.isUploading) ? 'Đang tải tệp lên...' : 'Gửi yêu cầu'}
                   </Button>
                 </div>
               </div>
diff --git a/frontend/src/pages/users/legal-analysis/LegalAnalysis.tsx b/frontend/src/pages/users/legal-analysis/LegalAnalysis.tsx
index c1f93e9..35965ce 100644
--- a/frontend/src/pages/users/legal-analysis/LegalAnalysis.tsx
+++ b/frontend/src/pages/users/legal-analysis/LegalAnalysis.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo } from 'react'
 
-import { Award, Loader2 } from 'lucide-react'
+import { Loader2 } from 'lucide-react'
 
 import { FadeUp } from '@/components/animated/animated-component'
 import { Button } from '@/components/ui/button'
@@ -125,11 +125,7 @@ export default function LegalAnalysis() {
       {/* Title section */}
       <section>
         <FadeUp>
-          <span className='inline-flex items-center gap-1.5 rounded-full bg-primary px-4 py-1 text-xs font-semibold text-white backdrop-blur-sm shadow-sm mb-3.5'>
-            <Award className='w-3.5 h-3.5' />
-            Thư viện Pháp lý
-          </span>
-          <h1 className='text-h2 text-text-primary mb-2'>
+          <h1 className='text-h2 font-semibold text-text-main mb-2'>
             Văn bản pháp luật
           </h1>
           <p className='text-p text-text-description font-semibold leading-relaxed'>
diff --git a/frontend/src/pages/users/template/Template.tsx b/frontend/src/pages/users/template/Template.tsx
index ed21c92..4ba767e 100644
--- a/frontend/src/pages/users/template/Template.tsx
+++ b/frontend/src/pages/users/template/Template.tsx
@@ -59,7 +59,7 @@ export default function Template() {
       {/* Header */}
       <motion.div variants={headerVariants} initial='hidden' animate='visible' className='space-y-4'>
         <div>
-          <h1 className='text-h2 text-main tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-primary to-info'>
+          <h1 className='text-h2 font-semibold text-text-main tracking-tight'>
             Thư viện biểu mẫu
           </h1>
           <p className='text-small text-text-description mt-2'>
diff --git a/frontend/src/pages/users/template/components/TemplatePreviewModal.tsx b/frontend/src/pages/users/template/components/TemplatePreviewModal.tsx
index 2fc8df6..8c4c71e 100644
--- a/frontend/src/pages/users/template/components/TemplatePreviewModal.tsx
+++ b/frontend/src/pages/users/template/components/TemplatePreviewModal.tsx
@@ -172,7 +172,7 @@ export default function TemplatePreviewModal({ template, onClose, onUse }: Templ
             </div>
 
             {/* Body — iframe render hình dạng biểu mẫu */}
-            <div className='flex-1 bg-background-tertiary overflow-hidden flex items-center justify-center p-4'>
+            <div className='flex-1 bg-background-tertiary overflow-hidden flex items-center justify-center'>
               {loading ? (
                 <div className='flex flex-col items-center gap-2 text-text-description'>
                   <Loader2 className='w-7 h-7 animate-spin text-primary' />