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
new file mode 100644
index 0000000..9d97a2c
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.css
@@ -0,0 +1,12 @@
+.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
new file mode 100644
index 0000000..05e4dca
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.html
@@ -0,0 +1,16 @@
+<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
new file mode 100644
index 0000000..33bd400
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.ts
@@ -0,0 +1,53 @@
+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 | 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 => {
+        alert("Failed to delete the job listing. Try again");
+      }
+    });
+  }
+
+}
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/jobs/jobs.component.css b/src/Client/src/app/pages/main/jobs/jobs.component.css
new file mode 100644
index 0000000..9d97a2c
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/jobs.component.css
@@ -0,0 +1,12 @@
+.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/jobs.component.html b/src/Client/src/app/pages/main/jobs/jobs.component.html
new file mode 100644
index 0000000..5c422ac
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/jobs.component.html
@@ -0,0 +1,42 @@
+<!-- My Jobs -->
+<div class="jobs-frame">
+    <div class="posted-jobs-frame" *ngFor="let cur of MyJobListings">
+        <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>
+        <button [routerLink]="['/jobs/edit']" [queryParams]="{ JobID: cur.id }" >EDIT</button>
+        <button (click)="RemoveJobListing(cur.id)">DELETE</button>
+    </div>
+    <div>
+        <button [routerLink]="['/jobs/new']">NEW</button>
+    </div>
+</div>
+
+<!-- Avaliable Jobs -->
+<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/jobs.component.ts b/src/Client/src/app/pages/main/jobs/jobs.component.ts
new file mode 100644
index 0000000..336d4ef
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/jobs.component.ts
@@ -0,0 +1,53 @@
+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',
+  templateUrl: './jobs.component.html',
+  styleUrls: [ './jobs.component.css' ],
+  imports: [ FormsModule, CommonModule, RouterModule ]
+})
+export class JobsComponent {
+
+  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 | 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 => {
+        alert("Failed to delete the job listing. Try again");
+      }
+    });
+  }
+
+}
\ 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/new/jobnew.component.css
new file mode 100644
index 0000000..9d97a2c
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/new/jobnew.component.css
@@ -0,0 +1,12 @@
+.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/new/jobnew.component.html b/src/Client/src/app/pages/main/jobs/new/jobnew.component.html
new file mode 100644
index 0000000..05e4dca
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/new/jobnew.component.html
@@ -0,0 +1,16 @@
+<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/new/jobnew.component.ts b/src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
new file mode 100644
index 0000000..9e7e3b0
--- /dev/null
+++ b/src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
@@ -0,0 +1,53 @@
+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-new',
+  templateUrl: './jobnew.component.html',
+  styleUrls: [ './jobnew.component.css' ],
+  imports: [ FormsModule, CommonModule, RouterModule ]
+})
+export class JobNewComponent {
+
+  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 | 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 => {
+        alert("Failed to delete the job listing. Try again");
+      }
+    });
+  }
+
+}
\ No newline at end of file
diff --git a/src/Server/Controllers/JobListingController.cs b/src/Server/Controllers/JobListingController.cs
index 495fb0b..3325908 100644
--- a/src/Server/Controllers/JobListingController.cs
+++ b/src/Server/Controllers/JobListingController.cs
@@ -30,6 +30,7 @@ namespace BoredCareers.Controllers {
             if (isLoggedIn()) {
                 if (await isLoggedInUserEmployeeOf(JobListing.CompanyID)) {
                     await _databaseService.SetJobListing(JobListing);
+                    return Ok();
                 }
             }
             return NotFound();
@@ -42,6 +43,7 @@ namespace BoredCareers.Controllers {
                 if (jobListing != null) {
                     if (await isLoggedInUserEmployeeOf(JobListingID)) {
                         await _databaseService.DeleteJobListing(JobListingID);
+                        return Ok();
                     }
                 }
             }