diff --git a/src/components/admin/ApprovalPoliciesPage.tsx b/src/components/admin/ApprovalPoliciesPage.tsx
index 7b91a5e..3424aa6 100644
--- a/src/components/admin/ApprovalPoliciesPage.tsx
+++ b/src/components/admin/ApprovalPoliciesPage.tsx
@@ -175,7 +175,7 @@ export function ApprovalPoliciesPage() {
       <div className="flex items-center justify-between">
         <div>
           <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
-            <Settings2 className="w-6 h-6 text-amber-600" />
+            <Settings2 className="w-6 h-6 text-re-red" />
             Approval Policies
           </h1>
           <p className="text-slate-500">Configure stage-level approvers, mode, and minimum approvals.</p>
@@ -185,7 +185,7 @@ export function ApprovalPoliciesPage() {
             <RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
             Refresh
           </Button>
-          <Button className="bg-amber-600 hover:bg-amber-700" onClick={openCreateModal}>
+          <Button className="bg-re-red hover:bg-re-red-hover" onClick={openCreateModal}>
             <Plus className="w-4 h-4 mr-2" />
             Add New Policy
           </Button>
@@ -244,7 +244,7 @@ export function ApprovalPoliciesPage() {
                       <Button 
                         size="sm" 
                         variant="ghost" 
-                        className="text-amber-600 hover:text-amber-700 hover:bg-amber-50 h-8 px-2"
+                        className="text-re-red hover:text-re-red-hover hover:bg-red-50 h-8 px-2"
                         onClick={() => openEditModal(policy)}
                       >
                         <Edit2 className="w-4 h-4 mr-1.5" />
@@ -264,7 +264,7 @@ export function ApprovalPoliciesPage() {
         <DialogContent className="sm:max-w-[480px] overflow-visible">
           <DialogHeader className="gap-1 pb-2 border-b">
             <DialogTitle className="text-base flex items-center gap-2">
-              {isEditMode ? <Edit2 className="w-4 h-4 text-amber-600" /> : <Plus className="w-4 h-4 text-amber-600" />}
+              {isEditMode ? <Edit2 className="w-4 h-4 text-re-red" /> : <Plus className="w-4 h-4 text-re-red" />}
               {isEditMode ? 'Edit Policy' : 'Create New Policy'}
             </DialogTitle>
             <DialogDescription className="text-[11px]">
@@ -307,7 +307,7 @@ export function ApprovalPoliciesPage() {
                         ))}
                         <SelectGroup>
                           <DropdownMenuSeparator />
-                          <SelectItem value="CUSTOM" className="text-xs font-semibold text-amber-600 italic">
+                          <SelectItem value="CUSTOM" className="text-xs font-semibold text-re-red italic">
                             + Enter Custom Stage Code
                           </SelectItem>
                         </SelectGroup>
@@ -376,10 +376,10 @@ export function ApprovalPoliciesPage() {
                   <DropdownMenuTrigger asChild>
                     <Button variant="outline" size="sm" className="w-full justify-between h-8 text-[11px] text-slate-500 font-normal border-slate-200">
                       <div className="flex items-center gap-1.5">
-                        <Plus className="w-3 h-3 text-amber-600" />
+                        <Plus className="w-3 h-3 text-re-red" />
                         <span>Add Roles...</span>
                       </div>
-                      <Badge variant="secondary" className="bg-amber-50 text-amber-700 border-transparent text-[9px] px-1 h-4">
+                      <Badge variant="secondary" className="bg-red-50 text-re-red-hover border-transparent text-[9px] px-1 h-4">
                         {draft.requiredRoles.length}
                       </Badge>
                     </Button>
@@ -445,7 +445,7 @@ export function ApprovalPoliciesPage() {
             <Button variant="outline" size="sm" className="text-xs h-8" onClick={() => setIsModalOpen(false)}>
               Cancel
             </Button>
-            <Button className="bg-amber-600 hover:bg-amber-700 h-8 text-xs font-semibold" onClick={savePolicy}>
+            <Button className="bg-re-red hover:bg-re-red-hover h-8 text-xs font-semibold" onClick={savePolicy}>
               <Save className="w-3 h-3 mr-1.5" />
               {isEditMode ? 'Save Changes' : 'Create Policy'}
             </Button>
diff --git a/src/components/admin/QuestionnaireBuilder.tsx b/src/components/admin/QuestionnaireBuilder.tsx
index 9fcf188..714b49b 100644
--- a/src/components/admin/QuestionnaireBuilder.tsx
+++ b/src/components/admin/QuestionnaireBuilder.tsx
@@ -204,7 +204,7 @@ const QuestionnaireBuilder: React.FC = () => {
     if (fetching) {
         return (
             <div className="flex justify-center p-12">
-                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-amber-600"></div>
+                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-re-red"></div>
             </div>
         );
     }
@@ -230,7 +230,7 @@ const QuestionnaireBuilder: React.FC = () => {
                 </div>
 
                 <div className="flex flex-wrap items-center gap-4 w-full md:w-auto">
-                    <div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${totalWeight === 100 ? 'bg-green-50 border-green-200 text-green-700' : 'bg-amber-50 border-amber-200 text-amber-700'}`}>
+                    <div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${totalWeight === 100 ? 'bg-green-50 border-green-200 text-green-700' : 'bg-red-50 border-red-200 text-re-red-hover'}`}>
                         {totalWeight !== 100 && <AlertCircle size={16} />}
                         <span className="text-sm font-semibold">Total Score: {totalWeight}/100</span>
                     </div>
@@ -240,13 +240,13 @@ const QuestionnaireBuilder: React.FC = () => {
                             type="text"
                             value={version}
                             onChange={(e) => setVersion(e.target.value)}
-                            className="border border-slate-300 p-2 rounded-lg w-full md:w-48 text-sm focus:ring-2 focus:ring-amber-500 outline-none"
+                            className="border border-slate-300 p-2 rounded-lg w-full md:w-48 text-sm focus:ring-2 focus:ring-red-500 outline-none"
                             placeholder="Version Name (e.g. v2.0)"
                         />
                         <button
                             onClick={handleSave}
                             disabled={loading}
-                            className="bg-amber-600 text-white px-6 py-2 rounded-lg flex items-center gap-2 hover:bg-amber-700 disabled:bg-slate-300 disabled:cursor-not-allowed transition shadow-sm font-medium whitespace-nowrap"
+                            className="bg-re-red text-white px-6 py-2 rounded-lg flex items-center gap-2 hover:bg-re-red-hover disabled:bg-slate-300 disabled:cursor-not-allowed transition shadow-sm font-medium whitespace-nowrap"
                         >
                             <Save size={18} /> {loading ? 'Saving...' : 'Publish'}
                         </button>
@@ -271,7 +271,7 @@ const QuestionnaireBuilder: React.FC = () => {
                                         type="text"
                                         value={q.questionText}
                                         onChange={(e) => updateQuestion(index, 'questionText', e.target.value)}
-                                        className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none transition-shadow"
+                                        className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none transition-shadow"
                                         placeholder="Enter your question here..."
                                     />
                                 </div>
@@ -281,7 +281,7 @@ const QuestionnaireBuilder: React.FC = () => {
                                     <select
                                         value={q.sectionName}
                                         onChange={(e) => updateQuestion(index, 'sectionName', e.target.value)}
-                                        className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none bg-white"
+                                        className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none bg-white"
                                     >
                                         {SECTIONS.map(s => <option key={s} value={s}>{s}</option>)}
                                     </select>
@@ -292,7 +292,7 @@ const QuestionnaireBuilder: React.FC = () => {
                                     <select
                                         value={q.inputType}
                                         onChange={(e) => updateQuestion(index, 'inputType', e.target.value as any)}
-                                        className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none bg-white"
+                                        className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none bg-white"
                                     >
                                         <option value="text">Text Input</option>
                                         <option value="email">Email Address</option>
@@ -313,17 +313,17 @@ const QuestionnaireBuilder: React.FC = () => {
                                                     type="number"
                                                     value={isNaN(q.weight) ? 0 : q.weight}
                                                     onChange={(e) => updateQuestion(index, 'weight', parseFloat(e.target.value) || 0)}
-                                                    className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-amber-500 outline-none pl-3 pr-8"
+                                                    className="w-full border border-slate-300 p-2.5 rounded-lg focus:ring-2 focus:ring-red-500 outline-none pl-3 pr-8"
                                                     title="Weightage"
                                                 />
                                                 <span className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 text-xs font-bold">%</span>
                                             </div>
                                         </div>
 
-                                        {/* <div className="flex items-center gap-2 px-3 py-2.5 bg-white border border-slate-200 rounded-lg cursor-pointer hover:border-amber-300 transition-colors"
+                                        {/* <div className="flex items-center gap-2 px-3 py-2.5 bg-white border border-slate-200 rounded-lg cursor-pointer hover:border-red-300 transition-colors"
                                         onClick={() => updateQuestion(index, 'isMandatory', !q.isMandatory)}
                                     >
-                                        <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${q.isMandatory ? 'bg-amber-600 border-amber-600' : 'border-slate-300'}`}>
+                                        <div className={`w-4 h-4 rounded border flex items-center justify-center transition-colors ${q.isMandatory ? 'bg-re-red border-re-red' : 'border-slate-300'}`}>
                                             {q.isMandatory && <div className="w-2 h-2 bg-white rounded-sm" />}
                                         </div>
                                         <span className="text-xs font-medium text-slate-600 select-none">Req.</span>
@@ -345,7 +345,7 @@ const QuestionnaireBuilder: React.FC = () => {
                                                     type="text"
                                                     value={opt.text}
                                                     onChange={(e) => updateOption(index, optIndex, 'text', e.target.value)}
-                                                    className="flex-1 border border-slate-300 p-2 rounded-md text-sm focus:ring-1 focus:ring-amber-500 outline-none"
+                                                    className="flex-1 border border-slate-300 p-2 rounded-md text-sm focus:ring-1 focus:ring-red-500 outline-none"
                                                     placeholder={`Option ${optIndex + 1}`}
                                                 />
                                                 <div className="flex items-center gap-2">
@@ -356,7 +356,7 @@ const QuestionnaireBuilder: React.FC = () => {
                                                         max={isNaN(q.weight) ? 0 : q.weight}
                                                         min={0}
                                                         onChange={(e) => updateOption(index, optIndex, 'score', e.target.value)}
-                                                        className={`w-20 border ${(opt.score > q.weight) || isNaN(opt.score) ? 'border-red-500 text-red-600' : 'border-slate-300'} p-2 rounded-md text-sm focus:ring-1 focus:ring-amber-500 outline-none`}
+                                                        className={`w-20 border ${(opt.score > q.weight) || isNaN(opt.score) ? 'border-red-500 text-red-600' : 'border-slate-300'} p-2 rounded-md text-sm focus:ring-1 focus:ring-red-500 outline-none`}
                                                     />
                                                 </div>
                                                 <button
@@ -371,7 +371,7 @@ const QuestionnaireBuilder: React.FC = () => {
                                     </div>
                                     <button
                                         onClick={() => addOption(index)}
-                                        className="mt-3 text-sm flex items-center gap-1 text-amber-600 hover:text-amber-700 font-medium"
+                                        className="mt-3 text-sm flex items-center gap-1 text-re-red hover:text-re-red-hover font-medium"
                                     >
                                         <Plus size={16} /> Add Option
                                     </button>
@@ -392,7 +392,7 @@ const QuestionnaireBuilder: React.FC = () => {
 
             <button
                 onClick={addQuestion}
-                className="mt-8 w-full border-2 border-dashed border-slate-300 p-4 rounded-xl text-slate-500 hover:border-amber-500 hover:text-amber-600 hover:bg-amber-50/30 flex justify-center items-center gap-2 transition-all font-medium"
+                className="mt-8 w-full border-2 border-dashed border-slate-300 p-4 rounded-xl text-slate-500 hover:border-red-500 hover:text-re-red hover:bg-red-50/30 flex justify-center items-center gap-2 transition-all font-medium"
             >
                 <Plus size={20} /> Add Another Question
             </button>
diff --git a/src/components/admin/QuestionnaireList.tsx b/src/components/admin/QuestionnaireList.tsx
index 77899d2..6fa9834 100644
--- a/src/components/admin/QuestionnaireList.tsx
+++ b/src/components/admin/QuestionnaireList.tsx
@@ -47,7 +47,7 @@ const QuestionnaireList: React.FC = () => {
                 </div>
                 <button
                     onClick={() => navigate('/questionnaire-builder')}
-                    className="bg-amber-600 text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-amber-700 transition"
+                    className="bg-re-red text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-re-red-hover transition"
                 >
                     <Plus size={20} /> Create New Version
                 </button>
@@ -55,14 +55,14 @@ const QuestionnaireList: React.FC = () => {
 
             {loading ? (
                 <div className="flex justify-center p-12">
-                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-re-red"></div>
                 </div>
             ) : versions.length === 0 ? (
                 <div className="text-center p-12 bg-white rounded-lg shadow-sm border border-slate-200">
                     <p className="text-slate-500 mb-4">No questionnaire versions found.</p>
                     <button
                         onClick={() => navigate('/questionnaire-builder')}
-                        className="text-amber-600 font-medium hover:underline"
+                        className="text-re-red font-medium hover:underline"
                     >
                         Create your first version
                     </button>
@@ -102,7 +102,7 @@ const QuestionnaireList: React.FC = () => {
                                     <td className="p-4 text-right">
                                         <button
                                             onClick={() => navigate(`/questionnaire-builder/${v.id}`)}
-                                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium text-slate-600 hover:text-amber-600 hover:bg-amber-50 transition border border-slate-200 hover:border-amber-200"
+                                            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded text-sm font-medium text-slate-600 hover:text-re-red hover:bg-red-50 transition border border-slate-200 hover:border-red-200"
                                         >
                                             <Edit2 size={14} /> Edit / Clone
                                         </button>
diff --git a/src/components/admin/UserManagementPage.tsx b/src/components/admin/UserManagementPage.tsx
index 9169426..06a7b7b 100644
--- a/src/components/admin/UserManagementPage.tsx
+++ b/src/components/admin/UserManagementPage.tsx
@@ -219,7 +219,7 @@ export function UserManagementPage() {
             <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                 <div>
                     <h1 className="text-2xl font-bold text-slate-900 flex items-center gap-2">
-                        <Users className="w-6 h-6 text-amber-600" />
+                        <Users className="w-6 h-6 text-re-red" />
                         User Management
                     </h1>
                     <p className="text-slate-500">Manage system users, roles, and access permissions.</p>
@@ -232,7 +232,7 @@ export function UserManagementPage() {
                         zoneId: '', regionId: '', stateId: '', districtId: ''
                     }); setShowUserModal(true);
                     }}
-                    className="bg-amber-600 hover:bg-amber-700 text-white shrink-0"
+                    className="bg-re-red hover:bg-re-red-hover text-white shrink-0"
                 >
                     <UserPlus className="w-4 h-4 mr-2" />
                     Add New User
@@ -318,7 +318,7 @@ export function UserManagementPage() {
                                     <TableRow key={user.id} className="hover:bg-slate-50/50">
                                         <TableCell>
                                             <div className="flex items-center gap-3">
-                                                <div className="w-10 h-10 rounded-full bg-amber-100 text-amber-700 flex items-center justify-center font-bold">
+                                                <div className="w-10 h-10 rounded-full bg-red-100 text-re-red-hover flex items-center justify-center font-bold">
                                                     {user.fullName?.charAt(0) || user.email?.charAt(0)}
                                                 </div>
                                                 <div>
@@ -384,7 +384,7 @@ export function UserManagementPage() {
                                         <TableCell className="text-right">
                                             <div className="flex justify-end gap-2">
                                                 <Button variant="ghost" size="icon" onClick={() => handleEditUser(user)}>
-                                                    <Edit2 className="w-4 h-4 text-slate-400 hover:text-amber-600" />
+                                                    <Edit2 className="w-4 h-4 text-slate-400 hover:text-re-red" />
                                                 </Button>
                                                 <Button variant="ghost" size="icon">
                                                     <Trash2 className="w-4 h-4 text-slate-400 hover:text-red-600" />
@@ -569,7 +569,7 @@ export function UserManagementPage() {
 
                     <DialogFooter className="bg-slate-50 -mx-6 -mb-6 p-4 rounded-b-lg">
                         <Button variant="outline" onClick={() => setShowUserModal(false)}>Cancel</Button>
-                        <Button className="bg-amber-600 hover:bg-amber-700 text-white" onClick={handleSubmit}>
+                        <Button className="bg-re-red hover:bg-re-red-hover text-white" onClick={handleSubmit}>
                             {editingUser ? 'Save Changes' : 'Create User'}
                         </Button>
                     </DialogFooter>
diff --git a/src/features/master/components/ASMDialog.tsx b/src/features/master/components/ASMDialog.tsx
index 3d59f51..808a40a 100644
--- a/src/features/master/components/ASMDialog.tsx
+++ b/src/features/master/components/ASMDialog.tsx
@@ -181,7 +181,7 @@ export const ASMDialog: React.FC<ASMDialogProps> = ({
 
                     return (
                       <div key={state} className="mb-4 last:mb-0">
-                        <h4 className="text-sm text-amber-700 mb-2 pb-1 border-b border-slate-200">{state}</h4>
+                        <h4 className="text-sm text-re-red-hover mb-2 pb-1 border-b border-slate-200">{state}</h4>
                         <div className="space-y-2 ml-2">
                           {districts.map((district: any) => (
                             <div key={district.id}>
@@ -280,7 +280,7 @@ export const ASMDialog: React.FC<ASMDialogProps> = ({
 
           <div className="flex gap-3 pt-4">
             <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
-            <Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save DD-AM</Button>
+            <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save DD-AM</Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/features/master/components/ASMManagement.tsx b/src/features/master/components/ASMManagement.tsx
index 45cca2f..18e44dd 100644
--- a/src/features/master/components/ASMManagement.tsx
+++ b/src/features/master/components/ASMManagement.tsx
@@ -41,7 +41,7 @@ export const ASMManagement: React.FC<ASMManagementProps> = ({
             <CardTitle>District Development Area Managers (DD-AM)</CardTitle>
             <CardDescription>Manage DD-AM users across districts (multi-district)</CardDescription>
           </div>
-          <Button onClick={onAddASM} className="bg-amber-600 hover:bg-amber-700">
+          <Button onClick={onAddASM} className="bg-re-red hover:bg-re-red-hover">
             <Plus className="w-4 h-4 mr-2" />
             Add DD-AM
           </Button>
@@ -86,7 +86,7 @@ export const ASMManagement: React.FC<ASMManagementProps> = ({
                         <Badge 
                           key={idx} 
                           variant={isShared ? "outline" : "secondary"} 
-                          className={`text-xs ${isShared ? "border-amber-300 bg-amber-50 text-amber-700 font-medium" : ""}`}
+                          className={`text-xs ${isShared ? "border-red-300 bg-red-50 text-re-red-hover font-medium" : ""}`}
                           title={isShared ? `Also managed by: ${otherManagers.join(', ')}` : undefined}
                         >
                           {areaName}
@@ -112,7 +112,7 @@ export const ASMManagement: React.FC<ASMManagementProps> = ({
                     <Button variant="ghost" size="sm" onClick={() => onEditASM(asm)}>
                       <Edit2 className="w-4 h-4" />
                     </Button>
-                    <Button variant="ghost" size="sm" onClick={() => onDeleteASM(asm.id, asm.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50">
+                    <Button variant="ghost" size="sm" onClick={() => onDeleteASM(asm.id, asm.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
                       <Trash2 className="w-4 h-4" />
                     </Button>
                   </div>
diff --git a/src/features/master/components/AutoAssignmentSettings.tsx b/src/features/master/components/AutoAssignmentSettings.tsx
index 0bdc0f5..3b86d2e 100644
--- a/src/features/master/components/AutoAssignmentSettings.tsx
+++ b/src/features/master/components/AutoAssignmentSettings.tsx
@@ -83,7 +83,7 @@ export const AutoAssignmentSettings: React.FC = () => {
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center p-12 space-y-4">
-        <RefreshCcw className="w-8 h-8 animate-spin text-amber-600" />
+        <RefreshCcw className="w-8 h-8 animate-spin text-re-red" />
         <p className="text-slate-500 font-medium">Loading governance controls...</p>
       </div>
     );
@@ -94,8 +94,8 @@ export const AutoAssignmentSettings: React.FC = () => {
       <Card className="border-none shadow-md overflow-hidden bg-white/50 backdrop-blur-sm">
         <CardHeader className="bg-gradient-to-r from-slate-900 to-slate-800 text-white p-6">
           <div className="flex items-center gap-3">
-            <div className="p-2 bg-amber-500/20 rounded-lg">
-              <Settings2 className="w-6 h-6 text-amber-400" />
+            <div className="p-2 bg-red-500/20 rounded-lg">
+              <Settings2 className="w-6 h-6 text-red-400" />
             </div>
             <div>
               <CardTitle className="text-xl font-bold">Auto-Assignment Governance</CardTitle>
@@ -148,6 +148,7 @@ export const AutoAssignmentSettings: React.FC = () => {
 
                   <div className="flex items-center gap-4">
                     <Switch 
+                      className="data-[state=checked]:bg-re-red"
                       checked={isEnabled}
                       onCheckedChange={(val) => {
                         handleToggle(mod.key, val);
@@ -164,9 +165,9 @@ export const AutoAssignmentSettings: React.FC = () => {
             })}
           </div>
 
-          <div className="mt-8 p-4 bg-amber-50 border border-amber-100 rounded-lg flex items-start gap-3">
-             <Info className="w-5 h-5 text-amber-600 shrink-0 mt-0.5" />
-             <div className="text-sm text-amber-800">
+          <div className="mt-8 p-4 bg-red-50 border border-red-100 rounded-lg flex items-start gap-3">
+             <Info className="w-5 h-5 text-re-red shrink-0 mt-0.5" />
+             <div className="text-sm text-red-800">
                 <p className="font-semibold mb-1">Impact of Manual Mode:</p>
                 <p>Turning OFF auto-assignment will ONLY affect new requests. Existing requests will retain their current participant mappings. You will need to use the "Add Participant" button in the worknotes or application details to grant access to stakeholders.</p>
              </div>
diff --git a/src/features/master/components/DDLeadDialog.tsx b/src/features/master/components/DDLeadDialog.tsx
index 5000fd0..a92258d 100644
--- a/src/features/master/components/DDLeadDialog.tsx
+++ b/src/features/master/components/DDLeadDialog.tsx
@@ -127,7 +127,7 @@ export const DDLeadDialog: React.FC<DDLeadDialogProps> = ({
 
           <div className="flex gap-3 pt-6">
             <Button variant="outline" className="flex-1 border-slate-200" onClick={() => onOpenChange(false)}>Cancel</Button>
-            <Button className="flex-1 bg-amber-600 hover:bg-amber-700 shadow-sm" onClick={onSave}>Save DD Lead</Button>
+            <Button className="flex-1 bg-re-red hover:bg-re-red-hover shadow-sm" onClick={onSave}>Save DD Lead</Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/features/master/components/DDLeadManagement.tsx b/src/features/master/components/DDLeadManagement.tsx
index a5d3974..02eeace 100644
--- a/src/features/master/components/DDLeadManagement.tsx
+++ b/src/features/master/components/DDLeadManagement.tsx
@@ -36,7 +36,7 @@ export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({
             <CardTitle>DD-Leads (Dealer Development Lead)</CardTitle>
             <CardDescription>Manage DD-Leads and their zonal assignments</CardDescription>
           </div>
-          <Button onClick={onAddLead} className="bg-amber-600 hover:bg-amber-700">
+          <Button onClick={onAddLead} className="bg-re-red hover:bg-re-red-hover">
             <Plus className="w-4 h-4 mr-2" />
             Add DD-Lead
           </Button>
@@ -60,7 +60,7 @@ export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({
                 <TableRow key={lead.id}>
                   <TableCell>
                     <div className="flex items-center gap-2">
-                      <Users className="w-4 h-4 text-amber-600" />
+                      <Users className="w-4 h-4 text-re-red" />
                       <span className="font-medium">{lead.leadCode || 'N/A'}</span>
                     </div>
                   </TableCell>
@@ -95,7 +95,7 @@ export const DDLeadManagement: React.FC<DDLeadManagementProps> = ({
                       <Button variant="ghost" size="sm" onClick={() => onEditLead(lead)}>
                         <Edit2 className="w-4 h-4" />
                       </Button>
-                      <Button variant="ghost" size="sm" onClick={() => onDeleteLead(lead.id, lead.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50">
+                      <Button variant="ghost" size="sm" onClick={() => onDeleteLead(lead.id, lead.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
                         <Trash2 className="w-4 h-4" />
                       </Button>
                     </div>
diff --git a/src/features/master/components/DealerAsmAssignment.tsx b/src/features/master/components/DealerAsmAssignment.tsx
index aa889c9..28fa1bf 100644
--- a/src/features/master/components/DealerAsmAssignment.tsx
+++ b/src/features/master/components/DealerAsmAssignment.tsx
@@ -193,7 +193,10 @@ export const DealerAsmAssignment: React.FC = () => {
                   </TableCell>
                   <TableCell>{dealer.dealerCode || 'N/A'}</TableCell>
                   <TableCell>
-                    <Badge variant={String(dealer.status || '').toLowerCase() === 'active' ? 'default' : 'secondary'}>
+                    <Badge 
+                      variant={String(dealer.status || '').toLowerCase() === 'active' ? 'default' : 'secondary'}
+                      className={String(dealer.status || '').toLowerCase() === 'active' ? 'bg-emerald-100 text-emerald-700 hover:bg-emerald-200' : ''}
+                    >
                       {dealer.status || 'Unknown'}
                     </Badge>
                   </TableCell>
@@ -215,7 +218,7 @@ export const DealerAsmAssignment: React.FC = () => {
                         onChange={(val) => setDraft((prev) => ({ ...prev, [dealer.dealerId]: val }))}
                         className="flex-1 min-w-[180px]"
                       />
-                      <Button size="sm" className="shrink-0" onClick={() => saveMapping(dealer.dealerId)}>
+                      <Button size="sm" className="shrink-0 bg-re-red hover:bg-re-red-hover text-white" onClick={() => saveMapping(dealer.dealerId)}>
                         Assign
                       </Button>
                     </div>
diff --git a/src/features/master/components/DocumentConfigManagement.tsx b/src/features/master/components/DocumentConfigManagement.tsx
index 748fe17..a893b3c 100644
--- a/src/features/master/components/DocumentConfigManagement.tsx
+++ b/src/features/master/components/DocumentConfigManagement.tsx
@@ -179,7 +179,7 @@ export const DocumentConfigManagement: React.FC = () => {
     if (metadataLoading) {
         return (
             <div className="h-96 flex flex-col items-center justify-center gap-4">
-                <Database className="w-10 h-10 text-amber-600 animate-bounce" />
+                <Database className="w-10 h-10 text-re-red animate-bounce" />
                 <p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Connecting to Governance Engine...</p>
             </div>
         );
@@ -189,8 +189,8 @@ export const DocumentConfigManagement: React.FC = () => {
         <Card className="border-slate-200 shadow-sm overflow-hidden bg-white">
             <CardHeader className="bg-slate-50/80 border-b border-slate-200 py-4 relative">
                 {backgroundLoading && (
-                    <div className="absolute top-0 left-0 right-0 h-1 bg-amber-100 overflow-hidden">
-                        <div className="h-full bg-amber-600 animate-[loading_1.5s_infinite_linear]" style={{width: '30%', transformOrigin: 'left'}} />
+                    <div className="absolute top-0 left-0 right-0 h-1 bg-red-100 overflow-hidden">
+                        <div className="h-full bg-re-red animate-[loading_1.5s_infinite_linear]" style={{width: '30%', transformOrigin: 'left'}} />
                         <style>{`
                             @keyframes loading {
                                 0% { left: -30%; }
@@ -202,7 +202,7 @@ export const DocumentConfigManagement: React.FC = () => {
                 
                 <div className="flex flex-row items-center justify-between mb-4">
                     <div className="flex items-center gap-3">
-                        <div className="p-2 bg-white rounded-xl shadow-sm ring-1 ring-slate-200 text-amber-600">
+                        <div className="p-2 bg-white rounded-xl shadow-sm ring-1 ring-slate-200 text-re-red">
                             <Layers className="w-5 h-5" />
                         </div>
                         <div>
@@ -218,7 +218,7 @@ export const DocumentConfigManagement: React.FC = () => {
                 <div className="flex gap-4">
                    <div className="w-64">
                        <Select value={selectedModule} onValueChange={(val) => { setSelectedModule(val); setPage(1); }}>
-                            <SelectTrigger className="h-10 rounded-xl bg-white border-slate-200 focus:ring-amber-500 font-bold text-slate-700 shadow-sm">
+                            <SelectTrigger className="h-10 rounded-xl bg-white border-slate-200 focus:ring-red-500 font-bold text-slate-700 shadow-sm">
                                 <SelectValue placeholder="Target Module" />
                             </SelectTrigger>
                             <SelectContent className="rounded-xl shadow-2xl border-none">
@@ -236,7 +236,7 @@ export const DocumentConfigManagement: React.FC = () => {
                             placeholder="Search policies, stages or documents..." 
                             value={search}
                             onChange={(e) => { setSearch(e.target.value); setPage(1); }}
-                            className="pl-10 h-10 rounded-xl bg-white border-slate-200 focus:ring-amber-500 shadow-sm font-medium"
+                            className="pl-10 h-10 rounded-xl bg-white border-slate-200 focus:ring-red-500 shadow-sm font-medium"
                         />
                     </div>
                 </div>
@@ -244,7 +244,7 @@ export const DocumentConfigManagement: React.FC = () => {
             <CardContent className="p-0 min-h-[400px] relative">
                 {loading ? (
                     <div className="absolute inset-0 z-10 bg-white/60 backdrop-blur-[1px] flex flex-col items-center justify-center gap-3">
-                        <Loader2 className="w-8 h-8 text-amber-600 animate-spin" />
+                        <Loader2 className="w-8 h-8 text-re-red animate-spin" />
                         <span className="text-slate-500 text-sm font-bold animate-pulse">Syncing Policies...</span>
                     </div>
                 ) : null}
@@ -274,7 +274,7 @@ export const DocumentConfigManagement: React.FC = () => {
                         ) : configs.map((config) => (
                             <TableRow key={config.id} className="hover:bg-slate-50/80 transition-colors group h-14">
                                 <TableCell>
-                                    <div className="font-bold text-slate-900 group-hover:text-amber-700 transition-colors uppercase text-[12px]">{config.documentType}</div>
+                                    <div className="font-bold text-slate-900 group-hover:text-re-red-hover transition-colors uppercase text-[12px]">{config.documentType}</div>
                                 </TableCell>
                                 <TableCell>
                                     <Badge variant="outline" className="bg-blue-50/50 border-blue-100 text-blue-700 font-bold px-2 py-0.5 whitespace-nowrap text-[10px] rounded-md uppercase">
@@ -305,7 +305,7 @@ export const DocumentConfigManagement: React.FC = () => {
                                 <TableCell>
                                     <div className="flex gap-2">
                                         {config.isMandatory && (
-                                            <Badge className="bg-red-600 text-white border-transparent text-[10px] font-bold h-5 px-1.5 rounded-sm uppercase tracking-tighter">BLOCKING</Badge>
+                                            <Badge className="bg-re-red text-white border-transparent text-[10px] font-bold h-5 px-1.5 rounded-sm uppercase tracking-tighter">BLOCKING</Badge>
                                         )}
                                         {!config.isActive && (
                                             <Badge className="bg-slate-200 text-slate-500 border-transparent text-[10px] h-5 px-1.5 rounded-sm uppercase tracking-tighter">DORMANT</Badge>
@@ -320,7 +320,7 @@ export const DocumentConfigManagement: React.FC = () => {
                                         <Button variant="ghost" size="icon" onClick={() => openEdit(config)} className="h-8 w-8 text-slate-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-transform active:scale-90">
                                             <Edit2 className="w-4 h-4" />
                                         </Button>
-                                        <Button variant="ghost" size="icon" onClick={() => handleDelete(config.id)} className="h-8 w-8 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-transform active:scale-90">
+                                        <Button variant="ghost" size="icon" onClick={() => handleDelete(config.id)} className="h-8 w-8 text-slate-400 hover:text-re-red hover:bg-red-50 rounded-lg transition-transform active:scale-90">
                                             <Trash2 className="w-4 h-4" />
                                         </Button>
                                     </div>
@@ -333,7 +333,7 @@ export const DocumentConfigManagement: React.FC = () => {
                 {/* Pagination Controls */}
                 <div className="flex items-center justify-between px-6 py-4 bg-slate-50/50 border-t border-slate-200 mt-auto">
                     <div className="text-[11px] text-slate-500 font-bold uppercase tracking-tight">
-                        Dataset Index <span className="text-slate-900 border-b border-slate-300 mx-1">{configs.length > 0 ? (page - 1) * limit + 1 : 0} - {Math.min(page * limit, pagination.total)}</span> Total Found <span className="text-amber-700 font-extrabold ml-1">{pagination.total}</span>
+                        Dataset Index <span className="text-slate-900 border-b border-slate-300 mx-1">{configs.length > 0 ? (page - 1) * limit + 1 : 0} - {Math.min(page * limit, pagination.total)}</span> Total Found <span className="text-re-red-hover font-extrabold ml-1">{pagination.total}</span>
                     </div>
                     <div className="flex gap-3 items-center">
                         <Button 
@@ -346,7 +346,7 @@ export const DocumentConfigManagement: React.FC = () => {
                             <ChevronLeft className="w-4 h-4 mr-1 text-slate-600" /> Prev
                         </Button>
                         <div className="flex items-center px-4 h-9 bg-white border border-slate-200 rounded-xl text-xs font-extrabold text-slate-800 shadow-inner">
-                            <span className="text-amber-600">{page}</span> <span className="mx-2 text-slate-300">/</span> {pagination.pages}
+                            <span className="text-re-red">{page}</span> <span className="mx-2 text-slate-300">/</span> {pagination.pages}
                         </div>
                         <Button 
                             variant="outline" 
@@ -366,7 +366,7 @@ export const DocumentConfigManagement: React.FC = () => {
                     <DialogHeader className="bg-slate-900 text-white p-7">
                         <div className="flex items-center gap-4">
                             <div className="p-3 bg-white/10 rounded-2xl backdrop-blur-md ring-1 ring-white/20">
-                                <Settings2 className="w-7 h-7 text-amber-400" />
+                                <Settings2 className="w-7 h-7 text-red-400" />
                             </div>
                             <div>
                                 <DialogTitle className="text-2xl font-black tracking-tight uppercase">
@@ -385,12 +385,12 @@ export const DocumentConfigManagement: React.FC = () => {
                                     value={formData.module} 
                                     onValueChange={(val) => setFormData(prev => ({ ...prev, module: val, stageCode: 'General' }))}
                                 >
-                                    <SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-amber-500 shadow-sm bg-slate-50 font-black text-xs uppercase">
+                                    <SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-red-500 shadow-sm bg-slate-50 font-black text-xs uppercase">
                                         <SelectValue placeholder="Module" />
                                     </SelectTrigger>
                                     <SelectContent className="rounded-xl border-none shadow-2xl">
                                         {modules.map(m => (
-                                            <SelectItem key={m} value={m} className="py-3 px-4 rounded-lg focus:bg-amber-50 font-black text-[10px] uppercase">
+                                            <SelectItem key={m} value={m} className="py-3 px-4 rounded-lg focus:bg-red-50 font-black text-[10px] uppercase">
                                                 {m.replace(/_/g, ' ')}
                                             </SelectItem>
                                         ))}
@@ -403,12 +403,12 @@ export const DocumentConfigManagement: React.FC = () => {
                                     value={formData.stageCode} 
                                     onValueChange={(val) => setFormData(prev => ({ ...prev, stageCode: val }))}
                                 >
-                                    <SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-amber-500 shadow-sm bg-white font-black text-xs uppercase">
+                                    <SelectTrigger className="h-12 rounded-xl border-slate-200 focus:ring-red-500 shadow-sm bg-white font-black text-xs uppercase">
                                         <SelectValue placeholder="Select Stage" />
                                     </SelectTrigger>
                                     <SelectContent className="rounded-xl border-none shadow-2xl">
                                         {(stagesMap[formData.module] || ['General']).map(stage => (
-                                            <SelectItem key={stage} value={stage} className="py-3 px-4 rounded-lg focus:bg-amber-50 font-black text-[10px] uppercase">{stage}</SelectItem>
+                                            <SelectItem key={stage} value={stage} className="py-3 px-4 rounded-lg focus:bg-red-50 font-black text-[10px] uppercase">{stage}</SelectItem>
                                         ))}
                                     </SelectContent>
                                 </Select>
@@ -421,28 +421,28 @@ export const DocumentConfigManagement: React.FC = () => {
                                 value={formData.documentType}
                                 onChange={(e) => setFormData(prev => ({ ...prev, documentType: e.target.value }))}
                                 placeholder="e.g., PAN Card, Blueprint"
-                                className="h-12 rounded-xl border-slate-200 focus:ring-amber-500 shadow-sm font-black text-sm uppercase placeholder:font-bold placeholder:text-slate-300"
+                                className="h-12 rounded-xl border-slate-200 focus:ring-red-500 shadow-sm font-black text-sm uppercase placeholder:font-bold placeholder:text-slate-300"
                             />
                         </div>
 
                         <div className="space-y-4 p-5 bg-slate-50 rounded-2xl border border-slate-100 shadow-inner">
                             <Label className="text-slate-900 font-black flex items-center gap-2 mb-2 text-[11px] uppercase tracking-wider">
-                                <ShieldCheck className="w-4 h-4 text-amber-600" /> Visibility Matrix
+                                <ShieldCheck className="w-4 h-4 text-re-red" /> Visibility Matrix
                             </Label>
                             <div className="grid grid-cols-3 gap-3">
                                 {ROLE_LIST.map((role: string) => (
                                     <div 
                                         key={role} 
-                                        className={`flex items-center space-x-2 p-3 rounded-xl border transition-all cursor-pointer group active:scale-95 ${formData.allowedRoles.includes(role) ? 'bg-amber-50 border-amber-300 shadow-sm' : 'bg-white border-slate-200 hover:border-amber-200 hover:shadow-sm'}`} 
+                                        className={`flex items-center space-x-2 p-3 rounded-xl border transition-all cursor-pointer group active:scale-95 ${formData.allowedRoles.includes(role) ? 'bg-red-50 border-red-300 shadow-sm' : 'bg-white border-slate-200 hover:border-red-200 hover:shadow-sm'}`} 
                                         onClick={() => toggleRole(role)}
                                     >
                                         <Checkbox 
                                             id={`role-${role}`} 
                                             checked={formData.allowedRoles.includes(role)}
                                             onCheckedChange={() => toggleRole(role)}
-                                            className="w-4 h-4 data-[state=checked]:bg-amber-600 data-[state=checked]:border-amber-600 rounded"
+                                            className="w-4 h-4 data-[state=checked]:bg-re-red data-[state=checked]:border-re-red rounded"
                                         />
-                                        <Label htmlFor={`role-${role}`} className={`text-[10px] font-black cursor-pointer uppercase truncate ${formData.allowedRoles.includes(role) ? 'text-amber-800' : 'text-slate-500 group-hover:text-amber-700'}`}>{role}</Label>
+                                        <Label htmlFor={`role-${role}`} className={`text-[10px] font-black cursor-pointer uppercase truncate ${formData.allowedRoles.includes(role) ? 'text-red-800' : 'text-slate-500 group-hover:text-re-red-hover'}`}>{role}</Label>
                                     </div>
                                 ))}
                             </div>
@@ -457,7 +457,7 @@ export const DocumentConfigManagement: React.FC = () => {
                                     id="mandatory" 
                                     checked={formData.isMandatory}
                                     onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isMandatory: !!checked }))}
-                                    className="w-5 h-5 border-slate-300 data-[state=checked]:bg-red-600 data-[state=checked]:border-red-600 rounded-md"
+                                    className="w-5 h-5 border-slate-300 data-[state=checked]:bg-re-red data-[state=checked]:border-re-red rounded-md"
                                 />
                                 <div className="space-y-0.5">
                                     <Label htmlFor="mandatory" className="text-xs font-black text-slate-800 cursor-pointer group-hover:text-red-900 transition-colors uppercase tracking-tight">Mandatory Policy</Label>
diff --git a/src/features/master/components/EmailTemplateBodyEditor.tsx b/src/features/master/components/EmailTemplateBodyEditor.tsx
index e8437f9..ed0a4fc 100644
--- a/src/features/master/components/EmailTemplateBodyEditor.tsx
+++ b/src/features/master/components/EmailTemplateBodyEditor.tsx
@@ -89,9 +89,9 @@ export const EmailTemplateBodyEditor = React.forwardRef<EmailTemplateBodyEditorH
           </TabsList>
 
           {advanced && (
-            <Alert className="border-amber-200 bg-amber-50 py-2">
-              <Info className="h-4 w-4 text-amber-700" />
-              <AlertDescription className="text-[11px] text-amber-900">
+            <Alert className="border-red-200 bg-red-50 py-2">
+              <Info className="h-4 w-4 text-re-red-hover" />
+              <AlertDescription className="text-[11px] text-red-900">
                 This template uses layout partials (<code className="font-mono">{'{{> ...}}'}</code>), block helpers, or a full HTML
                 document. Edit it in <strong>HTML source</strong> so nothing is stripped. Use placeholders on the left to insert
                 fields safely.
diff --git a/src/features/master/components/EmailTemplates.tsx b/src/features/master/components/EmailTemplates.tsx
index fe42611..63f676e 100644
--- a/src/features/master/components/EmailTemplates.tsx
+++ b/src/features/master/components/EmailTemplates.tsx
@@ -45,8 +45,8 @@ export const EmailTemplates: React.FC<EmailTemplatesProps> = ({
               <TableRow key={template.id}>
                 <TableCell>
                   <div className="flex items-center gap-3">
-                    <div className="w-8 h-8 bg-amber-50 rounded-lg flex items-center justify-center">
-                      <Mail className="w-4 h-4 text-amber-600" />
+                    <div className="w-8 h-8 bg-red-50 rounded-lg flex items-center justify-center">
+                      <Mail className="w-4 h-4 text-re-red" />
                     </div>
                     <span className="font-medium text-slate-900">{template.name || template.templateCode}</span>
                   </div>
@@ -68,7 +68,7 @@ export const EmailTemplates: React.FC<EmailTemplatesProps> = ({
                     <Button variant="ghost" size="sm" onClick={() => onEditTemplate(template)}>
                       <Edit2 className="w-4 h-4" />
                     </Button>
-                    <Button variant="ghost" size="sm" onClick={() => onDeleteTemplate(template.id)} className="text-red-500 hover:text-red-600 hover:bg-red-50">
+                    <Button variant="ghost" size="sm" onClick={() => onDeleteTemplate(template.id)} className="text-red-500 hover:text-re-red hover:bg-red-50">
                       <Trash2 className="w-4 h-4" />
                     </Button>
                   </div>
diff --git a/src/features/master/components/InterviewConfigManagement.tsx b/src/features/master/components/InterviewConfigManagement.tsx
index 5bba910..36602ec 100644
--- a/src/features/master/components/InterviewConfigManagement.tsx
+++ b/src/features/master/components/InterviewConfigManagement.tsx
@@ -316,7 +316,7 @@ const InterviewConfigManagement: React.FC = () => {
                                             </div>
                                         </div>
                                     ) : (
-                                        <div className="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800">
+                                        <div className="mb-6 p-4 bg-red-50 border border-red-200 rounded-lg text-red-800">
                                             No active configuration found. Click "Publish New Version" to create one, or "Reset to Defaults" to initialize system defaults.
                                         </div>
                                     )}
@@ -338,7 +338,7 @@ const InterviewConfigManagement: React.FC = () => {
                                                         <Button variant="ghost" size="sm" onClick={() => cfg.id && handleEdit(cfg.id)}>
                                                             <Edit3 size={14} />
                                                         </Button>
-                                                        <Button variant="ghost" size="sm" className="text-red-600 hover:text-red-700" onClick={() => cfg.id && handleDelete(cfg.id)}>
+                                                        <Button variant="ghost" size="sm" className="text-re-red hover:text-re-red-hover" onClick={() => cfg.id && handleDelete(cfg.id)}>
                                                             <Trash2 size={14} />
                                                         </Button>
                                                     </div>
@@ -366,7 +366,7 @@ const InterviewConfigManagement: React.FC = () => {
                                 </DialogDescription>
                             </div>
                             {editingConfig?.configType === 'KT_MATRIX' && (
-                                <div className={`px-3 py-1.5 rounded-md text-[10px] font-black uppercase tracking-tight ${totalWeight === 100 ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-amber-50 text-amber-700 border border-amber-100'}`}>
+                                <div className={`px-3 py-1.5 rounded-md text-[10px] font-black uppercase tracking-tight ${totalWeight === 100 ? 'bg-emerald-50 text-emerald-700 border border-emerald-100' : 'bg-red-50 text-re-red-hover border border-red-100'}`}>
                                     Weight: {totalWeight}% / 100%
                                 </div>
                             )}
@@ -535,7 +535,7 @@ const InterviewConfigManagement: React.FC = () => {
                                                                     <div className="flex flex-col gap-3">
                                                                         <div className="flex items-center justify-between border-b border-slate-200/50 pb-2 mb-2">
                                                                             <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-2">
-                                                                                <div className="w-1 h-3 bg-amber-400 rounded-full" /> Selection Choices Profile
+                                                                                <div className="w-1 h-3 bg-red-400 rounded-full" /> Selection Choices Profile
                                                                             </p>
                                                                             <Button variant="ghost" size="sm" className="h-7 px-3 text-[10px] font-bold uppercase text-slate-600 hover:bg-white border border-transparent hover:border-slate-200" onClick={() => addOption(index)}>
                                                                                 <Plus className="w-3 h-3 mr-1.5" /> Append Option
diff --git a/src/features/master/components/LocationDialog.tsx b/src/features/master/components/LocationDialog.tsx
index 5a8bec6..d4c341b 100644
--- a/src/features/master/components/LocationDialog.tsx
+++ b/src/features/master/components/LocationDialog.tsx
@@ -55,7 +55,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
                 setLocationDistrict('');
               }}
             >
-              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-amber-500/30 focus:border-amber-500">
+              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
                 <SelectValue placeholder="Select state" />
               </SelectTrigger>
               <SelectContent>
@@ -71,7 +71,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
             <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">City</Label>
             <Input
               placeholder="Enter city name"
-              className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-amber-500/30 focus-visible:border-amber-500"
+              className="mt-2 text-slate-900 border-slate-200 focus-visible:ring-red-500/30 focus-visible:border-red-500"
               value={locationCity}
               onChange={(e) => setLocationCity(e.target.value)}
             />
@@ -79,7 +79,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
           <div>
             <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">District</Label>
             <Select value={locationDistrict} onValueChange={setLocationDistrict} disabled={!locationState}>
-              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-amber-500/30 focus:border-amber-500">
+              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
                 <SelectValue placeholder={locationState ? 'Select district' : 'Select state first'} />
               </SelectTrigger>
               <SelectContent>
@@ -120,7 +120,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
           <div>
             <Label className="flex items-center gap-2 text-sm leading-none font-medium text-slate-700">Opportunity</Label>
             <Select value={locationStatus} onValueChange={setLocationStatus}>
-              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-amber-500/30 focus:border-amber-500">
+              <SelectTrigger className="mt-2 text-slate-900 border-slate-200 focus:ring-red-500/30 focus:border-red-500">
                 <SelectValue placeholder="Is this an active Opportunity?" />
               </SelectTrigger>
               <SelectContent>
@@ -132,7 +132,7 @@ export const LocationDialog: React.FC<LocationDialogProps> = ({
 
           <div className="flex gap-3 pt-4">
             <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
-            <Button className="flex-1 bg-amber-600 hover:bg-amber-700 text-white shadow-md hover:shadow-lg transition-all" onClick={onSave}>Save Location</Button>
+            <Button className="flex-1 bg-re-red hover:bg-re-red-hover text-white shadow-md hover:shadow-lg transition-all" onClick={onSave}>Save Location</Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/features/master/components/LocationManagement.tsx b/src/features/master/components/LocationManagement.tsx
index 6457025..92d6ab2 100644
--- a/src/features/master/components/LocationManagement.tsx
+++ b/src/features/master/components/LocationManagement.tsx
@@ -53,7 +53,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
                   placeholder="Search locations..."
                   value={searchTerm}
                   onChange={(e) => onSearch(e.target.value)}
-                  className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-amber-500 w-64 transition-all"
+                  className="pl-9 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-red-500 w-64 transition-all"
                 />
               </div>
 
@@ -80,7 +80,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
                 </SelectContent>
               </Select>
 
-              <Button onClick={onAddLocation} className="bg-amber-600 hover:bg-amber-700 whitespace-nowrap">
+              <Button onClick={onAddLocation} className="bg-re-red hover:bg-re-red-hover whitespace-nowrap">
                 <Plus className="w-4 h-4 mr-2" />
                 Add Location
               </Button>
@@ -112,7 +112,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
                     <TableRow key={district.id}>
                       <TableCell>
                         <div className="flex items-center gap-2">
-                          <MapPin className="w-4 h-4 text-amber-600" />
+                          <MapPin className="w-4 h-4 text-re-red" />
                           <span className="font-medium">{district.stateName || 'N/A'}</span>
                         </div>
                       </TableCell>
@@ -151,7 +151,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
                           <Button variant="outline" size="sm" onClick={() => onEditLocation(district)} className="h-8 w-8 p-0">
                             <Edit2 className="w-4 h-4" />
                           </Button>
-                          <Button variant="outline" size="sm" onClick={() => onDeleteLocation(district.id)} className="h-8 w-8 p-0 text-red-600 hover:bg-red-50 hover:text-red-700">
+                          <Button variant="outline" size="sm" onClick={() => onDeleteLocation(district.id)} className="h-8 w-8 p-0 text-re-red hover:bg-red-50 hover:text-re-red-hover">
                             <Trash2 className="w-4 h-4" />
                           </Button>
                         </div>
@@ -163,7 +163,7 @@ export const LocationManagement: React.FC<LocationManagementProps> = ({
             </Table>
             {isAreasLoading && (
               <div className="absolute inset-0 flex items-center justify-center bg-white/10 backdrop-blur-[1px]">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-amber-600"></div>
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-re-red"></div>
               </div>
             )}
           </div>
diff --git a/src/features/master/components/RegionDialog.tsx b/src/features/master/components/RegionDialog.tsx
index afd5a5a..1d9ddfb 100644
--- a/src/features/master/components/RegionDialog.tsx
+++ b/src/features/master/components/RegionDialog.tsx
@@ -189,7 +189,7 @@ export const RegionDialog: React.FC<RegionDialogProps> = ({
           <div>
             <Label>States Covered</Label>
             {!selectedRegionZone && (
-              <p className="text-xs text-amber-600 mt-1">Select a zone first to see available states</p>
+              <p className="text-xs text-re-red mt-1">Select a zone first to see available states</p>
             )}
             <div className="mt-2 border rounded-lg p-3 max-h-40 overflow-y-auto bg-slate-50">
               {statesForZone.length === 0 ? (
@@ -234,7 +234,7 @@ export const RegionDialog: React.FC<RegionDialogProps> = ({
                 <TooltipProvider>
                   {districtsByState.map(({ stateName, districts }) => (
                     <div key={stateName} className="mb-4 last:mb-0">
-                      <h4 className="text-xs font-semibold text-amber-700 uppercase tracking-wide mb-2 pb-1 border-b border-slate-200">
+                      <h4 className="text-xs font-semibold text-re-red-hover uppercase tracking-wide mb-2 pb-1 border-b border-slate-200">
                         {stateName}
                       </h4>
                       <div className="space-y-2 ml-1">
@@ -302,7 +302,7 @@ export const RegionDialog: React.FC<RegionDialogProps> = ({
           {/* Actions */}
           <div className="flex gap-3 pt-4">
             <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
-            <Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Regional Office</Button>
+            <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save Regional Office</Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/features/master/components/RegionalManagement.tsx b/src/features/master/components/RegionalManagement.tsx
index 32748d0..55215f6 100644
--- a/src/features/master/components/RegionalManagement.tsx
+++ b/src/features/master/components/RegionalManagement.tsx
@@ -29,7 +29,7 @@ export const RegionalManagement: React.FC<RegionalManagementProps> = ({
             <CardTitle>Regional Offices</CardTitle>
             <CardDescription>Manage regional offices within zones</CardDescription>
           </div>
-          <Button onClick={onAddRegion} className="bg-amber-600 hover:bg-amber-700">
+          <Button onClick={onAddRegion} className="bg-re-red hover:bg-re-red-hover">
             <Plus className="w-4 h-4 mr-2" />
             Add Regional Office
           </Button>
@@ -114,7 +114,7 @@ export const RegionalManagement: React.FC<RegionalManagementProps> = ({
                     <Button variant="ghost" size="sm" onClick={() => onEditRegion(region)}>
                       <Edit2 className="w-4 h-4" />
                     </Button>
-                    <Button variant="ghost" size="sm" onClick={() => onDeleteRegion(region.id, region.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50">
+                    <Button variant="ghost" size="sm" onClick={() => onDeleteRegion(region.id, region.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
                       <Trash2 className="w-4 h-4" />
                     </Button>
                   </div>
diff --git a/src/features/master/components/RoleDialog.tsx b/src/features/master/components/RoleDialog.tsx
index 81e445f..403999d 100644
--- a/src/features/master/components/RoleDialog.tsx
+++ b/src/features/master/components/RoleDialog.tsx
@@ -79,8 +79,8 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
     },
     {
       title: "Application Stage Access",
-      color: "from-amber-50 to-orange-50 border-amber-200",
-      textColor: "text-amber-900",
+      color: "from-red-50 to-orange-50 border-red-200",
+      textColor: "text-red-900",
       permissions: [
         { id: "stage:initial_review", label: "Initial Review" },
         { id: "stage:field_verification", label: "Field Verification" },
@@ -126,7 +126,7 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
 
           <div className="space-y-5">
             <h4 className="text-sm font-bold text-slate-800 flex items-center gap-2">
-              <span className="w-1.5 h-1.5 bg-amber-500 rounded-full"></span>
+              <span className="w-1.5 h-1.5 bg-red-500 rounded-full"></span>
               Configure Default Permissions
             </h4>
             
diff --git a/src/features/master/components/RolePermissions.tsx b/src/features/master/components/RolePermissions.tsx
index 70965ac..2f7d190 100644
--- a/src/features/master/components/RolePermissions.tsx
+++ b/src/features/master/components/RolePermissions.tsx
@@ -22,7 +22,7 @@ export const RolePermissions: React.FC<RolePermissionsProps> = ({ onAddRole, onE
             <CardTitle className="leading-none text-xl font-bold">Role Definitions</CardTitle>
             <CardDescription className="text-muted-foreground mt-1.5">Overview of available roles and their access levels</CardDescription>
           </div>
-          <Button onClick={onAddRole} className="bg-amber-600 hover:bg-amber-700 h-9">
+          <Button onClick={onAddRole} className="bg-re-red hover:bg-re-red-hover h-9">
             <Plus className="w-4 h-4 mr-2" />
             Add Role
           </Button>
@@ -34,7 +34,7 @@ export const RolePermissions: React.FC<RolePermissionsProps> = ({ onAddRole, onE
             <div key={role.id} className="border rounded-lg p-4 space-y-3 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <Shield className="w-5 h-5 text-amber-600" />
+                  <Shield className="w-5 h-5 text-re-red" />
                   <h3 className="text-slate-900 font-bold">{role.name}</h3>
                 </div>
                 <Badge variant="secondary" className="border-transparent bg-secondary text-secondary-foreground text-xs font-medium">
diff --git a/src/features/master/components/SLAConfiguration.tsx b/src/features/master/components/SLAConfiguration.tsx
index e6e371b..4eb5aa0 100644
--- a/src/features/master/components/SLAConfiguration.tsx
+++ b/src/features/master/components/SLAConfiguration.tsx
@@ -29,7 +29,7 @@ export const SLAConfiguration: React.FC<SLAConfigurationProps> = ({ onConfigureS
             <div key={sla.id} className="border rounded-lg p-4 bg-gradient-to-br from-white to-slate-50 hover:shadow-md transition-shadow">
               <div className="flex items-start justify-between mb-3">
                 <div className="flex items-center gap-3">
-                  <Clock className="w-5 h-5 text-amber-600" />
+                  <Clock className="w-5 h-5 text-re-red" />
                   <div>
                     <h4 className="text-slate-900 font-medium">{sla.activityName}</h4>
                     <p className="text-xs text-slate-600">TAT: {sla.tatHours} {sla.tatUnit}</p>
@@ -73,7 +73,7 @@ export const SLAConfiguration: React.FC<SLAConfigurationProps> = ({ onConfigureS
 
                 <div className="border-l-2 border-red-400 pl-3">
                   <div className="flex items-center gap-2 mb-2">
-                    <AlertTriangle className="w-4 h-4 text-red-600" />
+                    <AlertTriangle className="w-4 h-4 text-re-red" />
                     <span className="text-xs text-slate-700">Escalations ({sla.escalationConfigs?.length || 0})</span>
                   </div>
                   <div className="space-y-1">
diff --git a/src/features/master/components/SLADialog.tsx b/src/features/master/components/SLADialog.tsx
index a7bfd00..9821410 100644
--- a/src/features/master/components/SLADialog.tsx
+++ b/src/features/master/components/SLADialog.tsx
@@ -184,6 +184,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
             <div className="flex items-center space-x-2 pt-8">
               <Switch 
                 id="isActive" 
+                className="data-[state=checked]:bg-re-red"
                 checked={formData.isActive} 
                 onCheckedChange={(checked) => setFormData({ ...formData, isActive: checked })}
               />
@@ -252,7 +253,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
           <div className="space-y-4">
             <div className="flex items-center justify-between border-b pb-2">
               <div className="flex items-center gap-2">
-                <AlertTriangle className="w-4 h-4 text-red-600" />
+                <AlertTriangle className="w-4 h-4 text-re-red" />
                 <h4 className="font-medium text-sm">Escalation Levels</h4>
               </div>
               <Button type="button" variant="outline" size="sm" onClick={handleAddEscalation} className="h-7 text-xs">
@@ -264,7 +265,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
               {formData.escalationConfigs.map((esc: any, idx: number) => (
                 <div key={idx} className="bg-slate-50 p-3 rounded-lg border border-slate-100 space-y-3">
                   <div className="flex items-center justify-between">
-                    <Badge variant="outline" className="bg-red-50 text-red-700 border-red-100">
+                    <Badge variant="outline" className="bg-red-50 text-re-red-hover border-red-100">
                       Level {esc.level}
                     </Badge>
                     <Button 
@@ -345,7 +346,7 @@ export const SLADialog: React.FC<SLADialogProps> = ({ isOpen, onClose, sla, onSa
             <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
               Cancel
             </Button>
-            <Button type="submit" disabled={loading}>
+            <Button type="submit" disabled={loading} className="bg-re-red hover:bg-re-red-hover text-white">
               {loading ? 'Saving...' : 'Save Configuration'}
             </Button>
           </DialogFooter>
diff --git a/src/features/master/components/SecurityDepositMaster.tsx b/src/features/master/components/SecurityDepositMaster.tsx
index 623afa8..1286254 100644
--- a/src/features/master/components/SecurityDepositMaster.tsx
+++ b/src/features/master/components/SecurityDepositMaster.tsx
@@ -54,7 +54,7 @@ export const SecurityDepositMaster: React.FC = () => {
   if (loading) {
     return (
       <div className="flex flex-col items-center justify-center p-20 space-y-4">
-        <div className="w-10 h-10 border-4 border-amber-600 border-t-transparent rounded-full animate-spin"></div>
+        <div className="w-10 h-10 border-4 border-re-red border-t-transparent rounded-full animate-spin"></div>
         <p className="text-slate-600 animate-pulse">Loading settings...</p>
       </div>
     );
@@ -65,8 +65,8 @@ export const SecurityDepositMaster: React.FC = () => {
       <Card className="border-none shadow-lg bg-white/80 backdrop-blur-md">
         <CardHeader className="py-4 border-b bg-slate-50/50">
           <div className="flex items-center gap-3">
-             <div className="w-8 h-8 rounded-lg bg-amber-100 flex items-center justify-center">
-                <Settings className="w-5 h-5 text-amber-600" />
+             <div className="w-8 h-8 rounded-lg bg-red-100 flex items-center justify-center">
+                <Settings className="w-5 h-5 text-re-red" />
              </div>
              <div>
                 <CardTitle className="text-lg font-bold text-slate-900">
@@ -98,7 +98,7 @@ export const SecurityDepositMaster: React.FC = () => {
                       <Input
                         id={`amount-${config.id}`}
                         type="number"
-                        className="pl-8 h-9 text-base font-bold bg-slate-50/50 border-slate-200 focus:ring-amber-500 focus:border-amber-500 rounded-lg"
+                        className="pl-8 h-9 text-base font-bold bg-slate-50/50 border-slate-200 focus:ring-red-500 focus:border-red-500 rounded-lg"
                         value={config.value?.amount || ''}
                         onChange={(e) => handleUpdateAmount(config.id, e.target.value)}
                       />
@@ -109,7 +109,7 @@ export const SecurityDepositMaster: React.FC = () => {
                     <Button 
                       onClick={() => handleSave(config)}
                       disabled={isSaving === config.id}
-                      className="h-9 px-4 bg-amber-600 hover:bg-amber-700 text-white rounded-lg shadow-md shadow-amber-600/10 active:scale-95 transition-all flex items-center gap-1.5 group"
+                      className="h-9 px-4 bg-re-red hover:bg-re-red-hover text-white rounded-lg shadow-md shadow-re-red/10 active:scale-95 transition-all flex items-center gap-1.5 group"
                     >
                       {isSaving === config.id ? (
                         <RefreshCw className="w-4 h-4 animate-spin" />
@@ -140,13 +140,13 @@ export const SecurityDepositMaster: React.FC = () => {
         </CardContent>
       </Card>
 
-      <div className="bg-amber-50/50 rounded-xl p-4 border border-amber-100/50 flex items-start gap-3">
-          <div className="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center flex-shrink-0">
-             <Settings className="w-4 h-4 text-amber-700" />
+      <div className="bg-red-50/50 rounded-xl p-4 border border-red-100/50 flex items-start gap-3">
+          <div className="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center flex-shrink-0">
+             <Settings className="w-4 h-4 text-re-red-hover" />
           </div>
           <div>
-            <h5 className="font-bold text-amber-900 text-sm">Super Admin Notice</h5>
-            <p className="text-[11px] text-amber-800/80 leading-snug">
+            <h5 className="font-bold text-red-900 text-sm">Super Admin Notice</h5>
+            <p className="text-[11px] text-red-800/80 leading-snug">
               Updates made here take immediate effect. These values define the default expected amounts for all current and future onboarding payments.
             </p>
           </div>
diff --git a/src/features/master/components/TemplateDialog.tsx b/src/features/master/components/TemplateDialog.tsx
index 8bcae10..3157395 100644
--- a/src/features/master/components/TemplateDialog.tsx
+++ b/src/features/master/components/TemplateDialog.tsx
@@ -96,7 +96,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
             <div className="space-y-4">
               <div className="bg-slate-50 p-4 rounded-lg border border-slate-200 space-y-4">
                 <h3 className="text-sm font-semibold text-slate-800 flex items-center gap-2">
-                  <Settings className="w-4 h-4 text-amber-600" />
+                  <Settings className="w-4 h-4 text-re-red" />
                   General Settings
                 </h3>
                 <div>
@@ -149,12 +149,12 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
                 </div>
               </div>
 
-              <div className="bg-amber-50 p-4 rounded-lg border border-amber-100">
-                <h3 className="text-sm font-semibold text-amber-900 flex items-center gap-2 mb-3">
+              <div className="bg-red-50 p-4 rounded-lg border border-red-100">
+                <h3 className="text-sm font-semibold text-red-900 flex items-center gap-2 mb-3">
                   <Info className="w-4 h-4" />
                   Available Placeholders
                 </h3>
-                <p className="text-[10px] text-amber-700 mb-4 leading-relaxed">
+                <p className="text-[10px] text-re-red-hover mb-4 leading-relaxed">
                   Click a placeholder to insert it at the cursor.
                 </p>
                 <div className="flex flex-wrap gap-2">
@@ -164,14 +164,14 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
                         key={p}
                         type="button"
                         onClick={() => insertPlaceholder(p)}
-                        className="px-2 py-1 bg-white border border-amber-200 rounded text-[11px] font-mono text-amber-800 hover:bg-amber-600 hover:text-white hover:border-amber-600 transition-all flex items-center gap-1 shadow-sm"
+                        className="px-2 py-1 bg-white border border-red-200 rounded text-[11px] font-mono text-red-800 hover:bg-re-red hover:text-white hover:border-re-red transition-all flex items-center gap-1 shadow-sm"
                       >
                         {`{{${p}}}`}
                       </button>
                     ))
                   ) : (
-                    <div className="w-full py-4 text-center border-2 border-dashed border-amber-200 rounded-lg">
-                      <p className="text-[10px] text-amber-600">No placeholders defined for this trigger</p>
+                    <div className="w-full py-4 text-center border-2 border-dashed border-red-200 rounded-lg">
+                      <p className="text-[10px] text-re-red">No placeholders defined for this trigger</p>
                     </div>
                   )}
                 </div>
@@ -182,7 +182,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
           <div className="lg:col-span-4 space-y-4 flex flex-col h-full min-h-[600px]">
             <div className="flex items-center justify-between">
               <h3 className="font-semibold text-slate-900 flex items-center gap-2">
-                <Edit2 className="w-4 h-4 text-amber-600" />
+                <Edit2 className="w-4 h-4 text-re-red" />
                 Template Designer
               </h3>
             </div>
@@ -230,7 +230,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
                           '{"applicantName": "Rajesh Kumar", "location": "Mumbai South", "applicationId": "APP-2026-X12", "link": "https://example.com/app", "portalLink": "https://example.com/app"}'
                         )
                       }
-                      className="text-[10px] text-amber-600 hover:underline"
+                      className="text-[10px] text-re-red hover:underline"
                     >
                       Reset to Sample
                     </button>
@@ -302,7 +302,7 @@ export const TemplateDialog: React.FC<TemplateDialogProps> = ({
             Cancel
           </Button>
           <Button
-            className="flex-1 bg-amber-600 hover:bg-amber-700"
+            className="flex-1 bg-re-red hover:bg-re-red-hover"
             type="button"
             onClick={() => handleSaveTemplate(composeFullBody())}
             disabled={!editingTemplate?.id || !editingTemplate?.templateCode?.trim()}
diff --git a/src/features/master/components/UserManagementTable.tsx b/src/features/master/components/UserManagementTable.tsx
index da1819c..49a74a7 100644
--- a/src/features/master/components/UserManagementTable.tsx
+++ b/src/features/master/components/UserManagementTable.tsx
@@ -44,7 +44,7 @@ export const UserManagementTable: React.FC<UserManagementTableProps> = ({ userAs
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2">
-                    <Shield className="w-3 h-3 text-amber-600" />
+                    <Shield className="w-3 h-3 text-re-red" />
                     <span className="text-sm font-medium">{user.role}</span>
                   </div>
                 </TableCell>
diff --git a/src/features/master/components/ZMDialog.tsx b/src/features/master/components/ZMDialog.tsx
index 741b39f..f2cc9f5 100644
--- a/src/features/master/components/ZMDialog.tsx
+++ b/src/features/master/components/ZMDialog.tsx
@@ -146,7 +146,7 @@ export const ZMDialog: React.FC<ZMDialogProps> = ({
 
           <div className="flex gap-3 pt-6">
             <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
-            <Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Zonal Manager</Button>
+            <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save Zonal Manager</Button>
           </div>
         </div>
       </DialogContent>
diff --git a/src/features/master/components/ZMManagement.tsx b/src/features/master/components/ZMManagement.tsx
index 56d94dc..e103755 100644
--- a/src/features/master/components/ZMManagement.tsx
+++ b/src/features/master/components/ZMManagement.tsx
@@ -33,7 +33,7 @@ export const ZMManagement: React.FC<ZMManagementProps> = ({
             <CardTitle>Zonal Managers (DD-ZM)</CardTitle>
             <CardDescription>Manage Zonal Managers and their region assignments</CardDescription>
           </div>
-          <Button onClick={onAddZM} className="bg-amber-600 hover:bg-amber-700">
+          <Button onClick={onAddZM} className="bg-re-red hover:bg-re-red-hover">
             <Plus className="w-4 h-4 mr-2" />
             Add ZM
           </Button>
@@ -99,7 +99,7 @@ export const ZMManagement: React.FC<ZMManagementProps> = ({
                     <Button variant="ghost" size="sm" onClick={() => onEditZM(zm)}>
                       <Edit2 className="w-4 h-4" />
                     </Button>
-                    <Button variant="ghost" size="sm" onClick={() => onDeleteZM(zm.id, zm.name)} className="text-red-600 hover:text-red-700 hover:bg-red-50">
+                    <Button variant="ghost" size="sm" onClick={() => onDeleteZM(zm.id, zm.name)} className="text-re-red hover:text-re-red-hover hover:bg-red-50">
                       <Trash2 className="w-4 h-4" />
                     </Button>
                   </div>
diff --git a/src/features/master/components/ZoneDetails.tsx b/src/features/master/components/ZoneDetails.tsx
index 445cbfa..b315339 100644
--- a/src/features/master/components/ZoneDetails.tsx
+++ b/src/features/master/components/ZoneDetails.tsx
@@ -27,7 +27,7 @@ export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZon
             <CardTitle>Zone Details</CardTitle>
             <CardDescription>Geographical coverage and state mappings for each zone</CardDescription>
           </div>
-          <Button onClick={onAddZone} className="bg-amber-600 hover:bg-amber-700">
+          <Button onClick={onAddZone} className="bg-re-red hover:bg-re-red-hover">
             <Plus className="w-4 h-4 mr-2" />
             Add Zone
           </Button>
@@ -40,7 +40,7 @@ export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZon
               <div key={zone.id} className="border rounded-lg p-5 space-y-4 bg-gradient-to-br from-white to-slate-50">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-3">
-                    <div className="w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-lg flex items-center justify-center shadow-md">
+                    <div className="w-12 h-12 bg-gradient-to-br from-red-500 to-re-red rounded-lg flex items-center justify-center shadow-md">
                       <Globe className="w-6 h-6 text-white" />
                     </div>
                     <div>
@@ -86,11 +86,11 @@ export const ZoneDetails: React.FC<ZoneDetailsProps> = ({ selectedZone, onAddZon
                     <Label className="text-xs text-slate-600 mb-2 block">
                       Zonal Business Head (ZBH)
                     </Label>
-                    <div className="bg-amber-50 border border-amber-100 rounded-lg p-3 space-y-2">
+                    <div className="bg-red-50 border border-red-100 rounded-lg p-3 space-y-2">
                       <div className="flex items-center gap-2">
-                        <Shield className="w-4 h-4 text-amber-600" />
+                        <Shield className="w-4 h-4 text-re-red" />
                         <span className="text-sm font-semibold text-slate-900">{zone.zonalBusinessHead.name}</span>
-                        <Badge className="bg-amber-600 text-white text-[10px] ml-auto">ZBH</Badge>
+                        <Badge className="bg-re-red text-white text-[10px] ml-auto">ZBH</Badge>
                       </div>
                       
                       <div className="flex items-center gap-2 ml-6 text-slate-600">
diff --git a/src/features/master/components/ZoneDialog.tsx b/src/features/master/components/ZoneDialog.tsx
index 53ca78a..6c875bc 100644
--- a/src/features/master/components/ZoneDialog.tsx
+++ b/src/features/master/components/ZoneDialog.tsx
@@ -106,7 +106,7 @@ export const ZoneDialog: React.FC<ZoneDialogProps> = ({
                     </div>
                     <div className="flex gap-3 pt-4">
                         <Button variant="outline" className="flex-1" onClick={() => onOpenChange(false)}>Cancel</Button>
-                        <Button className="flex-1 bg-amber-600 hover:bg-amber-700" onClick={onSave}>Save Zone</Button>
+                        <Button className="flex-1 bg-re-red hover:bg-re-red-hover" onClick={onSave}>Save Zone</Button>
                     </div>
                 </div>
             </DialogContent>
diff --git a/src/features/master/components/ZonesOverview.tsx b/src/features/master/components/ZonesOverview.tsx
index 34af64c..cf2baa3 100644
--- a/src/features/master/components/ZonesOverview.tsx
+++ b/src/features/master/components/ZonesOverview.tsx
@@ -19,14 +19,14 @@ export const ZonesOverview: React.FC<ZonesOverviewProps> = ({ selectedZone, onZo
         return (
           <Card
             key={zone.id}
-            className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-amber-600 shadow-lg' : 'hover:border-amber-400'
+            className={`border-2 transition-all cursor-pointer ${selectedZone === zone.id ? 'border-re-red shadow-lg' : 'hover:border-red-400'
               }`}
             onClick={() => onZoneClick(zone.id)}
           >
             <CardHeader className="pb-3">
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-2">
-                  <Globe className="w-5 h-5 text-amber-600" />
+                  <Globe className="w-5 h-5 text-re-red" />
                   <CardTitle className="text-lg">{zone.name.toUpperCase().endsWith('ZONE') ? zone.name : `${zone.name} Zone`}</CardTitle>
                 </div>
                 <Badge variant="outline" className="text-xs">{zone.code}</Badge>
diff --git a/src/features/master/pages/MasterPage.tsx b/src/features/master/pages/MasterPage.tsx
index b30ae30..d6c539f 100644
--- a/src/features/master/pages/MasterPage.tsx
+++ b/src/features/master/pages/MasterPage.tsx
@@ -443,34 +443,34 @@ export const MasterPage: React.FC = () => {
 
       {loading ? (
         <div className="flex flex-col items-center justify-center p-20 space-y-4">
-          <div className="w-12 h-12 border-4 border-amber-600 border-t-transparent rounded-full animate-spin"></div>
+          <div className="w-12 h-12 border-4 border-re-red border-t-transparent rounded-full animate-spin"></div>
           <p className="text-slate-600 font-medium animate-pulse">Synchronizing Global Settings...</p>
         </div>
       ) : (
         <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
           <TabsList className="grid w-full grid-cols-8 h-auto sticky top-0 z-10 bg-white/80 backdrop-blur-sm border shadow-sm rounded-xl p-1">
-            <TabsTrigger value="hierarchy" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white">
+            <TabsTrigger value="hierarchy" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
               <Globe className="w-4 h-4" /> Organisation
             </TabsTrigger>
-            <TabsTrigger value="roles" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white">
+            <TabsTrigger value="roles" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
               <Shield className="w-4 h-4" /> Roles
             </TabsTrigger>
-            <TabsTrigger value="templates" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white">
+            <TabsTrigger value="templates" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
               <Mail className="w-4 h-4" /> Emails
             </TabsTrigger>
-            <TabsTrigger value="locations" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white">
+            <TabsTrigger value="locations" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white">
               <MapPin className="w-4 h-4" /> Locations
             </TabsTrigger>
-            <TabsTrigger value="approvals" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
+            <TabsTrigger value="approvals" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
               <SlidersHorizontal className="w-4 h-4" /> Approvals
             </TabsTrigger>
-            <TabsTrigger value="documents" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
+            <TabsTrigger value="documents" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
               <FileText className="w-4 h-4" /> Docs Config
             </TabsTrigger>
-            <TabsTrigger value="governance" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
+            <TabsTrigger value="governance" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
               <Settings2 className="w-4 h-4" /> Governance
             </TabsTrigger>
-            <TabsTrigger value="settings" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-amber-600 data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
+            <TabsTrigger value="settings" className="flex items-center gap-2 py-3 rounded-lg data-[state=active]:bg-re-red data-[state=active]:text-white transition-all transform hover:scale-[1.02]">
               <Settings className="w-4 h-4" /> App Settings
             </TabsTrigger>
           </TabsList>
diff --git a/src/features/master/pages/SLAConfigPage.tsx b/src/features/master/pages/SLAConfigPage.tsx
index 7c95c3a..9776071 100644
--- a/src/features/master/pages/SLAConfigPage.tsx
+++ b/src/features/master/pages/SLAConfigPage.tsx
@@ -73,7 +73,7 @@ export const SLAConfigPage: React.FC = () => {
             <RefreshCw className={`w-4 h-4 mr-2 ${loadingMore ? 'animate-spin' : ''}`} />
             Initialize Defaults
           </Button>
-          <Button onClick={handleAddSLA} disabled={loading}>
+          <Button onClick={handleAddSLA} disabled={loading} className="bg-re-red hover:bg-re-red-hover text-white">
             <Plus className="w-4 h-4 mr-2" />
             Add Manual SLA
           </Button>
@@ -136,14 +136,14 @@ export const SLAConfigPage: React.FC = () => {
 
               <div className="border-l-2 border-red-400 pl-3">
                 <div className="flex items-center gap-2 mb-2">
-                  <AlertTriangle className="w-4 h-4 text-red-600" />
+                  <AlertTriangle className="w-4 h-4 text-re-red" />
                   <span className="text-xs font-bold text-slate-700 uppercase tracking-wider">Escalations ({sla.escalationConfigs?.length || 0})</span>
                 </div>
                 <div className="space-y-2">
                   {(sla.escalationConfigs || []).map((esc: any, idx: number) => (
                     <div key={idx} className="text-[11px]">
                       <div className="flex items-center gap-1.5 text-slate-900 font-medium">
-                        <Badge variant="outline" className="text-[9px] h-4 px-1 bg-red-50 border-red-200 text-red-700">
+                        <Badge variant="outline" className="text-[9px] h-4 px-1 bg-red-50 border-red-200 text-re-red-hover">
                           L{esc.level}
                         </Badge>
                         <span>after {esc.timeValue} {esc.timeUnit}</span>
diff --git a/src/features/onboarding/components/application-details/ApplicationDetailsTabs.tsx b/src/features/onboarding/components/application-details/ApplicationDetailsTabs.tsx
index 20ed457..69e7b5c 100644
--- a/src/features/onboarding/components/application-details/ApplicationDetailsTabs.tsx
+++ b/src/features/onboarding/components/application-details/ApplicationDetailsTabs.tsx
@@ -9,6 +9,7 @@ import {
   Clock,
   ClipboardList,
   Download,
+  Eye,
   FileText,
   GitBranch,
   Lock,
@@ -556,11 +557,17 @@ export function ApplicationDetailsTabs(props: ApplicationDetailsTabsProps) {
                         </TableCell>
                         <TableCell>
                           <div className="flex justify-end gap-2">
+                            <Button size="sm" variant="outline" data-testid={`onboarding-document-preview-${idx}`} onClick={() => {
+                                setPreviewDoc(doc);
+                                setShowPreviewModal(true);
+                            }}>
+                              <Eye className="w-3 h-3 text-slate-500" />
+                            </Button>
                             <Button size="sm" variant="outline" data-testid={`onboarding-document-download-${idx}`} onClick={() => {
                                 const baseUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:5000';
                                 window.open(`${baseUrl}/${doc.filePath}`, '_blank');
                             }}>
-                              <Download className="w-3 h-3" />
+                              <Download className="w-3 h-3 text-slate-500" />
                             </Button>
                           </div>
                         </TableCell>
diff --git a/src/features/onboarding/hooks/useApplicationDetailsStageData.ts b/src/features/onboarding/hooks/useApplicationDetailsStageData.ts
index ddec086..eda63a4 100644
--- a/src/features/onboarding/hooks/useApplicationDetailsStageData.ts
+++ b/src/features/onboarding/hooks/useApplicationDetailsStageData.ts
@@ -6,6 +6,7 @@ interface UseApplicationDetailsStageDataParams {
   interviews: any[];
   eorData: any;
   getDeposit: (type: string) => any;
+  documentConfigs?: any[];
 }
 
 export function useApplicationDetailsStageData({
@@ -14,6 +15,7 @@ export function useApplicationDetailsStageData({
   interviews: _interviews,
   eorData,
   getDeposit,
+  documentConfigs = [],
 }: UseApplicationDetailsStageDataParams) {
   const normalizeRole = (value: unknown): string =>
     String(value || '')
@@ -116,7 +118,22 @@ export function useApplicationDetailsStageData({
     },
     {
       id: 10, name: 'LOI Issue', status: getStageStatus('LOI Issue'),
-      date: application.loiIssueDate, description: 'Letter of Intent issued', documentsUploaded: 1
+      date: application.loiIssueDate, description: 'Letter of Intent issued', isParallel: true,
+      branches: [
+        { name: 'LOI Documents', color: 'blue', stages: 
+          documentConfigs.some((c: any) => c.stageCode === 'LOI Issue')
+            ? documentConfigs.filter((c: any) => c.stageCode === 'LOI Issue').map((c: any, i: number) => ({
+                id: `10a-${i}`,
+                name: c.documentType,
+                status: isDocumentUploaded(c.documentType) ? 'completed' : 'active',
+                description: c.isMandatory ? `Upload ${c.documentType} (Mandatory)` : `Upload ${c.documentType}`
+              }))
+            : [
+                { id: '10a-1', name: 'Letter of Intent', status: isDocumentUploaded('Letter of Intent') || isDocumentUploaded('LOI') ? 'completed' : 'active', description: 'Letter of Intent document' },
+                { id: '10a-2', name: 'Signed LOI', status: isDocumentUploaded('Signed LOI') || isDocumentUploaded('LOI Signed Copy') ? 'completed' : 'active', description: 'Signed Letter of Intent' },
+              ]
+        }
+      ]
     },
     {
       id: 11, name: 'Dealer Code Generation', status: getStageStatus('Dealer Code Generation'),
diff --git a/src/features/onboarding/pages/ApplicationDetails.tsx b/src/features/onboarding/pages/ApplicationDetails.tsx
index d38ceea..3264c3d 100644
--- a/src/features/onboarding/pages/ApplicationDetails.tsx
+++ b/src/features/onboarding/pages/ApplicationDetails.tsx
@@ -359,6 +359,7 @@ export const ApplicationDetails = () => {
     interviews,
     eorData,
     getDeposit,
+    documentConfigs,
   });
 
   const {