diff --git a/static/style.css b/static/style.css
index 640879bec84c1a5f8b9b2c04f308c0a357fdc125..9c2158b087c7f70e807a4a65a05b2509cb7c8518 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,38 @@
+@font-face {
+  font-family: CircularXX;
+  src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Book.6a347aa604467a4e6921af6f4fcb33d2.woff2) format("woff2");
+  src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Book.b553c88291144f54bb8f6505b7807fa6.woff) format("woff");
+  font-weight: 400;
+  font-style: normal
+}
+
+@font-face {
+  font-family: CircularXX;
+  src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Medium.37d42a8b2771863248874d4ac886b68b.woff2) format("woff2");
+  src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Medium.d21fa690d384f11a160d1b52328d8cda.woff) format("woff");
+  font-weight: 500;
+  font-style: normal
+}
+
+@font-face {
+  font-family: CircularXX;
+  src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Bold.074fd642e815669ff63e6600e9ea9e0d.woff2) format("woff2");
+  src: url(https://members.tramshedtech.co.uk/v4_portal/_next/static/media/CircularXX-Bold.87b459306fb0caf65b83213687bb517f.woff) format("woff");
+  font-weight: 700;
+  font-style: normal
+}
+
+body {
+  margin: 0;
+  font-family: CircularXX,sans-serif;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #111;
+  text-align: left;
+  background-color: #f5f5f5
+}
+
 h1
 { color: blue;}
 
@@ -50,3 +85,43 @@ nav li a:hover:last-child {
 
   background-color: #111;
 }
+
+.workspace-item {
+  background-color: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 2px 0 rgb(17 17 17 / 5%);
+  padding: 1.5rem;
+  margin: 0.75rem;
+  display: flex;
+}
+
+.workspace-item .image-col {
+  width: 200px;
+}
+
+.workspace-item .image-col .image {
+  max-width: 100%;
+}
+
+.workspace-item .main-col {
+  flex: 1 0;
+  margin-left: 1rem;
+}
+
+.workspace-item .title {
+  color: inherit;
+  display: inline-block;
+  font-size: 1.25rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  line-height: 1.2;
+}
+
+.workspace-item .meta {
+  color: #666;
+}
+
+.workspace-item .dot {
+  color: #666;
+  font-weight: 700;
+}
diff --git a/templates/home.html b/templates/home.html
index 9a1af7ec00074ae49b10865085a71494a7d8b8d3..5ebde4c6b1cdfc7c4eaf46a5100964172b35d75c 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -3,16 +3,22 @@
 {% block mainBlock %}
 <ul>
 	{% for workspace in workspaces %}
-	<li><a href="{{ workspace.website }}">{{ workspace.name }}</a>
-	<img src="{{ workspace.main_photo }}"></li>
-	<ul>
-		<li>{{ workspace.address }}</li>
-		<li>{{ workspace.description }}</li>
-		<li>{{ workspace.email }}</li>
-		<li>{{ workspace.phone_number }}</li>
-		<li>{{ workspace.opening_hours }}</li>
-		<li>{{ workspace.checkin_instructions }}</li>
-	</ul>
+	<div class="workspace-item">
+		<div class="image-col">
+			<a href="/workspace/{{ workspace.id }}"><img class="image" src="{{ workspace.main_photo }}"></a>
+		</div>
+		<div class="main-col">
+			<div><a href="/workspace/{{ workspace.id }}" class="title">{{ workspace.name }}</a></div>
+			<div>
+				<span class="meta"><a href="mailto:{{ workspace.email }}">{{ workspace.email }}</a></li> <span class="dot">&middot;</span>
+				<span class="meta"><a href="tel:{{ workspace.phone_number }}">{{ workspace.phone_number }}</a></span>
+			</div>
+			<div>
+				<span class="meta">{{ workspace.address }}</span> <span class="dot">&middot;</span>
+				<span class="meta">{{ workspace.opening_hours }}</span>
+			</div>
+		</div>
+	</div>
 	{% endfor %}
 </ul>
 {% endblock %}
\ No newline at end of file
diff --git a/templates/main.html b/templates/main.html
index 34903741b4d4bcc011c8909b6474a4f16a9e6add..b8d9536fa1f8631ee13bb5803819328a5462cacd 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -2,8 +2,6 @@
 <html lang="en">
 <head>
 
-	<link rel="stylesheet" href="static/style.css">
-
 	<!-- Bootstrap CSS -->
 	<link rel="stylesheet" href=
 "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
@@ -11,6 +9,8 @@
 "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
 		crossorigin="anonymous">
 
+	<link rel="stylesheet" href="static/style.css">
+
 	<title>{% block title %}{% endblock %} - Tramshed Workspaces</title>
 </head>