diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 8b8851a..692c39e 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms'
 import { HermesClientService } from './hermes-client.service';
 import { AuthUserGuard } from './shared/auth/auth.user.guard'
 import { Subscription } from 'rxjs';
-import { PolicyComponent } from "./policy/policy.component";
+import { PolicyComponent } from "./policies/policy/policy.component";
 import { NavigationComponent } from "./navigation/navigation.component";
 import EventService from './shared/services/EventService';
 import { ApiAuthenticationService } from './shared/services/api/api-authentication.service';
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index b1373a8..b4e57c9 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -1,5 +1,5 @@
 import { Routes } from '@angular/router';
-import { PolicyComponent } from './policy/policy.component';
+import { PolicyComponent } from './policies/policy/policy.component';
 import { AuthUserGuard } from './shared/auth/auth.user.guard';
 import { LoginComponent } from './login/login.component';
 import { TtsLoginComponent } from './tts-login/tts-login.component';
diff --git a/src/app/policies/policies.module.ts b/src/app/policies/policies.module.ts
new file mode 100644
index 0000000..9008c5f
--- /dev/null
+++ b/src/app/policies/policies.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class PoliciesModule { }
diff --git a/src/app/policy-add-form/policy-add-form.component.html b/src/app/policies/policy-add-form/policy-add-form.component.html
similarity index 92%
rename from src/app/policy-add-form/policy-add-form.component.html
rename to src/app/policies/policy-add-form/policy-add-form.component.html
index f91c343..9543ece 100644
--- a/src/app/policy-add-form/policy-add-form.component.html
+++ b/src/app/policies/policy-add-form/policy-add-form.component.html
@@ -1,6 +1,5 @@
 <div>
     <form
-        class="example-form"
         standalone>
         <mat-form-field class="example-full-width">
             <input
@@ -18,7 +17,7 @@
             </mat-autocomplete>
         </mat-form-field>
         <button
-            mat-raised-button
+            mat-flat-button
             (click)="addNewPolicy()">
             Add
         </button>
diff --git a/src/app/policy-add-form/policy-add-form.component.scss b/src/app/policies/policy-add-form/policy-add-form.component.scss
similarity index 100%
rename from src/app/policy-add-form/policy-add-form.component.scss
rename to src/app/policies/policy-add-form/policy-add-form.component.scss
diff --git a/src/app/policy-add-form/policy-add-form.component.spec.ts b/src/app/policies/policy-add-form/policy-add-form.component.spec.ts
similarity index 100%
rename from src/app/policy-add-form/policy-add-form.component.spec.ts
rename to src/app/policies/policy-add-form/policy-add-form.component.spec.ts
diff --git a/src/app/policy-add-form/policy-add-form.component.ts b/src/app/policies/policy-add-form/policy-add-form.component.ts
similarity index 94%
rename from src/app/policy-add-form/policy-add-form.component.ts
rename to src/app/policies/policy-add-form/policy-add-form.component.ts
index 2cc163f..9704fed 100644
--- a/src/app/policy-add-form/policy-add-form.component.ts
+++ b/src/app/policies/policy-add-form/policy-add-form.component.ts
@@ -4,10 +4,10 @@ import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatInputModule } from '@angular/material/input';
-import { Policy } from '../shared/models/policy';
-import EventService from '../shared/services/EventService';
+import { Policy } from '../../shared/models/policy';
+import EventService from '../../shared/services/EventService';
 import { map, Observable, startWith } from 'rxjs';
-import { HermesClientService } from '../hermes-client.service';
+import { HermesClientService } from '../../hermes-client.service';
 
 const Policies = [
     { path: "tts", description: "Anything to do with TTS" },
diff --git a/src/app/policy-table/policy-table.component.html b/src/app/policies/policy-table/policy-table.component.html
similarity index 100%
rename from src/app/policy-table/policy-table.component.html
rename to src/app/policies/policy-table/policy-table.component.html
diff --git a/src/app/policy-table/policy-table.component.scss b/src/app/policies/policy-table/policy-table.component.scss
similarity index 100%
rename from src/app/policy-table/policy-table.component.scss
rename to src/app/policies/policy-table/policy-table.component.scss
diff --git a/src/app/policy-table/policy-table.component.spec.ts b/src/app/policies/policy-table/policy-table.component.spec.ts
similarity index 100%
rename from src/app/policy-table/policy-table.component.spec.ts
rename to src/app/policies/policy-table/policy-table.component.spec.ts
diff --git a/src/app/policy-table/policy-table.component.ts b/src/app/policies/policy-table/policy-table.component.ts
similarity index 97%
rename from src/app/policy-table/policy-table.component.ts
rename to src/app/policies/policy-table/policy-table.component.ts
index bb5c3e7..667f96b 100644
--- a/src/app/policy-table/policy-table.component.ts
+++ b/src/app/policies/policy-table/policy-table.component.ts
@@ -1,11 +1,11 @@
 import { Component, ElementRef, Input, isDevMode, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { MatTable, MatTableModule } from '@angular/material/table';
 import { MatIconModule } from '@angular/material/icon';
-import EventService from '../shared/services/EventService';
-import { Policy } from '../shared/models/policy';
+import EventService from '../../shared/services/EventService';
+import { Policy } from '../../shared/models/policy';
 import { Subscription } from 'rxjs';
 import { FormsModule } from '@angular/forms';
-import { HermesClientService } from '../hermes-client.service';
+import { HermesClientService } from '../../hermes-client.service';
 
 @Component({
     selector: 'policy-table',
diff --git a/src/app/policy/policy.component.html b/src/app/policies/policy/policy.component.html
similarity index 83%
rename from src/app/policy/policy.component.html
rename to src/app/policies/policy/policy.component.html
index a4593c5..c111081 100644
--- a/src/app/policy/policy.component.html
+++ b/src/app/policies/policy/policy.component.html
@@ -1,4 +1,4 @@
-Policies
+<h4>Policies</h4>
 <div>
     <policy-add-form />
 </div>
diff --git a/src/app/policies/policy/policy.component.scss b/src/app/policies/policy/policy.component.scss
new file mode 100644
index 0000000..c500c81
--- /dev/null
+++ b/src/app/policies/policy/policy.component.scss
@@ -0,0 +1,7 @@
+div {
+    background-color: black;
+}
+
+h4 {
+    text-align: center;
+}
\ No newline at end of file
diff --git a/src/app/policy/policy.component.spec.ts b/src/app/policies/policy/policy.component.spec.ts
similarity index 100%
rename from src/app/policy/policy.component.spec.ts
rename to src/app/policies/policy/policy.component.spec.ts
diff --git a/src/app/policy/policy.component.ts b/src/app/policies/policy/policy.component.ts
similarity index 92%
rename from src/app/policy/policy.component.ts
rename to src/app/policies/policy/policy.component.ts
index 2ea502a..894929a 100644
--- a/src/app/policy/policy.component.ts
+++ b/src/app/policies/policy/policy.component.ts
@@ -1,11 +1,11 @@
 import { Component, Inject, NgZone, OnDestroy, OnInit, PLATFORM_ID } from '@angular/core';
 import { PolicyAddFormComponent } from "../policy-add-form/policy-add-form.component";
 import { PolicyTableComponent } from "../policy-table/policy-table.component";
-import { Policy, PolicyScope } from '../shared/models/policy';
+import { Policy, PolicyScope } from '../../shared/models/policy';
 import { DatePipe, isPlatformBrowser } from '@angular/common';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { Subscription } from 'rxjs';
-import { HermesClientService } from '../hermes-client.service';
+import { HermesClientService } from '../../hermes-client.service';
 import { Router, RouterModule } from '@angular/router';
 
 @Component({
diff --git a/src/app/policy/policy.component.scss b/src/app/policy/policy.component.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/tts-login/tts-login.component.html b/src/app/tts-login/tts-login.component.html
index 16dffac..4f3110a 100644
--- a/src/app/tts-login/tts-login.component.html
+++ b/src/app/tts-login/tts-login.component.html
@@ -1,13 +1,14 @@
-<div>
-    <h4>TTS Login</h4>
-    <mat-form-field>
-        <mat-label>API Key</mat-label>
-        <mat-select
-            [(value)]="selected_api_key">
-            @for (key of api_keys; track key.id) {
-            <mat-option [value]="key.id">{{key.label}}</mat-option>
-            }
-        </mat-select>
-    </mat-form-field>
-    <button mat-raised-button (click)="login()">Log In</button>
+<h4>TTS Login</h4>
+<div class="main-div">
+    <mat-card class="main-card">
+        <mat-form-field>
+            <mat-label>API Key</mat-label>
+            <mat-select [(value)]="selected_api_key">
+                @for (key of api_keys; track key.id) {
+                <mat-option [value]="key.id">{{key.label}}</mat-option>
+                }
+            </mat-select>
+        </mat-form-field>
+        <button mat-raised-button (click)="login()">Log In</button>
+    </mat-card>
 </div>
\ No newline at end of file
diff --git a/src/app/tts-login/tts-login.component.scss b/src/app/tts-login/tts-login.component.scss
index e69de29..f3681c1 100644
--- a/src/app/tts-login/tts-login.component.scss
+++ b/src/app/tts-login/tts-login.component.scss
@@ -0,0 +1,14 @@
+.main-div {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+h4 {
+    text-align: center;
+}
+
+.main-card {
+    width: 20%;
+}
\ No newline at end of file
diff --git a/src/app/tts-login/tts-login.component.ts b/src/app/tts-login/tts-login.component.ts
index 4002a1c..1edf597 100644
--- a/src/app/tts-login/tts-login.component.ts
+++ b/src/app/tts-login/tts-login.component.ts
@@ -10,11 +10,12 @@ import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { environment } from '../../environments/environment';
 import { HermesClientService } from '../hermes-client.service';
+import { MatCard } from '@angular/material/card';
 
 @Component({
     selector: 'tts-login',
     standalone: true,
-    imports: [MatButtonModule, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
+    imports: [MatButtonModule, MatCard, MatFormFieldModule, MatSelectModule, MatInputModule, FormsModule],
     templateUrl: './tts-login.component.html',
     styleUrl: './tts-login.component.scss'
 })