diff --git a/src/Client/src/app/pages/resumes/editor/editor.component.css b/src/Client/src/app/pages/resumes/editor/editor.component.css
index 7230e75..ec41f96 100644
--- a/src/Client/src/app/pages/resumes/editor/editor.component.css
+++ b/src/Client/src/app/pages/resumes/editor/editor.component.css
@@ -1,16 +1,20 @@
 input, textarea {
-    border: none;
+    border: 1px solid #444;
     background-color: transparent;
 }
 
+textarea {
+  resize: vertical;
+}
+
 h1 {
     margin: 0;
     font-size: 15px;
 }
 
 .paper {
-    width: 70vw;
-    aspect-ratio: 1 / 1.294;
+    width: 800px;
+    aspect-ratio: 17 / 22;
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
     margin: auto;
@@ -18,8 +22,18 @@ h1 {
     border: 1px solid #ddd;
 }
 
+.spacer {
+    margin: 0 10px;
+}
+
+.spacer-title {
+    display: flex;
+    margin: 10px 0;
+}
+
 .columns {
     columns: 2;
+    column-gap: 10px;
 }
 
 .resume-header {
@@ -34,11 +48,59 @@ h1 {
 .resume-section {
     break-inside: avoid;
     background-color: #DDDDDD;
-    margin: 10px;
+    margin-bottom: 10px;
 }
 
 .resume-sub-section {
     border: 1px solid #666666;
-    margin: 5px;
     padding: 10px;
+}
+
+.title-text {
+    margin: 0;
+    height: 20px;
+}
+
+.header-left {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.header-right {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-end;
+}
+
+.header-location input{
+    width: 80px;
+}
+
+.Add {
+    position: relative;
+    float: right;
+    width: 20px;
+    height: 20px;
+    background-color: #0F0;
+    border: none;
+    bottom: 20px;
+}
+
+.Del {
+    position: relative;
+    float: right;
+    width: 20px;
+    height: 20px;
+    background-color: #F00;
+    border: none;
+}
+
+.flex-two-row {
+    display: flex;
+    flex: 1;
 }
\ No newline at end of file
diff --git a/src/Client/src/app/pages/resumes/editor/editor.component.html b/src/Client/src/app/pages/resumes/editor/editor.component.html
index 954a35a..452ec4b 100644
--- a/src/Client/src/app/pages/resumes/editor/editor.component.html
+++ b/src/Client/src/app/pages/resumes/editor/editor.component.html
@@ -9,139 +9,160 @@
     </div>
 
     <div class="paper">
-        <!-- Resume Header -->
-        <div class="resume-section">
-            <input [name]="'resumename' + resume.trackUUID" [(ngModel)]="resume.name" type="text" placeholder="Full Name" />
-            <input [name]="'resumefield' + resume.trackUUID" [(ngModel)]="resume.field" type="text" placeholder="Career Field" />
-            <input [name]="'resumecity' + resume.trackUUID" [(ngModel)]="resume.city" type="text" placeholder="City / Locality" />
-            <input [name]="'resumestateOrRegion' + resume.trackUUID" [(ngModel)]="resume.stateOrRegion" type="text" placeholder="State / Region" />
-            <input [name]="'resumecountry' + resume.trackUUID" [(ngModel)]="resume.country" type="text" placeholder="Country" />
-            <input [name]="'resumepostalCode' + resume.trackUUID" [(ngModel)]="resume.postalCode" type="text" placeholder="Postal Code" />
-            <input [name]="'resumeemail' + resume.trackUUID" [(ngModel)]="resume.email" type="email" placeholder="Email Address" />
-            <input [name]="'resumephoneNumber' + resume.trackUUID" [(ngModel)]="resume.phoneNumber" type="tel" placeholder="Phone number" />
-        </div>
+        <div class="spacer">
+            <!-- Resume Header -->
+            <div class="resume-section spacer-title">
+                <div class="header-left">
+                    <input [name]="'resumename' + resume.trackUUID" [(ngModel)]="resume.name" type="text" placeholder="Full Name" />
+                    <input [name]="'resumefield' + resume.trackUUID" [(ngModel)]="resume.field" type="text" placeholder="Career Field" />
+                    <div class="header-location">
+                        <input [name]="'resumecity' + resume.trackUUID" [(ngModel)]="resume.city" type="text" placeholder="City" />
+                        <input [name]="'resumestateOrRegion' + resume.trackUUID" [(ngModel)]="resume.stateOrRegion" type="text" placeholder="State" />
+                        <input [name]="'resumecountry' + resume.trackUUID" [(ngModel)]="resume.country" type="text" placeholder="Country" />
+                        <input [name]="'resumepostalCode' + resume.trackUUID" [(ngModel)]="resume.postalCode" type="text" placeholder="Postal Code" />
+                    </div>
+                </div>
+                <div class="header-right">
+                    <input [name]="'resumeemail' + resume.trackUUID" [(ngModel)]="resume.email" type="email" placeholder="Email Address" />
+                    <input [name]="'resumephoneNumber' + resume.trackUUID" [(ngModel)]="resume.phoneNumber" type="tel" placeholder="Phone number" />
+                </div>
+            </div>
 
-        <div class="columns">
-            <!-- Experience -->
-            <div class="resume-section">
-                <button type="button" (click)="addExperience()">ADD Experience</button>
-                @for(experience of resume.experiences; track experience.trackUUID ){
-                    <div class="resume-sub-section">
-                        <button type="button" (click)="delExperience(experience)">DEL Experience</button>
-                        <input [name]="'experiencejobTitle' + experience.trackUUID" [(ngModel)]="experience.jobTitle" type="text" placeholder="Job Title" />
-                        <input [name]="'experiencecompany' + experience.trackUUID" [(ngModel)]="experience.company" type="text" placeholder="Company" />
-                        <input [name]="'experiencecity' + experience.trackUUID" [(ngModel)]="experience.city" type="text" placeholder="City / Locality" />
-                        <input [name]="'experiencestateOrRegion' + experience.trackUUID" [(ngModel)]="experience.stateOrRegion" type="text" placeholder="State / Region" />
-                        <input [name]="'experiencecountry' + experience.trackUUID" [(ngModel)]="experience.country" type="text" placeholder="Country" />
-                        <input [name]="'experiencepostalCode' + experience.trackUUID" [(ngModel)]="experience.postalCode" type="text" placeholder="Postal Code" />
-                        <input [name]="'experiencestillEmployed' + experience.trackUUID" [(ngModel)]="experience.stillEmployed" type="checkbox" />
-                        <input [name]="'experiencedateStarted' + experience.trackUUID" [(ngModel)]="experience.dateStarted" type="date" />
-                        @if(!experience.stillEmployed){
-                            <input [name]="'experiencedateEnded' + experience.trackUUID" [(ngModel)]="experience.dateEnded" type="date" />
+            <div class="columns">
+                <!-- Experience -->
+                <div class="resume-section">
+                    <h1 class="title-text">Experience</h1>
+                    @for(experience of resume.experiences; track experience.trackUUID ){
+                        <button class="Del" type="button" (click)="delExperience(experience)">X</button>
+                        <div class="resume-sub-section">
+                            <input [name]="'experiencejobTitle' + experience.trackUUID" [(ngModel)]="experience.jobTitle" type="text" placeholder="Job Title" />
+                            <input [name]="'experiencecompany' + experience.trackUUID" [(ngModel)]="experience.company" type="text" placeholder="Company" />
+                            <input [name]="'experiencecity' + experience.trackUUID" [(ngModel)]="experience.city" type="text" placeholder="City" />
+                            <input [name]="'experiencestateOrRegion' + experience.trackUUID" [(ngModel)]="experience.stateOrRegion" type="text" placeholder="State" />
+                            <input [name]="'experiencecountry' + experience.trackUUID" [(ngModel)]="experience.country" type="text" placeholder="Country" />
+                            <input [name]="'experiencepostalCode' + experience.trackUUID" [(ngModel)]="experience.postalCode" type="text" placeholder="Postal Code" />
+                            <input [name]="'experiencestillEmployed' + experience.trackUUID" [(ngModel)]="experience.stillEmployed" type="checkbox" />
+                            <input [name]="'experiencedateStarted' + experience.trackUUID" [(ngModel)]="experience.dateStarted" type="date" />
+                            @if(!experience.stillEmployed){
+                                <input [name]="'experiencedateEnded' + experience.trackUUID" [(ngModel)]="experience.dateEnded" type="date" />
+                            }
+                            <button type="button" (click)="addJobFunction(experience)">Add jobFunction</button>
+                            @for(bullet of experience.experienceBullets; track bullet.trackUUID){
+                                <div>
+                                    <button type="button" (click)="delJobFunction(experience, bullet)">DEL jobFunction</button>
+                                    <textarea [name]="'bulletjobFunction' + bullet.trackUUID" [(ngModel)]="bullet.jobFunction" placeholder="Job Task / Function" ></textarea>
+                                </div>
+                            }
+                        </div>
+                    }
+                    <button class="Add" type="button" (click)="addExperience()">+</button>
+                </div>
+
+                <!-- Military -->
+                @if(resume.military !== null){
+                    <div class="resume-section">
+                        <h1 class="title-text">Military</h1>
+                        <input [name]="'militarycountry' + resume.military.trackUUID" [(ngModel)]="resume.military.country" type="text" placeholder="Country" />
+                        <input [name]="'militaryrank' + resume.military.trackUUID" [(ngModel)]="resume.military.rank" type="text" placeholder="Rank" />
+                        <h1>Still Serving: </h1><input [name]="'stillServing' + resume.military.trackUUID" [(ngModel)]="resume.military.stillServing" type="checkbox" />
+                        <input [name]="'militarydateStarted' + resume.military.trackUUID" [(ngModel)]="resume.military.dateStarted" type="date" />
+                        @if (!resume.military.stillServing){
+                            <input [name]="'dateEnded' + resume.military.trackUUID" [(ngModel)]="resume.military.dateEnded" type="date" />
                         }
-                        <button type="button" (click)="addJobFunction(experience)">Add jobFunction</button>
-                        @for(bullet of experience.experienceBullets; track bullet.trackUUID){
-                            <div>
-                                <button type="button" (click)="delJobFunction(experience, bullet)">DEL jobFunction</button>
-                                <textarea [name]="'bulletjobFunction' + bullet.trackUUID" [(ngModel)]="bullet.jobFunction" placeholder="Job Task / Function" ></textarea>
+                        <button type="button" (click)="addMillitaryBullet()">Add Millitary Task</button>
+                        @for(military of resume.military.militaryBullets; track military.trackUUID ){
+                            <div class="resume-sub-section">
+                                <button type="button" (click)="delMillitaryBullet(military)">DEL Military Task</button>
+                                <input [name]="'militaryachievement' + military.trackUUID" [(ngModel)]="military.achievement" type="text" placeholder="Achievement" />
+                                <textarea [name]="'militarydescription' + military.trackUUID" [(ngModel)]="military.description" placeholder="Description" ></textarea>
                             </div>
                         }
                     </div>
                 }
-            </div>
-
-            <!-- Military -->
-            @if(resume.military !== null){
+                
+                <!-- Education -->
                 <div class="resume-section">
-                    <input [name]="'militarycountry' + resume.military.trackUUID" [(ngModel)]="resume.military.country" type="text" placeholder="Country" />
-                    <input [name]="'militaryrank' + resume.military.trackUUID" [(ngModel)]="resume.military.rank" type="text" placeholder="Rank" />
-                    <h1>Still Serving: </h1><input [name]="'stillServing' + resume.military.trackUUID" [(ngModel)]="resume.military.stillServing" type="checkbox" />
-                    <input [name]="'militarydateStarted' + resume.military.trackUUID" [(ngModel)]="resume.military.dateStarted" type="date" />
-                    @if (!resume.military.stillServing){
-                        <input [name]="'dateEnded' + resume.military.trackUUID" [(ngModel)]="resume.military.dateEnded" type="date" />
-                    }
-                    <button type="button" (click)="addMillitaryBullet()">Add Millitary Task</button>
-                    @for(military of resume.military.militaryBullets; track military.trackUUID ){
+                    <h1 class="title-text">Education</h1>
+                    @for(education of resume.educations; track education.trackUUID){
+                        <button class="Del" type="button" (click)="delEducation(education)">X</button>
                         <div class="resume-sub-section">
-                            <button type="button" (click)="delMillitaryBullet(military)">DEL Military Task</button>
-                            <input [name]="'militaryachievement' + military.trackUUID" [(ngModel)]="military.achievement" type="text" placeholder="Achievement" />
-                            <textarea [name]="'militarydescription' + military.trackUUID" [(ngModel)]="military.description" placeholder="Description" ></textarea>
+                            <input [name]="'educationschool' + education.trackUUID" [(ngModel)]="education.school" type="text" placeholder="School" />
+                            <input [name]="'educationdegreeType' + education.trackUUID" [(ngModel)]="education.degreeType" type="text" placeholder="Type" />
+                            <input [name]="'educationdegreeField' + education.trackUUID" [(ngModel)]="education.degreeField" type="text" placeholder="Field" />
+                            <input [name]="'educationcity' + education.trackUUID" [(ngModel)]="education.city" type="text" placeholder="City" />
+                            <input [name]="'educationstateOrRegion' + education.trackUUID" [(ngModel)]="education.stateOrRegion" type="text" placeholder="State" />
+                            <input [name]="'educationcountry' + education.trackUUID" [(ngModel)]="education.country" type="text" placeholder="Country" />
+                            <input [name]="'educationpostalCode' + education.trackUUID" [(ngModel)]="education.postalCode" type="text" placeholder="Postal Code" />
+                            <input [name]="'educationstillStudying' + education.trackUUID" [(ngModel)]="education.stillStudying" type="checkbox" />
+                            <input [name]="'educationdateStarted' + education.trackUUID" [(ngModel)]="education.dateStarted" type="date" />
+                            @if (!education.stillStudying){
+                                <input [name]="'educationdateEnded' + education.trackUUID" [(ngModel)]="education.dateEnded" type="date" />
+                            }
                         </div>
                     }
+                    <button class="Add" type="button" (click)="addEducation()">+</button>
+                </div>
+                
+                <!-- Skill -->
+                <div class="resume-section">
+                    <h1 class="title-text">Skills</h1>
+                    @for(skill of resume.skills; track skill.trackUUID){
+                        <button class="Del" type="button" (click)="delSkill(skill)">X</button>
+                        <div class="resume-sub-section flex-two-row">
+                            <div>
+                                <input [name]="'skillname' + skill.trackUUID" [(ngModel)]="skill.name" type="text" placeholder="Skill" />
+                            </div>
+                            <textarea [name]="'skilldescription' + skill.trackUUID" [(ngModel)]="skill.description" placeholder="Description"></textarea>
+                        </div>
+                    }
+                    <button class="Add" type="button" (click)="addSkill()">+</button>
                 </div>
-            }
-            
-            <!-- Education -->
-            <div class="resume-section">
-                <button type="button" (click)="addEducation()">ADD Education</button>
-                @for(education of resume.educations; track education.trackUUID){
-                    <div class="resume-sub-section">
-                        <button type="button" (click)="delEducation(education)">DEL Education</button>
-                        <input [name]="'educationschool' + education.trackUUID" [(ngModel)]="education.school" type="text" placeholder="School" />
-                        <input [name]="'educationdegreeType' + education.trackUUID" [(ngModel)]="education.degreeType" type="text" placeholder="Type" />
-                        <input [name]="'educationdegreeField' + education.trackUUID" [(ngModel)]="education.degreeField" type="text" placeholder="Field" />
-                        <input [name]="'educationcity' + education.trackUUID" [(ngModel)]="education.city" type="text" placeholder="City / Locality" />
-                        <input [name]="'educationstateOrRegion' + education.trackUUID" [(ngModel)]="education.stateOrRegion" type="text" placeholder="State / Region" />
-                        <input [name]="'educationcountry' + education.trackUUID" [(ngModel)]="education.country" type="text" placeholder="Country" />
-                        <input [name]="'educationpostalCode' + education.trackUUID" [(ngModel)]="education.postalCode" type="text" placeholder="Postal Code" />
-                        <input [name]="'educationstillStudying' + education.trackUUID" [(ngModel)]="education.stillStudying" type="checkbox" />
-                        <input [name]="'educationdateStarted' + education.trackUUID" [(ngModel)]="education.dateStarted" type="date" />
-                        @if (!education.stillStudying){
-                            <input [name]="'educationdateEnded' + education.trackUUID" [(ngModel)]="education.dateEnded" type="date" />
-                        }
-                    </div>
-                }
-            </div>
-            
-            <!-- Skill -->
-            <div class="resume-section">
-                <button type="button" (click)="addSkill()">ADD Skill</button>
-                @for(skill of resume.skills; track skill.trackUUID){
-                    <div class="resume-sub-section">
-                        <button type="button" (click)="delSkill(skill)">DEL Skill</button>
-                        <input [name]="'skillname' + skill.trackUUID" [(ngModel)]="skill.name" type="text" placeholder="Skill" />
-                        <textarea [name]="'skilldescription' + skill.trackUUID" [(ngModel)]="skill.description" placeholder="Description"></textarea>
-                    </div>
-                }
-            </div>
 
-            <!-- Language -->
-            <div class="resume-section">
-                <button type="button" (click)="addLanguage()">ADD Language</button>
-                @for(language of resume.languages; track language.trackUUID){
-                    <div class="resume-sub-section">
-                        <button type="button" (click)="delLanguage(language)">DEL Language</button>
-                        <input [name]="'languagelanguage' + language.trackUUID" [(ngModel)]="language.language" type="text" placeholder="Language" />
-                        <input [name]="'languageproficiency' + language.trackUUID" [(ngModel)]="language.proficiency" type="text" placeholder="Proficiency" />
-                    </div>
-                }
-            </div>
-            
+                <!-- Language -->
+                <div class="resume-section">
+                    <h1 class="title-text">Languages</h1>
+                    @for(language of resume.languages; track language.trackUUID){
+                        <button class="Del" type="button" (click)="delLanguage(language)">X</button>
+                        <div class="resume-sub-section flex-two-row">
+                            <input [name]="'languagelanguage' + language.trackUUID" [(ngModel)]="language.language" type="text" placeholder="Language" />
+                            <input [name]="'languageproficiency' + language.trackUUID" [(ngModel)]="language.proficiency" type="text" placeholder="Proficiency" />
+                        </div>
+                    }
+                    <button class="Add" type="button" (click)="addLanguage()">+</button>
+                </div>
+                
 
-            <!-- Certification -->
-            <div class="resume-section">
-                <button type="button" (click)="addCert()">ADD Certification</button>
-                @for(cert of resume.certifications; track cert.trackUUID){
-                    <div class="resume-sub-section">
-                        <button type="button" (click)="delCert(cert)">DEL Certification</button>
-                        <input [name]="'certname' + cert.trackUUID" [(ngModel)]="cert.name" type="text" placeholder="Certification Name" />
-                        <input [name]="'certverificationURL' + cert.trackUUID" [(ngModel)]="cert.verificationURL" type="text" placeholder="Verification URL" />
-                        <textarea [name]="'certdescription' + cert.trackUUID" [(ngModel)]="cert.description" placeholder="Description"></textarea>
-                    </div>
-                }
-            </div>
-            
-            <!-- Project -->
-            <div class="resume-section">
-                <button type="button" (click)="addProject()">ADD Project</button>
-                @for(proj of resume.projects; track proj.trackUUID){
-                    <div class="resume-sub-section">
-                        <button type="button" (click)="delProject(proj)">DEL Project</button>
-                        <input [name]="'projname' + proj.trackUUID" [(ngModel)]="proj.name" type="text" placeholder="Project Name" />
-                        <input [name]="'projurl' + proj.trackUUID" [(ngModel)]="proj.url" type="text" placeholder="Reference URL" />
-                        <textarea [name]="'projdescription' + proj.trackUUID" [(ngModel)]="proj.description" placeholder="Description"></textarea>
-                    </div>
-                }
+                <!-- Certification -->
+                <div class="resume-section">
+                    <h1 class="title-text">Certifications</h1>
+                    @for(cert of resume.certifications; track cert.trackUUID){
+                        <button class="Del" type="button" (click)="delCert(cert)">X</button>
+                        <div class="resume-sub-section flex-two-row">
+                            <div>
+                                <input [name]="'certname' + cert.trackUUID" [(ngModel)]="cert.name" type="text" placeholder="Certification Name" />
+                                <input [name]="'certverificationURL' + cert.trackUUID" [(ngModel)]="cert.verificationURL" type="text" placeholder="Verification URL" />
+                            </div>
+                            <textarea [name]="'certdescription' + cert.trackUUID" [(ngModel)]="cert.description" placeholder="Description"></textarea>
+                        </div>
+                    }
+                    <button class="Add" type="button" (click)="addCert()">+</button>
+                </div>
+                
+                <!-- Project -->
+                <div class="resume-section">
+                    <h1 class="title-text">Projects</h1>
+                    @for(proj of resume.projects; track proj.trackUUID){
+                        <button class="Del" type="button" (click)="delProject(proj)">X</button>
+                        <div class="resume-sub-section flex-two-row">
+                            <div>
+                                <input [name]="'projname' + proj.trackUUID" [(ngModel)]="proj.name" type="text" placeholder="Project Name" />
+                                <input [name]="'projurl' + proj.trackUUID" [(ngModel)]="proj.url" type="text" placeholder="Reference URL" />
+                            </div>
+                            <textarea [name]="'projdescription' + proj.trackUUID" [(ngModel)]="proj.description" placeholder="Description"></textarea>
+                        </div>
+                    }
+                    <button class="Add" type="button" (click)="addProject()">+</button>
+                </div>
             </div>
         </div>
     </div>
diff --git a/src/Client/src/app/pages/resumes/editor/editor.component.ts b/src/Client/src/app/pages/resumes/editor/editor.component.ts
index 9b276d3..8a0cf7f 100644
--- a/src/Client/src/app/pages/resumes/editor/editor.component.ts
+++ b/src/Client/src/app/pages/resumes/editor/editor.component.ts
@@ -6,7 +6,6 @@ import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Resume, ResumeCertification, ResumeEducation, ResumeExperience, ResumeExperienceBullet, ResumeLanguage, ResumeMilitary, ResumeMilitaryBullet, ResumeProject, ResumeSkill } from 'app/models/Resume';
 import { Authentication } from 'app/services/Authentication';
-import { HomeComponent } from "app/pages/home/home.component";
 
 @Component({
   selector: 'main-resume-editor',
@@ -21,13 +20,9 @@ export class ResumesEditorComponent {
 
   public ErrorMsg: string = "";
 
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication   ) {
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
     this.title.setTitle("Resume - Editor | BoredCareers");
-    if (!auth.isLoggedIn){
-      router.navigate(["/"]);
-    }
     this.route.queryParams.subscribe(params => {
-
       const ResumeID = params['ResumeID'] ? +params['ResumeID'] : null;
       if (ResumeID !== null){
         this.http.get<Resume>("api/resume?ResumeID=" + ResumeID).subscribe({
@@ -44,6 +39,17 @@ export class ResumesEditorComponent {
     });
   };
 
+  async ngOnInit(){
+    if (!this.auth.isLoggedIn){
+      this.router.navigate(["/"]);
+    }
+  }
+
+  //        Pagnation           //
+  ////////////////////////////////
+  
+  ////////////////////////////////
+
   SubmitForm(resume: Resume){
     resume.accountID = this.auth.loggedInUser.id;
     this.http.post("api/resume", resume).subscribe({