diff --git a/src/components/ui/Notice.svelte b/src/components/ui/Notice.svelte
new file mode 100644
index 0000000..7258afb
--- /dev/null
+++ b/src/components/ui/Notice.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  interface MessageProps {
+    children?: import('svelte').Snippet;
+    level: 'warning' | 'error';
+  }
+
+  let { children, level }: MessageProps = $props();
+</script>
+
+<p class="{level}">
+  {@render children?.()}
+</p>
+
+<style lang="scss">
+  @use '$styles/colors';
+
+  p {
+    padding: 5px 24px;
+    margin: {
+      left: -24px;
+      right: -24px;
+    }
+  }
+
+  .warning {
+    background: colors.$warning-background;
+  }
+
+  .error {
+    background: colors.$error-background;
+  }
+</style>
diff --git a/src/routes/features/groups/import/+page.svelte b/src/routes/features/groups/import/+page.svelte
index b477756..0b1c8ad 100644
--- a/src/routes/features/groups/import/+page.svelte
+++ b/src/routes/features/groups/import/+page.svelte
@@ -9,6 +9,7 @@
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { tagGroups } from "$stores/entities/tag-groups";
   import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   const groupTransporter = new EntitiesTransporter(TagGroup);
 
@@ -81,7 +82,7 @@
   <hr>
 </Menu>
 {#if errorMessage}
-  <p class="error">Failed to import: {errorMessage}</p>
+  <Notice level="error">Failed to import: {errorMessage}</Notice>
   <Menu>
     <hr>
   </Menu>
@@ -98,9 +99,10 @@
   </Menu>
 {:else}
   {#if existingGroup}
-    <p class="warning">
+    <Notice level="warning">
       This group will replace the existing "{existingGroup.settings.name}" group, since it have the same ID.
-    </p>
+    </Notice>
+    <br>
   {/if}
   <GroupView group={candidateGroup}></GroupView>
   <Menu>
@@ -114,24 +116,3 @@
     <MenuItem onclick={() => candidateGroup = null}>Cancel</MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-
-  .warning {
-    background: colors.$warning-background;
-    margin-bottom: .5em;
-  }
-</style>
diff --git a/src/routes/features/maintenance/import/+page.svelte b/src/routes/features/maintenance/import/+page.svelte
index 4aa5c77..19202fd 100644
--- a/src/routes/features/maintenance/import/+page.svelte
+++ b/src/routes/features/maintenance/import/+page.svelte
@@ -9,6 +9,7 @@
   import { goto } from "$app/navigation";
   import EntitiesTransporter from "$lib/extension/EntitiesTransporter";
   import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   const profilesTransporter = new EntitiesTransporter(MaintenanceProfile);
 
@@ -80,7 +81,7 @@
   <hr>
 </Menu>
 {#if errorMessage}
-  <p class="error">Failed to import: {errorMessage}</p>
+  <Notice level="error">Failed to import: {errorMessage}</Notice>
   <Menu>
     <hr>
   </Menu>
@@ -97,9 +98,10 @@
   </Menu>
 {:else}
   {#if existingProfile}
-    <p class="warning">
+    <Notice level="warning">
       This profile will replace the existing "{existingProfile.settings.name}" profile, since it have the same ID.
-    </p>
+    </Notice>
+    <br>
   {/if}
   <ProfileView profile={candidateProfile}></ProfileView>
   <Menu>
@@ -113,24 +115,3 @@
     <MenuItem onclick={() => candidateProfile = null}>Cancel</MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-
-  .warning {
-    background: colors.$warning-background;
-    margin-bottom: .5em;
-  }
-</style>
diff --git a/src/routes/transporting/import/+page.svelte b/src/routes/transporting/import/+page.svelte
index be84fcc..0c28eab 100644
--- a/src/routes/transporting/import/+page.svelte
+++ b/src/routes/transporting/import/+page.svelte
@@ -15,6 +15,7 @@
   import { goto } from "$app/navigation";
   import type { SameSiteStatus } from "$lib/extension/EntitiesTransporter";
   import { popupTitle } from "$stores/popup";
+  import Notice from "$components/ui/Notice.svelte";
 
   let importedString = $state('');
   let errorMessage = $state('');
@@ -169,7 +170,7 @@
     <hr>
   </Menu>
   {#if errorMessage}
-    <p class="error">{errorMessage}</p>
+    <Notice level="error">{errorMessage}</Notice>
     <Menu>
       <hr>
     </Menu>
@@ -201,18 +202,18 @@
     {/if}
   </Menu>
   {#if lastImportStatus === "different"}
-    <p class="warning">
+    <Notice level="warning">
       <b>Warning!</b>
       Looks like these entities were exported for the different extension! There are many differences between tagging
       systems of Furobooru and Derpibooru, so make sure to check if these settings are correct before using them!
-    </p>
+    </Notice>
   {/if}
   {#if lastImportStatus === 'unknown'}
-    <p class="warning">
+    <Notice level="warning">
       <b>Warning!</b>
       We couldn't verify if these settings are meant for this site or not. There are many differences between tagging
       systems of Furbooru and Derpibooru, so make sure to check if these settings are correct before using them.
-    </p>
+    </Notice>
   {/if}
   <Menu>
     {#if importedProfiles.length}
@@ -264,23 +265,3 @@
     </MenuItem>
   </Menu>
 {/if}
-
-<style lang="scss">
-  @use '$styles/colors';
-
-  .error, .warning {
-    padding: 5px 24px;
-    margin: {
-      left: -24px;
-      right: -24px;
-    }
-  }
-
-  .warning {
-    background: colors.$warning-background;
-  }
-
-  .error {
-    background: colors.$error-background;
-  }
-</style>