diff --git a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.css b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.css
deleted file mode 100644
index 9d97a2c..0000000
--- a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.tile-frame {
-    column-count: 4;
-    column-gap: 20px;
-    padding: 20px;
-    width: calc(100% - 40px);
-}
-
-.tile{
-    background-color: var(--Mistox-Dark)\);
-    height: 40px;
-    break-inside: avoid;
-}
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.html b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.html
deleted file mode 100644
index 05e4dca..0000000
--- a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="tile-frame" *ngFor="let cur of JobListingPage">
-    <div class="tile">
-        <h1>{{ cur.title }}</h1>
-        <h1>{{ cur.jobType }}</h1>
-        <h1>Is Remote: {{ cur.remote }}</h1>
-        <h1>{{ cur.salaryMin }}</h1>
-        <h1>{{ cur.salaryMax }}</h1>
-        <h1>{{ cur.city }}</h1>
-        <h1>{{ cur.stateOrRegion }}</h1>
-        <h1>{{ cur.country }}</h1>
-        <h1>{{ cur.postalCode }}</h1>
-        <h1>{{ cur.description }}</h1>
-        <h1>Posted: {{ cur.createdTime }}</h1>
-        <h1>Modified: {{ cur.modifiedTime }}</h1>
-    </div>
-</div>
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.ts b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.ts
deleted file mode 100644
index 5b108a1..0000000
--- a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-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 { JobListing } from 'app/models/JobListing';
-import { Authentication } from 'app/services/Authentication';
-
-@Component({
-  selector: 'main-jobs-edit',
-  templateUrl: './jobedit.component.html',
-  styleUrls: [ './jobedit.component.css' ],
-  imports: [ FormsModule, CommonModule, RouterModule ]
-})
-export class JobEditComponent {
-
-  public MyJobListings: JobListing[] = [];
-  public JobListingPage: JobListing[] = [];
-  public ErrorMsg: string = "";
-
-  public Page: number = 1;
-
-  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication  ) {
-    this.title.setTitle("Jobs - edit | BoredCareers");
-
-    if (this.Page == 1){
-
-    }
-
-    http.get<JobListing[]>("api/joblisting?PageQuantity=" + 10 + "&Page=" + 1).subscribe({
-      next: data => {
-        this.JobListingPage = data;
-      },
-      error: err => {
-        this.ErrorMsg = err.error;
-      }
-    });
-
-  };
-
-  RemoveJobListing( JobListingID: number ){
-    this.http.delete("api/joblisting?JobListingID=" + JobListingID).subscribe({
-      next: data => {
-        window.location.reload();
-      },
-      error: err => {
-        this.ErrorMsg = err.error;
-      }
-    });
-  }
-
-}
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/jobs/new/jobnew.component.css b/src/Client/src/app/pages/main/jobs/editor/jobeditor.component.css
similarity index 100%
rename from src/Client/src/app/pages/main/jobs/new/jobnew.component.css
rename to src/Client/src/app/pages/main/jobs/editor/jobeditor.component.css
diff --git a/src/Client/src/app/pages/main/jobs/new/jobnew.component.html b/src/Client/src/app/pages/main/jobs/editor/jobeditor.component.html
similarity index 100%
rename from src/Client/src/app/pages/main/jobs/new/jobnew.component.html
rename to src/Client/src/app/pages/main/jobs/editor/jobeditor.component.html
diff --git a/src/Client/src/app/pages/main/jobs/new/jobnew.component.ts b/src/Client/src/app/pages/main/jobs/editor/jobeditor.component.ts
similarity index 91%
rename from src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
rename to src/Client/src/app/pages/main/jobs/editor/jobeditor.component.ts
index 62324e2..bd69aad 100644
--- a/src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
+++ b/src/Client/src/app/pages/main/jobs/editor/jobeditor.component.ts
@@ -9,12 +9,12 @@ import { Authentication } from 'app/services/Authentication';
 import { Company, Employee } from 'app/models/Company';
 
 @Component({
-  selector: 'main-jobs-new',
-  templateUrl: './jobnew.component.html',
-  styleUrls: [ './jobnew.component.css' ],
+  selector: 'main-jobs-editor',
+  templateUrl: './jobeditor.component.html',
+  styleUrls: [ './jobeditor.component.css' ],
   imports: [ FormsModule, CommonModule, RouterModule ]
 })
-export class JobNewComponent {
+export class JobEditorComponent {
 
   @ViewChildren('step') formSteps!: QueryList<ElementRef<HTMLDivElement>>;
   currentStep: number = 0;
@@ -26,7 +26,7 @@ export class JobNewComponent {
   public ErrorMsg: string = "";
 
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
-    this.title.setTitle("Jobs - new | BoredCareers");
+    this.title.setTitle("Jobs - Editor | BoredCareers");
 
     this.http.get<Employee[]>("api/employee").subscribe({
       next: empOf => {
diff --git a/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.css b/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.css
new file mode 100644
index 0000000..c357862
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.css
@@ -0,0 +1,11 @@
+.job-frame {
+
+}
+
+.job-warning {
+
+}
+
+.job-details {
+    
+}
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.html b/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.html
new file mode 100644
index 0000000..a49aeb4
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.html
@@ -0,0 +1,42 @@
+<div class="job-frame">
+    <div class="company-details" *ngIf="jobsCompany != null" >
+        <h1>{{ jobsCompany.name }}</h1>
+
+        <h1>{{ jobsCompany.email }}</h1>
+        <h1>{{ jobsCompany.websiteURL }}</h1>
+
+        <h1>{{ jobsCompany.logoURL }}</h1>
+        <h1>{{ jobsCompany.phone }}</h1>
+        
+        <h1>{{ jobsCompany.city }}</h1>
+        <h1>{{ jobsCompany.stateOrRegion }}</h1>
+        <h1>{{ jobsCompany.country }}</h1>
+        <h1>{{ jobsCompany.postalCode }}</h1>
+
+        <h1>{{ jobsCompany.description }}</h1>
+    </div>    
+    <div class="job-details" *ngIf="selectedJob != null" >
+
+        <div class="job-warning" *ngIf="selectedJob.isDeleted" >
+            <h2>THIS JOB POSTING IS CLOSED</h2>
+        </div>
+
+        <h1>{{ selectedJob.title }}</h1>
+
+        <h1>{{ selectedJob.jobType }}</h1>
+        <h1>{{ selectedJob.remote }}</h1>
+
+        <h1>{{ selectedJob.salaryMin }}</h1>
+        <h1>{{ selectedJob.salaryMax }}</h1>
+        
+        <h1>{{ selectedJob.city }}</h1>
+        <h1>{{ selectedJob.stateOrRegion }}</h1>
+        <h1>{{ selectedJob.country }}</h1>
+        <h1>{{ selectedJob.postalCode }}</h1>
+
+        <h1>{{ selectedJob.description }}</h1>
+
+        <h1>{{ selectedJob.createdTime }}</h1>
+        <h1>{{ selectedJob.modifiedTime }}</h1>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.ts b/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.ts
new file mode 100644
index 0000000..1c922e5
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/viewer/jobviewer.component.ts
@@ -0,0 +1,55 @@
+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 { Authentication } from 'app/services/Authentication';
+import { JobListing } from 'app/models/JobListing';
+import { Company } from 'app/models/Company';
+
+@Component({
+  selector: 'main-jobs-viewer',
+  templateUrl: './jobviewer.component.html',
+  styleUrls: [ './jobviewer.component.css' ],
+  imports: [ FormsModule, CommonModule, RouterModule ]
+})
+export class JobViewerComponent {
+
+  public selectedJob: JobListing | null = null;
+  public jobsCompany: Company | null = null;
+  public ErrorMsg: string = "";
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
+    this.title.setTitle("Jobs - Viewer | BoredCareers");
+
+    this.route.queryParams.subscribe(params => {
+      const JobID = params['JobID'];
+      if (JobID){
+        this.http.get<JobListing>( "api/joblisting/" + JobID ).subscribe({
+          next: data => {
+            this.selectedJob = data;
+            this.http.get<Company>("api/company?CompanyID=" + this.selectedJob.companyID).subscribe({
+              next: data => {
+                this.jobsCompany = data;
+              },
+              error: err => {
+                this.ErrorMsg = err.ErrorMsg;
+              }
+            })
+          },
+          error: err => {
+            this.ErrorMsg = err.error;
+          }
+        })
+      }else{
+        router.navigate(["/"]);
+      }
+      if (this.selectedJob != null){
+        
+      }
+    });
+
+  };
+
+}
\ No newline at end of file