diff --git a/src/app/material.module.ts b/src/app/material.module.ts
index bd762bb..193ba21 100644
--- a/src/app/material.module.ts
+++ b/src/app/material.module.ts
@@ -1,15 +1,23 @@
 import {NgModule} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatDividerModule} from '@angular/material/divider';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
 import {MatMenuModule} from '@angular/material/menu';
+import {MatSelectModule} from '@angular/material/select';
 import {MatToolbarModule} from '@angular/material/toolbar';
 
 export const MATERIAL_MODULES = [
 	MatButtonModule,
+	MatCheckboxModule,
 	MatDividerModule,
 	MatIconModule,
+	MatInputModule,
+	MatFormFieldModule,
 	MatMenuModule,
+	MatSelectModule,
 	MatToolbarModule
 ];
 
diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html
index 6f63086..8ec71b8 100644
--- a/src/app/views/home/home.component.html
+++ b/src/app/views/home/home.component.html
@@ -70,33 +70,39 @@
 	<img src="/assets/img/formation.png" alt="Legion formation" width="100%" height="auto" style="transform: translateY(10px)">
 </section>
 <!-- Contact -->
-<section id="contact" class="d-flex flex-column align-items-center py-5 bg-black text-white" style="min-height: 100vh">
-	<div class="mb-5 py-5"><!-- Spacer --></div>
-	<h2>Contact</h2>
-	<div class="w-100 px-5" style="max-width: 600px">
-		<form class="text-start">
-			<div class="mb-3">
-				<label class="text-white w-100" for="email">Email</label>
-				<input id="email" class="form-control w-100.0" type="email" placeholder="username@example.com">
+<section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
+	<div style="width: 80%; max-width: 600px;">
+		<h2 class="text-center">Contact</h2>
+		<form>
+			<div>
+				<mat-form-field appearance="fill" class="w-100">
+					<mat-label>Email</mat-label>
+					<input matInput>
+				</mat-form-field>
 			</div>
-			<div class="mb-3">
-				<label class="text-white w-100" for="subject">Subject</label>
-				<select id="subject" class="form-control w-100.0">
-					<option>Castra Aestiva/Castra Hiberna</option>
-					<option>Re-enactment Inqueries</option>
-					<option>Other</option>
-				</select>
+			<div>
+				<mat-form-field appearance="fill" class="w-100">
+					<mat-label>Subject</mat-label>
+					<mat-select>
+						<mat-option value="one">Castra Events</mat-option>
+						<mat-option value="two">Reenacting</mat-option>
+						<mat-option value="two">Other</mat-option>
+					</mat-select>
+				</mat-form-field>
 			</div>
-			<div class="mb-3">
-				<label class="text-white w-100" for="message">Message</label>
-				<textarea id="message" class="form-control w-100" rows="5"></textarea>
+			<div>
+				<mat-form-field appearance="fill" class="w-100">
+					<mat-label>Message</mat-label>
+					<textarea matInput rows="8"></textarea>
+				</mat-form-field>
 			</div>
 			<div class="d-flex justify-content-between align-items-center">
-				<div class="d-inline">
-					<input type="checkbox" class="form-check-input" id="copy">
-					<label class="form-check-label" for="copy">Send me a copy</label>
+				<div>
+					<mat-checkbox color="primary">Send me a copy</mat-checkbox>
+				</div>
+				<div>
+					<button mat-raised-button color="primary">Send</button>
 				</div>
-				<button class="btn btn-primary">Send</button>
 			</div>
 		</form>
 	</div>