diff --git a/src/Client/src/app/pages/main/company/company.component.css b/src/Client/src/app/pages/main/company/company.component.css
new file mode 100644
index 0000000..4263503
--- /dev/null
+++ b/src/Client/src/app/pages/main/company/company.component.css
@@ -0,0 +1,33 @@
+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);
+    text-decoration: none;
+    font: inherit;
+}
+
+    button:hover {
+        background-color: #00000044;
+        color: var(--Mistox-Light);
+    }
+
+.top-bar {
+    width: 100%;
+    height: 60px;
+}
+
+.content-frame {
+    background-color: #3c3c3c;
+    width: calc(100% - 40px);
+    height: calc(100vh - 400px);
+    border-radius: 20px;
+    margin: 10px;
+    overflow: scroll;
+    padding: 10px;
+}
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/company/company.component.html b/src/Client/src/app/pages/main/company/company.component.html
new file mode 100644
index 0000000..f2be310
--- /dev/null
+++ b/src/Client/src/app/pages/main/company/company.component.html
@@ -0,0 +1,20 @@
+<div class="top-bar">
+    <button *ngFor="let company of Employers" (click)="changeSelectedCompany(company.company.id)">{{ company.company.name.toUpperCase() }}</button>
+    <button routerLink="/company/connect" >CONNECT A COMPANY</button>
+</div>
+<div class="content-frame">
+    <div *ngIf="Comp != null">
+        <h1>{{ Comp.name }}</h1>
+        <h1>{{ Comp.email }}</h1>
+        <h1>{{ Comp.emailVerified }}</h1>
+        <h1>{{ Comp.websiteURL }}</h1>
+        <h1>{{ Comp.logoURL }}</h1>
+        <h1>{{ Comp.phone }}</h1>
+        <h1>{{ Comp.postalCode }}</h1>
+        <h1>{{ Comp.country }}</h1>
+        <h1>{{ Comp.stateOrRegion }}</h1>
+        <h1>{{ Comp.city }}</h1>
+        <h1>{{ Comp.description }}</h1>
+        <button routerLink="/company/jobs" [queryParams]="{ CompanyID: Comp.id }" >ACTIVE JOB LISTINGS</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/Client/src/app/pages/main/company/company.component.ts b/src/Client/src/app/pages/main/company/company.component.ts
new file mode 100644
index 0000000..dc8ee16
--- /dev/null
+++ b/src/Client/src/app/pages/main/company/company.component.ts
@@ -0,0 +1,46 @@
+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 { Company, Employee } from 'app/models/Company';
+
+@Component({
+  selector: 'main-company',
+  templateUrl: './company.component.html',
+  styleUrls: [ './company.component.css' ],
+  imports: [ FormsModule, CommonModule, RouterModule ]
+})
+export class CompanyComponent {
+  public ErrorMsg: string = "";
+
+  public Employers: Employee[] = [];
+  public Comp: Company | null = null;
+
+  constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication  ) {
+    this.title.setTitle("Companies | BoredCareers");
+    http.get<Employee[]>("api/employee/").subscribe({
+      next: data => {
+        this.Employers = data;
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
+
+  };
+
+  changeSelectedCompany(companyID: number){
+    this.http.get<Company>("api/company?CompanyID=" + companyID).subscribe({
+      next: data => {
+        this.Comp = data;
+      },
+      error: err => {
+        this.ErrorMsg = err.error;
+      }
+    });
+  }
+
+}
\ No newline at end of file