diff --git a/src/app/modules/admin/member/partner/components/list.component.html b/src/app/modules/admin/member/partner/components/list.component.html
index 8bb5190..2048646 100644
--- a/src/app/modules/admin/member/partner/components/list.component.html
+++ b/src/app/modules/admin/member/partner/components/list.component.html
@@ -196,7 +196,16 @@
                     <div [matTooltip]="__getRateTooltop(partner)">요율</div>
                     <hr style="margin: 7px 0px" />
                     <div>
-                      <div [innerHTML]="__getChildMemberCount(partner)"></div>
+                      <span
+                        class="ml-2"
+                        *ngFor="
+                          let num of __getChildMemberCount2(partner) as arr;
+                          let i = index
+                        "
+                        [style.background-color]="__getPartnerColor(arr, i)"
+                        [matTooltip]="__getPartnerName(arr, i)"
+                        >{{ num }}</span
+                      >
                     </div>
                   </div>
 
diff --git a/src/app/modules/admin/member/partner/components/list.component.ts b/src/app/modules/admin/member/partner/components/list.component.ts
index 975d700..12db5a5 100644
--- a/src/app/modules/admin/member/partner/components/list.component.ts
+++ b/src/app/modules/admin/member/partner/components/list.component.ts
@@ -624,6 +624,11 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     return type === 1 ? '롤링' : '';
   }
 
+  __getChildMemberCount2(member: MemberModel): string[] {
+    const childs = member.getChildrenCountList().join().toString();
+    const childArr = childs.split(',');
+    return childArr;
+  }
   __getChildMemberCount(member: MemberModel): string {
     const childs = member.getChildrenCountList().join().toString();
     const childArr = childs.split(',');
@@ -646,6 +651,59 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
     return result;
   }
 
+  __getPartnerName(childArr: string[], idx: number): string {
+    const partnerType = 5 - childArr.length + idx;
+    let result = '';
+
+    switch (partnerType) {
+      case 0:
+        result = '대본';
+        break;
+      case 1:
+        result = '부본';
+        break;
+      case 2:
+        result = '총판';
+        break;
+      case 3:
+        result = '매장';
+        break;
+      case 4:
+        result = '회원';
+        break;
+      default:
+        break;
+    }
+    return result;
+  }
+
+  __getPartnerColor(childArr: string[], idx: number): string {
+    const envPartnerColor = environment.constants.partnerColor;
+    const colorType = 5 - childArr.length + idx;
+
+    let result = '';
+    switch (colorType) {
+      case 0:
+        result = envPartnerColor.branch;
+        break;
+      case 1:
+        result = envPartnerColor.division;
+        break;
+      case 2:
+        result = envPartnerColor.office;
+        break;
+      case 3:
+        result = envPartnerColor.store;
+        break;
+      case 4:
+        result = envPartnerColor.user;
+        break;
+      default:
+        break;
+    }
+    return result;
+  }
+
   __getMemberState(member: MemberModel): string {
     const state = member.getState();
     let resultStr = '';
diff --git a/src/app/modules/admin/member/user/components/view.component.html b/src/app/modules/admin/member/user/components/view.component.html
index 9170104..4cc892b 100644
--- a/src/app/modules/admin/member/user/components/view.component.html
+++ b/src/app/modules/admin/member/user/components/view.component.html
@@ -27,7 +27,9 @@
                 <mat-chip-list aria-label="Fish selection">
                   <mat-chip
                     *ngFor="let parent of parentMembers"
-                    color="accent"
+                    [ngStyle]="{
+                      'background-color': __getPartnerColor(parent)
+                    }"
                     >{{ parent.getUsername() }}</mat-chip
                   >
                 </mat-chip-list>
diff --git a/src/app/modules/admin/member/user/components/view.component.ts b/src/app/modules/admin/member/user/components/view.component.ts
index 2408819..3de6644 100644
--- a/src/app/modules/admin/member/user/components/view.component.ts
+++ b/src/app/modules/admin/member/user/components/view.component.ts
@@ -59,6 +59,7 @@ import {
 import { MemberSettlementSettingService } from 'app/modules/polyglot/member_settlement_setting/services/member_settlement_setting.service';
 import { UpdateMemberGameSettingRequest } from 'app/modules/proto/c2se/member_game_setting_pb';
 import { MemberGameSettingService } from 'app/modules/polyglot/member_game_setting/services/member_game_setting.service';
+import { environment } from 'environments/environment';
 
 @Component({
   selector: 'user-view',
@@ -367,8 +368,7 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
       });
 
       this.getParentMembers(this.currentMember);
-      console.log(this.parentMembers);
-
+      this.parentMembers?.reverse();
       // Mark for check
       this._changeDetectorRef.markForCheck();
     });
@@ -788,6 +788,37 @@ export class ViewComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
+  __getPartnerColor(member: MemberModel): string {
+    const classId = member.getMemberClass()?.getId();
+    const envClassId = environment.constants.classeIds;
+    const envPartnerColor = environment.constants.partnerColor;
+
+    let result = '';
+    switch (classId) {
+      case envClassId.mainOffice:
+        result = envPartnerColor.mainOffice;
+        break;
+      case envClassId.branch:
+        result = envPartnerColor.branch;
+        break;
+      case envClassId.division:
+        result = envPartnerColor.division;
+        break;
+      case envClassId.office:
+        result = envPartnerColor.office;
+        break;
+      case envClassId.store:
+        result = envPartnerColor.store;
+        break;
+      case envClassId.user:
+        result = envPartnerColor.user;
+        break;
+      default:
+        break;
+    }
+    return result;
+  }
+
   private showAlert(type: FuseAlertType, message: string): void {
     this.changePasswordResultShowAlert = true;
     // Set the alert
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 4e43822..6241a41 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -33,5 +33,13 @@ export const environment: Environment = {
       level3: '0cce35ee-9668-495e-8840-e3d7b5b01b76',
       level4: 'e7e768d7-1d3d-4ae1-866d-4db1c1f0d9a5',
     },
+    partnerColor: {
+      mainOffice: 'tomato',
+      branch: 'aqua',
+      division: 'darkorange',
+      office: 'red',
+      store: 'green',
+      user: 'blueviolet',
+    },
   },
 };
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 5464387..edcaff6 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -37,6 +37,14 @@ export const environment: Environment = {
       level3: '0cce35ee-9668-495e-8840-e3d7b5b01b76',
       level4: 'e7e768d7-1d3d-4ae1-866d-4db1c1f0d9a5',
     },
+    partnerColor: {
+      mainOffice: 'tomato',
+      branch: 'aqua',
+      division: 'darkorange',
+      office: 'red',
+      store: 'green',
+      user: 'blueviolet',
+    },
   },
 };
 
diff --git a/src/environments/environment.type.ts b/src/environments/environment.type.ts
index 4dfe1ed..2b79d06 100644
--- a/src/environments/environment.type.ts
+++ b/src/environments/environment.type.ts
@@ -27,5 +27,13 @@ export interface Environment {
       level3: string;
       level4: string;
     };
+    partnerColor: {
+      mainOffice: string;
+      branch: string;
+      division: string;
+      office: string;
+      store: string;
+      user: string;
+    };
   };
 }