From 86e78247c3cfb2d63a98e5fe621e2adf5c529618 Mon Sep 17 00:00:00 2001
From: Iliyan Angelov <angelov@angeloviliyan.com>
Date: Mon, 1 Dec 2025 23:30:28 +0200
Subject: [PATCH] updates

---
 .../__pycache__/auth_routes.cpython-312.pyc   | Bin 24671 -> 26704 bytes
 Backend/src/auth/routes/auth_routes.py        |  79 +-
 .../schemas/__pycache__/auth.cpython-312.pyc  | Bin 10168 -> 10221 bytes
 Backend/src/auth/schemas/auth.py              |   1 +
 .../__pycache__/auth_service.cpython-312.pyc  | Bin 26924 -> 27370 bytes
 Backend/src/auth/services/auth_service.py     |  41 +-
 .../__pycache__/auth.cpython-312.pyc          | Bin 7524 -> 7961 bytes
 Backend/src/security/middleware/auth.py       |  12 +
 Frontend/src/App.tsx                          |  40 +
 .../auth/components/AccountantRoute.tsx       |  15 +-
 .../features/auth/components/AdminRoute.tsx   |  13 +-
 .../auth/components/ForgotPasswordModal.tsx   |   4 +-
 .../auth/components/HousekeepingRoute.tsx     |  12 +-
 .../features/auth/components/LoginModal.tsx   | 252 ++++-
 .../auth/components/RegisterModal.tsx         |   8 +-
 .../auth/components/ResetPasswordModal.tsx    |   4 +-
 .../features/auth/components/StaffRoute.tsx   |  13 +-
 .../src/features/auth/hooks/useAntibotForm.ts |   4 +-
 .../auth/pages/AccountantLoginPage.tsx        | 571 ++++++++++
 .../features/auth/pages/AdminLoginPage.tsx    | 571 ++++++++++
 .../auth/pages/HousekeepingLoginPage.tsx      | 571 ++++++++++
 .../features/auth/pages/StaffLoginPage.tsx    | 576 +++++++++++
 Frontend/src/features/auth/pages/index.ts     |   5 +
 .../src/features/auth/services/authService.ts |   5 +-
 .../src/features/content/pages/AboutPage.tsx  |  65 +-
 .../src/features/content/pages/HomePage.tsx   | 171 +--
 .../rooms/components/BannerCarousel.tsx       |  35 +-
 Frontend/src/pages/HousekeepingLayout.tsx     | 134 +--
 .../src/pages/accountant/DashboardPage.tsx    |  34 +
 Frontend/src/pages/admin/AuditLogsPage.tsx    |   6 +-
 Frontend/src/pages/admin/DashboardPage.tsx    |  10 +
 Frontend/src/pages/customer/DashboardPage.tsx |  10 +
 Frontend/src/pages/customer/RoomListPage.tsx  |   8 +
 .../src/pages/housekeeping/DashboardPage.tsx  | 975 +++++++++++++-----
 .../src/pages/staff/ChatManagementPage.tsx    |  10 +
 Frontend/src/pages/staff/DashboardPage.tsx    |  10 +
 Frontend/src/shared/components/Footer.tsx     |  27 +-
 Frontend/src/styles/index.css                 |  20 +
 38 files changed, 3765 insertions(+), 547 deletions(-)
 create mode 100644 Frontend/src/features/auth/pages/AccountantLoginPage.tsx
 create mode 100644 Frontend/src/features/auth/pages/AdminLoginPage.tsx
 create mode 100644 Frontend/src/features/auth/pages/HousekeepingLoginPage.tsx
 create mode 100644 Frontend/src/features/auth/pages/StaffLoginPage.tsx
 create mode 100644 Frontend/src/features/auth/pages/index.ts

diff --git a/Backend/src/auth/routes/__pycache__/auth_routes.cpython-312.pyc b/Backend/src/auth/routes/__pycache__/auth_routes.cpython-312.pyc
index 0d30d28dd2692e0ae2e121de295ab11a4c302f83..a53358e2f17519a5404d9f8a4970ab3d3e615e34 100644
GIT binary patch
delta 4231
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

delta 2601
zcmZWqdrVu`8NcUV`}%opV}lLYgok<fvXKxsn2=E#@*u@=0-;H^02>9a$!v_B9874l
zYuHj%O(nLZI<2yFs1FTkWRN!L)uydlwKP(;z^DRUGBU4Sn!ol(HPuTiRY^N-=ew>G
z(%wIQ-}^h?`ObIFU0z1FE+NZb1i{GAk1wi=JiGs*<!TXG5)5pdS8f*tkY-*przIQR
zn|XXe=AuR9sN3Nv27mbGP?knZK#z*a?HwiLHCq9B$(>JbdGw^A%wrk$t#R~{*LS$B
zdRdQ~lU3PZh9N)k<Qrv9;w7D|kNU_(i$kZ8wK6a1$*VS}K7u5}ym8Jz>u|0^jAW2Z
zvQ9D=(RfLi=AK|Ai)4)zj5t#UGP%xevc-{<momzR=z7xcaR{trry57fB(u?tWToC=
z&8P7NYP?DHqAM1dWTWJqcg^XtWg+IicOmsIeAs)#H@ppu#H7r!7Hgy;SsOtqbMleg
z2BVu`Pdho9r&!J729#lsW^76}=KN%HuA{VGX5KTW&DHX7vuw0krL<Z1(~&=xHyX;O
z*#~{<Rr^$&bD=FPpJtz68ky5*>h~&Yyi9U)Zske_H>CvH$C6md$hwpTF)Slnk}WxV
zuCA0-wnkf_hr+rwbqi#7o_kW55T;JkE>Jp-#+j$ML(Dj8WTp<$mA2(F(UpFj64u7v
z&ux<`WZN-jR3mwTVq0=YE-KoV;~vnsb&dUTI!4bl=b7>z?v#ags*-l<YvWWU+vcl@
z&R()-cP^itC)LO{$v4f;i*syNJIEe_Q>FW%GxoK8o#)1pSi2WP0vw{yCTht@rLV(`
z!$-#=I6T@nGSr{8#}bDlabWwt(o1Pe|5);e;dnAK*q@9f;&?Bl7zT(@*pI^$MGo_z
zAw;S=K{VC-#k4t_YN$UF3rjc&)-ix_fTsYSrXW_6&VZMU)%eI<jcD<L{yBg_3dHJb
z*5Q*N@}$>Ss>5c=i*}Oo)seS-K0k&&kJ>4eedEKMAnt4qroi(#j?{{ePd<sXG4z4U
zyXq2GT;gokh16<eaHTQ0d|+Vp!0^g};S9qZN4wb1fpoF|$&x!jdRS^Z$g1Qpn*^7`
zYzka}e8w<^6QHwCuqXMOro2;Ip5Jmhe%(~{k)z<u<`*_k?;tI!<R4;y|GU-kfzzve
zSX+b0$1WQY>JA!uSO~nEF_NQo4L?{h@BJcU&=@+<y^O_ZFy8&l!<e0Sm^>)H(Ean)
zU+^b|n}L0_>XpF2^3c<?vI(?Xt%Z^ohgO~b_nm%P(?0gQP}Dv)21Xz!O=SD}-II}(
zN2AxR!#DK9Uu3+H_sh|F+NTq(u22Jdx46|16q(Cj)b7z-uH4p0g)45<UaGm`F$3>I
z)a#1aT2F;P7dNz5FjuWDlwS}~utu|B5rB7t(}D*9U#en-Ay~;Rd}~9nbUU|Ltfhv<
zQY}?2R%(D34Iw|b=x;3x)p1L96e{4C9QnZ4AZl3hX=%QtIxX;iF4Ul$+R)6}&(Nwx
zGlmB!JBY874>uD2S5&^sD98LSb5)`S9|Ch9Krg`e0S;0~^K@1dV@doHsSI>h{2KHV
z09^o+;2}uiSU4H(8%!jIBVjTXs7A9y2?UI)Gk{C^G;oe}LM8Vs2S&rVES^Y~4JF3n
z5}qM%HHB!v|C-8;Z$M6fW~FvZoI^9@?4twKZ-G|5Sqg9+6w=ngF^uWO>+ByL9Zz5h
z|Av&e6!Nct!<*!>mInR;u(RZN%Le0bfdyz&lomg0d>dqdu=2^)_Yi*`<QZ~#TN8Sd
ze7Wrr;~zi)5LKGCzs%A)uJ3F>XNa+_8NEYxwSA}hci?e?g2>}p;M)N%QAq3ij~wZX
z_m70}yF>^Ul1ptS?VqS&Tv=}W5sNO7P<yaxhANKd@5DHP%fj*gfmkGdxNJ{b>y|Ql
zRPR6<qpA+Wd!t@>H95XYuC-TqV0F6iw<%e(y87-c&^3#Ui(mnGR;dpjhYieyN@(c|
zp-pvaFt;Y|r_^thqd?z@?91>Tgae#XYWJ8~ehK6m(%ex&bM$pI>eU<?+TK?>MB_EE
z0-RM=I;vQ-L_XhFZ(0EDk!+y9OQeClU0dzBK+vl#TOe<Axs30F4Dd_kTG!8Xd|HDO
zu`n6v-b+ir*j<TkkiT_TpnsCP-8)g5Jl4}~doUH95PXZA>nSOR^x0#{&vxgppm=aV
zH^{$w8fk*k-g@*g>Fo8O+hn9Sp#3j(JFm?4R%`fAAmZQ3^(Pn6r20a_MZxMQ!#`9V
z&op<0-UxN9)LDX2N$1nKJ{B1akFJMb#8-lPmTN8y41#(vYJ1hLsr$xI!8ry8z`lvX
zJ$>^CDH+rur&2Yz3vG=e6hk+K{0ygZA2~`hT9wQ2jMbIVWqCbgu-!4J{HGklx-x85
M|2<Bbmu9&C15uBf761SM

diff --git a/Backend/src/auth/routes/auth_routes.py b/Backend/src/auth/routes/auth_routes.py
index 0c196ae4..9053b261 100644
--- a/Backend/src/auth/routes/auth_routes.py
+++ b/Backend/src/auth/routes/auth_routes.py
@@ -149,11 +149,39 @@ async def login(
     request_id = getattr(request.state, 'request_id', None)
     
     try:
-        result = await auth_service.login(db=db, email=login_request.email, password=login_request.password, remember_me=login_request.rememberMe or False, mfa_token=login_request.mfaToken)
+        result = await auth_service.login(
+            db=db, 
+            email=login_request.email, 
+            password=login_request.password, 
+            remember_me=login_request.rememberMe or False, 
+            mfa_token=login_request.mfaToken,
+            expected_role=login_request.expectedRole
+        )
         if result.get('requires_mfa'):
             # Log MFA required
             user = db.query(User).filter(User.email == login_request.email.lower().strip()).first()
             if user:
+                # Validate role even for MFA flow if expected_role is provided
+                if login_request.expectedRole and user.role:
+                    user_role = user.role.name.lower() if hasattr(user.role, 'name') else None
+                    expected_role = login_request.expectedRole.lower()
+                    if user_role != expected_role:
+                        await audit_service.log_action(
+                            db=db,
+                            action='login_role_mismatch',
+                            resource_type='authentication',
+                            user_id=user.id,
+                            ip_address=client_ip,
+                            user_agent=user_agent,
+                            request_id=request_id,
+                            details={'email': login_request.email, 'expected_role': expected_role, 'actual_role': user_role},
+                            status='failed'
+                        )
+                        return JSONResponse(
+                            status_code=status.HTTP_403_FORBIDDEN,
+                            content={'status': 'error', 'message': f'This login endpoint is only for {expected_role} users'}
+                        )
+                
                 await audit_service.log_action(
                     db=db,
                     action='login_mfa_required',
@@ -212,6 +240,31 @@ async def login(
             logger = get_logger(__name__)
             logger.warning(f'Failed to create session during login: {str(e)}')
         
+        # Validate role if expected_role is provided (for role-specific login endpoints)
+        if login_request.expectedRole:
+            user_role = result['user'].get('role', '').lower()
+            expected_role = login_request.expectedRole.lower()
+            if user_role != expected_role:
+                # Log security event
+                await audit_service.log_action(
+                    db=db,
+                    action='login_role_mismatch',
+                    resource_type='authentication',
+                    user_id=result['user']['id'],
+                    ip_address=client_ip,
+                    user_agent=user_agent,
+                    request_id=request_id,
+                    details={'email': login_request.email, 'expected_role': expected_role, 'actual_role': user_role},
+                    status='failed'
+                )
+                # Clear cookies on role mismatch
+                response.delete_cookie(key='refreshToken', path='/', secure=settings.is_production, samesite=samesite_value)
+                response.delete_cookie(key='accessToken', path='/', secure=settings.is_production, samesite=samesite_value)
+                return JSONResponse(
+                    status_code=status.HTTP_403_FORBIDDEN,
+                    content={'status': 'error', 'message': f'This login endpoint is only for {expected_role} users'}
+                )
+        
         # Log successful login
         await audit_service.log_action(
             db=db,
@@ -229,9 +282,25 @@ async def login(
         return {'status': 'success', 'data': {'user': result['user']}}
     except ValueError as e:
         error_message = str(e)
-        status_code = status.HTTP_401_UNAUTHORIZED if 'Invalid email or password' in error_message or 'Invalid MFA token' in error_message else status.HTTP_400_BAD_REQUEST
+        # SECURITY: Sanitize error messages to prevent information disclosure
+        # Don't reveal specific details about account status, remaining attempts, etc. to unauthenticated users
+        sanitized_message = error_message
         
-        # Log failed login attempt
+        # Generic error messages for authentication failures
+        if 'Invalid email or password' in error_message or 'Invalid MFA token' in error_message:
+            sanitized_message = 'Invalid email or password'
+            status_code = status.HTTP_401_UNAUTHORIZED
+        elif 'Account is disabled' in error_message:
+            sanitized_message = 'Account is disabled. Please contact support.'
+            status_code = status.HTTP_403_FORBIDDEN
+        elif 'Account is temporarily locked' in error_message or 'Account has been temporarily locked' in error_message:
+            # Keep lockout message but remove specific timing details for security
+            sanitized_message = 'Account is temporarily locked due to multiple failed login attempts. Please try again later.'
+            status_code = status.HTTP_403_FORBIDDEN
+        else:
+            status_code = status.HTTP_400_BAD_REQUEST
+        
+        # Log failed login attempt with full details (for internal logging)
         await audit_service.log_action(
             db=db,
             action='login_failed',
@@ -241,10 +310,10 @@ async def login(
             request_id=request_id,
             details={'email': login_request.email},
             status='failed',
-            error_message=error_message
+            error_message=error_message  # Log full error internally
         )
         
-        return JSONResponse(status_code=status_code, content={'status': 'error', 'message': error_message})
+        return JSONResponse(status_code=status_code, content={'status': 'error', 'message': sanitized_message})
 
 @router.post('/refresh-token', response_model=TokenResponse)
 async def refresh_token(
diff --git a/Backend/src/auth/schemas/__pycache__/auth.cpython-312.pyc b/Backend/src/auth/schemas/__pycache__/auth.cpython-312.pyc
index 4d28c2926f37e45d2273c0d344ceb6bbaaf98eb6..548ca9eae3965e2fb87da331a75d084fe90125a0 100644
GIT binary patch
delta 996
zcmZ9KUr1AN6vuaDbL-w+opaNB-Jj;4&CN(#%S5!YOeFu!9F<lm<}Rj9w(iV7geav+
z1!A2ZeCw&Fw2-|-4;2Uz^i~F|prD?G0wL+8e&@F#(S_gV_wReoJ->6#v+!0}dMinS
zj(rbJ)gv$0r4bSOam}vavUpIA8qN!<Q8g&+Ue!m9jclGa1Wfo^JYe}`R;Lo`(6}1y
ziO1A{h&$pTXv3>YAvT!v;4rqC{qlQ#S-Q+O*Rkwh3EkVjsrP9i=0j`6b(?~}WD7nr
zcjb1`krB7-E}@f_1TT6dH*|8{s(mj`O0Ax5x+M77NE#UybZN10KAdsdo%$kO%z+R#
zST>**|1j3!M!^}VLB-lB^pG`SA116vpeOaj8Ue=uJ2=S(cQ>y~m$+}|XWR{<(^iEE
z#U}KTC7}VMwhriHL5&6@Y~Q6(=mC?~#3t=H;RJyjkXNmlkbNJ^j1Z+gp%q8$0f=Vb
zR}B&TY_IVQ(>0-kjolaK&9`Mj8qTK8f&E26xJ<bgM#+Q_#<ijn82v|LL343wMyA9`
zMxeO0F#@kdd{@6z?12P6EmkrXz9eY~=h#R}3@qE`{G07**|Dj2WXzM?+#$EH2Mo$V
zagvOvGFm&2Zi1GC3;0|vhl%Xp;$k~p@DyF*!fDzQ25?Dn!gT7f@)ckf?>bH~esJ`{
zY^vI6%V8llyFXeqlHVbC2wrR|RWOm;g0TV@?s3=Wj&lLNDX2n=#|KwZb)HuM*Kwz`
z7pCxZ*>|{wwdJcYhu_NI34^45z_5rfDvF%64HW)gRRf9U@JEHK;s!0PgayJPA(s#&
z93$Mvm?8@^v?L6rB3=<-1_ykNXL*<NZstwN+l6-quRpISuNN-?Pa#hach*84Lj)JY
gZ&Tw~JbEpr9@SRxr_XOTK;?4%wvJ8PdFZXgzw!R<@Bjb+

delta 1012
zcmYk5OH5Ni6oxxkp}7zGpoLqCr4(p;8>_rxg!n=QV(EioGz~FYXj)SwtxN&YG$64h
zvM?zgBf4>8+!!~c8<!+3U8yW88%<an7qW0;bk1BtXmY+gGyVU$bIzRmGx{+qf0AWE
z$9@B?{>;RtoDoS7Vu~HgVvqjeakUP1#jYAvfM%%=N;ac$glQ?l$s+HAS;=>7NAHIB
z(h>=SD!bJXDi9s0Ffo*LRk!DHsO)>yyB^rlduT70z@}t}XL8yV#VNweB45YA9AZN;
zstKc&hWcAIqzCSswn-oKnYYOq_+!37PC>*H7Gmf|_~D)9Jc(8IEZ2$SHe0yDf^S#U
zRhyk_Ms2$U#H@ajfE8PV5JxX!0A5=|B+ifY&l)>9&ekF{%%~dZCHA0$h|36Wx{4!w
z0S!aJrU*$KB8K6OO(n^L<XWFM8p$}A8c(~@s6dReILxxX7}SoHW)2k+iU3_rW_a7!
zM(*MfJ2PlQL|FWm7+7&6<CD><Y$}E{Z{~=%NAuaU=tE#CbOyo8o;{*9224ZQ$*GxC
zczAF;H9Mcm&(R!H?phX7G?UIGC+9M`?47yXy;L?r`FRA2J0Wg@Lvaww6CG2ASe7r9
zZgBzs#w(;jUg3EhA|~LM(oW_N-(D647_*OxK@{+6PNKoPh;szqV7{J#<!iQm)!V9y
zV@L1MvRJJAuzx3H3AP;97=@NNS*j#ktTiMDi_UMgv$)F|^qWg?!P#G%*QS5Xei(9j
z$aH1KwMEDy2)N_q0j#?BNC~FfKagc;>iE)@Ks7L|vd9}4SOckn&xV7}O@PqZJhF@`
zo+)nwo`MnA^oSLN1yMxcPP7)$jkt(dM`(Rmz#(F)^0ZSVqyR5G=g#skiGLi}-df-B
pKEp2JJ;5)S-v+NSuNy6Z!Fz&ifXC~T^rXGqzprDDeF-MK@E;vN>)rqW

diff --git a/Backend/src/auth/schemas/auth.py b/Backend/src/auth/schemas/auth.py
index ca777efb..144b6ea4 100644
--- a/Backend/src/auth/schemas/auth.py
+++ b/Backend/src/auth/schemas/auth.py
@@ -32,6 +32,7 @@ class LoginRequest(BaseModel):
     password: str
     rememberMe: Optional[bool] = False
     mfaToken: Optional[str] = None
+    expectedRole: Optional[str] = None  # Optional role validation for role-specific login endpoints
 
 class RefreshTokenRequest(BaseModel):
     refreshToken: Optional[str] = None
diff --git a/Backend/src/auth/services/__pycache__/auth_service.cpython-312.pyc b/Backend/src/auth/services/__pycache__/auth_service.cpython-312.pyc
index 44ab9a54a17647fdca6564e3d8b9a9be74f345aa..07bf488cbc8206c7e7e38bca378d8a2ec48704fb 100644
GIT binary patch
delta 5335
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
Rz;U-tu;tx3ep4n_|2Od<+Moac

delta 5318
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

diff --git a/Backend/src/auth/services/auth_service.py b/Backend/src/auth/services/auth_service.py
index 55e9d4fc..244ecd15 100644
--- a/Backend/src/auth/services/auth_service.py
+++ b/Backend/src/auth/services/auth_service.py
@@ -46,6 +46,16 @@ class AuthService:
             else:
                 logger.warning(error_msg)
         
+        # SECURITY: Validate JWT secret entropy (check for predictable patterns)
+        # Check if secret appears to be randomly generated (not a simple pattern)
+        if len(set(self.jwt_secret)) < len(self.jwt_secret) * 0.3:  # Less than 30% unique characters suggests low entropy
+            error_msg = 'JWT_SECRET appears to have low entropy. Please use a randomly generated secret.'
+            logger.error(error_msg)
+            if settings.is_production:
+                raise ValueError(error_msg)
+            else:
+                logger.warning(error_msg)
+        
         # Refresh secret should be different from access secret
         self.jwt_refresh_secret = os.getenv("JWT_REFRESH_SECRET")
         if not self.jwt_refresh_secret:
@@ -187,7 +197,7 @@ class AuthService:
             "refreshToken": tokens["refreshToken"]
         }
 
-    async def login(self, db: Session, email: str, password: str, remember_me: bool = False, mfa_token: str = None) -> dict:
+    async def login(self, db: Session, email: str, password: str, remember_me: bool = False, mfa_token: str = None, expected_role: str = None) -> dict:
 
         email = email.lower().strip() if email else ""
         if not email:
@@ -206,9 +216,9 @@ class AuthService:
         # Check if account is locked (reset if lockout expired)
         if user.locked_until:
             if user.locked_until > datetime.utcnow():
-                remaining_minutes = int((user.locked_until - datetime.utcnow()).total_seconds() / 60)
                 logger.warning(f"Login attempt for locked account: {email} (locked until {user.locked_until})")
-                raise ValueError(f"Account is temporarily locked due to multiple failed login attempts. Please try again in {remaining_minutes} minute(s).")
+                # SECURITY: Don't reveal specific lockout duration to prevent timing attacks
+                raise ValueError("Account is temporarily locked due to multiple failed login attempts. Please try again later.")
             else:
                 # Lockout expired, reset it
                 user.locked_until = None
@@ -230,12 +240,13 @@ class AuthService:
                 user.locked_until = datetime.utcnow() + timedelta(minutes=lockout_duration)
                 logger.warning(f"Account locked due to {user.failed_login_attempts} failed login attempts: {email}")
                 db.commit()
-                raise ValueError(f"Account has been temporarily locked due to {max_attempts} failed login attempts. Please try again in {lockout_duration} minute(s).")
+                # SECURITY: Don't reveal specific lockout duration
+                raise ValueError("Account has been temporarily locked due to multiple failed login attempts. Please try again later.")
             else:
-                remaining_attempts = max_attempts - user.failed_login_attempts
                 logger.warning(f"Login attempt with invalid password for user: {email} ({user.failed_login_attempts}/{max_attempts} failed attempts)")
                 db.commit()
-                raise ValueError(f"Invalid email or password. {remaining_attempts} attempt(s) remaining before account lockout.")
+                # SECURITY: Don't reveal remaining attempts to prevent enumeration
+                raise ValueError("Invalid email or password")
 
         if user.mfa_enabled:
             if not mfa_token:
@@ -258,12 +269,21 @@ class AuthService:
                     user.locked_until = datetime.utcnow() + timedelta(minutes=lockout_duration)
                     logger.warning(f"Account locked due to {user.failed_login_attempts} failed attempts (MFA failure): {email}")
                     db.commit()
-                    raise ValueError(f"Account has been temporarily locked due to {max_attempts} failed login attempts. Please try again in {lockout_duration} minute(s).")
+                    # SECURITY: Don't reveal specific lockout duration
+                    raise ValueError("Account has been temporarily locked due to multiple failed login attempts. Please try again later.")
                 else:
-                    remaining_attempts = max_attempts - user.failed_login_attempts
                     db.commit()
-                    raise ValueError(f"Invalid MFA token. {remaining_attempts} attempt(s) remaining before account lockout.")
+                    # SECURITY: Don't reveal remaining attempts
+                    raise ValueError("Invalid MFA token")
 
+        # Validate role if expected_role is provided (for role-specific login endpoints)
+        if expected_role:
+            user_role = user.role.name.lower() if user.role and hasattr(user.role, 'name') else None
+            expected_role_lower = expected_role.lower()
+            if user_role != expected_role_lower:
+                logger.warning(f"Role mismatch: user {email} has role {user_role} but expected {expected_role_lower}")
+                raise ValueError(f"This login endpoint is only for {expected_role_lower} users")
+        
         # Reset failed login attempts and unlock account on successful login
         if user.failed_login_attempts > 0 or user.locked_until:
             user.failed_login_attempts = 0
@@ -447,7 +467,8 @@ class AuthService:
 
         db.query(PasswordResetToken).filter(PasswordResetToken.user_id == user.id).delete()
 
-        expires_at = datetime.utcnow() + timedelta(hours=1)
+        # SECURITY: Shorter expiration for password reset tokens (15 minutes instead of 1 hour)
+        expires_at = datetime.utcnow() + timedelta(minutes=15)
         reset_token_obj = PasswordResetToken(
             user_id=user.id,
             token=hashed_token,
diff --git a/Backend/src/security/middleware/__pycache__/auth.cpython-312.pyc b/Backend/src/security/middleware/__pycache__/auth.cpython-312.pyc
index ed18b30127bef20f31f07fc9a0ecbd935c77d2af..fe7f2ed7bfcec90285c3e38aff7520267de41967 100644
GIT binary patch
delta 939
zcmZ9KUr19?9LMk3AGbMo=W?1k)0-i<oRVEIGSg&PCW&SXd#L7ZJLz!S9lv{LI0}s*
z1cM&VOHq(LN)HwHsi&UmrI*Z?81>e(AO(Rz^!weVQa?DKbNKx`zxzG+Ti@dW`9mO3
zEulU0c4yv4Udw9^=WmB3a-sd!x?_`#m=TJSnFlMoB;A%?u*!L7-^<#IrF|v0B+WS_
z39h88MaX3_zxB@bmR+4uZQB?ujgL+xl9z_#lfwx`D-^f}hGOc<tTxY;tbR-3c@y-)
zLbo!J<(k2jA}&n<EuYqN*#%{W=Q(I5Pb&sb0XMs&L2<uo$z66D+!R%whyEDODdRFG
znOOB~w*K%+UjGAixwJC4;fXv=tsZ%zzjCg(sGmIQ=P<X%yocOXy;uOpg&BCxdPIZV
z&SIipep!2z+&zS21XcW!+gOKa3C5c{(NV6Q;bt;b1i-12I4M8^-Er$q&~Px-+6v_u
zJ0+5JeT#9buOplx3?s@O(6c<5NyAxkxd<qq1S1r5<+U7-x?zeus_milvP{<`?Mljk
z%NR1KOhH=$d#oBeoSNmSIS!?Et!RqIa2vZTPKK8QU6_k~owz|ld<@ses0Ca@82ED1
zv{Gpj#Iji(G9_-`X25j}E{ah7AnUR&)>k_hPf%SSp&t>gttdtMgP(AkFhrpL4cZ8{
z4*Te|t3&1U&ynvufgTS=5m6uf{{R#kBXr;gOE6By3Bn}8@F7SB+n`fyH@3Q`(YIo?
z9B?r<CJr~{F6>Snb;7^1qGP9brL{pKVY9!g&U47zTu7Sw9M8iI480LwnqsU=_#!`h
z?N;>qwoWjOr?M-ZNtt%$ngpb~-Dum}pVQODEFXY^=xrXVQCY(y=XVLWt-QF`{MALN
Fe*lQZ*>wN_

delta 722
zcmZ9JPiPZS5XSdyHh-HYt2Gg0wWT0&+XZXD8f$6PXsr+`rP7O*H8iU(Hi^t;1x09%
zUPR<w^r#1+2dT0L1wk+3rN@FuK=j~EkX9*zC+FK>K_9%|F5k?XH}kzmlV8VEYrVY*
zh1b+O)48$dMQTMAG5?hsRU>zlImL+kufuPJYNX_cXj@*4-R~LU<P>lBha$IP-~Dpp
zixxS;0*y%{{aB33we$foA~(~k`XR`pz+s>upX);+FW2?*!C@9U`c=DSEqX+Dqh)!n
zO*F^yQQqzop(t%-BP&1W2K<E`)2b-=Py6aZOvqiC@zN>O>jTQbX+|eX%_ZA%YIFvY
z284mL2x^UL-8RBB52YaQWperj{&kTt$g54m@@1wdJh_p%J7coS$sr`8CDMVNK$2mo
zgu`@+;i`<wgA@#uu6nI&O>%DA7MgKs0U7drwj@kHvO5u4F5=uV;5ft3yY|3T>H$i?
z2>{PRLqITWaQXJI-5IA4od)nCbdF)f>3`P|ssMQ&RiPRDo(E<bZkz!Fg2g7R<_5wR
zYs>z6P7|UcKkltpw!1b$^lz^${H@(B?ZPxJ)-@z~(<bN2EvwbMZa1jPp=a_zzbQ=l
zrvKMiP%7{jJ`t|%Xf<cC6=bd`gm(xE{f<r4n>BCAo}{Myw(n#zFR~9qKNbFL&dcKd
IPa0DH0HgbxL;wH)

diff --git a/Backend/src/security/middleware/auth.py b/Backend/src/security/middleware/auth.py
index f73bae08..e585cd9a 100644
--- a/Backend/src/security/middleware/auth.py
+++ b/Backend/src/security/middleware/auth.py
@@ -50,6 +50,18 @@ def get_jwt_secret() -> str:
         else:
             logger.warning(error_msg)
     
+    # SECURITY: Validate JWT secret entropy (check for predictable patterns)
+    # Check if secret appears to be randomly generated (not a simple pattern)
+    if len(set(jwt_secret)) < len(jwt_secret) * 0.3:  # Less than 30% unique characters suggests low entropy
+        error_msg = 'JWT_SECRET appears to have low entropy. Please use a randomly generated secret.'
+        import logging
+        logger = logging.getLogger(__name__)
+        logger.error(error_msg)
+        if settings.is_production:
+            raise ValueError(error_msg)
+        else:
+            logger.warning(error_msg)
+    
     return jwt_secret
 
 def get_current_user(
diff --git a/Frontend/src/App.tsx b/Frontend/src/App.tsx
index cbe8f85e..b2759a29 100644
--- a/Frontend/src/App.tsx
+++ b/Frontend/src/App.tsx
@@ -133,6 +133,12 @@ const AdminProfilePage = lazy(() => import('./pages/admin/ProfilePage'));
 const StaffProfilePage = lazy(() => import('./pages/staff/ProfilePage'));
 const AccountantProfilePage = lazy(() => import('./pages/accountant/ProfilePage'));
 
+// Separate login pages for each role
+const StaffLoginPage = lazy(() => import('./features/auth/pages/StaffLoginPage'));
+const AdminLoginPage = lazy(() => import('./features/auth/pages/AdminLoginPage'));
+const HousekeepingLoginPage = lazy(() => import('./features/auth/pages/HousekeepingLoginPage'));
+const AccountantLoginPage = lazy(() => import('./features/auth/pages/AccountantLoginPage'));
+
 const NotFoundPage = lazy(() => import('./shared/pages/NotFoundPage'));
 
 // Component to track navigation changes - must be inside Router
@@ -465,6 +471,40 @@ function App() {
           />
         </Route>
 
+        {/* Separate Login Pages for Each Role */}
+        <Route 
+          path="/staff/login" 
+          element={
+            <ErrorBoundaryRoute>
+              <StaffLoginPage />
+            </ErrorBoundaryRoute>
+          } 
+        />
+        <Route 
+          path="/admin/login" 
+          element={
+            <ErrorBoundaryRoute>
+              <AdminLoginPage />
+            </ErrorBoundaryRoute>
+          } 
+        />
+        <Route 
+          path="/housekeeping/login" 
+          element={
+            <ErrorBoundaryRoute>
+              <HousekeepingLoginPage />
+            </ErrorBoundaryRoute>
+          } 
+        />
+        <Route 
+          path="/accountant/login" 
+          element={
+            <ErrorBoundaryRoute>
+              <AccountantLoginPage />
+            </ErrorBoundaryRoute>
+          } 
+        />
+
         {}
         <Route 
           path="/reset-password/:token" 
diff --git a/Frontend/src/features/auth/components/AccountantRoute.tsx b/Frontend/src/features/auth/components/AccountantRoute.tsx
index b561e254..1b05d85f 100644
--- a/Frontend/src/features/auth/components/AccountantRoute.tsx
+++ b/Frontend/src/features/auth/components/AccountantRoute.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Navigate } from 'react-router-dom';
 import useAuthStore from '../../../store/useAuthStore';
-import { useAuthModal } from '../contexts/AuthModalContext';
 
 interface AccountantRouteProps {
   children: React.ReactNode;
@@ -11,14 +10,6 @@ const AccountantRoute: React.FC<AccountantRouteProps> = ({
   children
 }) => {
   const { isAuthenticated, userInfo, isLoading } = useAuthStore();
-  const { openModal } = useAuthModal();
-  
-  // Open login modal if not authenticated
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      openModal('login');
-    }
-  }, [isLoading, isAuthenticated, openModal]);
   
   if (isLoading) {
     return (
@@ -39,9 +30,9 @@ const AccountantRoute: React.FC<AccountantRouteProps> = ({
     );
   }
 
-  // Don't render children if not authenticated (modal will be shown)
+  // Don't render children if not authenticated - redirect to login page
   if (!isAuthenticated) {
-    return null; // Modal will be shown by AuthModalManager
+    return <Navigate to="/accountant/login" replace />;
   }
 
   // Check if user is accountant
diff --git a/Frontend/src/features/auth/components/AdminRoute.tsx b/Frontend/src/features/auth/components/AdminRoute.tsx
index a3556cc4..5c5420a7 100644
--- a/Frontend/src/features/auth/components/AdminRoute.tsx
+++ b/Frontend/src/features/auth/components/AdminRoute.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Navigate } from 'react-router-dom';
 import useAuthStore from '../../../store/useAuthStore';
-import { useAuthModal } from '../contexts/AuthModalContext';
 
 interface AdminRouteProps {
   children: React.ReactNode;
@@ -19,14 +18,6 @@ const AdminRoute: React.FC<AdminRouteProps> = ({
   children
 }) => {
   const { isAuthenticated, userInfo, isLoading } = useAuthStore();
-  const { openModal } = useAuthModal();
-  
-  // SECURITY: Client-side role check - backend must also validate
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      openModal('login');
-    }
-  }, [isLoading, isAuthenticated, openModal]);
   
   if (isLoading) {
     return (
@@ -49,7 +40,7 @@ const AdminRoute: React.FC<AdminRouteProps> = ({
 
   
   if (!isAuthenticated) {
-    return null; // Modal will be shown by AuthModalManager
+    return <Navigate to="/admin/login" replace />;
   }
 
   
diff --git a/Frontend/src/features/auth/components/ForgotPasswordModal.tsx b/Frontend/src/features/auth/components/ForgotPasswordModal.tsx
index 62374f45..a525ad37 100644
--- a/Frontend/src/features/auth/components/ForgotPasswordModal.tsx
+++ b/Frontend/src/features/auth/components/ForgotPasswordModal.tsx
@@ -63,7 +63,9 @@ const ForgotPasswordModal: React.FC = () => {
       await forgotPassword({ email: data.email });
       setIsSuccess(true);
     } catch (error) {
-      console.error('Forgot password error:', error);
+      if (import.meta.env.DEV) {
+        console.error('Forgot password error:', error);
+      }
     }
   };
 
diff --git a/Frontend/src/features/auth/components/HousekeepingRoute.tsx b/Frontend/src/features/auth/components/HousekeepingRoute.tsx
index fbb51410..85c34813 100644
--- a/Frontend/src/features/auth/components/HousekeepingRoute.tsx
+++ b/Frontend/src/features/auth/components/HousekeepingRoute.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Navigate } from 'react-router-dom';
 import useAuthStore from '../../../store/useAuthStore';
-import { useAuthModal } from '../contexts/AuthModalContext';
 
 interface HousekeepingRouteProps {
   children: React.ReactNode;
@@ -9,13 +8,6 @@ interface HousekeepingRouteProps {
 
 const HousekeepingRoute: React.FC<HousekeepingRouteProps> = ({ children }) => {
   const { isAuthenticated, userInfo, isLoading } = useAuthStore();
-  const { openModal } = useAuthModal();
-  
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      openModal('login');
-    }
-  }, [isLoading, isAuthenticated, openModal]);
   
   if (isLoading) {
     return (
@@ -29,7 +21,7 @@ const HousekeepingRoute: React.FC<HousekeepingRouteProps> = ({ children }) => {
   }
 
   if (!isAuthenticated) {
-    return null; // Modal will be shown by AuthModalManager
+    return <Navigate to="/housekeeping/login" replace />;
   }
 
   // Only allow housekeeping role - no admin or staff access
diff --git a/Frontend/src/features/auth/components/LoginModal.tsx b/Frontend/src/features/auth/components/LoginModal.tsx
index af75f25a..6a0f20cf 100644
--- a/Frontend/src/features/auth/components/LoginModal.tsx
+++ b/Frontend/src/features/auth/components/LoginModal.tsx
@@ -13,6 +13,7 @@ import Recaptcha from '../../../shared/components/Recaptcha';
 import { recaptchaService } from '../../../features/system/services/systemSettingsService';
 import { useAntibotForm } from '../hooks/useAntibotForm';
 import HoneypotField from '../../../shared/components/HoneypotField';
+import authService from '../services/authService';
 
 const mfaTokenSchema = yup.object().shape({
   mfaToken: yup
@@ -27,7 +28,7 @@ type MFATokenFormData = yup.InferType<typeof mfaTokenSchema>;
 
 const LoginModal: React.FC = () => {
   const { closeModal, openModal } = useAuthModal();
-  const { login, verifyMFA, isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated, userInfo } = useAuthStore();
+  const { isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated, userInfo } = useAuthStore();
   const { settings } = useCompanySettings();
   const navigate = useNavigate();
   
@@ -63,26 +64,24 @@ const LoginModal: React.FC = () => {
     },
   });
 
-  // Close modal and redirect to appropriate dashboard on successful authentication
+  // Close modal and redirect to customer dashboard on successful authentication
+  // This modal is ONLY for customers - other roles have separate login pages
+  // This is a safety check in case user navigates back or state changes
   useEffect(() => {
     if (!isLoading && isAuthenticated && !requiresMFA && userInfo) {
-      closeModal();
-      
-      // Redirect to role-specific dashboard
       const role = userInfo.role?.toLowerCase() || (userInfo as any).role_name?.toLowerCase();
       
-      if (role === 'admin') {
-        navigate('/admin/dashboard', { replace: true });
-      } else if (role === 'staff') {
-        navigate('/staff/dashboard', { replace: true });
-      } else if (role === 'accountant') {
-        navigate('/accountant/dashboard', { replace: true });
-      } else if (role === 'housekeeping') {
-        navigate('/housekeeping/dashboard', { replace: true });
-      } else {
-        // Customer or default - go to customer dashboard
-        navigate('/dashboard', { replace: true });
+      // Reject non-customer roles - they should use their dedicated login pages
+      // This should not happen if onSubmit logic works correctly, but handle it as safety
+      if (role === 'admin' || role === 'staff' || role === 'accountant' || role === 'housekeeping') {
+        closeModal();
+        navigate(`/${role}/login`, { replace: true });
+        return;
       }
+      
+      // Only allow customers - close modal and redirect to dashboard
+      closeModal();
+      navigate('/dashboard', { replace: true });
     }
   }, [isLoading, isAuthenticated, requiresMFA, userInfo, closeModal, navigate]);
 
@@ -125,15 +124,120 @@ const LoginModal: React.FC = () => {
         }
       }
       
-      await login({
-        email: data.email,
-        password: data.password,
-        rememberMe: data.rememberMe,
-      });
+      // Call login API directly to check role BEFORE showing success toast
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const response = await authService.login({
+          email: data.email,
+          password: data.password,
+          rememberMe: data.rememberMe,
+          expectedRole: 'customer',  // Customer login page only accepts customers
+        });
 
-      setRecaptchaToken(null);
+        // Handle MFA requirement
+        if (response.requires_mfa) {
+          useAuthStore.setState({
+            isLoading: false,
+            requiresMFA: true,
+            mfaUserId: response.user_id || null,
+            pendingCredentials: {
+              email: data.email,
+              password: data.password,
+              rememberMe: data.rememberMe,
+              expectedRole: 'customer',
+            },
+            error: null,
+          });
+          setRecaptchaToken(null);
+          return;
+        }
+
+        // Check if login was successful
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'Login failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-customer roles - show error and don't authenticate
+          if (role === 'admin' || role === 'staff' || role === 'accountant' || role === 'housekeeping') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for customers. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset loading state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+            });
+            
+            setRecaptchaToken(null);
+            closeModal();
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is a customer
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for customers
+          toast.success('Login successful!');
+          setRecaptchaToken(null);
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'Login failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          isAuthenticated: false,
+          requiresMFA: false,
+          mfaUserId: null,
+          pendingCredentials: null,
+        });
+        toast.error(errorMessage);
+        setRecaptchaToken(null);
+      }
     } catch (error) {
-      console.error('Login error:', error);
+      if (import.meta.env.DEV) {
+        console.error('Login error:', error);
+      }
       setRecaptchaToken(null);
     }
   };
@@ -141,7 +245,103 @@ const LoginModal: React.FC = () => {
   const onSubmitMFA = async (data: MFATokenFormData) => {
     try {
       clearError();
-      await verifyMFA(data.mfaToken);
+      
+      // Get pending credentials from store
+      const state = useAuthStore.getState();
+      if (!state.pendingCredentials) {
+        toast.error('No pending login credentials');
+        return;
+      }
+
+      // Call MFA verification API directly to check role before showing success
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const credentials = {
+          ...state.pendingCredentials,
+          mfaToken: data.mfaToken,
+          expectedRole: 'customer',  // Customer login page only accepts customers
+        };
+
+        const response = await authService.login(credentials);
+
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'MFA verification failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-customer roles - show error and don't authenticate
+          if (role === 'admin' || role === 'staff' || role === 'accountant' || role === 'housekeeping') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for customers. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset auth store state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+              requiresMFA: false,
+              mfaUserId: null,
+              pendingCredentials: null,
+            });
+            
+            closeModal();
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is a customer
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for customers
+          toast.success('Login successful!');
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'MFA verification failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          requiresMFA: true, // Keep MFA state in case of error
+        });
+        toast.error(errorMessage);
+      }
     } catch (error) {
       console.error('MFA verification error:', error);
     }
@@ -397,7 +597,9 @@ const LoginModal: React.FC = () => {
                 <Recaptcha
                   onChange={(token) => setRecaptchaToken(token)}
                   onError={(error) => {
-                    console.error('reCAPTCHA error:', error);
+                    if (import.meta.env.DEV) {
+                      console.error('reCAPTCHA error:', error);
+                    }
                     setRecaptchaToken(null);
                   }}
                   theme="light"
diff --git a/Frontend/src/features/auth/components/RegisterModal.tsx b/Frontend/src/features/auth/components/RegisterModal.tsx
index 56147636..e4f841e9 100644
--- a/Frontend/src/features/auth/components/RegisterModal.tsx
+++ b/Frontend/src/features/auth/components/RegisterModal.tsx
@@ -134,7 +134,9 @@ const RegisterModal: React.FC = () => {
 
       setRecaptchaToken(null);
     } catch (error) {
-      console.error('Register error:', error);
+      if (import.meta.env.DEV) {
+        console.error('Register error:', error);
+      }
       setRecaptchaToken(null);
     }
   };
@@ -407,7 +409,9 @@ const RegisterModal: React.FC = () => {
               <Recaptcha
                 onChange={(token) => setRecaptchaToken(token)}
                 onError={(error) => {
-                  console.error('reCAPTCHA error:', error);
+                  if (import.meta.env.DEV) {
+                    console.error('reCAPTCHA error:', error);
+                  }
                   setRecaptchaToken(null);
                 }}
                 theme="light"
diff --git a/Frontend/src/features/auth/components/ResetPasswordModal.tsx b/Frontend/src/features/auth/components/ResetPasswordModal.tsx
index ad0007a8..10227440 100644
--- a/Frontend/src/features/auth/components/ResetPasswordModal.tsx
+++ b/Frontend/src/features/auth/components/ResetPasswordModal.tsx
@@ -95,7 +95,9 @@ const ResetPasswordModal: React.FC<ResetPasswordModalProps> = ({ token }) => {
       });
       setIsSuccess(true);
     } catch (error) {
-      console.error('Reset password error:', error);
+      if (import.meta.env.DEV) {
+        console.error('Reset password error:', error);
+      }
     }
   };
 
diff --git a/Frontend/src/features/auth/components/StaffRoute.tsx b/Frontend/src/features/auth/components/StaffRoute.tsx
index 76f3680f..1d9c3767 100644
--- a/Frontend/src/features/auth/components/StaffRoute.tsx
+++ b/Frontend/src/features/auth/components/StaffRoute.tsx
@@ -1,7 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { Navigate } from 'react-router-dom';
 import useAuthStore from '../../../store/useAuthStore';
-import { useAuthModal } from '../contexts/AuthModalContext';
 
 interface StaffRouteProps {
   children: React.ReactNode;
@@ -11,14 +10,6 @@ const StaffRoute: React.FC<StaffRouteProps> = ({
   children
 }) => {
   const { isAuthenticated, userInfo, isLoading } = useAuthStore();
-  const { openModal } = useAuthModal();
-  
-  
-  useEffect(() => {
-    if (!isLoading && !isAuthenticated) {
-      openModal('login');
-    }
-  }, [isLoading, isAuthenticated, openModal]);
   
   if (isLoading) {
     return (
@@ -41,7 +32,7 @@ const StaffRoute: React.FC<StaffRouteProps> = ({
 
   
   if (!isAuthenticated) {
-    return null; // Modal will be shown by AuthModalManager
+    return <Navigate to="/staff/login" replace />;
   }
 
   
diff --git a/Frontend/src/features/auth/hooks/useAntibotForm.ts b/Frontend/src/features/auth/hooks/useAntibotForm.ts
index 599d7c9b..41fe9647 100644
--- a/Frontend/src/features/auth/hooks/useAntibotForm.ts
+++ b/Frontend/src/features/auth/hooks/useAntibotForm.ts
@@ -112,7 +112,9 @@ export const useAntibotForm = (options: UseAntibotFormOptions): UseAntibotFormRe
       setIsValidating(false);
       return true;
     } catch (error) {
-      console.error('Antibot validation error:', error);
+      if (import.meta.env.DEV) {
+        console.error('Antibot validation error:', error);
+      }
       setIsValidating(false);
       return false;
     }
diff --git a/Frontend/src/features/auth/pages/AccountantLoginPage.tsx b/Frontend/src/features/auth/pages/AccountantLoginPage.tsx
new file mode 100644
index 00000000..3944d112
--- /dev/null
+++ b/Frontend/src/features/auth/pages/AccountantLoginPage.tsx
@@ -0,0 +1,571 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, LogIn, Loader2, Mail, Lock, Shield, ArrowLeft, Calculator } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom';
+import useAuthStore from '../../../store/useAuthStore';
+import { loginSchema, LoginFormData } from '../../../shared/utils/validationSchemas';
+import { useCompanySettings } from '../../../shared/contexts/CompanySettingsContext';
+import * as yup from 'yup';
+import { toast } from 'react-toastify';
+import Recaptcha from '../../../shared/components/Recaptcha';
+import { recaptchaService } from '../../../features/system/services/systemSettingsService';
+import { useAntibotForm } from '../hooks/useAntibotForm';
+import HoneypotField from '../../../shared/components/HoneypotField';
+import authService from '../services/authService';
+
+const mfaTokenSchema = yup.object().shape({
+  mfaToken: yup
+    .string()
+    .required('MFA token is required')
+    .min(6, 'MFA token must be 6 digits')
+    .max(8, 'MFA token must be 6-8 characters')
+    .matches(/^\d+$|^[A-Z0-9]{8}$/, 'Invalid token format'),
+});
+
+type MFATokenFormData = yup.InferType<typeof mfaTokenSchema>;
+
+const AccountantLoginPage: React.FC = () => {
+  const { isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated, userInfo } = useAuthStore();
+  const { settings } = useCompanySettings();
+  const navigate = useNavigate();
+  
+  const [showPassword, setShowPassword] = useState(false);
+  
+  const {
+    honeypotValue,
+    setHoneypotValue,
+    recaptchaToken,
+    setRecaptchaToken,
+    validate: validateAntibot,
+    rateLimitInfo,
+  } = useAntibotForm({
+    formId: 'accountant-login',
+    minTimeOnPage: 3000,
+    minTimeToFill: 2000,
+    requireRecaptcha: false,
+    maxAttempts: 5,
+    onValidationError: (errors) => {
+      errors.forEach((err) => toast.error(err));
+    },
+  });
+  
+  const {
+    register: registerMFA,
+    handleSubmit: handleSubmitMFA,
+    formState: { errors: mfaErrors },
+  } = useForm<MFATokenFormData>({
+    resolver: yupResolver(mfaTokenSchema),
+    defaultValues: {
+      mfaToken: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated && !requiresMFA && userInfo) {
+      const role = userInfo.role?.toLowerCase() || (userInfo as any).role_name?.toLowerCase();
+      
+      // Safety check - should not happen if onSubmit logic works correctly
+      if (role !== 'accountant') {
+        navigate(`/${role}/login`, { replace: true });
+        return;
+      }
+      
+      navigate('/accountant/dashboard', { replace: true });
+    }
+  }, [isLoading, isAuthenticated, requiresMFA, userInfo, navigate]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      clearError();
+      
+      // Validate antibot protection
+      const isValid = await validateAntibot();
+      if (!isValid) {
+        return;
+      }
+      
+      // Verify reCAPTCHA if token is provided
+      if (recaptchaToken) {
+        try {
+          const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+          if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+            toast.error('reCAPTCHA verification failed. Please try again.');
+            setRecaptchaToken(null);
+            return;
+          }
+        } catch (error) {
+          toast.error('reCAPTCHA verification failed. Please try again.');
+          setRecaptchaToken(null);
+          return;
+        }
+      }
+      
+      // Call login API directly to check role BEFORE showing success toast
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const response = await authService.login({
+          email: data.email,
+          password: data.password,
+          rememberMe: data.rememberMe,
+          expectedRole: 'accountant',  // Accountant login page only accepts accountants
+        });
+
+        // Handle MFA requirement
+        if (response.requires_mfa) {
+          useAuthStore.setState({
+            isLoading: false,
+            requiresMFA: true,
+            mfaUserId: response.user_id || null,
+            pendingCredentials: {
+              email: data.email,
+              password: data.password,
+              rememberMe: data.rememberMe,
+              expectedRole: 'accountant',
+            },
+            error: null,
+          });
+          setRecaptchaToken(null);
+          return;
+        }
+
+        // Check if login was successful
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'Login failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-accountant roles - show error and don't authenticate
+          if (role !== 'accountant') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for accountants. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset loading state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+            });
+            
+            setRecaptchaToken(null);
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is accountant
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for accountants
+          toast.success('Login successful!');
+          setRecaptchaToken(null);
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'Login failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          isAuthenticated: false,
+          requiresMFA: false,
+          mfaUserId: null,
+          pendingCredentials: null,
+        });
+        toast.error(errorMessage);
+        setRecaptchaToken(null);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('Login error:', error);
+      }
+      setRecaptchaToken(null);
+    }
+  };
+
+  const onSubmitMFA = async (data: MFATokenFormData) => {
+    try {
+      clearError();
+      
+      // Get pending credentials from store
+      const state = useAuthStore.getState();
+      if (!state.pendingCredentials) {
+        toast.error('No pending login credentials');
+        return;
+      }
+
+      // Call MFA verification API directly to check role before showing success
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const credentials = {
+          ...state.pendingCredentials,
+          mfaToken: data.mfaToken,
+          expectedRole: 'accountant',  // Accountant login page only accepts accountants
+        };
+
+        const response = await authService.login(credentials);
+
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'MFA verification failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-accountant roles - show error and don't authenticate
+          if (role !== 'accountant') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for accountants. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset auth store state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+              requiresMFA: false,
+              mfaUserId: null,
+              pendingCredentials: null,
+            });
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is accountant
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for accountants
+          toast.success('Login successful!');
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'MFA verification failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          requiresMFA: true, // Keep MFA state in case of error
+        });
+        toast.error(errorMessage);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('MFA verification error:', error);
+      }
+    }
+  };
+
+  const handleBackToLogin = () => {
+    clearMFA();
+    clearError();
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-2xl shadow-2xl border border-gray-200/50 overflow-hidden">
+          <div className="bg-gradient-to-r from-green-600 via-emerald-500 to-teal-600 p-6 sm:p-8 text-center">
+            <div className="flex justify-center mb-4">
+              {settings.company_logo_url ? (
+                <img 
+                  src={settings.company_logo_url.startsWith('http') 
+                    ? settings.company_logo_url 
+                    : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`}
+                  alt={settings.company_name || 'Logo'}
+                  className="h-16 w-auto max-w-[150px] object-contain bg-white/20 p-2 rounded-lg"
+                />
+              ) : (
+                <div className="relative p-3 bg-white/20 backdrop-blur-sm rounded-full">
+                  <Calculator className="w-10 h-10 text-white" />
+                </div>
+              )}
+            </div>
+            <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">Accountant Login</h1>
+            <p className="text-green-100 text-sm">Access your accountant dashboard</p>
+          </div>
+
+          <div className="p-6 sm:p-8">
+            {requiresMFA ? (
+              <form onSubmit={handleSubmitMFA(onSubmitMFA)} className="space-y-5">
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="mfaToken" className="block text-sm font-medium text-gray-700 mb-2">
+                    Authentication Code
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Shield className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...registerMFA('mfaToken')}
+                      id="mfaToken"
+                      type="text"
+                      autoComplete="one-time-code"
+                      maxLength={8}
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg text-center tracking-widest ${
+                        mfaErrors.mfaToken ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-green-500'
+                      }`}
+                      placeholder="000000"
+                    />
+                  </div>
+                  {mfaErrors.mfaToken && (
+                    <p className="mt-1 text-sm text-red-600">{mfaErrors.mfaToken.message}</p>
+                  )}
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-green-600 to-teal-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-green-700 hover:to-teal-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Verifying...
+                    </>
+                  ) : (
+                    <>
+                      <Shield className="mr-2 h-5 w-5" />
+                      Verify
+                    </>
+                  )}
+                </button>
+
+                <div className="text-center">
+                  <button
+                    type="button"
+                    onClick={handleBackToLogin}
+                    className="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900"
+                  >
+                    <ArrowLeft className="mr-1 h-4 w-4" />
+                    Back to Login
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                <HoneypotField value={honeypotValue} onChange={setHoneypotValue} />
+                
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+                
+                {rateLimitInfo && !rateLimitInfo.allowed && (
+                  <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg text-sm">
+                    <p className="font-medium">Too many login attempts.</p>
+                    <p className="text-xs mt-1">
+                      Please try again after {new Date(rateLimitInfo.resetTime).toLocaleTimeString()}
+                    </p>
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                    Email
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Mail className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('email')}
+                      id="email"
+                      type="email"
+                      autoComplete="email"
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg ${
+                        errors.email ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-green-500'
+                      }`}
+                      placeholder="email@example.com"
+                    />
+                  </div>
+                  {errors.email && (
+                    <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Lock className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('password')}
+                      id="password"
+                      type={showPassword ? 'text' : 'password'}
+                      autoComplete="current-password"
+                      className={`w-full pl-10 pr-10 py-3 border rounded-lg ${
+                        errors.password ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-green-500'
+                      }`}
+                      placeholder="••••••••"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5 text-gray-400" />
+                      ) : (
+                        <Eye className="h-5 w-5 text-gray-400" />
+                      )}
+                    </button>
+                  </div>
+                  {errors.password && (
+                    <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+                  )}
+                </div>
+
+                <div className="flex items-center">
+                  <input
+                    {...register('rememberMe')}
+                    id="rememberMe"
+                    type="checkbox"
+                    className="h-4 w-4 text-green-600 focus:ring-green-500 border-gray-300 rounded"
+                  />
+                  <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-700">
+                    Remember me
+                  </label>
+                </div>
+
+                <div className="flex justify-center">
+                  <Recaptcha
+                    onChange={(token) => setRecaptchaToken(token)}
+                    onError={(error) => {
+                      if (import.meta.env.DEV) {
+                        console.error('reCAPTCHA error:', error);
+                      }
+                      setRecaptchaToken(null);
+                    }}
+                    theme="light"
+                    size="normal"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-green-600 to-teal-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-green-700 hover:to-teal-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <LogIn className="mr-2 h-5 w-5" />
+                      Sign In
+                    </>
+                  )}
+                </button>
+              </form>
+            )}
+
+            <div className="mt-6 text-center">
+              <Link
+                to="/"
+                className="text-sm text-gray-600 hover:text-gray-900"
+              >
+                ← Back to Home
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccountantLoginPage;
+
diff --git a/Frontend/src/features/auth/pages/AdminLoginPage.tsx b/Frontend/src/features/auth/pages/AdminLoginPage.tsx
new file mode 100644
index 00000000..afe0b26b
--- /dev/null
+++ b/Frontend/src/features/auth/pages/AdminLoginPage.tsx
@@ -0,0 +1,571 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, LogIn, Loader2, Mail, Lock, Shield, ArrowLeft, Settings } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom';
+import useAuthStore from '../../../store/useAuthStore';
+import { loginSchema, LoginFormData } from '../../../shared/utils/validationSchemas';
+import { useCompanySettings } from '../../../shared/contexts/CompanySettingsContext';
+import * as yup from 'yup';
+import { toast } from 'react-toastify';
+import Recaptcha from '../../../shared/components/Recaptcha';
+import { recaptchaService } from '../../../features/system/services/systemSettingsService';
+import { useAntibotForm } from '../hooks/useAntibotForm';
+import HoneypotField from '../../../shared/components/HoneypotField';
+import authService from '../services/authService';
+
+const mfaTokenSchema = yup.object().shape({
+  mfaToken: yup
+    .string()
+    .required('MFA token is required')
+    .min(6, 'MFA token must be 6 digits')
+    .max(8, 'MFA token must be 6-8 characters')
+    .matches(/^\d+$|^[A-Z0-9]{8}$/, 'Invalid token format'),
+});
+
+type MFATokenFormData = yup.InferType<typeof mfaTokenSchema>;
+
+const AdminLoginPage: React.FC = () => {
+  const { isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated, userInfo } = useAuthStore();
+  const { settings } = useCompanySettings();
+  const navigate = useNavigate();
+  
+  const [showPassword, setShowPassword] = useState(false);
+  
+  const {
+    honeypotValue,
+    setHoneypotValue,
+    recaptchaToken,
+    setRecaptchaToken,
+    validate: validateAntibot,
+    rateLimitInfo,
+  } = useAntibotForm({
+    formId: 'admin-login',
+    minTimeOnPage: 3000,
+    minTimeToFill: 2000,
+    requireRecaptcha: false,
+    maxAttempts: 5,
+    onValidationError: (errors) => {
+      errors.forEach((err) => toast.error(err));
+    },
+  });
+  
+  const {
+    register: registerMFA,
+    handleSubmit: handleSubmitMFA,
+    formState: { errors: mfaErrors },
+  } = useForm<MFATokenFormData>({
+    resolver: yupResolver(mfaTokenSchema),
+    defaultValues: {
+      mfaToken: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated && !requiresMFA && userInfo) {
+      const role = userInfo.role?.toLowerCase() || (userInfo as any).role_name?.toLowerCase();
+      
+      // Safety check - should not happen if onSubmit logic works correctly
+      if (role !== 'admin') {
+        navigate(`/${role}/login`, { replace: true });
+        return;
+      }
+      
+      navigate('/admin/dashboard', { replace: true });
+    }
+  }, [isLoading, isAuthenticated, requiresMFA, userInfo, navigate]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      clearError();
+      
+      // Validate antibot protection
+      const isValid = await validateAntibot();
+      if (!isValid) {
+        return;
+      }
+      
+      // Verify reCAPTCHA if token is provided
+      if (recaptchaToken) {
+        try {
+          const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+          if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+            toast.error('reCAPTCHA verification failed. Please try again.');
+            setRecaptchaToken(null);
+            return;
+          }
+        } catch (error) {
+          toast.error('reCAPTCHA verification failed. Please try again.');
+          setRecaptchaToken(null);
+          return;
+        }
+      }
+      
+      // Call login API directly to check role BEFORE showing success toast
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const response = await authService.login({
+          email: data.email,
+          password: data.password,
+          rememberMe: data.rememberMe,
+          expectedRole: 'admin',  // Admin login page only accepts admins
+        });
+
+        // Handle MFA requirement
+        if (response.requires_mfa) {
+          useAuthStore.setState({
+            isLoading: false,
+            requiresMFA: true,
+            mfaUserId: response.user_id || null,
+            pendingCredentials: {
+              email: data.email,
+              password: data.password,
+              rememberMe: data.rememberMe,
+              expectedRole: 'admin',
+            },
+            error: null,
+          });
+          setRecaptchaToken(null);
+          return;
+        }
+
+        // Check if login was successful
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'Login failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-admin roles - show error and don't authenticate
+          if (role !== 'admin') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for administrators. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset loading state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+            });
+            
+            setRecaptchaToken(null);
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is an admin
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for admins
+          toast.success('Login successful!');
+          setRecaptchaToken(null);
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'Login failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          isAuthenticated: false,
+          requiresMFA: false,
+          mfaUserId: null,
+          pendingCredentials: null,
+        });
+        toast.error(errorMessage);
+        setRecaptchaToken(null);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('Login error:', error);
+      }
+      setRecaptchaToken(null);
+    }
+  };
+
+  const onSubmitMFA = async (data: MFATokenFormData) => {
+    try {
+      clearError();
+      
+      // Get pending credentials from store
+      const state = useAuthStore.getState();
+      if (!state.pendingCredentials) {
+        toast.error('No pending login credentials');
+        return;
+      }
+
+      // Call MFA verification API directly to check role before showing success
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const credentials = {
+          ...state.pendingCredentials,
+          mfaToken: data.mfaToken,
+          expectedRole: 'admin',  // Admin login page only accepts admins
+        };
+
+        const response = await authService.login(credentials);
+
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'MFA verification failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-admin roles - show error and don't authenticate
+          if (role !== 'admin') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for administrators. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset auth store state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+              requiresMFA: false,
+              mfaUserId: null,
+              pendingCredentials: null,
+            });
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is an admin
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for admins
+          toast.success('Login successful!');
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'MFA verification failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          requiresMFA: true, // Keep MFA state in case of error
+        });
+        toast.error(errorMessage);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('MFA verification error:', error);
+      }
+    }
+  };
+
+  const handleBackToLogin = () => {
+    clearMFA();
+    clearError();
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-2xl shadow-2xl border border-gray-200/50 overflow-hidden">
+          <div className="bg-gradient-to-r from-purple-600 via-purple-500 to-indigo-600 p-6 sm:p-8 text-center">
+            <div className="flex justify-center mb-4">
+              {settings.company_logo_url ? (
+                <img 
+                  src={settings.company_logo_url.startsWith('http') 
+                    ? settings.company_logo_url 
+                    : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`}
+                  alt={settings.company_name || 'Logo'}
+                  className="h-16 w-auto max-w-[150px] object-contain bg-white/20 p-2 rounded-lg"
+                />
+              ) : (
+                <div className="relative p-3 bg-white/20 backdrop-blur-sm rounded-full">
+                  <Settings className="w-10 h-10 text-white" />
+                </div>
+              )}
+            </div>
+            <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">Admin Login</h1>
+            <p className="text-purple-100 text-sm">Access your admin dashboard</p>
+          </div>
+
+          <div className="p-6 sm:p-8">
+            {requiresMFA ? (
+              <form onSubmit={handleSubmitMFA(onSubmitMFA)} className="space-y-5">
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="mfaToken" className="block text-sm font-medium text-gray-700 mb-2">
+                    Authentication Code
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Shield className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...registerMFA('mfaToken')}
+                      id="mfaToken"
+                      type="text"
+                      autoComplete="one-time-code"
+                      maxLength={8}
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg text-center tracking-widest ${
+                        mfaErrors.mfaToken ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-purple-500'
+                      }`}
+                      placeholder="000000"
+                    />
+                  </div>
+                  {mfaErrors.mfaToken && (
+                    <p className="mt-1 text-sm text-red-600">{mfaErrors.mfaToken.message}</p>
+                  )}
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Verifying...
+                    </>
+                  ) : (
+                    <>
+                      <Shield className="mr-2 h-5 w-5" />
+                      Verify
+                    </>
+                  )}
+                </button>
+
+                <div className="text-center">
+                  <button
+                    type="button"
+                    onClick={handleBackToLogin}
+                    className="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900"
+                  >
+                    <ArrowLeft className="mr-1 h-4 w-4" />
+                    Back to Login
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                <HoneypotField value={honeypotValue} onChange={setHoneypotValue} />
+                
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+                
+                {rateLimitInfo && !rateLimitInfo.allowed && (
+                  <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg text-sm">
+                    <p className="font-medium">Too many login attempts.</p>
+                    <p className="text-xs mt-1">
+                      Please try again after {new Date(rateLimitInfo.resetTime).toLocaleTimeString()}
+                    </p>
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                    Email
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Mail className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('email')}
+                      id="email"
+                      type="email"
+                      autoComplete="email"
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg ${
+                        errors.email ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-purple-500'
+                      }`}
+                      placeholder="email@example.com"
+                    />
+                  </div>
+                  {errors.email && (
+                    <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Lock className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('password')}
+                      id="password"
+                      type={showPassword ? 'text' : 'password'}
+                      autoComplete="current-password"
+                      className={`w-full pl-10 pr-10 py-3 border rounded-lg ${
+                        errors.password ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-purple-500'
+                      }`}
+                      placeholder="••••••••"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5 text-gray-400" />
+                      ) : (
+                        <Eye className="h-5 w-5 text-gray-400" />
+                      )}
+                    </button>
+                  </div>
+                  {errors.password && (
+                    <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+                  )}
+                </div>
+
+                <div className="flex items-center">
+                  <input
+                    {...register('rememberMe')}
+                    id="rememberMe"
+                    type="checkbox"
+                    className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"
+                  />
+                  <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-700">
+                    Remember me
+                  </label>
+                </div>
+
+                <div className="flex justify-center">
+                  <Recaptcha
+                    onChange={(token) => setRecaptchaToken(token)}
+                    onError={(error) => {
+                      if (import.meta.env.DEV) {
+                        console.error('reCAPTCHA error:', error);
+                      }
+                      setRecaptchaToken(null);
+                    }}
+                    theme="light"
+                    size="normal"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-purple-700 hover:to-indigo-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <LogIn className="mr-2 h-5 w-5" />
+                      Sign In
+                    </>
+                  )}
+                </button>
+              </form>
+            )}
+
+            <div className="mt-6 text-center">
+              <Link
+                to="/"
+                className="text-sm text-gray-600 hover:text-gray-900"
+              >
+                ← Back to Home
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AdminLoginPage;
+
diff --git a/Frontend/src/features/auth/pages/HousekeepingLoginPage.tsx b/Frontend/src/features/auth/pages/HousekeepingLoginPage.tsx
new file mode 100644
index 00000000..5605b5fa
--- /dev/null
+++ b/Frontend/src/features/auth/pages/HousekeepingLoginPage.tsx
@@ -0,0 +1,571 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, LogIn, Loader2, Mail, Lock, Shield, ArrowLeft, Sparkles } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom';
+import useAuthStore from '../../../store/useAuthStore';
+import { loginSchema, LoginFormData } from '../../../shared/utils/validationSchemas';
+import { useCompanySettings } from '../../../shared/contexts/CompanySettingsContext';
+import * as yup from 'yup';
+import { toast } from 'react-toastify';
+import Recaptcha from '../../../shared/components/Recaptcha';
+import { recaptchaService } from '../../../features/system/services/systemSettingsService';
+import { useAntibotForm } from '../hooks/useAntibotForm';
+import HoneypotField from '../../../shared/components/HoneypotField';
+import authService from '../services/authService';
+
+const mfaTokenSchema = yup.object().shape({
+  mfaToken: yup
+    .string()
+    .required('MFA token is required')
+    .min(6, 'MFA token must be 6 digits')
+    .max(8, 'MFA token must be 6-8 characters')
+    .matches(/^\d+$|^[A-Z0-9]{8}$/, 'Invalid token format'),
+});
+
+type MFATokenFormData = yup.InferType<typeof mfaTokenSchema>;
+
+const HousekeepingLoginPage: React.FC = () => {
+  const { isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated, userInfo } = useAuthStore();
+  const { settings } = useCompanySettings();
+  const navigate = useNavigate();
+  
+  const [showPassword, setShowPassword] = useState(false);
+  
+  const {
+    honeypotValue,
+    setHoneypotValue,
+    recaptchaToken,
+    setRecaptchaToken,
+    validate: validateAntibot,
+    rateLimitInfo,
+  } = useAntibotForm({
+    formId: 'housekeeping-login',
+    minTimeOnPage: 3000,
+    minTimeToFill: 2000,
+    requireRecaptcha: false,
+    maxAttempts: 5,
+    onValidationError: (errors) => {
+      errors.forEach((err) => toast.error(err));
+    },
+  });
+  
+  const {
+    register: registerMFA,
+    handleSubmit: handleSubmitMFA,
+    formState: { errors: mfaErrors },
+  } = useForm<MFATokenFormData>({
+    resolver: yupResolver(mfaTokenSchema),
+    defaultValues: {
+      mfaToken: '',
+    },
+  });
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated && !requiresMFA && userInfo) {
+      const role = userInfo.role?.toLowerCase() || (userInfo as any).role_name?.toLowerCase();
+      
+      // Safety check - should not happen if onSubmit logic works correctly
+      if (role !== 'housekeeping') {
+        navigate(`/${role}/login`, { replace: true });
+        return;
+      }
+      
+      navigate('/housekeeping/dashboard', { replace: true });
+    }
+  }, [isLoading, isAuthenticated, requiresMFA, userInfo, navigate]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      clearError();
+      
+      // Validate antibot protection
+      const isValid = await validateAntibot();
+      if (!isValid) {
+        return;
+      }
+      
+      // Verify reCAPTCHA if token is provided
+      if (recaptchaToken) {
+        try {
+          const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+          if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+            toast.error('reCAPTCHA verification failed. Please try again.');
+            setRecaptchaToken(null);
+            return;
+          }
+        } catch (error) {
+          toast.error('reCAPTCHA verification failed. Please try again.');
+          setRecaptchaToken(null);
+          return;
+        }
+      }
+      
+      // Call login API directly to check role BEFORE showing success toast
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const response = await authService.login({
+          email: data.email,
+          password: data.password,
+          rememberMe: data.rememberMe,
+          expectedRole: 'housekeeping',  // Housekeeping login page only accepts housekeeping
+        });
+
+        // Handle MFA requirement
+        if (response.requires_mfa) {
+          useAuthStore.setState({
+            isLoading: false,
+            requiresMFA: true,
+            mfaUserId: response.user_id || null,
+            pendingCredentials: {
+              email: data.email,
+              password: data.password,
+              rememberMe: data.rememberMe,
+              expectedRole: 'housekeeping',
+            },
+            error: null,
+          });
+          setRecaptchaToken(null);
+          return;
+        }
+
+        // Check if login was successful
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'Login failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-housekeeping roles - show error and don't authenticate
+          if (role !== 'housekeeping') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for housekeeping staff. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset loading state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+            });
+            
+            setRecaptchaToken(null);
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is housekeeping
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for housekeeping
+          toast.success('Login successful!');
+          setRecaptchaToken(null);
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'Login failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          isAuthenticated: false,
+          requiresMFA: false,
+          mfaUserId: null,
+          pendingCredentials: null,
+        });
+        toast.error(errorMessage);
+        setRecaptchaToken(null);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('Login error:', error);
+      }
+      setRecaptchaToken(null);
+    }
+  };
+
+  const onSubmitMFA = async (data: MFATokenFormData) => {
+    try {
+      clearError();
+      
+      // Get pending credentials from store
+      const state = useAuthStore.getState();
+      if (!state.pendingCredentials) {
+        toast.error('No pending login credentials');
+        return;
+      }
+
+      // Call MFA verification API directly to check role before showing success
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const credentials = {
+          ...state.pendingCredentials,
+          mfaToken: data.mfaToken,
+          expectedRole: 'housekeeping',  // Housekeeping login page only accepts housekeeping
+        };
+
+        const response = await authService.login(credentials);
+
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'MFA verification failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-housekeeping roles - show error and don't authenticate
+          if (role !== 'housekeeping') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for housekeeping staff. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset auth store state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+              requiresMFA: false,
+              mfaUserId: null,
+              pendingCredentials: null,
+            });
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is housekeeping
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for housekeeping
+          toast.success('Login successful!');
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'MFA verification failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          requiresMFA: true, // Keep MFA state in case of error
+        });
+        toast.error(errorMessage);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('MFA verification error:', error);
+      }
+    }
+  };
+
+  const handleBackToLogin = () => {
+    clearMFA();
+    clearError();
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-2xl shadow-2xl border border-gray-200/50 overflow-hidden">
+          <div className="bg-gradient-to-r from-[#d4af37] via-[#c9a227] to-[#d4af37] p-6 sm:p-8 text-center">
+            <div className="flex justify-center mb-4">
+              {settings.company_logo_url ? (
+                <img 
+                  src={settings.company_logo_url.startsWith('http') 
+                    ? settings.company_logo_url 
+                    : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`}
+                  alt={settings.company_name || 'Logo'}
+                  className="h-16 w-auto max-w-[150px] object-contain bg-white/20 p-2 rounded-lg"
+                />
+              ) : (
+                <div className="relative p-3 bg-white/20 backdrop-blur-sm rounded-full">
+                  <Sparkles className="w-10 h-10 text-white" />
+                </div>
+              )}
+            </div>
+            <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">Housekeeping Login</h1>
+            <p className="text-white/90 text-sm">Access your housekeeping dashboard</p>
+          </div>
+
+          <div className="p-6 sm:p-8">
+            {requiresMFA ? (
+              <form onSubmit={handleSubmitMFA(onSubmitMFA)} className="space-y-5">
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="mfaToken" className="block text-sm font-medium text-gray-700 mb-2">
+                    Authentication Code
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Shield className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...registerMFA('mfaToken')}
+                      id="mfaToken"
+                      type="text"
+                      autoComplete="one-time-code"
+                      maxLength={8}
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg text-center tracking-widest ${
+                        mfaErrors.mfaToken ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-[#d4af37]'
+                      }`}
+                      placeholder="000000"
+                    />
+                  </div>
+                  {mfaErrors.mfaToken && (
+                    <p className="mt-1 text-sm text-red-600">{mfaErrors.mfaToken.message}</p>
+                  )}
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-white py-3 px-4 rounded-lg font-semibold hover:from-[#f5d76e] hover:to-[#d4af37] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Verifying...
+                    </>
+                  ) : (
+                    <>
+                      <Shield className="mr-2 h-5 w-5" />
+                      Verify
+                    </>
+                  )}
+                </button>
+
+                <div className="text-center">
+                  <button
+                    type="button"
+                    onClick={handleBackToLogin}
+                    className="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900"
+                  >
+                    <ArrowLeft className="mr-1 h-4 w-4" />
+                    Back to Login
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                <HoneypotField value={honeypotValue} onChange={setHoneypotValue} />
+                
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+                
+                {rateLimitInfo && !rateLimitInfo.allowed && (
+                  <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg text-sm">
+                    <p className="font-medium">Too many login attempts.</p>
+                    <p className="text-xs mt-1">
+                      Please try again after {new Date(rateLimitInfo.resetTime).toLocaleTimeString()}
+                    </p>
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                    Email
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Mail className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('email')}
+                      id="email"
+                      type="email"
+                      autoComplete="email"
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg ${
+                        errors.email ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-[#d4af37]'
+                      }`}
+                      placeholder="email@example.com"
+                    />
+                  </div>
+                  {errors.email && (
+                    <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Lock className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('password')}
+                      id="password"
+                      type={showPassword ? 'text' : 'password'}
+                      autoComplete="current-password"
+                      className={`w-full pl-10 pr-10 py-3 border rounded-lg ${
+                        errors.password ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-[#d4af37]'
+                      }`}
+                      placeholder="••••••••"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5 text-gray-400" />
+                      ) : (
+                        <Eye className="h-5 w-5 text-gray-400" />
+                      )}
+                    </button>
+                  </div>
+                  {errors.password && (
+                    <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+                  )}
+                </div>
+
+                <div className="flex items-center">
+                  <input
+                    {...register('rememberMe')}
+                    id="rememberMe"
+                    type="checkbox"
+                    className="h-4 w-4 text-[#d4af37] focus:ring-[#d4af37] border-gray-300 rounded"
+                  />
+                  <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-700">
+                    Remember me
+                  </label>
+                </div>
+
+                <div className="flex justify-center">
+                  <Recaptcha
+                    onChange={(token) => setRecaptchaToken(token)}
+                    onError={(error) => {
+                      if (import.meta.env.DEV) {
+                        console.error('reCAPTCHA error:', error);
+                      }
+                      setRecaptchaToken(null);
+                    }}
+                    theme="light"
+                    size="normal"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-white py-3 px-4 rounded-lg font-semibold hover:from-[#f5d76e] hover:to-[#d4af37] transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <LogIn className="mr-2 h-5 w-5" />
+                      Sign In
+                    </>
+                  )}
+                </button>
+              </form>
+            )}
+
+            <div className="mt-6 text-center">
+              <Link
+                to="/"
+                className="text-sm text-gray-600 hover:text-gray-900"
+              >
+                ← Back to Home
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HousekeepingLoginPage;
+
diff --git a/Frontend/src/features/auth/pages/StaffLoginPage.tsx b/Frontend/src/features/auth/pages/StaffLoginPage.tsx
new file mode 100644
index 00000000..a2e9c8b6
--- /dev/null
+++ b/Frontend/src/features/auth/pages/StaffLoginPage.tsx
@@ -0,0 +1,576 @@
+import React, { useState, useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { X, Eye, EyeOff, LogIn, Loader2, Mail, Lock, Shield, ArrowLeft, User } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom';
+import useAuthStore from '../../../store/useAuthStore';
+import { loginSchema, LoginFormData } from '../../../shared/utils/validationSchemas';
+import { useCompanySettings } from '../../../shared/contexts/CompanySettingsContext';
+import * as yup from 'yup';
+import { toast } from 'react-toastify';
+import Recaptcha from '../../../shared/components/Recaptcha';
+import { recaptchaService } from '../../../features/system/services/systemSettingsService';
+import { useAntibotForm } from '../hooks/useAntibotForm';
+import HoneypotField from '../../../shared/components/HoneypotField';
+import authService from '../services/authService';
+
+const mfaTokenSchema = yup.object().shape({
+  mfaToken: yup
+    .string()
+    .required('MFA token is required')
+    .min(6, 'MFA token must be 6 digits')
+    .max(8, 'MFA token must be 6-8 characters')
+    .matches(/^\d+$|^[A-Z0-9]{8}$/, 'Invalid token format'),
+});
+
+type MFATokenFormData = yup.InferType<typeof mfaTokenSchema>;
+
+const StaffLoginPage: React.FC = () => {
+  const { isLoading, error, clearError, requiresMFA, clearMFA, isAuthenticated, userInfo } = useAuthStore();
+  const { settings } = useCompanySettings();
+  const navigate = useNavigate();
+  
+  const [showPassword, setShowPassword] = useState(false);
+  
+  // Enhanced antibot protection
+  const {
+    honeypotValue,
+    setHoneypotValue,
+    recaptchaToken,
+    setRecaptchaToken,
+    validate: validateAntibot,
+    rateLimitInfo,
+  } = useAntibotForm({
+    formId: 'staff-login',
+    minTimeOnPage: 3000,
+    minTimeToFill: 2000,
+    requireRecaptcha: false,
+    maxAttempts: 5,
+    onValidationError: (errors) => {
+      errors.forEach((err) => toast.error(err));
+    },
+  });
+  
+  const {
+    register: registerMFA,
+    handleSubmit: handleSubmitMFA,
+    formState: { errors: mfaErrors },
+  } = useForm<MFATokenFormData>({
+    resolver: yupResolver(mfaTokenSchema),
+    defaultValues: {
+      mfaToken: '',
+    },
+  });
+
+  // Redirect to staff dashboard on successful authentication
+  useEffect(() => {
+    if (!isLoading && isAuthenticated && !requiresMFA && userInfo) {
+      const role = userInfo.role?.toLowerCase() || (userInfo as any).role_name?.toLowerCase();
+      
+      // Safety check - should not happen if onSubmit logic works correctly
+      if (role !== 'staff') {
+        navigate(`/${role}/login`, { replace: true });
+        return;
+      }
+      
+      navigate('/staff/dashboard', { replace: true });
+    }
+  }, [isLoading, isAuthenticated, requiresMFA, userInfo, navigate]);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<LoginFormData>({
+    resolver: yupResolver(loginSchema),
+    defaultValues: {
+      email: '',
+      password: '',
+      rememberMe: false,
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    try {
+      clearError();
+      
+      // Validate antibot protection
+      const isValid = await validateAntibot();
+      if (!isValid) {
+        return;
+      }
+      
+      // Verify reCAPTCHA if token is provided
+      if (recaptchaToken) {
+        try {
+          const verifyResponse = await recaptchaService.verifyRecaptcha(recaptchaToken);
+          if (verifyResponse.status === 'error' || !verifyResponse.data.verified) {
+            toast.error('reCAPTCHA verification failed. Please try again.');
+            setRecaptchaToken(null);
+            return;
+          }
+        } catch (error) {
+          toast.error('reCAPTCHA verification failed. Please try again.');
+          setRecaptchaToken(null);
+          return;
+        }
+      }
+      
+      // Call login API directly to check role BEFORE showing success toast
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const response = await authService.login({
+          email: data.email,
+          password: data.password,
+          rememberMe: data.rememberMe,
+          expectedRole: 'staff',  // Staff login page only accepts staff
+        });
+
+        // Handle MFA requirement
+        if (response.requires_mfa) {
+          useAuthStore.setState({
+            isLoading: false,
+            requiresMFA: true,
+            mfaUserId: response.user_id || null,
+            pendingCredentials: {
+              email: data.email,
+              password: data.password,
+              rememberMe: data.rememberMe,
+              expectedRole: 'staff',
+            },
+            error: null,
+          });
+          setRecaptchaToken(null);
+          return;
+        }
+
+        // Check if login was successful
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'Login failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-staff roles - show error and don't authenticate
+          if (role !== 'staff') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for staff members. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset loading state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+            });
+            
+            setRecaptchaToken(null);
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is staff
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for staff
+          toast.success('Login successful!');
+          setRecaptchaToken(null);
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'Login failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          isAuthenticated: false,
+          requiresMFA: false,
+          mfaUserId: null,
+          pendingCredentials: null,
+        });
+        toast.error(errorMessage);
+        setRecaptchaToken(null);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('Login error:', error);
+      }
+      setRecaptchaToken(null);
+    }
+  };
+
+  const onSubmitMFA = async (data: MFATokenFormData) => {
+    try {
+      clearError();
+      
+      // Get pending credentials from store
+      const state = useAuthStore.getState();
+      if (!state.pendingCredentials) {
+        toast.error('No pending login credentials');
+        return;
+      }
+
+      // Call MFA verification API directly to check role before showing success
+      useAuthStore.setState({ isLoading: true, error: null });
+      
+      try {
+        const credentials = {
+          ...state.pendingCredentials,
+          mfaToken: data.mfaToken,
+          expectedRole: 'staff',  // Staff login page only accepts staff
+        };
+
+        const response = await authService.login(credentials);
+
+        if (response.success || response.status === 'success') {
+          const user = response.data?.user ?? null;
+
+          if (!user) {
+            throw new Error(response.message || 'MFA verification failed.');
+          }
+
+          // Check role BEFORE setting authenticated state or showing success toast
+          const role = user.role?.toLowerCase() || (user as any).role_name?.toLowerCase();
+          
+          // Reject non-staff roles - show error and don't authenticate
+          if (role !== 'staff') {
+            // Call logout API to clear any server-side session
+            await authService.logout().catch(() => {
+              // Ignore logout errors
+            });
+            
+            // Show error toast
+            toast.error(`This login is only for staff members. Please use the ${role} login page at /${role}/login to access your account.`, {
+              autoClose: 6000,
+              position: 'top-center',
+              toastId: 'role-error',
+            });
+            
+            // Reset auth store state
+            useAuthStore.setState({
+              isLoading: false,
+              error: 'Invalid role for this login page',
+              requiresMFA: false,
+              mfaUserId: null,
+              pendingCredentials: null,
+            });
+            
+            // Navigate to the appropriate login page
+            setTimeout(() => {
+              navigate(`/${role}/login`, { replace: true });
+            }, 2000);
+            return;
+          }
+
+          // Only proceed with authentication if user is staff
+          // Store minimal userInfo in localStorage
+          const minimalUserInfo = {
+            id: user.id,
+            name: user.name,
+            email: user.email,
+            role: user.role,
+            avatar: user.avatar,
+          };
+          localStorage.setItem('userInfo', JSON.stringify(minimalUserInfo));
+
+          // Update auth store state
+          useAuthStore.setState({
+            token: null,
+            userInfo: user,
+            isAuthenticated: true,
+            isLoading: false,
+            error: null,
+            requiresMFA: false,
+            mfaUserId: null,
+            pendingCredentials: null,
+          });
+
+          // Show success toast only for staff
+          toast.success('Login successful!');
+        }
+      } catch (error: any) {
+        const errorMessage = error.response?.data?.message || 'MFA verification failed. Please try again.';
+        useAuthStore.setState({
+          isLoading: false,
+          error: errorMessage,
+          requiresMFA: true, // Keep MFA state in case of error
+        });
+        toast.error(errorMessage);
+      }
+    } catch (error) {
+      if (import.meta.env.DEV) {
+        console.error('MFA verification error:', error);
+      }
+    }
+  };
+
+  const handleBackToLogin = () => {
+    clearMFA();
+    clearError();
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 flex items-center justify-center p-4">
+      <div className="w-full max-w-md">
+        <div className="bg-white rounded-2xl shadow-2xl border border-gray-200/50 overflow-hidden">
+          {/* Header */}
+          <div className="bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-600 p-6 sm:p-8 text-center">
+            <div className="flex justify-center mb-4">
+              {settings.company_logo_url ? (
+                <img 
+                  src={settings.company_logo_url.startsWith('http') 
+                    ? settings.company_logo_url 
+                    : `${import.meta.env.VITE_API_URL || 'http://localhost:8000'}${settings.company_logo_url}`}
+                  alt={settings.company_name || 'Logo'}
+                  className="h-16 w-auto max-w-[150px] object-contain bg-white/20 p-2 rounded-lg"
+                />
+              ) : (
+                <div className="relative p-3 bg-white/20 backdrop-blur-sm rounded-full">
+                  <User className="w-10 h-10 text-white" />
+                </div>
+              )}
+            </div>
+            <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">Staff Login</h1>
+            <p className="text-blue-100 text-sm">Access your staff dashboard</p>
+          </div>
+
+          <div className="p-6 sm:p-8">
+            {requiresMFA ? (
+              <form onSubmit={handleSubmitMFA(onSubmitMFA)} className="space-y-5">
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="mfaToken" className="block text-sm font-medium text-gray-700 mb-2">
+                    Authentication Code
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Shield className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...registerMFA('mfaToken')}
+                      id="mfaToken"
+                      type="text"
+                      autoComplete="one-time-code"
+                      maxLength={8}
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg text-center tracking-widest ${
+                        mfaErrors.mfaToken ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
+                      }`}
+                      placeholder="000000"
+                    />
+                  </div>
+                  {mfaErrors.mfaToken && (
+                    <p className="mt-1 text-sm text-red-600">{mfaErrors.mfaToken.message}</p>
+                  )}
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-blue-600 to-cyan-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Verifying...
+                    </>
+                  ) : (
+                    <>
+                      <Shield className="mr-2 h-5 w-5" />
+                      Verify
+                    </>
+                  )}
+                </button>
+
+                <div className="text-center">
+                  <button
+                    type="button"
+                    onClick={handleBackToLogin}
+                    className="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900"
+                  >
+                    <ArrowLeft className="mr-1 h-4 w-4" />
+                    Back to Login
+                  </button>
+                </div>
+              </form>
+            ) : (
+              <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
+                <HoneypotField value={honeypotValue} onChange={setHoneypotValue} />
+                
+                {error && (
+                  <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
+                    {error}
+                  </div>
+                )}
+                
+                {rateLimitInfo && !rateLimitInfo.allowed && (
+                  <div className="bg-yellow-50 border border-yellow-200 text-yellow-700 px-4 py-3 rounded-lg text-sm">
+                    <p className="font-medium">Too many login attempts.</p>
+                    <p className="text-xs mt-1">
+                      Please try again after {new Date(rateLimitInfo.resetTime).toLocaleTimeString()}
+                    </p>
+                  </div>
+                )}
+
+                <div>
+                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
+                    Email
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Mail className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('email')}
+                      id="email"
+                      type="email"
+                      autoComplete="email"
+                      className={`w-full pl-10 pr-4 py-3 border rounded-lg ${
+                        errors.email ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
+                      }`}
+                      placeholder="email@example.com"
+                    />
+                  </div>
+                  {errors.email && (
+                    <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+                  )}
+                </div>
+
+                <div>
+                  <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
+                    Password
+                  </label>
+                  <div className="relative">
+                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                      <Lock className="h-5 w-5 text-gray-400" />
+                    </div>
+                    <input
+                      {...register('password')}
+                      id="password"
+                      type={showPassword ? 'text' : 'password'}
+                      autoComplete="current-password"
+                      className={`w-full pl-10 pr-10 py-3 border rounded-lg ${
+                        errors.password ? 'border-red-300 focus:ring-red-500' : 'border-gray-300 focus:ring-blue-500'
+                      }`}
+                      placeholder="••••••••"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="absolute inset-y-0 right-0 pr-3 flex items-center"
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-5 w-5 text-gray-400" />
+                      ) : (
+                        <Eye className="h-5 w-5 text-gray-400" />
+                      )}
+                    </button>
+                  </div>
+                  {errors.password && (
+                    <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+                  )}
+                </div>
+
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center">
+                    <input
+                      {...register('rememberMe')}
+                      id="rememberMe"
+                      type="checkbox"
+                      className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
+                    />
+                    <label htmlFor="rememberMe" className="ml-2 block text-sm text-gray-700">
+                      Remember me
+                    </label>
+                  </div>
+                </div>
+
+                <div className="flex justify-center">
+                  <Recaptcha
+                    onChange={(token) => setRecaptchaToken(token)}
+                    onError={(error) => {
+                      if (import.meta.env.DEV) {
+                        console.error('reCAPTCHA error:', error);
+                      }
+                      setRecaptchaToken(null);
+                    }}
+                    theme="light"
+                    size="normal"
+                  />
+                </div>
+
+                <button
+                  type="submit"
+                  disabled={isLoading}
+                  className="w-full bg-gradient-to-r from-blue-600 to-cyan-600 text-white py-3 px-4 rounded-lg font-semibold hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+                >
+                  {isLoading ? (
+                    <>
+                      <Loader2 className="animate-spin mr-2 h-5 w-5" />
+                      Processing...
+                    </>
+                  ) : (
+                    <>
+                      <LogIn className="mr-2 h-5 w-5" />
+                      Sign In
+                    </>
+                  )}
+                </button>
+              </form>
+            )}
+
+            <div className="mt-6 text-center">
+              <Link
+                to="/"
+                className="text-sm text-gray-600 hover:text-gray-900"
+              >
+                ← Back to Home
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StaffLoginPage;
+
diff --git a/Frontend/src/features/auth/pages/index.ts b/Frontend/src/features/auth/pages/index.ts
new file mode 100644
index 00000000..b60dd0bf
--- /dev/null
+++ b/Frontend/src/features/auth/pages/index.ts
@@ -0,0 +1,5 @@
+export { default as StaffLoginPage } from './StaffLoginPage';
+export { default as AdminLoginPage } from './AdminLoginPage';
+export { default as HousekeepingLoginPage } from './HousekeepingLoginPage';
+export { default as AccountantLoginPage } from './AccountantLoginPage';
+
diff --git a/Frontend/src/features/auth/services/authService.ts b/Frontend/src/features/auth/services/authService.ts
index fe3608fa..45b81cdc 100644
--- a/Frontend/src/features/auth/services/authService.ts
+++ b/Frontend/src/features/auth/services/authService.ts
@@ -5,6 +5,7 @@ export interface LoginCredentials {
   password: string;
   rememberMe?: boolean;
   mfaToken?: string;
+  expectedRole?: string;  // Optional role validation for role-specific login endpoints
 }
 
 export interface RegisterData {
@@ -80,7 +81,9 @@ const authService = {
     try {
       await apiClient.post('/api/auth/logout');
     } catch (error) {
-      console.error('Logout error:', error);
+      if (import.meta.env.DEV) {
+        console.error('Logout error:', error);
+      }
     }
   },
 
diff --git a/Frontend/src/features/content/pages/AboutPage.tsx b/Frontend/src/features/content/pages/AboutPage.tsx
index 978d8ff4..da7e14b0 100644
--- a/Frontend/src/features/content/pages/AboutPage.tsx
+++ b/Frontend/src/features/content/pages/AboutPage.tsx
@@ -18,10 +18,14 @@ import { createSanitizedHtml } from '../../../shared/utils/htmlSanitizer';
 const AboutPage: React.FC = () => {
   const { settings } = useCompanySettings();
   const [pageContent, setPageContent] = useState<PageContent | null>(null);
+  const [apiError, setApiError] = useState(false);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const fetchPageContent = async () => {
       try {
+        setLoading(true);
+        setApiError(false);
         const response = await pageContentService.getAboutContent();
         if (response.status === 'success' && response.data?.page_content) {
           setPageContent(response.data.page_content);
@@ -39,10 +43,16 @@ const AboutPage: React.FC = () => {
             }
             metaDescription.setAttribute('content', response.data.page_content.meta_description);
           }
+        } else {
+          // No data received - don't set error, just leave pageContent as null
+          setPageContent(null);
         }
       } catch (err: any) {
         console.error('Error fetching page content:', err);
-        
+        setApiError(true);
+        setPageContent(null);
+      } finally {
+        setLoading(false);
       }
     };
 
@@ -50,9 +60,10 @@ const AboutPage: React.FC = () => {
   }, []);
 
   
-  const displayPhone = settings.company_phone || '+1 (234) 567-890';
-  const displayEmail = settings.company_email || 'info@luxuryhotel.com';
-  const displayAddress = settings.company_address || '123 Luxury Street\nCity, State 12345\nCountry';
+  // Only use company settings from API, no hardcoded fallbacks
+  const displayPhone = settings.company_phone || null;
+  const displayEmail = settings.company_email || null;
+  const displayAddress = settings.company_address || null;
 
   
   const defaultValues = [
@@ -96,21 +107,23 @@ const AboutPage: React.FC = () => {
     }
   ];
 
-  const values = pageContent?.values && pageContent.values.length > 0 
+  // Only use default values/features if pageContent was successfully loaded but is empty
+  // Don't use defaults if API failed
+  const values = pageContent && pageContent.values && pageContent.values.length > 0 
     ? pageContent.values.map((v: any) => ({
         icon: v.icon || defaultValues.find(d => d.title === v.title)?.icon || 'Heart',
         title: v.title,
         description: v.description
       }))
-    : defaultValues;
+    : (pageContent && !apiError ? defaultValues : []);
 
-  const features = pageContent?.features && pageContent.features.length > 0
+  const features = pageContent && pageContent.features && pageContent.features.length > 0
     ? pageContent.features.map((f: any) => ({
         icon: f.icon || defaultFeatures.find(d => d.title === f.title)?.icon || 'Star',
         title: f.title,
         description: f.description
       }))
-    : defaultFeatures;
+    : (pageContent && !apiError ? defaultFeatures : []);
 
   
   const team = pageContent?.team && typeof pageContent.team === 'string' 
@@ -130,6 +143,29 @@ const AboutPage: React.FC = () => {
     return IconComponent;
   };
 
+  // Show error state if API failed
+  if (apiError) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50 flex items-center justify-center">
+        <div className="text-center p-8">
+          <h1 className="text-2xl font-bold text-gray-900 mb-4">Unable to Load Content</h1>
+          <p className="text-gray-600">Please check your connection and try again later.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show loading state
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50 flex items-center justify-center">
+        <div className="text-center p-8">
+          <p className="text-gray-600">Loading...</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 via-white to-slate-50">
       {}
@@ -235,6 +271,7 @@ const AboutPage: React.FC = () => {
       </section>
 
       {}
+      {values.length > 0 && (
       <section className="py-20 md:py-28 bg-gradient-to-b from-slate-50 via-white to-slate-50 relative">
         <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(212,175,55,0.03),transparent_50%)]"></div>
         <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
@@ -280,8 +317,10 @@ const AboutPage: React.FC = () => {
           </div>
         </div>
       </section>
+      )}
 
       {}
+      {features.length > 0 && (
       <section className="py-20 md:py-28 bg-white relative overflow-hidden">
         <div className="absolute inset-0 bg-[linear-gradient(135deg,transparent_0%,rgba(212,175,55,0.02)_50%,transparent_100%)]"></div>
         <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
@@ -327,8 +366,8 @@ const AboutPage: React.FC = () => {
           </div>
         </div>
       </section>
+      )}
 
-      {}
       {(pageContent?.mission || pageContent?.vision) && (
         <section className="py-20 md:py-28 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 relative overflow-hidden">
           <div className="absolute inset-0">
@@ -570,7 +609,9 @@ const AboutPage: React.FC = () => {
                 We'd love to hear from you. Contact us for reservations or inquiries.
               </p>
             </div>
+            {(displayAddress || displayPhone || displayEmail) && (
             <div className="grid grid-cols-1 md:grid-cols-3 gap-8 lg:gap-10 mb-16">
+              {displayAddress && (
               <div className="group text-center p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-[#d4af37]/40 hover:-translate-y-2">
                 <div className="w-16 h-16 bg-gradient-to-br from-[#d4af37] via-[#f5d76e] to-[#d4af37] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-[#d4af37]/20 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
                   <MapPin className="w-8 h-8 text-white drop-shadow-md" />
@@ -588,6 +629,8 @@ const AboutPage: React.FC = () => {
                     ))}
                 </p>
               </div>
+              )}
+              {displayPhone && (
               <div className="group text-center p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-[#d4af37]/40 hover:-translate-y-2" style={{ animationDelay: '0.1s' }}>
                 <div className="w-16 h-16 bg-gradient-to-br from-[#d4af37] via-[#f5d76e] to-[#d4af37] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-[#d4af37]/20 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
                   <Phone className="w-8 h-8 text-white drop-shadow-md" />
@@ -601,6 +644,8 @@ const AboutPage: React.FC = () => {
                   </a>
                 </p>
               </div>
+              )}
+              {displayEmail && (
               <div className="group text-center p-8 bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-500 border border-gray-100 hover:border-[#d4af37]/40 hover:-translate-y-2" style={{ animationDelay: '0.2s' }}>
                 <div className="w-16 h-16 bg-gradient-to-br from-[#d4af37] via-[#f5d76e] to-[#d4af37] rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg shadow-[#d4af37]/20 group-hover:scale-110 group-hover:rotate-3 transition-transform duration-500">
                   <Mail className="w-8 h-8 text-white drop-shadow-md" />
@@ -614,7 +659,9 @@ const AboutPage: React.FC = () => {
                   </a>
                 </p>
               </div>
+              )}
             </div>
+            )}
             <div className="text-center">
               <Link
                 to="/rooms"
diff --git a/Frontend/src/features/content/pages/HomePage.tsx b/Frontend/src/features/content/pages/HomePage.tsx
index b77a9898..2a4b174a 100644
--- a/Frontend/src/features/content/pages/HomePage.tsx
+++ b/Frontend/src/features/content/pages/HomePage.tsx
@@ -34,10 +34,23 @@ const HomePage: React.FC = () => {
   const [isLoadingNewest, setIsLoadingNewest] = useState(true);
   const [, setIsLoadingContent] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [apiError, setApiError] = useState(false);
+  const [apiErrorMessage, setApiErrorMessage] = useState<string>('');
   const [lightboxOpen, setLightboxOpen] = useState(false);
   const [lightboxIndex, setLightboxIndex] = useState(0);
   const [lightboxImages, setLightboxImages] = useState<string[]>([]);
 
+  // Prevent body scroll when API error modal is shown
+  useEffect(() => {
+    if (apiError) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [apiError]);
   
   useEffect(() => {
     if (!lightboxOpen) return;
@@ -86,6 +99,7 @@ const HomePage: React.FC = () => {
     const fetchPageContent = async () => {
       try {
         setIsLoadingContent(true);
+        setApiError(false);
         const response = await pageContentService.getHomeContent();
         if (response.status === 'success' && response.data?.page_content) {
           const content = response.data.page_content;
@@ -198,11 +212,17 @@ const HomePage: React.FC = () => {
               document.head.appendChild(metaDescription);
             }
             metaDescription.setAttribute('content', content.meta_description);
+          } else {
+            setPageContent(null);
           }
+        } else {
+          setPageContent(null);
         }
       } catch (err: any) {
         console.error('Error fetching page content:', err);
-        
+        setApiError(true);
+        setApiErrorMessage('Unable to connect to the server. Please check your internet connection and try again.');
+        setPageContent(null);
       } finally {
         setIsLoadingContent(false);
       }
@@ -225,11 +245,14 @@ const HomePage: React.FC = () => {
           response.status === 'success'
         ) {
           setBanners(response.data?.banners || []);
+        } else {
+          setBanners([]);
         }
       } catch (err: any) {
         console.error('Error fetching banners:', err);
-        
-        
+        setApiError(true);
+        setApiErrorMessage('Unable to connect to the server. Please check your internet connection and try again.');
+        setBanners([]);
       } finally {
         setIsLoadingBanners(false);
       }
@@ -261,7 +284,7 @@ const HomePage: React.FC = () => {
             setError(null);
           }
         } else {
-          
+          setFeaturedRooms([]);
           setError(
             response.message || 
             'Unable to load room list'
@@ -269,7 +292,7 @@ const HomePage: React.FC = () => {
         }
       } catch (err: any) {
         console.error('Error fetching rooms:', err);
-        
+        setFeaturedRooms([]);
         
         if (err.response?.status === 429) {
           setError(
@@ -307,10 +330,14 @@ const HomePage: React.FC = () => {
           response.status === 'success'
         ) {
           setNewestRooms(response.data?.rooms || []);
+        } else {
+          setNewestRooms([]);
         }
       } catch (err: any) {
         console.error('Error fetching newest rooms:', err);
-        
+        setApiError(true);
+        setApiErrorMessage('Unable to connect to the server. Please check your internet connection and try again.');
+        setNewestRooms([]);
       } finally {
         setIsLoadingNewest(false);
       }
@@ -321,6 +348,60 @@ const HomePage: React.FC = () => {
 
   return (
     <>
+      {/* Persistent API Error Modal - Cannot be closed */}
+      {apiError && (
+        <div 
+          className="fixed inset-0 z-[99999] bg-black/90 backdrop-blur-sm flex items-center justify-center p-4"
+          style={{ pointerEvents: 'auto' }}
+          onKeyDown={(e) => {
+            // Prevent closing with Escape key
+            if (e.key === 'Escape') {
+              e.preventDefault();
+              e.stopPropagation();
+            }
+          }}
+          onClick={(e) => {
+            // Prevent closing by clicking outside
+            e.stopPropagation();
+          }}
+        >
+          <div 
+            className="bg-white rounded-xl shadow-2xl max-w-md w-full p-8 border-2 border-red-500"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex flex-col items-center text-center">
+              <div className="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-4">
+                <AlertCircle className="w-8 h-8 text-red-600" />
+              </div>
+              <h2 className="text-2xl font-bold text-gray-900 mb-3">
+                API Connection Error
+              </h2>
+              <p className="text-gray-600 mb-6 leading-relaxed">
+                {apiErrorMessage || 'Unable to connect to the server. The API is currently unavailable.'}
+              </p>
+              <div className="bg-red-50 border border-red-200 rounded-lg p-4 w-full">
+                <p className="text-sm text-red-800 font-medium">
+                  Please check:
+                </p>
+                <ul className="text-sm text-red-700 mt-2 text-left list-disc list-inside space-y-1">
+                  <li>Your internet connection</li>
+                  <li>If the server is running</li>
+                  <li>If the API endpoint is accessible</li>
+                </ul>
+              </div>
+              <div className="mt-6 w-full">
+                <button
+                  onClick={() => window.location.reload()}
+                  className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
+                >
+                  Refresh Page
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
       {}
       <section 
         className="relative w-screen -mt-6"
@@ -331,13 +412,13 @@ const HomePage: React.FC = () => {
       >
         {isLoadingBanners ? (
           <BannerSkeleton />
-        ) : (
+        ) : banners.length > 0 ? (
           <div className="animate-fade-in">
             <BannerCarousel banners={banners}>
               <SearchRoomForm className="overlay" />
             </BannerCarousel>
           </div>
-        )}
+        ) : null}
       </section>
 
       <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50/30 relative overflow-hidden">
@@ -353,10 +434,10 @@ const HomePage: React.FC = () => {
             <div className="h-0.5 w-16 bg-gradient-to-r from-[#d4af37] to-[#f5d76e] mx-auto rounded-full"></div>
           </div>
           <h2 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 tracking-tight mb-3 md:mb-4">
-            {pageContent?.hero_title || 'Featured & Newest Rooms'}
+            {pageContent?.hero_title || (apiError ? '' : 'Featured & Newest Rooms')}
           </h2>
           <p className="text-sm sm:text-base md:text-lg text-gray-600 font-light tracking-wide max-w-2xl mx-auto px-4 leading-relaxed">
-            {pageContent?.hero_subtitle || pageContent?.description || 'Discover our most popular accommodations and latest additions'}
+            {pageContent?.hero_subtitle || pageContent?.description || (apiError ? '' : 'Discover our most popular accommodations and latest additions')}
           </p>
           
           {}
@@ -439,7 +520,8 @@ const HomePage: React.FC = () => {
           (f: any) => f && (f.title || f.description)
         ) || [];
         
-        return (validFeatures.length > 0 || !pageContent) && (
+        // Only show section if we have features from API, or if pageContent was loaded but is empty (not if API failed)
+        return validFeatures.length > 0 && (
           <section className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
             <div className="relative bg-white rounded-xl md:rounded-2xl shadow-xl shadow-[#d4af37]/5 p-6 md:p-8 lg:p-10 animate-fade-in overflow-hidden border border-gray-100/50">
               {}
@@ -489,72 +571,7 @@ const HomePage: React.FC = () => {
                       )}
                     </div>
                   ))
-                ) : (
-                  <>
-                    <div className="text-center group relative">
-                      <div 
-                        className="w-16 h-16 md:w-18 md:h-18 bg-gradient-to-br from-[#d4af37]/15 via-[#f5d76e]/10 to-[#d4af37]/15 
-                          rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-5
-                          shadow-lg shadow-[#d4af37]/15 border border-[#d4af37]/25
-                          group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-[#d4af37]/30 group-hover:border-[#d4af37]/40
-                          transition-all duration-300 backdrop-blur-sm"
-                      >
-                        <span className="text-3xl">🏨</span>
-                      </div>
-                      <h3 
-                        className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3
-                          text-gray-900 group-hover:text-[#d4af37] transition-colors duration-300 tracking-tight leading-tight"
-                      >
-                        Easy Booking
-                      </h3>
-                      <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide max-w-xs mx-auto">
-                        Search and book rooms with just a few clicks
-                      </p>
-                    </div>
-
-                    <div className="text-center group relative">
-                      <div 
-                        className="w-16 h-16 md:w-18 md:h-18 bg-gradient-to-br from-[#d4af37]/15 via-[#f5d76e]/10 to-[#d4af37]/15 
-                          rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-5
-                          shadow-lg shadow-[#d4af37]/15 border border-[#d4af37]/25
-                          group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-[#d4af37]/30 group-hover:border-[#d4af37]/40
-                          transition-all duration-300 backdrop-blur-sm"
-                      >
-                        <span className="text-3xl">💰</span>
-                      </div>
-                      <h3 
-                        className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3
-                          text-gray-900 group-hover:text-[#d4af37] transition-colors duration-300 tracking-tight leading-tight"
-                      >
-                        Best Prices
-                      </h3>
-                      <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide max-w-xs mx-auto">
-                        Best price guarantee in the market
-                      </p>
-                    </div>
-
-                    <div className="text-center group relative">
-                      <div 
-                        className="w-16 h-16 md:w-18 md:h-18 bg-gradient-to-br from-[#d4af37]/15 via-[#f5d76e]/10 to-[#d4af37]/15 
-                          rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-5
-                          shadow-lg shadow-[#d4af37]/15 border border-[#d4af37]/25
-                          group-hover:scale-110 group-hover:shadow-xl group-hover:shadow-[#d4af37]/30 group-hover:border-[#d4af37]/40
-                          transition-all duration-300 backdrop-blur-sm"
-                      >
-                        <span className="text-3xl">🎧</span>
-                      </div>
-                      <h3 
-                        className="text-lg md:text-xl font-serif font-semibold mb-2 md:mb-3
-                          text-gray-900 group-hover:text-[#d4af37] transition-colors duration-300 tracking-tight leading-tight"
-                      >
-                        24/7 Support
-                      </h3>
-                      <p className="text-sm md:text-base text-gray-600 leading-relaxed font-light tracking-wide max-w-xs mx-auto">
-                        Support team always ready to serve
-                      </p>
-                    </div>
-                  </>
-                )}
+                ) : null}
               </div>
             </div>
           </section>
diff --git a/Frontend/src/features/rooms/components/BannerCarousel.tsx b/Frontend/src/features/rooms/components/BannerCarousel.tsx
index 1caa15c2..ac6e1623 100644
--- a/Frontend/src/features/rooms/components/BannerCarousel.tsx
+++ b/Frontend/src/features/rooms/components/BannerCarousel.tsx
@@ -53,23 +53,12 @@ const BannerCarousel: React.FC<BannerCarouselProps> = ({
   };
 
   
-  const defaultBanner: Banner = {
-    id: 0,
-    title: 'Welcome to Hotel Booking',
-    image_url: '/images/default-banner.jpg',
-    position: 'home',
-    display_order: 0,
-    is_active: true,
-    created_at: '',
-    updated_at: '',
-    description: undefined,
-    link_url: undefined,
-  };
+  // Don't render if no banners - only show banners from API
+  if (banners.length === 0) {
+    return null;
+  }
 
-  const displayBanners = banners.length > 0 
-    ? banners 
-    : [defaultBanner];
-  const currentBanner = displayBanners[currentIndex];
+  const currentBanner = banners[currentIndex];
 
   return (
     <div
@@ -77,7 +66,7 @@ const BannerCarousel: React.FC<BannerCarouselProps> = ({
     >
       {}
       <div className="relative w-full h-full">
-        {displayBanners.map((banner, index) => (
+        {banners.map((banner, index) => (
           <div
             key={banner.id || index}
             className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
@@ -95,9 +84,6 @@ const BannerCarousel: React.FC<BannerCarouselProps> = ({
                   src={banner.image_url}
                   alt={banner.title}
                   className="w-full h-full object-cover object-center transition-transform duration-1000 ease-out hover:scale-105"
-                  onError={(e) => {
-                    e.currentTarget.src = '/images/default-banner.jpg';
-                  }}
                 />
               </a>
             ) : (
@@ -105,9 +91,6 @@ const BannerCarousel: React.FC<BannerCarouselProps> = ({
                 src={banner.image_url}
                 alt={banner.title}
                 className="w-full h-full object-cover object-center transition-transform duration-1000 ease-out hover:scale-105"
-                onError={(e) => {
-                  e.currentTarget.src = '/images/default-banner.jpg';
-                }}
               />
             )}
           </div>
@@ -272,7 +255,7 @@ const BannerCarousel: React.FC<BannerCarouselProps> = ({
       </div>
 
       {}
-      {displayBanners.length > 1 && (
+      {banners.length > 1 && (
         <>
           <button
             onClick={goToPrevious}
@@ -315,14 +298,14 @@ const BannerCarousel: React.FC<BannerCarouselProps> = ({
       )}
 
       {}
-      {displayBanners.length > 1 && (
+      {banners.length > 1 && (
         <div 
           className={`absolute left-1/2 
             -translate-x-1/2 flex gap-2 sm:gap-2.5 z-40 pointer-events-auto
             bg-black/40 px-3 py-2 rounded-full
             border border-white/10 ${children ? 'bottom-16 sm:bottom-20 md:bottom-24 lg:bottom-28' : 'bottom-2 sm:bottom-4'}`}
         >
-          {displayBanners.map((_, index) => (
+          {banners.map((_, index) => (
             <button
               key={index}
               type="button"
diff --git a/Frontend/src/pages/HousekeepingLayout.tsx b/Frontend/src/pages/HousekeepingLayout.tsx
index f9acfd8f..ed0efd7f 100644
--- a/Frontend/src/pages/HousekeepingLayout.tsx
+++ b/Frontend/src/pages/HousekeepingLayout.tsx
@@ -1,18 +1,13 @@
 import React from 'react';
-import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 import { 
-  LayoutDashboard, 
+  Sparkles,
   LogOut,
-  Menu,
-  X,
+  User,
 } from 'lucide-react';
 import useAuthStore from '../store/useAuthStore';
-import { useResponsive } from '../shared/hooks/useResponsive';
 
 const HousekeepingLayout: React.FC = () => {
-  const { isMobile } = useResponsive();
-  const [sidebarOpen, setSidebarOpen] = React.useState(!isMobile);
-  const location = useLocation();
   const navigate = useNavigate();
   const { userInfo, logout } = useAuthStore();
 
@@ -25,96 +20,55 @@ const HousekeepingLayout: React.FC = () => {
     }
   };
 
-  const navigation = [
-    { name: 'Dashboard', href: '/housekeeping/dashboard', icon: LayoutDashboard },
-  ];
-
-  const isActive = (path: string) => location.pathname === path;
-
   return (
-    <div className="flex h-screen bg-gradient-to-br from-slate-50 via-white to-slate-50">
-      {/* Mobile menu button */}
-      {isMobile && (
-        <button
-          onClick={() => setSidebarOpen(!sidebarOpen)}
-          className="fixed top-4 left-4 z-50 p-2 bg-white rounded-lg shadow-lg"
-        >
-          {sidebarOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
-        </button>
-      )}
-
-      {/* Sidebar */}
-      <div
-        className={`
-          fixed lg:static inset-y-0 left-0 z-40
-          w-64 bg-white shadow-lg transform transition-transform duration-300 ease-in-out
-          ${sidebarOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'}
-        `}
-      >
-        <div className="flex flex-col h-full">
-          {/* Logo/Brand */}
-          <div className="flex items-center justify-between p-6 border-b border-gray-200">
-            <div className="flex items-center space-x-2">
-              <LayoutDashboard className="w-8 h-8 text-blue-600" />
-              <span className="text-xl font-bold text-gray-900">Housekeeping</span>
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 overflow-x-hidden">
+      {/* Luxury Top Navigation Bar */}
+      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-xl border-b border-[#d4af37]/20 shadow-sm">
+        <div className="w-full max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-14 sm:h-16">
+            {/* Logo/Brand */}
+            <div className="flex items-center space-x-2 sm:space-x-3 min-w-0 flex-1">
+              <div className="relative flex-shrink-0">
+                <div className="absolute inset-0 bg-gradient-to-r from-[#d4af37] to-[#c9a227] rounded-lg blur-sm opacity-50"></div>
+                <div className="relative bg-gradient-to-r from-[#d4af37] to-[#c9a227] p-1.5 sm:p-2 rounded-lg">
+                  <Sparkles className="w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6 text-white" />
+                </div>
+              </div>
+              <div className="min-w-0 flex-1">
+                <h1 className="text-sm sm:text-base md:text-lg lg:text-xl font-serif font-bold text-gray-900 tracking-tight truncate">
+                  Enterprise Housekeeping
+                </h1>
+                <p className="hidden xs:block text-[10px] sm:text-xs text-gray-500 font-light truncate">Luxury Management System</p>
+              </div>
             </div>
-          </div>
 
-          {/* Navigation */}
-          <nav className="flex-1 px-4 py-6 space-y-2">
-            {navigation.map((item) => {
-              const Icon = item.icon;
-              return (
-                <Link
-                  key={item.name}
-                  to={item.href}
-                  onClick={() => isMobile && setSidebarOpen(false)}
-                  className={`
-                    flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors
-                    ${isActive(item.href)
-                      ? 'bg-blue-50 text-blue-700 font-medium'
-                      : 'text-gray-700 hover:bg-gray-50'
-                    }
-                  `}
-                >
-                  <Icon className="w-5 h-5" />
-                  <span>{item.name}</span>
-                </Link>
-              );
-            })}
-          </nav>
-
-          {/* User info and logout */}
-          <div className="p-4 border-t border-gray-200">
-            <div className="mb-3 px-4 py-2">
-              <p className="text-sm font-medium text-gray-900">{userInfo?.name || userInfo?.email || 'User'}</p>
-              <p className="text-xs text-gray-500 capitalize">{userInfo?.role || 'housekeeping'}</p>
+            {/* User Menu */}
+            <div className="flex items-center space-x-2 sm:space-x-3 flex-shrink-0">
+              <div className="hidden md:flex items-center space-x-2 lg:space-x-3 px-3 lg:px-4 py-1.5 lg:py-2 rounded-lg bg-gradient-to-r from-gray-50 to-gray-100/50 border border-gray-200/50">
+                <div className="w-7 h-7 lg:w-8 lg:h-8 rounded-full bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center flex-shrink-0">
+                  <User className="w-3.5 h-3.5 lg:w-4 lg:h-4 text-white" />
+                </div>
+                <div className="text-left min-w-0 hidden lg:block">
+                  <p className="text-xs lg:text-sm font-medium text-gray-900 truncate max-w-[120px]">{userInfo?.name || userInfo?.email || 'User'}</p>
+                  <p className="text-[10px] lg:text-xs text-gray-500 capitalize truncate">{userInfo?.role || 'housekeeping'}</p>
+                </div>
+              </div>
+              <button
+                onClick={handleLogout}
+                className="flex items-center justify-center space-x-1 sm:space-x-2 px-2 sm:px-3 md:px-4 py-1.5 sm:py-2 text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-all duration-200 border border-transparent hover:border-gray-200 flex-shrink-0"
+              >
+                <LogOut className="w-4 h-4 flex-shrink-0" />
+                <span className="hidden sm:inline text-xs sm:text-sm font-medium">Logout</span>
+              </button>
             </div>
-            <button
-              onClick={handleLogout}
-              className="w-full flex items-center space-x-3 px-4 py-2 text-gray-700 hover:bg-gray-50 rounded-lg transition-colors"
-            >
-              <LogOut className="w-5 h-5" />
-              <span>Logout</span>
-            </button>
           </div>
         </div>
-      </div>
-
-      {/* Overlay for mobile */}
-      {isMobile && sidebarOpen && (
-        <div
-          className="fixed inset-0 bg-black bg-opacity-50 z-30"
-          onClick={() => setSidebarOpen(false)}
-        />
-      )}
+      </header>
 
       {/* Main content */}
-      <div className="flex-1 overflow-auto lg:ml-0">
-        <div className={`min-h-screen ${isMobile ? 'pt-20' : 'pt-0'}`}>
-          <Outlet />
-        </div>
-      </div>
+      <main className="w-full overflow-x-hidden">
+        <Outlet />
+      </main>
     </div>
   );
 };
diff --git a/Frontend/src/pages/accountant/DashboardPage.tsx b/Frontend/src/pages/accountant/DashboardPage.tsx
index 075b2428..b39b4be4 100644
--- a/Frontend/src/pages/accountant/DashboardPage.tsx
+++ b/Frontend/src/pages/accountant/DashboardPage.tsx
@@ -93,12 +93,29 @@ const AccountantDashboardPage: React.FC = () => {
             totalPayments: response.data.payments.length,
             pendingPayments: pendingPayments.length,
           }));
+        } else {
+          // Clear data if response is not successful
+          setRecentPayments([]);
+          setFinancialSummary(prev => ({
+            ...prev,
+            totalRevenue: 0,
+            totalPayments: 0,
+            pendingPayments: 0,
+          }));
         }
       } catch (err: any) {
         // Handle AbortError silently
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setRecentPayments([]);
+        setFinancialSummary(prev => ({
+          ...prev,
+          totalRevenue: 0,
+          totalPayments: 0,
+          pendingPayments: 0,
+        }));
         logger.error('Error fetching payments', err);
       } finally {
         setLoadingPayments(false);
@@ -139,12 +156,29 @@ const AccountantDashboardPage: React.FC = () => {
             paidInvoices: paidInvoices.length,
             overdueInvoices: overdueInvoices.length,
           }));
+        } else {
+          // Clear data if response is not successful
+          setRecentInvoices([]);
+          setFinancialSummary(prev => ({
+            ...prev,
+            totalInvoices: 0,
+            paidInvoices: 0,
+            overdueInvoices: 0,
+          }));
         }
       } catch (err: any) {
         // Handle AbortError silently
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setRecentInvoices([]);
+        setFinancialSummary(prev => ({
+          ...prev,
+          totalInvoices: 0,
+          paidInvoices: 0,
+          overdueInvoices: 0,
+        }));
         logger.error('Error fetching invoices', err);
       } finally {
         setLoadingInvoices(false);
diff --git a/Frontend/src/pages/admin/AuditLogsPage.tsx b/Frontend/src/pages/admin/AuditLogsPage.tsx
index d3484da5..17848e8b 100644
--- a/Frontend/src/pages/admin/AuditLogsPage.tsx
+++ b/Frontend/src/pages/admin/AuditLogsPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { 
   FileText, 
   Search, 
@@ -75,6 +75,10 @@ const AuditLogsPage: React.FC = () => {
       if (error.name === 'AbortError') {
         return;
       }
+      // Clear data when API connection fails
+      setLogs([]);
+      setTotalPages(1);
+      setTotalItems(0);
       logger.error('Error fetching audit logs', error);
       toast.error(error.response?.data?.message || 'Unable to load audit logs');
     } finally {
diff --git a/Frontend/src/pages/admin/DashboardPage.tsx b/Frontend/src/pages/admin/DashboardPage.tsx
index 0578631e..735757d1 100644
--- a/Frontend/src/pages/admin/DashboardPage.tsx
+++ b/Frontend/src/pages/admin/DashboardPage.tsx
@@ -89,12 +89,17 @@ const DashboardPage: React.FC = () => {
         const response = await paymentService.getPayments({ page: 1, limit: 5 });
         if (response.success && response.data?.payments) {
           setRecentPayments(response.data.payments);
+        } else {
+          // Clear data if response is not successful
+          setRecentPayments([]);
         }
       } catch (err: any) {
         // Handle AbortError silently
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setRecentPayments([]);
         logger.error('Error fetching payments', err);
       } finally {
         setLoadingPayments(false);
@@ -125,12 +130,17 @@ const DashboardPage: React.FC = () => {
         const response = await sessionService.getMySessions();
         if (response.success && response.data?.sessions) {
           setSessions(response.data.sessions || []);
+        } else {
+          // Clear data if response is not successful
+          setSessions([]);
         }
       } catch (err: any) {
         // Handle AbortError silently
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setSessions([]);
         logger.error('Error fetching sessions', err);
       } finally {
         setLoadingSessions(false);
diff --git a/Frontend/src/pages/customer/DashboardPage.tsx b/Frontend/src/pages/customer/DashboardPage.tsx
index b43c24a0..e9e5128e 100644
--- a/Frontend/src/pages/customer/DashboardPage.tsx
+++ b/Frontend/src/pages/customer/DashboardPage.tsx
@@ -65,9 +65,14 @@ const DashboardPage: React.FC = () => {
         const response = await paymentService.getPayments({ page: 1, limit: 5 });
         if (response.success && response.data?.payments) {
           setRecentPayments(response.data.payments);
+        } else {
+          // Clear data if response is not successful
+          setRecentPayments([]);
         }
       } catch (err: any) {
         if (err.name !== 'AbortError') {
+          // Clear data when API connection fails
+          setRecentPayments([]);
           logger.error('Error fetching payments', err);
         }
       } finally {
@@ -101,9 +106,14 @@ const DashboardPage: React.FC = () => {
         const response = await sessionService.getMySessions();
         if (response.success && response.data?.sessions) {
           setSessions(response.data.sessions || []);
+        } else {
+          // Clear data if response is not successful
+          setSessions([]);
         }
       } catch (err: any) {
         if (err.name !== 'AbortError') {
+          // Clear data when API connection fails
+          setSessions([]);
           logger.error('Error fetching sessions', err);
         }
       } finally {
diff --git a/Frontend/src/pages/customer/RoomListPage.tsx b/Frontend/src/pages/customer/RoomListPage.tsx
index 101d3b80..d6004531 100644
--- a/Frontend/src/pages/customer/RoomListPage.tsx
+++ b/Frontend/src/pages/customer/RoomListPage.tsx
@@ -80,6 +80,14 @@ const RoomListPage: React.FC = () => {
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setRooms([]);
+        setPagination({
+          total: 0,
+          page: 1,
+          limit: 12,
+          totalPages: 0,
+        });
         logger.error('Error fetching rooms', err);
         setError('Unable to load room list. Please try again.');
       } finally {
diff --git a/Frontend/src/pages/housekeeping/DashboardPage.tsx b/Frontend/src/pages/housekeeping/DashboardPage.tsx
index f98d5a97..46781eb6 100644
--- a/Frontend/src/pages/housekeeping/DashboardPage.tsx
+++ b/Frontend/src/pages/housekeeping/DashboardPage.tsx
@@ -8,6 +8,12 @@ import {
   Calendar,
   MapPin,
   Play,
+  X,
+  TrendingUp,
+  Activity,
+  Award,
+  Eye,
+  Building2,
   ChevronDown,
   ChevronUp,
 } from 'lucide-react';
@@ -18,9 +24,310 @@ import advancedRoomService, { HousekeepingTask, ChecklistItem } from '../../feat
 import { logger } from '../../shared/utils/logger';
 import useAuthStore from '../../store/useAuthStore';
 
+// Luxury Task Detail Modal Component
+interface TaskModalProps {
+  task: HousekeepingTask | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onUpdateChecklist: (task: HousekeepingTask, itemIndex: number, checked: boolean) => Promise<void>;
+  onStartTask: (task: HousekeepingTask) => Promise<void>;
+  onCompleteTask: (task: HousekeepingTask) => Promise<void>;
+  isUpdating: boolean;
+}
+
+const TaskDetailModal: React.FC<TaskModalProps> = ({
+  task,
+  isOpen,
+  onClose,
+  onUpdateChecklist,
+  onStartTask,
+  onCompleteTask,
+  isUpdating,
+}) => {
+  if (!isOpen || !task) return null;
+
+  const completedItems = task.checklist_items?.filter(item => item.completed).length || 0;
+  const totalItems = task.checklist_items?.length || 0;
+  const progress = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
+  const canStart = task.status === 'pending';
+  const canComplete = task.status === 'in_progress' || task.status === 'pending';
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed':
+        return 'bg-gradient-to-r from-green-500 to-emerald-600 text-white';
+      case 'in_progress':
+        return 'bg-gradient-to-r from-blue-500 to-cyan-600 text-white';
+      case 'pending':
+        return 'bg-gradient-to-r from-amber-500 to-orange-500 text-white';
+      default:
+        return 'bg-gray-500 text-white';
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-2 sm:p-3 md:p-4 overflow-y-auto" style={{ maxHeight: '100vh' }}>
+      {/* Enhanced Backdrop with luxury effect */}
+      <div 
+        className="fixed inset-0 bg-gradient-to-br from-black/70 via-black/60 to-black/70 backdrop-blur-md transition-opacity animate-fade-in"
+        onClick={onClose}
+      />
+      
+      {/* Luxury Modal with enhanced styling - Compact */}
+      <div className="relative w-full max-w-3xl mx-auto my-2 sm:my-3 md:my-4 bg-white rounded-xl sm:rounded-2xl shadow-2xl overflow-hidden animate-scale-in border border-[#d4af37]/20 flex flex-col" style={{ maxHeight: 'calc(100vh - 1rem)' }}>
+        {/* Luxury Header with enhanced gradient and effects - Compact */}
+        <div className="relative bg-gradient-to-r from-[#d4af37] via-[#c9a227] via-[#d4af37] to-[#c9a227] p-3 sm:p-4 md:p-5 overflow-hidden flex-shrink-0">
+          {/* Animated background pattern */}
+          <div className="absolute inset-0 opacity-10">
+            <div className="absolute inset-0" style={{
+              backgroundImage: 'radial-gradient(circle at 2px 2px, white 1px, transparent 0)',
+              backgroundSize: '40px 40px'
+            }}></div>
+          </div>
+          {/* Shimmer effect */}
+          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-shimmer"></div>
+          <div className="absolute inset-0 bg-black/5"></div>
+          
+          <div className="relative flex items-center justify-between gap-3">
+            <div className="flex-1 min-w-0 flex items-center gap-3">
+              <div className="relative">
+                <div className="absolute inset-0 bg-white/30 rounded-lg blur-md"></div>
+                <div className="relative w-10 h-10 sm:w-11 sm:h-11 rounded-lg bg-white/25 backdrop-blur-md flex items-center justify-center flex-shrink-0 border border-white/30 shadow-lg">
+                  <MapPin className="w-5 h-5 sm:w-6 sm:h-6 text-white drop-shadow-lg" />
+                </div>
+              </div>
+              <div className="min-w-0 flex-1">
+                <h2 className="text-lg sm:text-xl md:text-2xl font-serif font-bold text-white drop-shadow-lg truncate">
+                  Room {task.room_number || task.room_id}
+                </h2>
+                <div className="flex items-center gap-2 mt-1">
+                  <p className="text-white/95 text-xs sm:text-sm capitalize truncate font-light">{task.task_type}</p>
+                  <span className={`inline-flex items-center px-2 sm:px-3 py-0.5 sm:py-1 rounded-lg text-[10px] sm:text-xs font-bold ${getStatusColor(task.status)} shadow-md border border-white/20`}>
+                    {task.status.replace('_', ' ').toUpperCase()}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <button
+              onClick={onClose}
+              className="w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-white/20 hover:bg-white/30 backdrop-blur-md flex items-center justify-center text-white transition-all duration-300 hover:scale-110 hover:rotate-90 flex-shrink-0 border border-white/20 shadow-lg"
+            >
+              <X className="w-4 h-4 sm:w-5 sm:h-5" />
+            </button>
+          </div>
+        </div>
+
+        {/* Content with luxury scrollbar - Compact */}
+        <div 
+          className="overflow-y-auto p-4 sm:p-5 md:p-6 space-y-3 sm:space-y-4 custom-scrollbar flex-1" 
+          style={{ 
+            scrollbarWidth: 'thin',
+            scrollbarColor: '#d4af37 #f3f4f6'
+          }}
+        >
+          {/* Task Info with luxury cards - Compact */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            <div className="group relative flex items-center space-x-2.5 sm:space-x-3 p-3 sm:p-3.5 bg-gradient-to-br from-gray-50 via-white to-gray-50 rounded-lg sm:rounded-xl border border-gray-200/50 hover:border-[#d4af37]/30 transition-all duration-300 hover:shadow-md overflow-hidden">
+              <div className="absolute inset-0 bg-gradient-to-br from-[#d4af37]/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <div className="relative w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center flex-shrink-0 shadow-md group-hover:scale-105 transition-transform duration-300">
+                <Calendar className="w-4 h-4 sm:w-5 sm:h-5 text-white drop-shadow-md" />
+              </div>
+              <div className="relative min-w-0 flex-1">
+                <p className="text-[10px] sm:text-xs text-gray-500 font-medium mb-0.5">Scheduled Time</p>
+                <p className="text-xs sm:text-sm font-bold text-gray-900 truncate">{formatDate(task.scheduled_time)}</p>
+              </div>
+            </div>
+            {task.completed_at && (
+              <div className="group relative flex items-center space-x-2.5 sm:space-x-3 p-3 sm:p-3.5 bg-gradient-to-br from-green-50 via-emerald-50/50 to-green-50 rounded-lg sm:rounded-xl border border-green-200/50 hover:border-green-400/50 transition-all duration-300 hover:shadow-md overflow-hidden">
+                <div className="absolute inset-0 bg-gradient-to-br from-green-400/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                <div className="relative w-9 h-9 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center flex-shrink-0 shadow-md group-hover:scale-105 transition-transform duration-300">
+                  <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5 text-white drop-shadow-md" />
+                </div>
+                <div className="relative min-w-0 flex-1">
+                  <p className="text-[10px] sm:text-xs text-gray-500 font-medium mb-0.5">Completed At</p>
+                  <p className="text-xs sm:text-sm font-bold text-gray-900 truncate">{formatDate(task.completed_at)}</p>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Notes with luxury styling - Compact */}
+          {task.notes && (
+            <div className="relative p-3 sm:p-4 bg-gradient-to-br from-blue-50 via-indigo-50/50 to-blue-50 rounded-lg sm:rounded-xl border border-blue-200/50 overflow-hidden group">
+              <div className="absolute top-0 right-0 w-24 h-24 bg-blue-400/10 rounded-full blur-2xl"></div>
+              <div className="relative">
+                <h3 className="text-xs sm:text-sm font-bold text-gray-900 mb-2 flex items-center space-x-2">
+                  <div className="w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-md">
+                    <Activity className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white" />
+                  </div>
+                  <span>Special Notes</span>
+                </h3>
+                <p className="text-xs sm:text-sm text-gray-700 leading-relaxed break-words font-light">{task.notes}</p>
+              </div>
+            </div>
+          )}
+
+          {/* Progress Bar with luxury styling - Compact */}
+          {task.checklist_items && task.checklist_items.length > 0 && (
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <h3 className="text-sm sm:text-base font-bold text-gray-900 flex items-center space-x-2 min-w-0">
+                  <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center shadow-md">
+                    <TrendingUp className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
+                  </div>
+                  <span className="truncate">Task Progress</span>
+                </h3>
+                <span className="text-xl sm:text-2xl font-bold bg-gradient-to-r from-[#d4af37] to-[#c9a227] bg-clip-text text-transparent flex-shrink-0">{progress}%</span>
+              </div>
+              <div className="relative w-full h-3 sm:h-3.5 bg-gray-200/50 rounded-full overflow-hidden shadow-inner border border-gray-300/30">
+                <div
+                  className="absolute inset-y-0 left-0 bg-gradient-to-r from-[#d4af37] via-[#c9a227] to-[#d4af37] rounded-full transition-all duration-700 ease-out shadow-md"
+                  style={{ width: `${progress}%` }}
+                >
+                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer"></div>
+                </div>
+              </div>
+              <p className="text-xs sm:text-sm text-gray-600 text-center font-medium">
+                {completedItems} of {totalItems} items completed
+              </p>
+            </div>
+          )}
+
+          {/* Checklist with luxury styling - Compact */}
+          {task.checklist_items && task.checklist_items.length > 0 && (
+            <div className="space-y-2.5">
+              <h3 className="text-sm sm:text-base font-bold text-gray-900 flex items-center space-x-2">
+                <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center shadow-md">
+                  <Award className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
+                </div>
+                <span>Checklist Items</span>
+              </h3>
+              <div className="space-y-2">
+                {task.checklist_items.map((item: ChecklistItem, index: number) => (
+                  <label
+                    key={index}
+                    className={`group relative flex items-start space-x-2.5 sm:space-x-3 p-2.5 sm:p-3 rounded-lg sm:rounded-xl border transition-all duration-300 cursor-pointer overflow-hidden ${
+                      item.completed
+                        ? 'bg-gradient-to-br from-green-50 via-emerald-50/50 to-green-50 border-green-300/50 hover:border-green-400/70'
+                        : 'bg-white border-gray-200/50 hover:border-[#d4af37]/50 hover:shadow-md hover:bg-gradient-to-br hover:from-[#d4af37]/5 hover:to-transparent'
+                    }`}
+                  >
+                    {!item.completed && (
+                      <div className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/0 via-[#d4af37]/5 to-[#d4af37]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                    )}
+                    <input
+                      type="checkbox"
+                      checked={item.completed}
+                      onChange={(e) => {
+                        e.stopPropagation();
+                        onUpdateChecklist(task, index, e.target.checked);
+                      }}
+                      disabled={isUpdating || task.status === 'completed'}
+                      className="relative mt-0.5 h-4 w-4 sm:h-5 sm:w-5 text-[#d4af37] focus:ring-2 focus:ring-[#d4af37] focus:ring-offset-1 border-2 border-gray-300 rounded-md disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0 transition-all duration-200 checked:bg-[#d4af37] checked:border-[#d4af37]"
+                    />
+                    <div className="relative flex-1 min-w-0">
+                      <span
+                        className={`text-xs sm:text-sm font-medium break-words block ${
+                          item.completed
+                            ? 'text-gray-500 line-through'
+                            : 'text-gray-900'
+                        }`}
+                      >
+                        {item.item}
+                      </span>
+                      {item.notes && (
+                        <p className="text-[10px] sm:text-xs text-gray-500 mt-1 break-words leading-relaxed">{item.notes}</p>
+                      )}
+                    </div>
+                    {item.completed && (
+                      <div className="relative flex-shrink-0">
+                        <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-green-500 drop-shadow-sm" />
+                      </div>
+                    )}
+                  </label>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Duration with luxury styling - Compact */}
+          {task.actual_duration_minutes && (
+            <div className="relative p-3 sm:p-3.5 bg-gradient-to-br from-purple-50 via-pink-50/50 to-purple-50 rounded-lg sm:rounded-xl border border-purple-200/50 overflow-hidden">
+              <div className="absolute top-0 right-0 w-20 h-20 bg-purple-400/10 rounded-full blur-xl"></div>
+              <p className="relative text-xs sm:text-sm text-gray-700 font-medium">
+                <span className="font-bold text-purple-700">Duration:</span> <span className="text-gray-900">{task.actual_duration_minutes} minutes</span>
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Luxury Footer Actions - Sticky and Compact */}
+        <div className="relative p-3 sm:p-4 bg-gradient-to-br from-gray-50 via-white to-gray-50 border-t border-gray-200/50 flex flex-col sm:flex-row items-stretch sm:items-center justify-end gap-2 sm:gap-3 flex-shrink-0 shadow-lg">
+          <div className="absolute inset-0 bg-gradient-to-r from-[#d4af37]/5 via-transparent to-[#d4af37]/5 opacity-50"></div>
+          <button
+            onClick={onClose}
+            className="relative px-4 sm:px-5 py-2 sm:py-2.5 text-xs sm:text-sm text-gray-700 bg-white border border-gray-300/50 rounded-lg hover:bg-gray-50 hover:border-gray-400 transition-all duration-300 font-semibold shadow-sm hover:shadow-md"
+          >
+            Close
+          </button>
+          {canStart && (
+            <button
+              onClick={() => {
+                onStartTask(task);
+              }}
+              disabled={isUpdating}
+              className="relative px-4 sm:px-5 py-2 sm:py-2.5 bg-gradient-to-r from-blue-600 via-blue-500 to-cyan-600 text-white rounded-lg hover:from-blue-700 hover:via-blue-600 hover:to-cyan-700 transition-all duration-300 text-xs sm:text-sm font-bold shadow-md hover:shadow-lg hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 flex items-center justify-center space-x-1.5 sm:space-x-2 border border-blue-500/20"
+            >
+              <Play className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+              <span>Start Task</span>
+            </button>
+          )}
+          {canComplete && (
+            <button
+              onClick={() => {
+                onCompleteTask(task);
+              }}
+              disabled={isUpdating}
+              className="relative px-4 sm:px-5 py-2 sm:py-2.5 bg-gradient-to-r from-green-600 via-emerald-600 to-green-600 text-white rounded-lg hover:from-green-700 hover:via-emerald-700 hover:to-green-700 transition-all duration-300 text-xs sm:text-sm font-bold shadow-md hover:shadow-lg hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 flex items-center justify-center space-x-1.5 sm:space-x-2 border border-green-500/20"
+            >
+              <CheckCircle className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+              <span>Complete Task</span>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Utility function to extract floor number from room number
+const getFloorFromRoomNumber = (roomNumber: string | number | undefined): number => {
+  if (!roomNumber) return 0;
+  const roomStr = String(roomNumber);
+  // Extract first digit(s) as floor number (e.g., "101" -> 1, "201" -> 2, "1201" -> 12)
+  const match = roomStr.match(/^(\d+)/);
+  if (match) {
+    const floor = parseInt(match[1], 10);
+    // If room number is like "101", floor is 1; if "201", floor is 2
+    // For numbers > 100, take first digit(s) as floor
+    return floor >= 100 ? Math.floor(floor / 100) : floor;
+  }
+  return 0;
+};
+
+// Get floor display name
+const getFloorDisplayName = (floor: number): string => {
+  if (floor === 0) return 'Ground Floor';
+  if (floor === 1) return '1st Floor';
+  if (floor === 2) return '2nd Floor';
+  if (floor === 3) return '3rd Floor';
+  return `${floor}th Floor`;
+};
+
 const HousekeepingDashboardPage: React.FC = () => {
   const { userInfo } = useAuthStore();
   const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
   const [tasks, setTasks] = useState<HousekeepingTask[]>([]);
   const [stats, setStats] = useState({
     pending: 0,
@@ -28,21 +335,22 @@ const HousekeepingDashboardPage: React.FC = () => {
     completed: 0,
     total: 0,
   });
-  const [expandedTasks, setExpandedTasks] = useState<Set<number>>(new Set());
+  const [selectedTask, setSelectedTask] = useState<HousekeepingTask | null>(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const [updatingTasks, setUpdatingTasks] = useState<Set<number>>(new Set());
+  const [selectedFloor, setSelectedFloor] = useState<number | null>(null);
   const tasksAbortRef = useRef<AbortController | null>(null);
 
   const fetchTasks = async () => {
     try {
-      // Cancel previous request if exists
       if (tasksAbortRef.current) {
         tasksAbortRef.current.abort();
       }
 
       tasksAbortRef.current = new AbortController();
       setLoading(true);
+      setError(null);
 
-      // Fetch today's tasks assigned to current user
       const today = new Date().toISOString().split('T')[0];
       const response = await advancedRoomService.getHousekeepingTasks({
         date: today,
@@ -56,7 +364,6 @@ const HousekeepingDashboardPage: React.FC = () => {
         );
         setTasks(userTasks);
 
-        // Calculate stats
         const pending = userTasks.filter((t: HousekeepingTask) => t.status === 'pending').length;
         const in_progress = userTasks.filter((t: HousekeepingTask) => t.status === 'in_progress').length;
         const completed = userTasks.filter((t: HousekeepingTask) => t.status === 'completed').length;
@@ -67,13 +374,32 @@ const HousekeepingDashboardPage: React.FC = () => {
           completed,
           total: userTasks.length,
         });
+      } else {
+        setTasks([]);
+        setStats({
+          pending: 0,
+          in_progress: 0,
+          completed: 0,
+          total: 0,
+        });
       }
     } catch (error: any) {
       if (error.name === 'AbortError') {
         return;
       }
       logger.error('Error fetching housekeeping tasks', error);
-      toast.error('Failed to load tasks');
+      
+      setTasks([]);
+      setStats({
+        pending: 0,
+        in_progress: 0,
+        completed: 0,
+        total: 0,
+      });
+      
+      const errorMessage = error.response?.data?.detail || error.message || 'Failed to connect to server';
+      setError(errorMessage);
+      toast.error('Failed to load tasks. Please check your connection.');
     } finally {
       setLoading(false);
     }
@@ -82,7 +408,6 @@ const HousekeepingDashboardPage: React.FC = () => {
   useEffect(() => {
     fetchTasks();
 
-    // Auto-refresh every 30 seconds
     const interval = setInterval(() => {
       if (document.visibilityState === 'visible') {
         fetchTasks();
@@ -100,13 +425,13 @@ const HousekeepingDashboardPage: React.FC = () => {
   const getStatusColor = (status: string) => {
     switch (status) {
       case 'completed':
-        return 'bg-green-100 text-green-800 border-green-200';
+        return 'from-green-500 to-emerald-600';
       case 'in_progress':
-        return 'bg-blue-100 text-blue-800 border-blue-200';
+        return 'from-blue-500 to-cyan-600';
       case 'pending':
-        return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+        return 'from-amber-500 to-orange-500';
       default:
-        return 'bg-gray-100 text-gray-800 border-gray-200';
+        return 'from-gray-500 to-gray-600';
     }
   };
 
@@ -123,18 +448,70 @@ const HousekeepingDashboardPage: React.FC = () => {
     }
   };
 
-  const toggleTaskExpansion = (taskId: number) => {
-    setExpandedTasks(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(taskId)) {
-        newSet.delete(taskId);
-      } else {
-        newSet.add(taskId);
-      }
-      return newSet;
-    });
+  const openTaskModal = (task: HousekeepingTask) => {
+    setSelectedTask(task);
+    setIsModalOpen(true);
   };
 
+  const closeTaskModal = () => {
+    setIsModalOpen(false);
+    setSelectedTask(null);
+  };
+
+  // Group tasks by floor
+  const tasksByFloor = React.useMemo(() => {
+    const grouped: { [floor: number]: HousekeepingTask[] } = {};
+    tasks.forEach(task => {
+      const floor = getFloorFromRoomNumber(task.room_number);
+      if (!grouped[floor]) {
+        grouped[floor] = [];
+      }
+      grouped[floor].push(task);
+    });
+    
+    // Sort floors and tasks within each floor
+    const sortedFloors = Object.keys(grouped)
+      .map(Number)
+      .sort((a, b) => a - b);
+    
+    const result: { floor: number; tasks: HousekeepingTask[] }[] = [];
+    sortedFloors.forEach(floor => {
+      // Sort tasks by room number within each floor
+      const sortedTasks = grouped[floor].sort((a, b) => {
+        const roomA = parseInt(String(a.room_number || a.room_id), 10) || 0;
+        const roomB = parseInt(String(b.room_number || b.room_id), 10) || 0;
+        return roomA - roomB;
+      });
+      result.push({ floor, tasks: sortedTasks });
+    });
+    
+    return result;
+  }, [tasks]);
+
+  // Auto-select first floor on initial load
+  useEffect(() => {
+    if (tasksByFloor.length > 0 && selectedFloor === null) {
+      setSelectedFloor(tasksByFloor[0].floor);
+    }
+  }, [tasksByFloor, selectedFloor]);
+
+  // Get current floor tasks
+  const currentFloorTasks = React.useMemo(() => {
+    if (selectedFloor === null) return [];
+    const floorData = tasksByFloor.find(f => f.floor === selectedFloor);
+    return floorData?.tasks || [];
+  }, [tasksByFloor, selectedFloor]);
+
+  // Get current floor stats
+  const currentFloorStats = React.useMemo(() => {
+    return {
+      pending: currentFloorTasks.filter(t => t.status === 'pending').length,
+      in_progress: currentFloorTasks.filter(t => t.status === 'in_progress').length,
+      completed: currentFloorTasks.filter(t => t.status === 'completed').length,
+      total: currentFloorTasks.length,
+    };
+  }, [currentFloorTasks]);
+
   const handleStartTask = async (task: HousekeepingTask) => {
     if (updatingTasks.has(task.id)) return;
     
@@ -143,8 +520,11 @@ const HousekeepingDashboardPage: React.FC = () => {
       await advancedRoomService.updateHousekeepingTask(task.id, {
         status: 'in_progress',
       });
-      toast.success('Task started');
+      toast.success('Task started successfully!');
       await fetchTasks();
+      if (selectedTask?.id === task.id) {
+        setSelectedTask({ ...task, status: 'in_progress' });
+      }
     } catch (error: any) {
       logger.error('Error starting task', error);
       toast.error(error.response?.data?.detail || 'Failed to start task');
@@ -174,7 +554,6 @@ const HousekeepingDashboardPage: React.FC = () => {
         checklist_items: updatedChecklist,
       });
       
-      // Update local state immediately for better UX
       setTasks(prevTasks =>
         prevTasks.map(t =>
           t.id === task.id
@@ -183,7 +562,10 @@ const HousekeepingDashboardPage: React.FC = () => {
         )
       );
       
-      // Recalculate stats
+      if (selectedTask?.id === task.id) {
+        setSelectedTask({ ...task, checklist_items: updatedChecklist });
+      }
+      
       const updatedTask = { ...task, checklist_items: updatedChecklist };
       const allTasks = tasks.map(t => t.id === task.id ? updatedTask : t);
       const pending = allTasks.filter((t: HousekeepingTask) => t.status === 'pending').length;
@@ -206,7 +588,6 @@ const HousekeepingDashboardPage: React.FC = () => {
   const handleCompleteTask = async (task: HousekeepingTask) => {
     if (updatingTasks.has(task.id)) return;
     
-    // Check if all checklist items are completed
     const allCompleted = task.checklist_items?.every(item => item.completed) ?? true;
     
     if (!allCompleted && task.checklist_items && task.checklist_items.length > 0) {
@@ -218,7 +599,6 @@ const HousekeepingDashboardPage: React.FC = () => {
     
     setUpdatingTasks(prev => new Set(prev).add(task.id));
     try {
-      // Mark all checklist items as completed if not already
       const updatedChecklist = task.checklist_items?.map(item => ({
         ...item,
         completed: true,
@@ -228,8 +608,9 @@ const HousekeepingDashboardPage: React.FC = () => {
         status: 'completed',
         checklist_items: updatedChecklist,
       });
-      toast.success('Task marked as completed!');
+      toast.success('Task completed successfully! 🎉');
       await fetchTasks();
+      closeTaskModal();
     } catch (error: any) {
       logger.error('Error completing task', error);
       toast.error(error.response?.data?.detail || 'Failed to complete task');
@@ -242,264 +623,360 @@ const HousekeepingDashboardPage: React.FC = () => {
     }
   };
 
-  if (loading && tasks.length === 0) {
+  if (loading && tasks.length === 0 && !error) {
     return <Loading />;
   }
 
   return (
-    <div className="p-6 max-w-7xl mx-auto">
-      <div className="mb-6 flex items-center justify-between">
-        <div>
-          <h1 className="text-3xl font-bold text-gray-900">Housekeeping Dashboard</h1>
-          <p className="mt-1 text-sm text-gray-500">
-            Welcome back, {userInfo?.name || userInfo?.email || 'Housekeeping Staff'}
-          </p>
+    <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50 overflow-x-hidden">
+      <div className="w-full max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8 py-4 sm:py-6 md:py-8">
+        {/* Header */}
+        <div className="mb-4 sm:mb-6 md:mb-8 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
+          <div className="min-w-0 flex-1">
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-serif font-bold text-gray-900 mb-1 sm:mb-2 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent truncate">
+              Enterprise Dashboard
+            </h1>
+            <p className="text-xs sm:text-sm md:text-base text-gray-600 font-light truncate">
+              Welcome back, <span className="font-semibold text-[#d4af37]">{userInfo?.name || userInfo?.email || 'Housekeeping Staff'}</span>
+            </p>
+          </div>
+          <button
+            onClick={fetchTasks}
+            className="w-full sm:w-auto flex items-center justify-center space-x-2 px-4 sm:px-6 py-2 sm:py-3 bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-white rounded-lg hover:from-[#f5d76e] hover:to-[#d4af37] transition-all duration-300 shadow-lg hover:shadow-xl hover:-translate-y-0.5 text-sm sm:text-base font-medium flex-shrink-0"
+          >
+            <RefreshCw className="w-4 h-4 sm:w-5 sm:h-5" />
+            <span>Refresh</span>
+          </button>
         </div>
-        <button
-          onClick={fetchTasks}
-          className="flex items-center space-x-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-        >
-          <RefreshCw className="w-4 h-4" />
-          <span>Refresh</span>
-        </button>
-      </div>
 
-      {/* Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
-        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">Pending</p>
-              <p className="text-2xl font-bold text-gray-900 mt-1">{stats.pending}</p>
+        {/* Error State */}
+        {error && (
+          <div className="mb-4 sm:mb-6 md:mb-8 enterprise-card p-4 sm:p-6 border-l-4 border-red-500 animate-slide-in">
+            <div className="flex items-start space-x-3 sm:space-x-4">
+              <div className="flex-shrink-0">
+                <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-red-100 flex items-center justify-center">
+                  <AlertCircle className="w-5 h-5 sm:w-6 sm:h-6 text-red-600" />
+                </div>
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="text-base sm:text-lg font-semibold text-red-900 mb-1 sm:mb-2">Connection Error</h3>
+                <p className="text-xs sm:text-sm text-red-700 mb-2 sm:mb-3 break-words">{error}</p>
+                <p className="text-xs sm:text-sm text-red-600 break-words">
+                  Unable to load data from the server. Please check your internet connection and try again.
+                </p>
+              </div>
             </div>
-            <AlertCircle className="w-8 h-8 text-yellow-500" />
           </div>
-        </div>
+        )}
 
-        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-500">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">In Progress</p>
-              <p className="text-2xl font-bold text-gray-900 mt-1">{stats.in_progress}</p>
+        {/* Stats Cards */}
+        {!error && (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-4 sm:mb-6 md:mb-8">
+            <div className="enterprise-card p-4 sm:p-5 md:p-6 relative overflow-hidden group hover:scale-105 transition-transform duration-300">
+              <div className="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-gradient-to-br from-amber-400/20 to-orange-400/20 rounded-full blur-2xl"></div>
+              <div className="relative">
+                <div className="flex items-center justify-between mb-3 sm:mb-4">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center shadow-lg flex-shrink-0">
+                    <AlertCircle className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                  </div>
+                  <span className="text-[10px] sm:text-xs font-semibold text-amber-600 bg-amber-100 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full whitespace-nowrap">PENDING</span>
+                </div>
+                <p className="text-xs sm:text-sm font-medium text-gray-600 mb-1">Pending Tasks</p>
+                <p className="text-2xl sm:text-3xl font-bold text-gray-900">{stats.pending}</p>
+              </div>
             </div>
-            <Clock className="w-8 h-8 text-blue-500" />
-          </div>
-        </div>
 
-        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-500">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">Completed</p>
-              <p className="text-2xl font-bold text-gray-900 mt-1">{stats.completed}</p>
+            <div className="enterprise-card p-4 sm:p-5 md:p-6 relative overflow-hidden group hover:scale-105 transition-transform duration-300">
+              <div className="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-gradient-to-br from-blue-400/20 to-cyan-400/20 rounded-full blur-2xl"></div>
+              <div className="relative">
+                <div className="flex items-center justify-between mb-3 sm:mb-4">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-lg flex-shrink-0">
+                    <Clock className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                  </div>
+                  <span className="text-[10px] sm:text-xs font-semibold text-blue-600 bg-blue-100 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full whitespace-nowrap">IN PROGRESS</span>
+                </div>
+                <p className="text-xs sm:text-sm font-medium text-gray-600 mb-1">In Progress</p>
+                <p className="text-2xl sm:text-3xl font-bold text-gray-900">{stats.in_progress}</p>
+              </div>
             </div>
-            <CheckCircle className="w-8 h-8 text-green-500" />
-          </div>
-        </div>
 
-        <div className="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-500">
-          <div className="flex items-center justify-between">
-            <div>
-              <p className="text-sm font-medium text-gray-600">Total Today</p>
-              <p className="text-2xl font-bold text-gray-900 mt-1">{stats.total}</p>
+            <div className="enterprise-card p-4 sm:p-5 md:p-6 relative overflow-hidden group hover:scale-105 transition-transform duration-300">
+              <div className="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-gradient-to-br from-green-400/20 to-emerald-400/20 rounded-full blur-2xl"></div>
+              <div className="relative">
+                <div className="flex items-center justify-between mb-3 sm:mb-4">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-green-500 to-emerald-500 flex items-center justify-center shadow-lg flex-shrink-0">
+                    <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                  </div>
+                  <span className="text-[10px] sm:text-xs font-semibold text-green-600 bg-green-100 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full whitespace-nowrap">COMPLETED</span>
+                </div>
+                <p className="text-xs sm:text-sm font-medium text-gray-600 mb-1">Completed</p>
+                <p className="text-2xl sm:text-3xl font-bold text-gray-900">{stats.completed}</p>
+              </div>
+            </div>
+
+            <div className="enterprise-card p-4 sm:p-5 md:p-6 relative overflow-hidden group hover:scale-105 transition-transform duration-300">
+              <div className="absolute top-0 right-0 w-24 h-24 sm:w-32 sm:h-32 bg-gradient-to-br from-[#d4af37]/20 to-[#c9a227]/20 rounded-full blur-2xl"></div>
+              <div className="relative">
+                <div className="flex items-center justify-between mb-3 sm:mb-4">
+                  <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center shadow-lg flex-shrink-0">
+                    <Sparkles className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
+                  </div>
+                  <span className="text-[10px] sm:text-xs font-semibold text-[#c9a227] bg-[#d4af37]/10 px-2 sm:px-3 py-0.5 sm:py-1 rounded-full whitespace-nowrap">TOTAL</span>
+                </div>
+                <p className="text-xs sm:text-sm font-medium text-gray-600 mb-1">Total Today</p>
+                <p className="text-2xl sm:text-3xl font-bold text-gray-900">{stats.total}</p>
+              </div>
             </div>
-            <Sparkles className="w-8 h-8 text-indigo-500" />
           </div>
-        </div>
-      </div>
+        )}
 
-      {/* Tasks List */}
-      <div className="bg-white rounded-lg shadow">
-        <div className="px-6 py-4 border-b border-gray-200">
-          <h2 className="text-lg font-semibold text-gray-900">Today's Tasks</h2>
-        </div>
+        {/* Tasks by Floor - Tab System */}
+        {!error && (
+          <div className="space-y-4 sm:space-y-5">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2 sm:gap-4">
+              <h2 className="text-xl sm:text-2xl font-serif font-bold text-gray-900 flex items-center gap-2">
+                <Building2 className="w-5 h-5 sm:w-6 sm:h-6 text-[#d4af37]" />
+                <span>Today's Tasks by Floor</span>
+              </h2>
+              <span className="text-xs sm:text-sm text-gray-500">{tasks.length} task{tasks.length !== 1 ? 's' : ''} across {tasksByFloor.length} floor{tasksByFloor.length !== 1 ? 's' : ''}</span>
+            </div>
 
-        {tasks.length === 0 ? (
-          <div className="p-12 text-center">
-            <Sparkles className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-            <h3 className="text-lg font-medium text-gray-900 mb-2">No tasks assigned</h3>
-            <p className="text-sm text-gray-500">You don't have any housekeeping tasks assigned for today.</p>
-          </div>
-        ) : (
-          <div className="divide-y divide-gray-200">
-            {tasks.map((task) => {
-              const completedItems = task.checklist_items?.filter(item => item.completed).length || 0;
-              const totalItems = task.checklist_items?.length || 0;
-              const progress = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
+            {tasks.length === 0 ? (
+              <div className="enterprise-card p-8 sm:p-12 text-center">
+                <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gradient-to-br from-[#d4af37]/20 to-[#c9a227]/20 flex items-center justify-center mx-auto mb-3 sm:mb-4">
+                  <Sparkles className="w-8 h-8 sm:w-10 sm:h-10 text-[#d4af37]" />
+                </div>
+                <h3 className="text-lg sm:text-xl font-semibold text-gray-900 mb-2">No tasks assigned</h3>
+                <p className="text-sm sm:text-base text-gray-500">You don't have any housekeeping tasks assigned for today.</p>
+              </div>
+            ) : (
+              <div className="space-y-4 sm:space-y-5">
+                {/* Floor Tabs */}
+                <div className="enterprise-card p-2 sm:p-3 bg-gradient-to-br from-gray-50 to-white border border-gray-200/50 rounded-xl sm:rounded-2xl overflow-x-auto">
+                  <div className="flex gap-2 sm:gap-3 min-w-max sm:min-w-0">
+                    {tasksByFloor.map(({ floor, tasks: floorTasks }) => {
+                      const isActive = selectedFloor === floor;
+                      const floorStats = {
+                        pending: floorTasks.filter(t => t.status === 'pending').length,
+                        in_progress: floorTasks.filter(t => t.status === 'in_progress').length,
+                        completed: floorTasks.filter(t => t.status === 'completed').length,
+                        total: floorTasks.length,
+                      };
 
-              const isExpanded = expandedTasks.has(task.id);
-              const isUpdating = updatingTasks.has(task.id);
-              const canStart = task.status === 'pending';
-              const canComplete = task.status === 'in_progress' || task.status === 'pending';
-
-              return (
-                <div
-                  key={task.id}
-                  className="border-b border-gray-200 last:border-b-0"
-                >
-                  <div className="p-6 hover:bg-gray-50 transition-colors">
-                    <div className="flex items-start justify-between">
-                      <div className="flex-1">
-                        <div className="flex items-center space-x-3 mb-2">
-                          <h3 className="text-lg font-semibold text-gray-900">
-                            Room {task.room_number || task.room_id}
-                          </h3>
-                          <span className={`px-3 py-1 rounded-full text-xs font-medium border flex items-center space-x-1 ${getStatusColor(task.status)}`}>
-                            {getStatusIcon(task.status)}
-                            <span>{task.status.replace('_', ' ')}</span>
-                          </span>
-                        </div>
-
-                        <div className="flex items-center space-x-4 text-sm text-gray-600 mb-3">
-                          <div className="flex items-center space-x-1">
-                            <Calendar className="w-4 h-4" />
-                            <span>{formatDate(task.scheduled_time)}</span>
-                          </div>
-                          <div className="flex items-center space-x-1">
-                            <MapPin className="w-4 h-4" />
-                            <span className="capitalize">{task.task_type}</span>
-                          </div>
-                        </div>
-
-                        {task.checklist_items && task.checklist_items.length > 0 && (
-                          <div className="mt-3">
-                            <div className="flex items-center justify-between mb-1">
-                              <span className="text-sm text-gray-600">Progress</span>
-                              <span className="text-sm font-medium text-gray-900">{progress}%</span>
-                            </div>
-                            <div className="w-full bg-gray-200 rounded-full h-2">
-                              <div
-                                className="bg-blue-600 h-2 rounded-full transition-all"
-                                style={{ width: `${progress}%` }}
-                              />
-                            </div>
-                            <p className="text-xs text-gray-500 mt-1">
-                              {completedItems} of {totalItems} items completed
-                            </p>
-                          </div>
-                        )}
-                      </div>
-
-                      <div className="flex items-center space-x-2 ml-4">
-                        {canStart && (
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleStartTask(task);
-                            }}
-                            disabled={isUpdating}
-                            className="flex items-center space-x-1 px-3 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-                          >
-                            <Play className="w-4 h-4" />
-                            <span>Start</span>
-                          </button>
-                        )}
-                        {canComplete && (
-                          <button
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleCompleteTask(task);
-                            }}
-                            disabled={isUpdating}
-                            className="flex items-center space-x-1 px-3 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
-                          >
-                            <CheckCircle className="w-4 h-4" />
-                            <span>Complete</span>
-                          </button>
-                        )}
+                      return (
                         <button
-                          onClick={(e) => {
-                            e.stopPropagation();
-                            toggleTaskExpansion(task.id);
-                          }}
-                          className="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+                          key={floor}
+                          onClick={() => setSelectedFloor(floor)}
+                          className={`relative px-4 sm:px-6 py-2.5 sm:py-3 rounded-lg sm:rounded-xl font-semibold text-sm sm:text-base transition-all duration-300 flex items-center gap-2 sm:gap-3 whitespace-nowrap flex-shrink-0 ${
+                            isActive
+                              ? 'bg-gradient-to-r from-[#d4af37] to-[#c9a227] text-white shadow-lg scale-105'
+                              : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-200/50 hover:border-[#d4af37]/30'
+                          }`}
                         >
-                          {isExpanded ? (
-                            <ChevronUp className="w-5 h-5" />
-                          ) : (
-                            <ChevronDown className="w-5 h-5" />
+                          <Building2 className={`w-4 h-4 sm:w-5 sm:h-5 ${isActive ? 'text-white' : 'text-[#d4af37]'}`} />
+                          <span className="font-bold">{getFloorDisplayName(floor)}</span>
+                          <span className={`px-2 py-0.5 rounded-full text-[10px] sm:text-xs font-bold ${
+                            isActive
+                              ? 'bg-white/20 text-white'
+                              : 'bg-[#d4af37]/10 text-[#c9a227]'
+                          }`}>
+                            {floorStats.total}
+                          </span>
+                          {!isActive && (
+                            <div className="flex items-center gap-1">
+                              {floorStats.pending > 0 && (
+                                <span className="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
+                              )}
+                              {floorStats.in_progress > 0 && (
+                                <span className="w-1.5 h-1.5 rounded-full bg-blue-500"></span>
+                              )}
+                              {floorStats.completed === floorStats.total && floorStats.total > 0 && (
+                                <span className="w-1.5 h-1.5 rounded-full bg-green-500"></span>
+                              )}
+                            </div>
                           )}
                         </button>
-                      </div>
-                    </div>
+                      );
+                    })}
                   </div>
+                </div>
 
-                  {/* Expanded Task Details */}
-                  {isExpanded && (
-                    <div className="px-6 pb-6 bg-gray-50 border-t border-gray-200">
-                      <div className="pt-4 space-y-4">
-                        {task.notes && (
-                          <div>
-                            <h4 className="text-sm font-semibold text-gray-700 mb-1">Notes</h4>
-                            <p className="text-sm text-gray-600">{task.notes}</p>
+                {/* Current Floor Tasks */}
+                {selectedFloor !== null && (
+                  <div className="space-y-4 sm:space-y-5">
+                    {/* Floor Header with Stats */}
+                    <div className="enterprise-card p-4 sm:p-5 bg-gradient-to-r from-[#d4af37]/10 via-[#c9a227]/5 to-[#d4af37]/10 border border-[#d4af37]/20 rounded-xl sm:rounded-2xl">
+                      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 sm:gap-4">
+                        <div className="flex items-center gap-3 sm:gap-4">
+                          <div className="w-10 h-10 sm:w-12 sm:h-12 rounded-xl bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center shadow-lg">
+                            <Building2 className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                           </div>
-                        )}
-
-                        {task.checklist_items && task.checklist_items.length > 0 && (
                           <div>
-                            <h4 className="text-sm font-semibold text-gray-700 mb-3">Checklist</h4>
-                            <div className="space-y-2">
-                              {task.checklist_items.map((item: ChecklistItem, index: number) => (
-                                <label
-                                  key={index}
-                                  className="flex items-start space-x-3 p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition-colors cursor-pointer"
-                                >
-                                  <input
-                                    type="checkbox"
-                                    checked={item.completed}
-                                    onChange={(e) => {
-                                      e.stopPropagation();
-                                      handleUpdateChecklist(task, index, e.target.checked);
-                                    }}
-                                    disabled={isUpdating || task.status === 'completed'}
-                                    className="mt-1 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded disabled:opacity-50 disabled:cursor-not-allowed"
-                                  />
-                                  <div className="flex-1">
-                                    <span
-                                      className={`text-sm ${
-                                        item.completed
-                                          ? 'text-gray-500 line-through'
-                                          : 'text-gray-900'
-                                      }`}
-                                    >
-                                      {item.item}
-                                    </span>
-                                    {item.notes && (
-                                      <p className="text-xs text-gray-500 mt-1">{item.notes}</p>
-                                    )}
-                                  </div>
-                                  {item.completed && (
-                                    <CheckCircle className="w-5 h-5 text-green-500 flex-shrink-0" />
-                                  )}
-                                </label>
-                              ))}
-                            </div>
-                          </div>
-                        )}
-
-                        {task.status === 'completed' && task.completed_at && (
-                          <div className="pt-2 border-t border-gray-200">
-                            <p className="text-xs text-gray-500">
-                              Completed: {formatDate(task.completed_at)}
+                            <h3 className="text-lg sm:text-xl font-bold text-gray-900">
+                              {getFloorDisplayName(selectedFloor)}
+                            </h3>
+                            <p className="text-xs sm:text-sm text-gray-600 mt-0.5">
+                              {currentFloorStats.total} room{currentFloorStats.total !== 1 ? 's' : ''} assigned
                             </p>
-                            {task.actual_duration_minutes && (
-                              <p className="text-xs text-gray-500 mt-1">
-                                Duration: {task.actual_duration_minutes} minutes
-                              </p>
-                            )}
                           </div>
-                        )}
+                        </div>
+                        <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
+                          {currentFloorStats.pending > 0 && (
+                            <div className="flex items-center gap-1.5 px-3 py-1.5 bg-amber-100 rounded-lg border border-amber-200">
+                              <AlertCircle className="w-3.5 h-3.5 text-amber-600" />
+                              <span className="text-xs sm:text-sm font-semibold text-amber-700">{currentFloorStats.pending} Pending</span>
+                            </div>
+                          )}
+                          {currentFloorStats.in_progress > 0 && (
+                            <div className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-100 rounded-lg border border-blue-200">
+                              <Clock className="w-3.5 h-3.5 text-blue-600" />
+                              <span className="text-xs sm:text-sm font-semibold text-blue-700">{currentFloorStats.in_progress} In Progress</span>
+                            </div>
+                          )}
+                          {currentFloorStats.completed > 0 && (
+                            <div className="flex items-center gap-1.5 px-3 py-1.5 bg-green-100 rounded-lg border border-green-200">
+                              <CheckCircle className="w-3.5 h-3.5 text-green-600" />
+                              <span className="text-xs sm:text-sm font-semibold text-green-700">{currentFloorStats.completed} Completed</span>
+                            </div>
+                          )}
+                        </div>
                       </div>
                     </div>
-                  )}
-                </div>
-              );
-            })}
+
+                    {/* Tasks Grid */}
+                    {currentFloorTasks.length === 0 ? (
+                      <div className="enterprise-card p-8 sm:p-12 text-center">
+                        <div className="w-16 h-16 sm:w-20 sm:h-20 rounded-full bg-gradient-to-br from-[#d4af37]/20 to-[#c9a227]/20 flex items-center justify-center mx-auto mb-3 sm:mb-4">
+                          <Sparkles className="w-8 h-8 sm:w-10 sm:h-10 text-[#d4af37]" />
+                        </div>
+                        <h3 className="text-lg sm:text-xl font-semibold text-gray-900 mb-2">No tasks on this floor</h3>
+                        <p className="text-sm sm:text-base text-gray-500">No housekeeping tasks assigned for {getFloorDisplayName(selectedFloor).toLowerCase()}.</p>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-5">
+                        {currentFloorTasks.map((task) => {
+                          const completedItems = task.checklist_items?.filter(item => item.completed).length || 0;
+                          const totalItems = task.checklist_items?.length || 0;
+                          const progress = totalItems > 0 ? Math.round((completedItems / totalItems) * 100) : 0;
+                          const isUpdating = updatingTasks.has(task.id);
+                          const canStart = task.status === 'pending';
+                          const canComplete = task.status === 'in_progress' || task.status === 'pending';
+
+                          return (
+                            <div
+                              key={task.id}
+                              className="enterprise-card p-4 sm:p-5 hover:shadow-2xl transition-all duration-300 cursor-pointer group border border-gray-200/50"
+                              onClick={() => openTaskModal(task)}
+                            >
+                              <div className="flex items-start justify-between mb-3 sm:mb-4 gap-3">
+                                <div className="flex-1 min-w-0">
+                                  <div className="flex items-center space-x-2 sm:space-x-3 mb-2">
+                                    <div className="w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-gradient-to-br from-[#d4af37] to-[#c9a227] flex items-center justify-center shadow-lg flex-shrink-0">
+                                      <MapPin className="w-4 h-4 sm:w-5 sm:h-5 text-white" />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                      <h3 className="text-base sm:text-lg font-bold text-gray-900 truncate">
+                                        Room {task.room_number || task.room_id}
+                                      </h3>
+                                      <p className="text-[10px] sm:text-xs text-gray-500 capitalize truncate">{task.task_type}</p>
+                                    </div>
+                                  </div>
+                                </div>
+                                <span className={`px-2 sm:px-3 py-1 rounded-lg text-[10px] sm:text-xs font-semibold text-white bg-gradient-to-r ${getStatusColor(task.status)} whitespace-nowrap flex-shrink-0`}>
+                                  {task.status.replace('_', ' ')}
+                                </span>
+                              </div>
+
+                              <div className="flex items-center space-x-4 text-xs sm:text-sm text-gray-600 mb-3 sm:mb-4">
+                                <div className="flex items-center space-x-1.5">
+                                  <Calendar className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-[#d4af37] flex-shrink-0" />
+                                  <span className="text-[10px] sm:text-xs truncate">{formatDate(task.scheduled_time)}</span>
+                                </div>
+                              </div>
+
+                              {task.checklist_items && task.checklist_items.length > 0 && (
+                                <div className="mb-3 sm:mb-4">
+                                  <div className="flex items-center justify-between mb-1.5 sm:mb-2">
+                                    <span className="text-[10px] sm:text-xs font-medium text-gray-600">Progress</span>
+                                    <span className="text-xs sm:text-sm font-bold text-[#d4af37]">{progress}%</span>
+                                  </div>
+                                  <div className="relative w-full h-1.5 sm:h-2 bg-gray-200 rounded-full overflow-hidden">
+                                    <div
+                                      className={`absolute inset-y-0 left-0 bg-gradient-to-r ${getStatusColor(task.status)} rounded-full transition-all duration-500`}
+                                      style={{ width: `${progress}%` }}
+                                    />
+                                  </div>
+                                  <p className="text-[10px] sm:text-xs text-gray-500 mt-1">
+                                    {completedItems} of {totalItems} items completed
+                                  </p>
+                                </div>
+                              )}
+
+                              <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-2 sm:gap-3 pt-3 sm:pt-4 border-t border-gray-200">
+                                <button
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    openTaskModal(task);
+                                  }}
+                                  className="w-full sm:w-auto flex items-center justify-center space-x-2 px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors font-medium"
+                                >
+                                  <Eye className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
+                                  <span>View Details</span>
+                                </button>
+                                <div className="flex items-center gap-2">
+                                  {canStart && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleStartTask(task);
+                                      }}
+                                      disabled={isUpdating}
+                                      className="flex-1 sm:flex-none px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm bg-gradient-to-r from-blue-600 to-cyan-600 text-white rounded-lg hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 font-medium shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-1"
+                                    >
+                                      <Play className="w-3 h-3 flex-shrink-0" />
+                                      <span>Start</span>
+                                    </button>
+                                  )}
+                                  {canComplete && (
+                                    <button
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        handleCompleteTask(task);
+                                      }}
+                                      disabled={isUpdating}
+                                      className="flex-1 sm:flex-none px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg hover:from-green-700 hover:to-emerald-700 transition-all duration-200 font-medium shadow-md hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-1"
+                                    >
+                                      <CheckCircle className="w-3 h-3 flex-shrink-0" />
+                                      <span>Complete</span>
+                                    </button>
+                                  )}
+                                </div>
+                              </div>
+                            </div>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
           </div>
         )}
       </div>
+
+      {/* Task Detail Modal */}
+      <TaskDetailModal
+        task={selectedTask}
+        isOpen={isModalOpen}
+        onClose={closeTaskModal}
+        onUpdateChecklist={handleUpdateChecklist}
+        onStartTask={handleStartTask}
+        onCompleteTask={handleCompleteTask}
+        isUpdating={selectedTask ? updatingTasks.has(selectedTask.id) : false}
+      />
     </div>
   );
 };
 
 export default HousekeepingDashboardPage;
-
diff --git a/Frontend/src/pages/staff/ChatManagementPage.tsx b/Frontend/src/pages/staff/ChatManagementPage.tsx
index 44b60e7b..e15ffe6c 100644
--- a/Frontend/src/pages/staff/ChatManagementPage.tsx
+++ b/Frontend/src/pages/staff/ChatManagementPage.tsx
@@ -218,8 +218,13 @@ const ChatManagementPage: React.FC = () => {
       const response = await chatService.listChats();
       if (response.success) {
         setChats(response.data);
+      } else {
+        // Clear data if response is not successful
+        setChats([]);
       }
     } catch (error: any) {
+      // Clear data when API connection fails
+      setChats([]);
       toast.error(error.response?.data?.detail || 'Failed to load chats');
     } finally {
       setLoading(false);
@@ -232,8 +237,13 @@ const ChatManagementPage: React.FC = () => {
       const response = await chatService.getMessages(chatId);
       if (response.success) {
         setMessages(response.data);
+      } else {
+        // Clear data if response is not successful
+        setMessages([]);
       }
     } catch (error: any) {
+      // Clear data when API connection fails
+      setMessages([]);
       toast.error(error.response?.data?.detail || 'Failed to load messages');
     } finally {
       setLoadingMessages(false);
diff --git a/Frontend/src/pages/staff/DashboardPage.tsx b/Frontend/src/pages/staff/DashboardPage.tsx
index ba544b45..cb7d2ad7 100644
--- a/Frontend/src/pages/staff/DashboardPage.tsx
+++ b/Frontend/src/pages/staff/DashboardPage.tsx
@@ -73,12 +73,17 @@ const StaffDashboardPage: React.FC = () => {
         const response = await paymentService.getPayments({ page: 1, limit: 5 });
         if (response.success && response.data?.payments) {
           setRecentPayments(response.data.payments);
+        } else {
+          // Clear data if response is not successful
+          setRecentPayments([]);
         }
       } catch (err: any) {
         // Handle AbortError silently
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setRecentPayments([]);
         logger.error('Error fetching payments', err);
       } finally {
         setLoadingPayments(false);
@@ -109,12 +114,17 @@ const StaffDashboardPage: React.FC = () => {
         const response = await bookingService.getAllBookings({ page: 1, limit: 5 });
         if ((response.status === 'success' || response.success) && response.data?.bookings) {
           setRecentBookings(response.data.bookings);
+        } else {
+          // Clear data if response is not successful
+          setRecentBookings([]);
         }
       } catch (err: any) {
         // Handle AbortError silently
         if (err.name === 'AbortError') {
           return;
         }
+        // Clear data when API connection fails
+        setRecentBookings([]);
         logger.error('Error fetching bookings', err);
       } finally {
         setLoadingBookings(false);
diff --git a/Frontend/src/shared/components/Footer.tsx b/Frontend/src/shared/components/Footer.tsx
index b152bc92..f7d8a97f 100644
--- a/Frontend/src/shared/components/Footer.tsx
+++ b/Frontend/src/shared/components/Footer.tsx
@@ -34,16 +34,22 @@ const Footer: React.FC = () => {
   const { settings } = useCompanySettings();
   const [pageContent, setPageContent] = useState<PageContent | null>(null);
   const [enabledPages, setEnabledPages] = useState<Set<string>>(new Set());
+  const [apiError, setApiError] = useState(false);
 
   useEffect(() => {
     const fetchPageContent = async () => {
       try {
+        setApiError(false);
         const response = await pageContentService.getFooterContent();
         if (response.status === 'success' && response.data?.page_content) {
           setPageContent(response.data.page_content);
+        } else {
+          setPageContent(null);
         }
       } catch (err: any) {
         console.error('Error fetching footer content:', err);
+        setApiError(true);
+        setPageContent(null);
       }
     };
 
@@ -82,9 +88,10 @@ const Footer: React.FC = () => {
   }, []);
 
   
+  // Only use company settings from API, no hardcoded fallbacks
   const displayPhone = settings.company_phone || null;
   const displayEmail = settings.company_email || null;
-  const displayAddress = settings.company_address || '123 ABC Street, District 1\nHo Chi Minh City, Vietnam';
+  const displayAddress = settings.company_address || null;
   const phoneNumber = displayPhone ? displayPhone.replace(/\s+/g, '').replace(/[()]/g, '') : '';
   const phoneHref = displayPhone ? 'tel:' + phoneNumber : '';
   
@@ -134,13 +141,15 @@ const Footer: React.FC = () => {
     { label: 'Contact Us', url: '/contact' }
   ];
 
+  // Only use default links if pageContent was successfully loaded but is empty
+  // Don't use defaults if API failed
   const quickLinks = pageContent?.footer_links?.quick_links && pageContent.footer_links.quick_links.length > 0
     ? pageContent.footer_links.quick_links
-    : defaultQuickLinks;
+    : (pageContent && !apiError ? defaultQuickLinks : []);
 
   const allSupportLinks = pageContent?.footer_links?.support_links && pageContent.footer_links.support_links.length > 0
     ? pageContent.footer_links.support_links
-    : defaultSupportLinks;
+    : (pageContent && !apiError ? defaultSupportLinks : []);
 
   // Filter support links to only show enabled policy pages
   const supportLinks = allSupportLinks.filter((link) => {
@@ -284,6 +293,7 @@ const Footer: React.FC = () => {
           </div>
 
           {/* Quick Links */}
+          {quickLinks.length > 0 && (
           <div>
             <h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-6 sm:mb-8 relative inline-block tracking-wide">
               <span className="relative z-10">Quick Links</span>
@@ -303,8 +313,10 @@ const Footer: React.FC = () => {
               ))}
             </ul>
           </div>
+          )}
 
           {/* Guest Services */}
+          {supportLinks.length > 0 && (
           <div>
             <h3 className="text-white font-elegant font-semibold text-lg sm:text-xl mb-6 sm:mb-8 relative inline-block tracking-wide">
               <span className="relative z-10">Guest Services</span>
@@ -324,6 +336,7 @@ const Footer: React.FC = () => {
               ))}
             </ul>
           </div>
+          )}
 
           {/* Contact Information */}
           <div>
@@ -331,7 +344,9 @@ const Footer: React.FC = () => {
               <span className="relative z-10">Contact</span>
               <span className="absolute bottom-0 left-0 w-full h-[2px] bg-gradient-to-r from-[#d4af37] via-[#d4af37]/50 to-transparent"></span>
             </h3>
+            {(displayAddress || displayPhone || displayEmail) && (
             <ul className="space-y-5 sm:space-y-6">
+              {displayAddress && (
               <li className="flex items-start space-x-4 group">
                 <div className="relative mt-1 flex-shrink-0">
                   <div className="p-2 bg-gradient-to-br from-[#d4af37]/10 to-[#c9a227]/5 rounded-lg border border-[#d4af37]/20 group-hover:border-[#d4af37]/40 transition-all duration-300">
@@ -340,15 +355,16 @@ const Footer: React.FC = () => {
                   <div className="absolute inset-0 bg-[#d4af37]/20 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                 </div>
                 <span className="text-sm sm:text-base text-gray-400 group-hover:text-gray-300 transition-colors leading-relaxed font-light pt-1">
-                  {(displayAddress
+                  {displayAddress
                     .split('\n').map((line, i) => (
                       <React.Fragment key={i}>
                         {line}
                         {i < displayAddress.split('\n').length - 1 && <br />}
                       </React.Fragment>
-                    )))}
+                    ))}
                 </span>
               </li>
+              )}
               {displayPhone && (
                 <li className="flex items-center space-x-4 group">
                   <div className="relative flex-shrink-0">
@@ -376,6 +392,7 @@ const Footer: React.FC = () => {
                 </li>
               )}
             </ul>
+            )}
 
             {/* Rating Section */}
             <div className="mt-8 sm:mt-10 pt-6 sm:pt-8 border-t border-gray-800/50">
diff --git a/Frontend/src/styles/index.css b/Frontend/src/styles/index.css
index 42b7cabe..d2255550 100644
--- a/Frontend/src/styles/index.css
+++ b/Frontend/src/styles/index.css
@@ -587,3 +587,23 @@ img[loading="lazy"]:not([src]) {
 .prose.prose-invert a {
   color: #d4af37 !important;
 }
+
+/* Custom luxury scrollbar for modals */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 8px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: #f3f4f6;
+  border-radius: 10px;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, #d4af37 0%, #c9a227 100%);
+  border-radius: 10px;
+  border: 2px solid #f3f4f6;
+}
+
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, #f5d76e 0%, #d4af37 100%);
+}