diff --git a/src/Client/src/app/pages/company/company.component.css b/src/Client/src/app/pages/company/company.component.css
index 8eecdb8..d7264b8 100644
--- a/src/Client/src/app/pages/company/company.component.css
+++ b/src/Client/src/app/pages/company/company.component.css
@@ -1,36 +1,56 @@
-button {
+.primary-button {
     height: 45px;
     border-radius: 5px;
     margin: 10px;
     text-align: center;
     padding: 15px 20px;
     transition: 0.5s;
-    background-color: #00000000;
-    border: 1px solid var(--Mistox-Black);
-    color: var(--Mistox-Black);
+    background-color: var(--mistox-button-primary);
+    border: 1px solid var(--mistox-button-primary);
+    color: var(--mistox-button-text);
     text-decoration: none;
     font: inherit;
 }
 
-    button:hover {
-        background-color: #00000044;
-        color: var(--Mistox-Light);
+    .primary-button:hover {
+        background-color: var(--mistox-button-primary-click);
+    }
+
+.secondary-button {
+    height: 45px;
+    border-radius: 5px;
+    margin: 10px;
+    text-align: center;
+    padding: 15px 20px;
+    transition: 0.5s;
+    background-color: var(--mistox-button-secondary);
+    border: 1px solid var(--mistox-button-secondary);
+    color: var(--mistox-button-text);
+    text-decoration: none;
+    font: inherit;
+}
+
+    .secondary-button:hover {
+        background-color: var(--mistox-button-secondary-click);
     }
 
 .top-bar {
-    width: 100%;
-    height: 60px;
+    display: flex;
+    break-inside: avoid;
+    padding: 20px;
+    border-radius: 20px;
+    margin: 20px;
+    background-color: var(--mistox-bg-medium);
+    border: 1px solid var(--mistox-border);
+    box-shadow: var(--mistox-shadow);
+    color: var(--mistox-text);
 }
 
 .content-frame {
-    background-color: #3c3c3c;
-    width: calc(100% - 40px);
-    height: calc(100vh - 400px);
+    max-width: 1800px;
     border-radius: 20px;
-    margin: 10px;
-    overflow: scroll;
     padding: 10px;
-    color: var(--Mistox-White);
+    margin: 0 auto;
 }
 
 .center-item {
@@ -40,7 +60,7 @@ button {
 }
 
 .content-edit {
-    position: absolute;
+    position: relative;
     right: 20px;
 }
 
@@ -66,22 +86,23 @@ button {
 
 .content-link a {
     text-decoration: none;
-    color: var(--Mistox-White);
     margin-top: auto;
 }
 
 .content-desc {
-    border: solid 1px red;
+    border: solid 1px var(--mistox-border);
     border-radius: 5px;
     padding: 20px;
     margin: 0 100px;
+    margin-bottom: 0px;
     margin-bottom: 50px;
+    background-color: var(--mistox-bg-medium);
+    color: var(--mistox-text);
 }
 
 .content-desc h1 {
     margin: 0;
     font-size: 20px;
-    color: #ddd;
 }
 
 .content-button {
@@ -100,8 +121,6 @@ button {
 
 .half-frame {
     width: 50%;
-    border-right: solid 1px var(--Mistox-Black);
-    border-left: solid 1px var(--Mistox-Black);
 }
 
 .half-frame h2 {
@@ -110,7 +129,8 @@ button {
 
 .job-tile {
     display: flex;
-    background-color: var(--Mistox-Black);
+    background-color: var(--mistox-bg-medium);
+    border: solid 1px var(--mistox-border-dark);
     justify-content: end;
     align-items: center;
     border-radius: 10px;
@@ -126,9 +146,4 @@ button {
 
 .job-tile h1 {
     margin: 0;
-}
-
-.job-tile button {
-    color: white;
-    border-color: white;
 }
\ No newline at end of file
diff --git a/src/Client/src/app/pages/company/company.component.html b/src/Client/src/app/pages/company/company.component.html
index 456916f..3387cc5 100644
--- a/src/Client/src/app/pages/company/company.component.html
+++ b/src/Client/src/app/pages/company/company.component.html
@@ -1,13 +1,13 @@
 <div class="top-bar">
     @for(company of Employers; track company.accountID){
-        <button (click)="changeSelectedCompany(company.company.id!)">{{ company.company.name.toUpperCase() }}</button>
+        <button class="secondary-button" (click)="changeSelectedCompany(company.company.id!)">{{ company.company.name.toUpperCase() }}</button>
     }
-    <button routerLink="/company/editor" >CONNECT A COMPANY</button>
+    <button class="primary-button" routerLink="/company/editor" >CONNECT A COMPANY</button>
 </div>
 <div class="content-frame">
     @if(Comp != null){
         <div>
-            <button class="content-edit" style="color: #fff; border-color: #fff;" routerLink="/company/editor" [queryParams]="{ CompanyID: Comp.id }" >EDIT COMPANY</button>
+            <button class="primary-button content-edit" routerLink="/company/editor" [queryParams]="{ CompanyID: Comp.id }" >EDIT COMPANY</button>
             <div class="center-item">
                 <a [href]="Comp.websiteURL">
                     <img [src]="Comp.logo" />
@@ -31,11 +31,11 @@
                 <div class="half-frame">
                     @if (Comp.emailVerified){
                         <div class="content-button">
-                            <button style="color: #fff; border-color: #fff;" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >POST JOB</button>
+                            <button class="primary-button" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >POST JOB</button>
                         </div>
                     } @else {
                         <div class="content-button">
-                            <a style="color: #fff; border-color: #fff;" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
+                            <a class="primary-button" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
                             <span>You must verify your company email before you can post job listings.</span>
                         </div>
                     }
@@ -46,21 +46,21 @@
                             <div class="center-text">
                                 <h1>{{ listing.title }}</h1>
                             </div>
-                            <button [routerLink]="['/application/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW Applicants</button>
-                            <button [routerLink]="['/jobs/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW LISTING</button>
-                            <button [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: listing.id }" >EDIT LISTING</button>
-                            <button (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>
+                            <button class="secondary-button" [routerLink]="['/application/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW Applicants</button>
+                            <button class="secondary-button" [routerLink]="['/jobs/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW LISTING</button>
+                            <button class="secondary-button" [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: listing.id }" >EDIT LISTING</button>
+                            <button class="secondary-button" (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>
                         </div>
                     }
                 </div>
                 <div class="half-frame">
                     @if (Comp.emailVerified){
                         <div class="content-button">
-                            <button style="color: #fff; border-color: #fff;" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >ADD EMPLOYEE</button>
+                            <button class="primary-button" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >ADD EMPLOYEE</button>
                         </div>
                     } @else {
                         <div class="content-button">
-                            <a style="color: #fff; border-color: #fff;" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
+                            <a class="primary-button" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
                             <span>You must verify your company email before you can post job listings.</span>
                         </div>
                     }
@@ -72,9 +72,9 @@
                                 <h1>{{ listing.accountName }}</h1>
                             </div>
                             @if (listing.accountID != auth.loggedInUser.id){
-                                <button (click)="RemoveJobListing(listing.id!)">Remove</button>
+                                <button class="secondary-button" (click)="RemoveJobListing(listing.id!)">Remove</button>
                             } @else {
-                                <button disabled>SELF</button>
+                                <button class="secondary-button" disabled>SELF</button>
                             }
                         </div>
                     }
diff --git a/src/Client/src/styles.css b/src/Client/src/styles.css
index 81dd7be..d9bb939 100644
--- a/src/Client/src/styles.css
+++ b/src/Client/src/styles.css
@@ -12,6 +12,8 @@
     --mistox-border: oklch(0.6 0.13 264);
     --mistox-border-dark: oklch(0.7 0.13 264);
 
+    --mistox-button-text: oklch(1 0.00011 271.152);
+
     --mistox-button-primary: oklch(0.4 0.13 264);
     --mistox-button-primary-click: oklch(0.3 0.13 264);
 
@@ -27,28 +29,34 @@
     font-family: Arial, Helvetica, sans-serif;
 }
 
-dark-mode {
-    --mistox-bg-dark: oklch(0.1 0.065 264);
-    --mistox-bg-medium: oklch(0.15 0.065 264);
-    --mistox-bg-light: oklch(0.2 0.065 264);
+@media (prefers-color-scheme: dark) {
+    :root {
+        --mistox-bg-dark: oklch(0.1 0.065 264);
+        --mistox-bg-medium: oklch(0.15 0.065 264);
+        --mistox-bg-light: oklch(0.2 0.065 264);
 
-    --mistox-text: oklch(0.96 0.1 264);
-    --mistox-text-sub: oklch(0.76 0.1 264);
+        --mistox-text: oklch(0.96 0.1 264);
+        --mistox-text-sub: oklch(0.76 0.1 264);
 
-    --mistox-border-light: oklch(0.5 0.13 264);
-    --mistox-border: oklch(0.4 0.13 264);
-    --mistox-border-dark: oklch(0.3 0.13 264);
+        --mistox-border-light: oklch(0.5 0.13 264);
+        --mistox-border: oklch(0.4 0.13 264);
+        --mistox-border-dark: oklch(0.3 0.13 264);
 
-    --mistox-button-primary: oklch(0.76 0.13 264);
-    --mistox-button-secondary: oklch(0.76 0.13 84);
+        --mistox-button-text: oklch(0 0.00011 271.152);
 
-    --mistox-alert-danger: oklch(0.7 0.13 30);
-    --mistox-alert-warning: oklch(0.7 0.13 100);
-    --mistox-alert-success: oklch(0.7 0.13 160);
-    --mistox-alert-info: oklch(0.7 0.13 260);
+        --mistox-button-primary: oklch(0.76 0.13 264);
+        --mistox-button-secondary: oklch(0.76 0.13 84);
 
-    --mistox-shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
-    font-family: Arial, Helvetica, sans-serif;
+        --mistox-alert-danger: oklch(0.7 0.13 30);
+        --mistox-alert-warning: oklch(0.7 0.13 100);
+        --mistox-alert-success: oklch(0.7 0.13 160);
+        --mistox-alert-info: oklch(0.7 0.13 260);
+
+        --mistox-shadow: 0px 2px 2px oklch(0 0 0 / 0.2), 0px 4px 4px oklch(0 0 0 / 0.1);
+
+        color: #fff;
+        font-family: Arial, Helvetica, sans-serif;
+    }
 }
 
 html {
@@ -56,6 +64,5 @@ html {
 }
 
 body {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%23999999' fill-opacity='0.2' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     background-color: var(--mistox-bg-dark);
 }
\ No newline at end of file