Favorite stations displayed first on homepage

frontend/src/pages/Home/index.vue

@@ -23,7 +23,7 @@
 					</a>
 				</div>
 				<router-link
-					v-for="(station, index) in stations"
+					v-for="(station, index) in filteredStations()"
 					:key="index"
 					:to="{
 						name: 'station',
@@ -131,7 +131,13 @@
 					</div>
 					<div class="bottomBar">
 						<i
-							v-if="station.currentSong.title"
+							v-if="station.paused"
+							class="material-icons"
+							title="Station Paused"
+							>pause</i
+						>
+						<i
+							v-else-if="station.currentSong.title"
 							class="material-icons"
 							>music_note</i
 						>
@@ -184,14 +190,6 @@ export default {
 		};
 	},
 	computed: {
-		filteredStations() {
-			return this.stations.filter(
-				station =>
-					JSON.stringify(Object.values(station)).indexOf(
-						this.searchQuery
-					) !== -1
-			);
-		},
 		...mapState({
 			loggedIn: state => state.user.auth.loggedIn,
 			userId: state => state.user.auth.userId,
@@ -280,6 +278,25 @@ export default {
 			});
 			this.socket.emit("apis.joinRoom", "home", () => {});
 		},
+		filteredStations() {
+			const favoriteStations = [];
+			const otherStations = [];
+			this.stations
+				.filter(
+					station =>
+						JSON.stringify(Object.values(station)).indexOf(
+							this.searchQuery
+						) !== -1
+				)
+				.forEach(station => {
+					if (this.favoriteStations.indexOf(station._id) !== -1) {
+						favoriteStations.push(station);
+					} else {
+						otherStations.push(station);
+					}
+				});
+			return [...favoriteStations, ...otherStations];
+		},
 		isOwner(station) {
 			return station.owner === this.userId;
 		},

frontend/src/pages/Station/components/Sidebar/MyPlaylists.vue

@@ -150,6 +150,7 @@ export default {
 	border: 1px solid $light-grey-2;
 	margin-bottom: 20px;
 	padding: 10px;
+	border-radius: 0 0 5px 5px;
 
 	.icons-group {
 		display: flex;
@@ -175,7 +176,7 @@ export default {
 .create-playlist {
 	width: 100%;
 	height: 40px;
-	border-radius: 0;
+	border-radius: 5px;
 	background-color: rgba(3, 169, 244, 1);
 	color: $white !important;
 	border: 0;

frontend/src/pages/Station/components/Sidebar/Users.vue

@@ -46,6 +46,7 @@ export default {
 	border: 1px solid $light-grey-2;
 	margin-bottom: 20px;
 	padding: 10px;
+	border-radius: 0 0 5px 5px;
 
 	.menu-list li a:hover {
 		color: #000 !important;

frontend/src/pages/Station/index.vue

@@ -1591,6 +1591,7 @@ export default {
 
 				p {
 					max-width: 700px;
+					flex-grow: 1;
 				}
 
 				#admin-buttons {