diff --git a/src/app/my-groups/my-groups.page.html b/src/app/my-groups/my-groups.page.html
index 4f0f6e9b8f..1b612a0b99 100644
--- a/src/app/my-groups/my-groups.page.html
+++ b/src/app/my-groups/my-groups.page.html
@@ -38,7 +38,7 @@
 
     <div *ngFor="let group of groupList" class="mg-list-card-container">
       <sb-group-card [isMobile]="true" [isAdmin]="group.memberRole === 'admin'" [group]="group"
-        (cardClick)="navigateToGroupdetailsPage($event)"></sb-group-card>
+       [cardTitleColor]="group.cardTitleColor" [cardBgColor]="group.cardBgColor" (cardClick)="navigateToGroupdetailsPage($event)"></sb-group-card>
     </div>
     <div *ngIf="!isGuestUser && !groupList.length && groupListLoader">
       <div *ngFor="let item of [0,1,2,3,4,5,6,7,8,9,10]">
diff --git a/src/app/my-groups/my-groups.page.ts b/src/app/my-groups/my-groups.page.ts
index 5fa98c5a3c..8098ec9408 100644
--- a/src/app/my-groups/my-groups.page.ts
+++ b/src/app/my-groups/my-groups.page.ts
@@ -34,6 +34,8 @@ interface GroupData extends Group {
 export class MyGroupsPage implements OnInit {
   isGuestUser: boolean;
   groupList: GroupData[] = [];
+  themeColors: string[] = ['#FFDFC7', '#C2ECE6', '#FFE59B', '#DAD4FF',  '#80CBC4', '#E6EE9C', '#FFE082'];
+  fontColor: string[] = ['#AD632D', '#149D88', '#8D6A00', '#635CDC', '#00695C', '#9E9D24', '#FF8F00'];
   groupListLoader = false;
   headerObservable: any;
   userId: string;
@@ -153,10 +155,12 @@ export class MyGroupsPage implements OnInit {
         }
       };
       this.groupList = (await this.groupService.search(groupSearchCriteria).toPromise())
-        .map<GroupData>((group) => {
+        .map<GroupData>((group , index) => {
           return {
             ...group,
-            initial: this.commonUtilService.extractInitial(group.name)
+            initial: this.commonUtilService.extractInitial(group.name),
+            cardBgColor: this.themeColors[index % this.themeColors.length],
+            cardTitleColor: this.fontColor[index % this.fontColor.length]
           };
         });
       this.groupListLoader = false;