diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7315ba3f..d5146eb0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 These changes are awaiting release:
 
+## Changed
+
+- Move notifications to its own component.
+
 ## Fixed
 
 - SpinnerTiny: Use svg instead of the css border trick to create the spinner fixing it looking more like a horseshoe than a circle on different browser scales (also added animation on the svg circle).
diff --git a/src/lib/notifications.svelte b/src/lib/notifications.svelte
new file mode 100644
index 00000000..546ac0b6
--- /dev/null
+++ b/src/lib/notifications.svelte
@@ -0,0 +1,112 @@
+<script lang="ts">
+	import { store } from "@/store.svelte";
+	import SpinnerTiny from "./SpinnerTiny.svelte";
+	import { unNotify } from "./util/notify";
+	import Icon from "./Icon.svelte";
+</script>
+
+<div id="notifications">
+	{#each store.notifications as n}
+		<div class={`${n.type} notif`}>
+			{#if n.type === "loading"}
+				<SpinnerTiny />
+			{/if}
+			<!-- only comes from our strings (which may have html) -->
+			<!-- eslint-disable-next-line -->
+			<span>{@html n.text}</span>
+			<button
+				class="plain"
+				onclick={() => {
+					unNotify(n.id);
+				}}
+			>
+				<Icon i="close" />
+			</button>
+		</div>
+	{/each}
+</div>
+
+<style lang="scss">
+	#notifications {
+		display: flex;
+		flex-flow: column;
+		gap: 10px;
+		position: fixed;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		margin-bottom: 8px;
+		z-index: 99999;
+
+		.notif {
+			display: flex;
+			flex-flow: row;
+			align-items: center;
+			min-width: 200px;
+			color: black;
+			background-color: white;
+			border-radius: 8px;
+			border: 1px solid rgba($color: #000000, $alpha: 0.2);
+			box-shadow: 0 4px 10px rgba($color: #000000, $alpha: 0.2);
+			animation: comein 250ms ease forwards;
+			position: relative;
+
+			&.loading {
+				padding-left: 10px;
+			}
+
+			@keyframes comein {
+				from {
+					opacity: 0;
+				}
+
+				to {
+					opacity: 1;
+				}
+			}
+
+			&.error {
+				color: white;
+				background-color: $error;
+				border: 1px solid $error;
+
+				span {
+					border-color: rgba($color: white, $alpha: 0.5);
+				}
+			}
+
+			&.success {
+				color: white;
+				background-color: $success;
+				border: 1px solid $success;
+
+				span {
+					border-color: rgba($color: white, $alpha: 0.5);
+				}
+			}
+
+			span {
+				width: 100%;
+				height: 100%;
+				padding-right: 12px;
+				border-right: 1px solid rgba($color: black, $alpha: 0.2);
+				padding: 10px 12px;
+				padding-left: 9px;
+
+				a {
+					color: white;
+					text-decoration: underline;
+				}
+			}
+
+			button {
+				display: flex;
+				align-items: center;
+				margin: 8px;
+				width: 22px;
+				height: 100%;
+				color: inherit;
+			}
+		}
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 4183b260..1339cb54 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-	import Icon from "@/lib/Icon.svelte";
-	import SpinnerTiny from "@/lib/SpinnerTiny.svelte";
-	import { unNotify } from "@/lib/util/notify";
-	import { store } from "@/store.svelte";
+	import Notifications from "@/lib/notifications.svelte";
 	import { onMount } from "svelte";
 	import { pwaInfo } from "virtual:pwa-info";
 
@@ -37,26 +34,8 @@
 </svelte:head>
 
 <div id="tooltip"></div>
-<div id="notifications">
-	{#each store.notifications as n}
-		<div class={`${n.type} notif`}>
-			{#if n.type === "loading"}
-				<SpinnerTiny />
-			{/if}
-			<!-- only comes from our strings (which may have html) -->
-			<!-- eslint-disable-next-line -->
-			<span>{@html n.text}</span>
-			<button
-				class="plain"
-				onclick={() => {
-					unNotify(n.id);
-				}}
-			>
-				<Icon i="close" />
-			</button>
-		</div>
-	{/each}
-</div>
+
+<Notifications />
 
 {@render children?.()}
 
diff --git a/src/styles/norm.scss b/src/styles/norm.scss
index d0091c76..792ad376 100644
--- a/src/styles/norm.scss
+++ b/src/styles/norm.scss
@@ -235,89 +235,6 @@
 }
 
 :global {
-	#notifications {
-		display: flex;
-		flex-flow: column;
-		gap: 10px;
-		position: fixed;
-		bottom: 0;
-		left: 50%;
-		transform: translateX(-50%);
-		margin-bottom: 8px;
-		z-index: 99999;
-
-		.notif {
-			display: flex;
-			flex-flow: row;
-			align-items: center;
-			min-width: 200px;
-			color: black;
-			background-color: white;
-			border-radius: 8px;
-			border: 1px solid rgba($color: #000000, $alpha: 0.2);
-			box-shadow: 0 4px 10px rgba($color: #000000, $alpha: 0.2);
-			animation: comein 250ms ease forwards;
-			position: relative;
-
-			&.loading {
-				padding-left: 10px;
-			}
-
-			@keyframes comein {
-				from {
-					opacity: 0;
-				}
-
-				to {
-					opacity: 1;
-				}
-			}
-
-			&.error {
-				color: white;
-				background-color: $error;
-				border: 1px solid $error;
-
-				span {
-					border-color: rgba($color: white, $alpha: 0.5);
-				}
-			}
-
-			&.success {
-				color: white;
-				background-color: $success;
-				border: 1px solid $success;
-
-				span {
-					border-color: rgba($color: white, $alpha: 0.5);
-				}
-			}
-
-			span {
-				width: 100%;
-				height: 100%;
-				padding-right: 12px;
-				border-right: 1px solid rgba($color: black, $alpha: 0.2);
-				padding: 10px 12px;
-				padding-left: 9px;
-
-				a {
-					color: white;
-					text-decoration: underline;
-				}
-			}
-
-			button {
-				display: flex;
-				align-items: center;
-				margin: 8px;
-				width: 22px;
-				height: 100%;
-				color: inherit;
-			}
-		}
-	}
-
 	.small-scrollbar {
 		@supports selector(::-webkit-scrollbar) {
 			&::-webkit-scrollbar {