diff --git a/assets/components/dialog/dialog.vue b/assets/components/dialog/dialog.vue
index 0e068ebd..6330ff3f 100644
--- a/assets/components/dialog/dialog.vue
+++ b/assets/components/dialog/dialog.vue
@@ -32,6 +32,10 @@
 </template>
 
 <script>
+function mounted() {
+	this.events.emit('blur');
+}
+
 export default {
 	props: {
 		title: {
@@ -40,6 +44,7 @@ export default {
 		},
 	},
 	emits: ['close'],
+	mounted,
 };
 </script>
 
diff --git a/assets/components/header/header.vue b/assets/components/header/header.vue
index 6490a24b..e898106e 100644
--- a/assets/components/header/header.vue
+++ b/assets/components/header/header.vue
@@ -100,6 +100,7 @@
 						:notifications="notifications"
 						:unseen-count="unseenNotificationsCount"
 						@check="fetchNotifications"
+						@add-alert="showAddAlert = true"
 					/>
 				</template>
 			</Tooltip>
@@ -144,12 +145,19 @@
 
 			<Search class="search-full" />
 		</div>
+
+		<AddAlert
+			v-if="showAddAlert"
+			@close="showAddAlert = false"
+		>Alert</AddAlert>
 	</header>
 </template>
 
 <script>
 import Menu from './menu.vue';
 import Notifications from './notifications.vue';
+import AddAlert from '../alerts/add.vue';
+
 import Search from './search.vue';
 
 import logo from '../../img/logo.svg';
@@ -167,6 +175,7 @@ async function fetchNotifications() {
 
 export default {
 	components: {
+		AddAlert,
 		Menu,
 		Notifications,
 		Search,
@@ -177,6 +186,7 @@ export default {
 			logo,
 			searching: false,
 			showFilters: false,
+			showAddAlert: false,
 			notifications: [],
 			unseenNotificationsCount: 0,
 		};
diff --git a/assets/components/header/notifications.vue b/assets/components/header/notifications.vue
index 821b5971..dbea3204 100644
--- a/assets/components/header/notifications.vue
+++ b/assets/components/header/notifications.vue
@@ -14,16 +14,11 @@
 				<Icon
 					v-tooltip="'Add alert'"
 					icon="plus3"
-					@click="showAddAlert = true"
+					@click="$emit('addAlert')"
 				/>
 			</div>
 		</div>
 
-		<AddAlert
-			v-if="showAddAlert"
-			@close="showAddAlert = false"
-		>Alert</AddAlert>
-
 		<div class="notifications-body">
 			<div
 				v-if="notifications.length === 0"
@@ -123,8 +118,6 @@
 </template>
 
 <script>
-import AddAlert from '../alerts/add.vue';
-
 async function checkNotifications() {
 	await this.$store.dispatch('checkNotifications');
 
@@ -142,9 +135,6 @@ async function checkNotification(notificationId, blur) {
 }
 
 export default {
-	components: {
-		AddAlert,
-	},
 	props: {
 		notifications: {
 			type: Array,
@@ -160,6 +150,7 @@ export default {
 			showAddAlert: false,
 		};
 	},
+	emits: ['addAlert'],
 	methods: {
 		checkNotifications,
 		checkNotification,
diff --git a/assets/components/users/user.vue b/assets/components/users/user.vue
index 1ff464ea..b46d2408 100644
--- a/assets/components/users/user.vue
+++ b/assets/components/users/user.vue
@@ -221,6 +221,8 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	box-sizing: border-box;
+	padding: 1rem;
 	background: var(--shadow-touch);
 
 	.icon {