diff --git a/src/Client/src/app/pages/resumes/viewer/viewer.component.css b/src/Client/src/app/pages/resumes/viewer/viewer.component.css
new file mode 100644
index 0000000..be09ca3
--- /dev/null
+++ b/src/Client/src/app/pages/resumes/viewer/viewer.component.css
@@ -0,0 +1,105 @@
+input, textarea {
+ border: 1px solid #444;
+ background-color: transparent;
+}
+
+textarea {
+ resize: vertical;
+}
+
+h1 {
+ margin: 0;
+ font-size: 15px;
+}
+
+.paper {
+ width: 800px;
+ aspect-ratio: 17 / 22;
+ background: white;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ margin: auto;
+ margin-top: 50px;
+ border: 1px solid #ddd;
+}
+
+.spacer {
+ margin: 0 10px;
+}
+
+.spacer-title {
+ display: flex;
+ margin: 10px 0;
+}
+
+.columns {
+ columns: 2;
+ column-gap: 10px;
+}
+
+.resume-header {
+ width: 70vw;
+ background: white;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ margin: auto;
+ margin-top: 50px;
+ border: 1px solid #ddd;
+}
+
+.resume-section {
+ margin-bottom: 10px;
+}
+
+.resume-sub-section {
+ border: 1px solid #666666;
+ break-inside: avoid;
+ 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/viewer/viewer.component.html b/src/Client/src/app/pages/resumes/viewer/viewer.component.html
new file mode 100644
index 0000000..cd65297
--- /dev/null
+++ b/src/Client/src/app/pages/resumes/viewer/viewer.component.html
@@ -0,0 +1,301 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Experience
+ @for(experience of resume.experiences; track experience.trackUUID ){
+
+ }
+
+
+
+ @if(resume.military !== null){
+
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Experience
+ @for(experience of resume.experiences; track experience.trackUUID ){
+
+ }
+
+
+
+ @if(resume.military !== null){
+
+ }
+
+
+
+
+
+
+
Skills
+ @for(skill of resume.skills; track skill.trackUUID){
+
+ }
+
+
+
+
+
+
+
+
+
Certifications
+ @for(cert of resume.certifications; track cert.trackUUID){
+
+ }
+
+
+
+
+
Projects
+ @for(proj of resume.projects; track proj.trackUUID){
+
+ }
+
+
+
+
+
+
+
Skills
+ @for(skill of resume.skills; track skill.trackUUID){
+
+ }
+
+
+
+
+
+
+
+
+
Certifications
+ @for(cert of resume.certifications; track cert.trackUUID){
+
+ }
+
+
+
+
+
Projects
+ @for(proj of resume.projects; track proj.trackUUID){
+
+ }
+
+
+
+
\ No newline at end of file
diff --git a/src/Client/src/app/pages/resumes/viewer/viewer.component.ts b/src/Client/src/app/pages/resumes/viewer/viewer.component.ts
new file mode 100644
index 0000000..b40feef
--- /dev/null
+++ b/src/Client/src/app/pages/resumes/viewer/viewer.component.ts
@@ -0,0 +1,92 @@
+import { Component } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute, RouterModule } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { Resume } from 'app/models/Resume';
+import { Authentication } from 'app/services/Authentication';
+import { Validation } from 'app/services/Validation';
+
+@Component({
+ selector: 'main-resume-viewer',
+ templateUrl: './viewer.component.html',
+ styleUrls: [ './viewer.component.css' ],
+ imports: [FormsModule, CommonModule, RouterModule]
+})
+export class ResumesViewerComponent {
+
+ public resume: Resume = new Resume;
+
+ public ErrorMsg: string = "";
+
+ constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication, public validator: Validation ) {
+ this.title.setTitle("Resume - Viewer | BoredCareers");
+ if (!this.auth.isLoggedIn){
+ this.router.navigate(["/"]);
+ }
+ };
+
+ ngOnInit(){
+ this.route.queryParams.subscribe(params => {
+ const ResumeID = params['ResumeID'] ? +params['ResumeID'] : null;
+ if (ResumeID !== null){
+ this.http.get("api/resume?ResumeID=" + ResumeID).subscribe({
+ next: data => {
+
+ data.trackUUID = crypto.randomUUID();
+ data.certifications.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ });
+ data.educations.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ });
+ data.experiences.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ element.experienceBullets.forEach(subelement => {
+ subelement.trackUUID = crypto.randomUUID();
+ });
+ });
+ data.languages.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ });
+ if (data.military){
+ data.military.trackUUID = crypto.randomUUID();
+ data.military.militaryBullets.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ });
+ }
+ data.projects.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ });
+ data.skills.forEach(element => {
+ element.trackUUID = crypto.randomUUID();
+ });
+
+ this.resume = data;
+ },
+ error: err => {
+ this.ErrorMsg = err.error;
+ }
+ });
+ }
+ });
+ }
+
+ PrintResume(){
+ const divToPrint = document.getElementsByClassName("paper")[0];
+
+ const printContents = divToPrint.innerHTML;
+ const originalContents = document.body.innerHTML; // Store original body content
+
+ // Temporarily replace the body content with the div's content
+ document.body.innerHTML = printContents;
+
+ // Trigger the print dialog
+ window.print();
+
+ // Restore the original body content
+ document.body.innerHTML = originalContents;
+ }
+
+}
\ No newline at end of file