diff --git a/src/Client/src/app/pages/main/company/connect/companyconnect.component.html b/src/Client/src/app/pages/main/company/connect/companyconnect.component.html
index 12111ca..30cdea5 100644
--- a/src/Client/src/app/pages/main/company/connect/companyconnect.component.html
+++ b/src/Client/src/app/pages/main/company/connect/companyconnect.component.html
@@ -11,9 +11,8 @@
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
             <div class="footer-frame">
-                <span>
-                    This should be your actual company name. It will be public on all the job postings you make.
-                </span>
+                <span>Company Name</span><br />
+                <span>Cannot be changed later</span>
             </div>
         </div>
     </div>
@@ -28,9 +27,7 @@
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
             <div class="footer-frame">
-                <span>This should be a link to your companies URL</span><br />
-                <span>so that people searching for your company</span><br />
-                <span>can find it with ease</span>
+                <span>Link to your company URL</span><br />
             </div>
         </div>
     </div>
@@ -39,13 +36,13 @@
     <div #step class="sub-frame">
         <div class="center">
             <div class="content-frame">
-                <label>Company LOGO URL</label>
+                <label>Company Logo URL</label>
                 <input name="logoURL" [(ngModel)]="newListing.logoURL" type="text" placeholder="https://mistox.com/img/logo.png" />
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
             <div class="footer-frame">
-                <span>This should be a link to your companies Logo</span><br />
+                <span>Link to your company Logo</span><br />
                 <span>This will show on all your job listings</span><br />
             </div>
         </div>
@@ -54,45 +51,54 @@
     <!-- Contact -->
     <div #step class="sub-frame">
         <div class="center">
-            <div class="content-frame split">
-                <div class="half-frame">
-                    <label>Company Email</label>
-                    <input name="email" [(ngModel)]="newListing.email" type="text" />
-                </div>
-                <div class="half-frame">
-                    <label>Company Phone Number</label>
-                    <input name="email" [(ngModel)]="newListing.phone" type="text" />
+            <div class="content-frame">
+                <div class="split">
+                    <div class="half-frame">
+                        <label>Company Email</label>
+                        <input name="email" [(ngModel)]="newListing.email" type="text" placeholder="Questions@mistox.com" />
+                    </div>
+                    <div class="half-frame">
+                        <label>Company Phone Number</label>
+                        <input name="email" [(ngModel)]="newListing.phone" type="text" placeholder="+1 800-000-0000" />
+                    </div>
                 </div>
+                <button type="button" (click)="prevStep()">Back</button>
+                <button type="button" (click)="nextStep()">Next</button>
+            </div>
+            <div class="footer-frame">
+                <span>How clients can get in contact with you about the open job listings</span><br />
             </div>
-            <button type="button" (click)="prevStep()">Back</button>
-            <button type="button" (click)="nextStep()">Next</button>
         </div>
     </div>
 
     <!-- Location -->
     <div #step class="sub-frame">
         <div class="center">
-            <h2>Job Location</h2>
-            <div class="content-frame split">
-                <div class="half-frame">
-                    <label>City</label>
-                    <input name="city" [(ngModel)]="newListing.city" type="text" />
-                </div>
-                <div class="half-frame">
-                    <label>2 Letter Country</label>
-                    <input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" />
-                </div>
-                <div class="half-frame">
-                    <label>2 Letter State/Region</label>
-                    <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" />
-                </div>
-                <div class="half-frame">
-                    <label>Postal Code</label>
-                    <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" />
+            <div class="content-frame">
+                <div class="split">
+                    <div class="half-frame">
+                        <label>City</label>
+                        <input name="city" [(ngModel)]="newListing.city" type="text" placeholder="San Diego" />
+                    </div>
+                    <div class="half-frame">
+                        <label>2 Letter Country</label>
+                        <input name="country" maxlength="2" minlength="2" [(ngModel)]="newListing.country" type="text" placeholder="US" />
+                    </div>
+                    <div class="half-frame">
+                        <label>2 Letter State/Region</label>
+                        <input name="stateOrRegion" maxlength="2" minlength="2" [(ngModel)]="newListing.stateOrRegion" type="text" placeholder="CA" />
+                    </div>
+                    <div class="half-frame">
+                        <label>Postal Code</label>
+                        <input name="postalCode" [(ngModel)]="newListing.postalCode" type="text" placeholder="92020" />
+                    </div>
                 </div>
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
+            <div class="footer-frame">
+                <span>The location of your company office or hq</span><br />
+            </div>
         </div>
     </div>
 
@@ -105,6 +111,9 @@
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="button" (click)="nextStep()">Next</button>
             </div>
+            <div class="footer-frame">
+                <span>Describe your buisiness so that people applying can understand the core values and culture</span><br />
+            </div>
         </div>
     </div>
 
@@ -142,6 +151,9 @@
                 <button type="button" (click)="prevStep()">Back</button>
                 <button type="submit">CREATE COMPANY</button>
             </div>
+            <div class="footer-frame">
+                <span>Does everything look good</span><br />
+            </div>
         </div>
     </div>
 </form>
\ 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
index 58f3098..6044df9 100644
--- a/src/Client/src/app/pages/main/jobs/jobs.component.css
+++ b/src/Client/src/app/pages/main/jobs/jobs.component.css
@@ -1,3 +1,21 @@
+button {
+    width: 150px;
+    border-radius: 5px;
+    margin: 10px;
+    text-align: center;
+    padding: 15px 0;
+    transition: .5s;
+    background-color: #0000;
+    border: 1px solid var(--Mistox-White);
+    color: var(--Mistox-White);
+    text-decoration: none;
+}
+
+    button:hover {
+        background-color: #00000044;
+        color: var(--Mistox-Light);
+    }
+
 .full-width {
     display: block;
     width: 100%;
@@ -5,14 +23,65 @@
 }
 
 .tile-frame {
-    column-count: 4;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
     column-gap: 20px;
     padding: 20px;
     width: calc(100% - 40px);
 }
 
 .tile{
-    background-color: var(--Mistox-Dark)\);
-    height: 40px;
+    background-color: var(--Mistox-Dark);
+    color: var(--Mistox-White);
     break-inside: avoid;
+    padding: 20px;
+    border-radius: 20px;
+    margin-bottom: 20px;
+}
+
+.jobs-frame {
+    width: 100%;
+    background-color: #8888;
+    border-top: 2px solid black;
+}
+
+.post-job-frame {
+    display: flex;
+    justify-content: center;
+    padding: 10px 0;
+}
+
+.tile-title {
+    text-align: center;
+    border-bottom: 1px solid;
+}
+
+.tile-title h1 {
+    font-size: 40px;
+    margin: 5px 0;
+}
+
+.tile-title h2 {
+    font-size: 14px;
+}
+
+.tile-split {
+    columns: 2;
+    text-align: center;
+    padding: 10px 0;
+}
+
+.tile-split h1 {
+    margin: 0;
+}
+
+.tile-button {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+}
+
+.post-job-frame button {
+    border-color: var(--Mistox-Black);
+    color: var(--Mistox-Black);
 }
\ 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
index f3c49a0..5e5ab3d 100644
--- a/src/Client/src/app/pages/main/jobs/jobs.component.html
+++ b/src/Client/src/app/pages/main/jobs/jobs.component.html
@@ -1,5 +1,5 @@
 <!-- My Jobs -->
-<div class="jobs-frame">
+<div *ngIf="auth.isLoggedIn" class="jobs-frame">
     <div class="posted-jobs-frame" *ngFor="let cur of MyJobListings">
         <div class="tile">
             <h1>{{ cur.title }}</h1>
@@ -11,14 +11,13 @@
             <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>
+    <div class="post-job-frame">
         <button [routerLink]="['/jobs/new']">POST JOB</button>
     </div>
 </div>
@@ -26,17 +25,20 @@
 <!-- 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 class="tile-title">
+            <h1>{{ cur.title }}</h1>
+            <h2>${{ cur.salaryMax }} - ${{ cur.salaryMin }}</h2>
+        </div>
+        <div class="tile-split">
+            <h1>{{ cur.jobType }}</h1>
+            <h1 *ngIf="cur.remote" >Remote</h1>
+        </div>
+        <div class="tile-split">
+            <h1>{{ cur.city }}</h1>
+            <h1>{{ cur.stateOrRegion }}</h1>
+        </div>
+        <div class="tile-button">
+            <button [routerLink]="['/jobs/new']">VIEW LISTING</button>
+        </div>
     </div>
 </div>
\ 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
index 3606281..4203dc9 100644
--- a/src/Client/src/app/pages/main/jobs/new/jobnew.component.css
+++ b/src/Client/src/app/pages/main/jobs/new/jobnew.component.css
@@ -14,7 +14,7 @@ form {
 
 .center {
     width: 100%;
-    display: flex;
+    display: grid;
     justify-content: center;
 }
 
@@ -31,6 +31,15 @@ form {
     border-radius: 10px;
     padding: 40px;
     break-inside: avoid;
+    margin-bottom: 20px;
+}
+
+.footer-frame {
+    background-color: #00000044;
+    border-radius: 10px;
+    padding: 10px;
+    break-inside: avoid;
+    margin-bottom: 20px;
 }
 
 .split {