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
index 33bd400..35075b9 100644
--- a/src/Client/src/app/pages/main/jobs/edit/jobedit.component.ts
+++ b/src/Client/src/app/pages/main/jobs/edit/jobedit.component.ts
@@ -22,7 +22,7 @@ export class JobEditComponent {
   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");
+    this.title.setTitle("Jobs - edit | BoredCareers");
 
     if (this.Page == 1){
 
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
index 05e4dca..c9e2958 100644
--- a/src/Client/src/app/pages/main/jobs/new/jobnew.component.html
+++ b/src/Client/src/app/pages/main/jobs/new/jobnew.component.html
@@ -1,16 +1,56 @@
-<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>
+<form (ngSubmit)="PostJobListing(newListing)">
+    <div>
+        <h1>Title</h1>
+        <input name="title" [(ngModel)]="newListing.title" type="text" />
     </div>
-</div>
\ No newline at end of file
+    <div>
+        <h1>Description</h1>
+        <input name="description" [(ngModel)]="newListing.description" type="text" />
+    </div>
+    <div>
+        <div>
+            <h1>Postal Code</h1>
+            <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
+        </div>
+        <div>
+            <h1>Country</h1>
+            <input name="country" [(ngModel)]="newListing.country" type="text" />
+        </div>
+        <div>
+            <h1>State/Region</h1>
+            <input name="stateOrRegion" [(ngModel)]="newListing.stateOrRegion" type="text" />
+        </div>
+        <div>
+            <h1>City</h1>
+            <input name="city" [(ngModel)]="newListing.city" type="text" />
+        </div>
+    </div>
+    <div>
+        <div>
+            <h1>Minimum Salary</h1>
+            <input name="salaryMin" [(ngModel)]="newListing.salaryMin" type="number" />
+        </div>
+        <div>
+            <h1>Maximum Salary</h1>
+            <input name="salaryMax" [(ngModel)]="newListing.salaryMax" type="number" />
+        </div>
+    </div>
+    <div>
+        <h1>Job Type</h1>
+        <select name="jobType" [(ngModel)]="newListing.jobType">
+            <option value="">-- Select Job Type --</option>
+            <option value="Full-time">Full-time</option>
+            <option value="Part-time">Part-time</option>
+            <option value="Contract">Contract</option>
+            <option value="Temporary">Temporary</option>
+            <option value="Internship">Internship</option>
+        </select>
+    </div>
+    <div>
+        <h1>Remote Position</h1>
+        <input name="remote" [(ngModel)]="newListing.remote" type="checkbox" />
+    </div>
+    <div>
+        <button type="submit">CREATE JOB LISTING</button>
+    </div>
+</form>
\ 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
index 9e7e3b0..f4a8b35 100644
--- a/src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
+++ b/src/Client/src/app/pages/main/jobs/new/jobnew.component.ts
@@ -15,37 +15,20 @@ import { Authentication } from 'app/services/Authentication';
 })
 export class JobNewComponent {
 
-  public MyJobListings: JobListing[] = [];
-  public JobListingPage: JobListing[] = [];
+  public newListing: JobListing = new 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;
-      }
-    });
-
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
+    this.title.setTitle("Jobs - new | BoredCareers");
   };
 
-  RemoveJobListing( JobListingID: number ){
-    this.http.delete("api/joblisting?JobListingID=" + JobListingID).subscribe({
+  PostJobListing(jobListing: JobListing){
+    this.http.post("api/joblisting", jobListing).subscribe({
       next: data => {
-        window.location.reload();
+        
       },
       error: err => {
-        alert("Failed to delete the job listing. Try again");
+        alert("Failed to create the job listing. Try again");
       }
     });
   }