diff --git a/src/client/app/boot.js b/src/client/app/boot.js
index 6cb1488e40..01104bf715 100644
--- a/src/client/app/boot.js
+++ b/src/client/app/boot.js
@@ -84,7 +84,7 @@
 
 	// Detect the user agent
 	const ua = navigator.userAgent.toLowerCase();
-	const isMobile = /mobile|iphone|ipad|android/.test(ua);
+	const isMobile = /mobile|iphone|ipad|android/.test(ua) || window.innerWidth < 576;
 
 	// Get the <head> element
 	const head = document.getElementsByTagName('head')[0];
diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
index 3d05bee48d..a4232a90a8 100644
--- a/src/client/app/desktop/views/home/home.vue
+++ b/src/client/app/desktop/views/home/home.vue
@@ -39,7 +39,7 @@
 				</div>
 			</div>
 		</div>
-		<div class="main" :class="{ side: widgets.left.length == 0 || widgets.right.length == 0 }">
+		<div class="main" :class="{ side: !customize && (widgets.left.length == 0 || widgets.right.length == 0) }">
 			<template v-if="customize">
 				<x-draggable v-for="place in ['left', 'right']"
 					:list="widgets[place]"
@@ -62,7 +62,7 @@
 				</div>
 			</template>
 			<template v-else>
-				<div v-for="place in ['left', 'right']" :class="place">
+				<div v-for="place in ['left', 'right']" :class="place" :key="place">
 					<component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :ref="widget.id" :widget="widget" platform="desktop"/>
 				</div>
 				<div class="main">
@@ -392,7 +392,7 @@ export default Vue.extend({
 					margin 0 auto
 
 		&:not(.side)
-			@media (max-width 1200px)
+			@media (max-width 1100px)
 				> *:not(.main)
 					display none
 
diff --git a/src/client/app/desktop/views/home/timeline.vue b/src/client/app/desktop/views/home/timeline.vue
index d8da6e4e26..b870395c18 100644
--- a/src/client/app/desktop/views/home/timeline.vue
+++ b/src/client/app/desktop/views/home/timeline.vue
@@ -4,12 +4,12 @@
 	<div class="main">
 		<component :is="src == 'list' ? 'mk-user-list-timeline' : 'x-core'" ref="tl" v-bind="options">
 			<header class="zahtxcqi">
-				<span :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</span>
-				<span :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</span>
-				<span :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</span>
-				<span :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</span>
-				<span :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</span>
-				<span :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</span>
+				<div :data-active="src == 'home'" @click="src = 'home'"><fa icon="home"/> {{ $t('home') }}</div>
+				<div :data-active="src == 'local'" @click="src = 'local'" v-if="enableLocalTimeline"><fa :icon="['far', 'comments']"/> {{ $t('local') }}</div>
+				<div :data-active="src == 'hybrid'" @click="src = 'hybrid'" v-if="enableLocalTimeline"><fa icon="share-alt"/> {{ $t('hybrid') }}</div>
+				<div :data-active="src == 'global'" @click="src = 'global'" v-if="enableGlobalTimeline"><fa icon="globe"/> {{ $t('global') }}</div>
+				<div :data-active="src == 'tag'" @click="src = 'tag'" v-if="tagTl"><fa icon="hashtag"/> {{ tagTl.title }}</div>
+				<div :data-active="src == 'list'" @click="src = 'list'" v-if="list"><fa icon="list"/> {{ list.name }}</div>
 				<div class="buttons">
 					<button :data-active="src == 'mentions'" @click="src = 'mentions'" :title="$t('mentions')"><fa icon="at"/><i class="indicator" v-if="$store.state.i.hasUnreadMentions"><fa icon="circle"/></i></button>
 					<button :data-active="src == 'messages'" @click="src = 'messages'" :title="$t('messages')"><fa :icon="['far', 'envelope']"/><i class="indicator" v-if="$store.state.i.hasUnreadSpecifiedNotes"><fa icon="circle"/></i></button>
@@ -200,18 +200,19 @@ export default Vue.extend({
 		&.shadow
 			box-shadow 0 3px 8px rgba(0, 0, 0, 0.2)
 
-	.zahtxcqi
+	header.zahtxcqi
+		display flex
+		flex-wrap wrap
 		padding 0 8px
 		z-index 10
 		background var(--faceHeader)
 		box-shadow 0 var(--lineWidth) var(--desktopTimelineHeaderShadow)
 
+		> *
+			flex-shrink 0
+
 		> .buttons
-			position absolute
-			z-index 2
-			top 0
-			right 0
-			padding-right 8px
+			margin-left auto
 
 			> button
 				padding 0 8px
@@ -244,8 +245,7 @@ export default Vue.extend({
 						height 2px
 						background var(--primary)
 
-		> span
-			display inline-block
+		> div:not(.buttons)
 			padding 0 10px
 			line-height 42px
 			font-size 12px
