diff --git a/src/app/dashboard/partner-details/partner-details.component.html b/src/app/dashboard/partner-details/partner-details.component.html
index 2b4bf46..971a62a 100644
--- a/src/app/dashboard/partner-details/partner-details.component.html
+++ b/src/app/dashboard/partner-details/partner-details.component.html
@@ -8,253 +8,409 @@
         <button class="button" [ngClass]="{'active' : selectedSegment === 2}" (click)="selectedSegment = 2"> Implementation Data </button>
         <button class="button" [ngClass]="{'active' : selectedSegment === 3}" (click)="selectedSegment = 3"> Training Data </button>
     </div>
-    
-    <section class="card">
-        <header>
-            <h5> Primary Contact </h5>
-        </header>
 
-        <div class="container">
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.name">
-                <label> Name </label>
-            </div>
+    <ng-container *ngIf="selectedSegment === 1">
+        <section class="card">
+            <header>
+                <h5> Primary Contact </h5>
+            </header>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.designation">
-                <label> Name </label>
+            <div class="container">
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.name">
+                    <label> Name </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.designation">
+                    <label> Name </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.email">
+                    <label> Name </label>
+                </div>
+                
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.contactNumber">
+                    <label> Contact </label>
+                </div>
             </div>
+        </section>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.email">
-                <label> Name </label>
-            </div>
-            
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.primaryContact.contactNumber">
-                <label> Contact </label>
-            </div>
-        </div>
-    </section>
-
-    <section class="card">
-        <header>
-            <h5> Basic Info </h5>
-        </header>
-
-        <div class="container">
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.name">
-                <label> Name </label>
-            </div>
+        <section class="card">
+            <header>
+                <h5> Basic Info </h5>
+            </header>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.website">
-                <label> Official Website </label>
-            </div>
+            <div class="container">
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.name">
+                    <label> Name </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.website">
+                    <label> Official Website </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.type">
+                    <label> Type </label>
+                </div>
+        
+                <div class="input-holder">
+                    <div class="text"> <button *ngFor="let area of partnerDetails.organizationBasicInfo.areasOfWork"> {{ area }} </button> </div>
+                    <label> Thematic areas of work </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.source">
+                    <label> How did you hear about us </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
+                    <label> Name of the organisation and person that referred </label>
+                </div>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.type">
-                <label> Type </label>
-            </div>
+                <div class="checkbox-holder">
+                    <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
+                    <label> I would like to receive periodic updates about CAC </label>
+                </div>
     
-            <div class="input-holder">
-                <div class="text"> <button *ngFor="let area of partnerDetails.organizationBasicInfo.areasOfWork"> {{ area }} </button> </div>
-                <label> Thematic areas of work </label>
+                <div class="input-holder">
+                    <textarea type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
+                    <label> I would like to become a member of CAC because </label>
+                </div>
             </div>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.source">
-                <label> How did you hear about us </label>
-            </div>
+        </section>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.referralName">
-                <label> Name of the organisation and person that referred </label>
-            </div>
-
-            <div class="checkbox-holder">
-                <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.wouldLikeUpdates">
-                <label> I would like to receive periodic updates about CAC </label>
-            </div>
-
-            <div class="input-holder">
-                <textarea type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.organizationBasicInfo.reasonForBecomingMember"></textarea>
-                <label> I would like to become a member of CAC because </label>
-            </div>
-        </div>
-
-    </section>
-
-    <section class="card">
-        <header>
-            <h5> Alternative Contact </h5>
-        </header>
-
-        <div class="container">
-            
+        <section class="card">
+            <header>
+                <h5> Alternative Contact </h5>
+            </header>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.designation">
-                <label> Name </label>
+            <div class="container">
+                
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.designation">
+                    <label> Name </label>
+                </div>
+        
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.email">
+                    <label> Name </label>
+                </div>
+                
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.contactNumber">
+                    <label> Contact </label>
+                </div>
             </div>
+        </section>
     
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.email">
-                <label> Name </label>
-            </div>
-            
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.alternateContact.contactNumber">
-                <label> Contact </label>
-            </div>
-        </div>
-    </section>
-
-    <section class="card">
-        <header>
-            <h5> Detailed Profile </h5>
-        </header>
-
-        <div class="container">
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.partnerLocation">
-                <label> Partner/Organization/Network Headquarters Location </label>
-            </div>
-
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.state">
-                <label> State </label>
-            </div>
-
-            <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.district">
-                <label> District </label>
-            </div>
-
-            <div class="checkbox-holder">
-                <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">
-                <label> Do you have Branches / Field presence in any other District? </label>
-            </div>
-
-            <div class="input-holder">
-                <div class="text">
-                    <button *ngFor="let country of partnerDetails.detailedProfile.branchLocationCountries"> {{ country }} </button>
+        <section class="card">
+            <header>
+                <h5> Detailed Profile </h5>
+            </header>
+    
+            <div class="container">
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.partnerLocation">
+                    <label> Partner/Organization/Network Headquarters Location </label>
                 </div>
-                <label> Branch or Field office Location (Countries) </label>
-            </div>
-
-            <div class="input-holder">
-                <div class="text">
-                    <button *ngFor="let state of partnerDetails.detailedProfile.states"> {{ state }} </button>
+    
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.state">
+                    <label> State </label>
+                </div>
+    
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.district">
+                    <label> District </label>
+                </div>
+    
+                <div class="checkbox-holder">
+                    <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.haveBranchesInOtherDistricts">
+                    <label> Do you have Branches / Field presence in any other District? </label>
+                </div>
+    
+                <div class="input-holder">
+                    <div class="text">
+                        <button *ngFor="let country of partnerDetails.detailedProfile.branchLocationCountries"> {{ country }} </button>
+                    </div>
+                    <label> Branch or Field office Location (Countries) </label>
+                </div>
+    
+                <div class="input-holder">
+                    <div class="text">
+                        <button *ngFor="let state of partnerDetails.detailedProfile.states"> {{ state }} </button>
+                    </div>
+                    <label> Branch or Field office Location (States) </label>
+                </div>
+    
+                <div class="input-holder">
+                    <div class="text">
+                        <button *ngFor="let district of partnerDetails.detailedProfile.districts"> {{ district }} </button>
+                    </div>
+                    <label> Branch or Field office Location (Districts) </label>
+                </div>
+    
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">
+                    <label> Which year your organisation/partner/network was established? </label>
+                </div>
+    
+                <div class="input-holder">
+                    <div class="text">
+                        <button *ngFor="let community of partnerDetails.detailedProfile.communities"> {{ community }} </button>
+                    </div>
+                    <label> Which communities do you work with? </label>
+                </div>
+    
+                <div class="input-holder">
+                    <div class="text">
+                        <button *ngFor="let mode of partnerDetails.detailedProfile.preferredModeOfCommunications"> {{ mode }} </button>
+                    </div>
+                    <label> Select your preferred mode of communications with the Collab</label>
+                </div>
+    
+                <div class="input-holder">
+                    <div class="text">
+                        <button *ngFor="let language of partnerDetails.detailedProfile.preferredLanguages"> {{ language }} </button>
+                    </div>
+                    <label> Preferred Language of Communication* (emails, webinars etc. Select all that apply) </label>
+                </div>
+    
+                <div class="input-holder">
+                    <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">
+                    <label> What is the total reach of your organisation in a year? </label>
+                </div>
+    
+                <div class="input-holder">
+                    <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>
+                    <label> Bio (This information will be displayed along with your logo in the members section of this website. Max:100 Characters) </label>
                 </div>
-                <label> Branch or Field office Location (States) </label>
             </div>
-
+        </section>
+    
+        <section class="card">
+            <header>
+                <h5>
+                    Strength &amp; Capability
+                </h5>
+            </header>
+    
+           <div class="container">
             <div class="input-holder">
                 <div class="text">
-                    <button *ngFor="let district of partnerDetails.detailedProfile.districts"> {{ district }} </button>
+                    <button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired"> {{ support }} </button>
                 </div>
-                <label> Branch or Field office Location (Districts) </label>
+                <label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>
             </div>
-
+    
             <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.yearOfEstablishment">
-                <label> Which year your organisation/partner/network was established? </label>
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">
+                <label> If other, please describe </label>
             </div>
-
+    
             <div class="input-holder">
-                <div class="text">
-                    <button *ngFor="let community of partnerDetails.detailedProfile.communities"> {{ community }} </button>
-                </div>
-                <label> Which communities do you work with? </label>
+                <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>
+                <label> Kindly elaborate on the option(s) selected above </label>
             </div>
-
+    
             <div class="input-holder">
                 <div class="text">
-                    <button *ngFor="let mode of partnerDetails.detailedProfile.preferredModeOfCommunications"> {{ mode }} </button>
+                    <button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered"> {{ support }} </button>
                 </div>
-                <label> Select your preferred mode of communications with the Collab</label>
+                <label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its partners? </label>
             </div>
-
+    
             <div class="input-holder">
-                <div class="text">
-                    <button *ngFor="let language of partnerDetails.detailedProfile.preferredLanguages"> {{ language }} </button>
-                </div>
-                <label> Preferred Language of Communication* (emails, webinars etc. Select all that apply) </label>
+                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">
+                <label> If other, please describe </label>
             </div>
-
+    
             <div class="input-holder">
-                <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.totalReachOfOrganization">
-                <label> What is the total reach of your organisation in a year? </label>
+                <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>
+                <label> Kindly elaborate on the option(s) selected above </label>
             </div>
-
+    
             <div class="input-holder">
-                <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.detailedProfile.bio"></textarea>
-                <label> Bio (This information will be displayed along with your logo in the members section of this website. Max:100 Characters) </label>
+                <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>
+                <label> Do you require any other specific support? </label>
             </div>
-        </div>
-    </section>
+           </div>
+        </section>
 
-    <section class="card">
-        <header>
-            <h5>
-                Strength &amp; Capability
-            </h5>
-        </header>
-
-       <div class="container">
-        <div class="input-holder">
-            <div class="text">
-                <button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportRequired"> {{ support }} </button>
+        <div class="card">
+            <div class="checkbox-holder">
+                <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.didAgree">
+                <label>  I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU & Charter</a>. </label>
             </div>
-            <label> What are the primary areas of support that you seek from #COVIDActionCollab? </label>
-        </div>
-
-        <div class="input-holder">
-            <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredOther">
-            <label> If other, please describe </label>
-        </div>
-
-        <div class="input-holder">
-            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportRequiredDescription"></textarea>
-            <label> Kindly elaborate on the option(s) selected above </label>
-        </div>
-
-        <div class="input-holder">
-            <div class="text">
-                <button *ngFor="let support of partnerDetails.strengthAndCapability.primaryAreasOfSupportOffered"> {{ support }} </button>
+            <div class="checkbox-holder">
+                <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.didDeclare">
+                <label>  I/We hereby declare that I/we neither support nor are associated with any act which promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability & sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to decriminalise abortion or expand abortion services. </label>
             </div>
-            <label> What are the areas in which you can support/contribute to the #COVIDActionCollab and its partners? </label>
-        </div>
-
-        <div class="input-holder">
-            <input type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedOther">
-            <label> If other, please describe </label>
         </div>
-
-        <div class="input-holder">
-            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.primaryAreasOfSupportOfferedDescription"></textarea>
-            <label> Kindly elaborate on the option(s) selected above </label>
-        </div>
-
-        <div class="input-holder">
-            <textarea maxlength="100" type="text" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.strengthAndCapability.otherSpecificSupportRequired"></textarea>
-            <label> Do you require any other specific support? </label>
-        </div>
-       </div>
-    </section>
-
-    <div class="card">
-        <div class="checkbox-holder">
-            <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.didAgree">
-            <label>  I agree to the <a href="https://covidactioncollab.org/Mou-charter/" target="_blank">MOU & Charter</a>. </label>
-        </div>
-        <div class="checkbox-holder">
-            <input type="checkbox" disabled="{{ !isFormEditable }}" [(ngModel)]="partnerDetails.didDeclare">
-            <label>  I/We hereby declare that I/we neither support nor are associated with any act which promotes: 1. Human trafficking; 2. Smoking / Chewing tobacco; 3. Violence / terrorism 4. Child labour / Child Marriage 5. Discrimination based color, race, religion, caste, disability & sexual orientation 6. Mining 7. Terrorism 8. Abortion counselling referrals, advocate to decriminalise abortion or expand abortion services. </label>
-        </div>
-    </div>
+    </ng-container>
+
+    <ng-container *ngIf="selectedSegment === 2">
+        <section class="card">
+            <header>
+                <h5> HII Data </h5>
+            </header>
+            <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.hiiData">
+                    <div class="row">
+                        <div class="col">
+                            Name
+                        </div>
+                        <div class="col">
+                            {{ package.name }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Implementation Status
+                        </div>
+                        <div class="col">
+                            {{ package.implementationStatus }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            No. of Females
+                        </div>
+                        <div class="col">
+                            {{ package.noOfFemales }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            No. of Males
+                        </div>
+                        <div class="col">
+                            {{ package.noOfMales }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            No. of Males
+                        </div>
+                        <div class="col">
+                            {{ package.noOfTransgender }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Health Package ID
+                        </div>
+                        <div class="col">
+                            {{ package.packagesHealth }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Health Remarks
+                        </div>
+                        <div class="col">
+                            {{ package.healthRemarks }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Disaggregation Note
+                        </div>
+                        <div class="col">
+                            {{ package.disaggregationNote }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Relevant Documents
+                        </div>
+                        <div class="col">
+                            {{ package.relevantDocuments }}
+                        </div>
+                    </div>
+            </section>
+        </section>
+
+        <section class="card">
+            <header>
+                <h5> SP Data </h5>
+            </header>
+            <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spData">
+                    <div class="row">
+                        <div class="col">
+                            Name
+                        </div>
+                        <div class="col">
+                            {{ package.name }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Implementation Status
+                        </div>
+                        <div class="col">
+                            {{ package.status }}
+                        </div>
+                    </div> 
+                    <div class="row">
+                        <div class="col">
+                            Total Aggregation
+                        </div>
+                        <div class="col">
+                            {{ package.totalAggregation }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Other Remarks
+                        </div>
+                        <div class="col">
+                            {{ package.otherRemarks }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Relevant Documents
+                        </div>
+                        <div class="col">
+                            {{ package.relevantDocuments }}
+                        </div>
+                    </div>             
+            </section>
+        </section>
+
+        <section class="card">
+            <header>
+                <h5> SP Scheme </h5>
+            </header>
+            <section class="table" *ngFor="let package of partnerDetails.surveyCtoData.spSchemeData">
+                    <div class="row">
+                        <div class="col">
+                            Count
+                        </div>
+                        <div class="col">
+                            {{ package.count }}
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            Scheme Id
+                        </div>
+                        <div class="col">
+                            {{ package.schemeId }}
+                        </div>
+                    </div>                     
+            </section>
+        </section>
+    </ng-container>
 
     <section class="footer-buttons">
         <button class="button back" [routerLink]="'/dashboard/partners'">
diff --git a/src/app/dashboard/partner-details/partner-details.component.scss b/src/app/dashboard/partner-details/partner-details.component.scss
index 8d92438..5079359 100644
--- a/src/app/dashboard/partner-details/partner-details.component.scss
+++ b/src/app/dashboard/partner-details/partner-details.component.scss
@@ -92,4 +92,37 @@
         padding-top: 20px;
         padding-left: 20px;
     }
+}
+
+.table {
+    display: block;
+    box-shadow: 0px 0px 1px var(--input-border);
+    border-radius: var(--common-border-radius);
+    margin-bottom: 40px;
+
+    .row {
+        color: var(--secondary-text);
+        background-color: white;
+        border-radius: var(--common-border-radius);
+        transition: border-color 0.3s, box-shadow 0.3s;
+        height: 50px;
+        border: 2px solid transparent;
+        box-shadow: none;
+        display: flex;
+        align-items: center;
+
+        .col {
+            font-style: 14px;
+            width: 50%;
+            padding-left: 20px;
+
+            &:nth-child(2) {
+                font-weight: 500;
+            }
+        }
+
+        &:nth-child(even) {
+            background-color: var(--input-background);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/dashboard/partner-details/partner-details.component.ts b/src/app/dashboard/partner-details/partner-details.component.ts
index b3dcc67..aa2af5a 100644
--- a/src/app/dashboard/partner-details/partner-details.component.ts
+++ b/src/app/dashboard/partner-details/partner-details.component.ts
@@ -9,7 +9,7 @@ import { ActivatedRoute } from '@angular/router';
 export class PartnerDetailsComponent implements OnInit {
     partnerDetails: any;
     isFormEditable: boolean = false;
-    selectedSegment: 1 | 2 | 3 = 1;
+    selectedSegment: 1 | 2 | 3 = 2;
 
     constructor(
         private activateRouter:ActivatedRoute
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index 4ba6e43..7d80ab8 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -3,6 +3,11 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { lastValueFrom } from 'rxjs';
 import { BASE_URL } from './partner-profile.service';
 
+interface LoginData {
+    id: string;
+    token: string;
+}
+
 @Injectable({
     providedIn: 'root'
 })
@@ -16,15 +21,6 @@ export class AuthService {
         username: string,
         password: string,
     }) {
-        const body = `&username=${encodeURIComponent(credentials.username)}&password=${encodeURIComponent(credentials.password)}`;
-        const headers = new HttpHeaders({
-            Accept: 'text/html, application/xhtml+xml, */*',
-            'Content-Type': 'application/x-www-form-urlencoded',
-        });
-        const httpOptions = {
-            headers,
-            responseType: 'text' as 'json',
-        };
-        return lastValueFrom(this.http.post(BASE_URL + '/api-auth/', body, httpOptions));
+        return lastValueFrom(this.http.post<LoginData>(BASE_URL + '/api-auth/', credentials));
     }
 }