Edited the layout a bit of the files.

frontend/components/MainHeader.vue

@@ -0,0 +1,24 @@
+<template>
+	<header>
+		<div class="header-inner header-gray">
+			<div class="title link">Musare</div>
+			<div class="link">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
+			<div class="link">Donate</div>
+			<div class="link">The Project</div>
+		</div>
+	</header>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				title: "Musare ;)"
+			}
+		}
+	}
+</script>
+
+<style lang="sass" scoped>
+
+</style>

frontend/components/MusareHeader.vue

@@ -1,61 +0,0 @@
-<template>
-	<header>
-		<div class="header-inner">
-			<div class="title">Musare</div>
-			<div class="link">Account&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></div>
-			<div class="link">Donate</div>
-			<div class="link">The Project</div>
-		</div>
-	</header>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				title: "Musare ;)"
-			}
-		}
-	}
-</script>
-
-<style lang="sass" scoped>
-	header {
-		width: 100%;
-		height: 64px;
-		line-height: 64px;
-		text-align: center;
-		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-	}
-
-	.header-inner {
-		width: 100%;
-		height: 100%;
-		background-color: #424242;
-
-		.title {
-			float: left;
-			height: 100%;
-			color: white;
-			padding: 0 16px 0 16px;
-			font-weight: 300;
-			font-size: 32px;
-			cursor: pointer;
-		}
-
-		.link {
-			z-index: 101;
-			position: relative;
-			float: right;
-			height: 100%;
-			color: white;
-			padding: 0 16px 0 16px;
-			cursor: pointer;
-		}
-
-		.title:hover, .link:hover {
-			cursor: pointer;
-			background-color: #393939;
-		}
-	}
-</style>

frontend/components/Station.Vue

@@ -33,19 +33,6 @@
 </script>
 
 <style lang="sass">
-	* { box-sizing: border-box; font-family: Roboto, sans-serif; }
-	html {
-		width: 100%;
-		height: 100%;
-		body {
-			width: 100%;
-			height: 100%;
-			margin: 0;
-			padding: 0;
-		}
-	}
-
-
 	.body {
 		/*width: 100%;
 		line-height: 256px;
@@ -69,4 +56,11 @@
 			width: 85%;
 		}
 	}
+
+	.room-title {
+		left: 50%;
+		-webkit-transform: translateX(-50%);
+		transform: translateX(-50%);
+		font-size: 2.1em;
+	}
 </style>

frontend/scss/Main.scss

@@ -0,0 +1,12 @@
+* { box-sizing: border-box; font-family: Roboto, sans-serif; }
+
+html {
+	width: 100%;
+	height: 100%;
+	body {
+		width: 100%;
+		height: 100%;
+		margin: 0;
+		padding: 0;
+	}
+}

frontend/scss/Navbar.scss

@@ -0,0 +1,66 @@
+header {
+	width: 100%;
+	height: 64px;
+	line-height: 64px;
+	text-align: center;
+	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.header-gray {
+	background-color: #424242;
+	.link:hover {
+		background-color: #393939;
+	}
+}
+
+.header-blue {
+	background-color: #0091ea;
+	.link:hover {
+		background-color: rgba(0, 0, 0, 0.1);
+	}
+}
+
+.header-inner {
+	width: 100%;
+	height: 100%;
+	.title {
+		font-weight: 300;
+		font-size: 32px;
+	}
+
+	* {
+		color: white;
+	}
+
+	.link {
+		z-index: 101;
+		position: relative;
+		padding: 0 16px 0 16px;
+		cursor: pointer;
+
+		height: 64px;
+		min-width: 64px;
+		line-height: 64px;
+		font-size: 2rem;
+		transition: background-color .3s;
+	}
+
+	.right {
+		float: right;
+	}
+
+	.left {
+		float: left;
+	}
+
+	i.material-icons {
+		display: block;
+		font-size: 2rem;
+		line-height: 64px;
+		height: 64px;
+	}
+
+	.title {
+		font-size: 1rem !important;
+	}
+}