diff --git a/web/src/components/TeamRoleSelect.vue b/web/src/components/TeamRoleSelect.vue
index 7a31824..7a9000c 100644
--- a/web/src/components/TeamRoleSelect.vue
+++ b/web/src/components/TeamRoleSelect.vue
@@ -1,13 +1,42 @@
 <template>
-	<div></div>
+	<div :id="`${team_name}-role-select`">
+		<h2 class="centre">{{ team_name }}</h2>
+		<button
+			@click.stop="joinWriterRole"
+		>
+			{{ writer_name }}
+		</button>
+		<button
+			@click.stop="joinGuesserRole"
+		>
+			{{ guesser_name }}
+		</button>
+	</div>
 </template>
 
 <script>
 export default {
-	name: ``,
+	name: `TeamRoleSelection`,
 	components: {},
+	props: {
+		team_name: {
+			type: String,
+			required: true,
+		},
+		player_name: {
+			type: String,
+			required: true,
+		},
+	},
+	data() {return {
+		writer_name: `Spirit`,
+		guesser_name: `Medium`,
+	}},
 	computed: {},
-	methods: {},
+	methods: {
+		joinWriterRole() {},
+		joinGuesserRole() {},
+	},
 }
 </script>