diff --git a/frontend/src/components/announcement.svelte b/frontend/src/lib/components/announcement.svelte
similarity index 68%
rename from frontend/src/components/announcement.svelte
rename to frontend/src/lib/components/announcement.svelte
index b074e70..b3f3ec1 100644
--- a/frontend/src/components/announcement.svelte
+++ b/frontend/src/lib/components/announcement.svelte
@@ -5,15 +5,20 @@
 -->
 
 <script>
+    import { slide } from 'svelte/transition';
     export let message;
     export let color = 'red';
     let noderef;
+
+    let visible = true;
 </script>
 
-<div bind:this={noderef} class="announcement" style="background-color: {color};">
-    <span>{message}</span>
-    <input class="close-button" type="button" value="" on:click={() => noderef.parentNode.removeChild(noderef)}>
-</div>
+{#if visible}
+    <div transition:slide bind:this={noderef} class="announcement" style="background-color: {color};">
+        <span>{message}</span>
+        <input class="close-button" type="button" value="" on:click={() => visible = false}>
+    </div>
+{/if}
 
 <style>
     .announcement {
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index 672be56..d0b8e5f 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -6,7 +6,10 @@
     import '$lib/css/fonts.css';
     import '$lib/css/colors.css';
     import '$lib/css/anims.css';
+
+    import Announcement from '$lib/components/announcement.svelte';
     
 </script>
 
+<Announcement message="This is an announcement" color="var(--col_accent)"/>
 <slot></slot>
\ No newline at end of file
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index c59ed0c..2937019 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,9 +1,7 @@
 <script>
-	import Announcement from "../components/announcement.svelte";
+	import Announcement from "../lib/components/announcement.svelte";
 
 </script>
 
-<Announcement message="This is an announcement" color="blue"/>
-
 <h1>Welcome to SvelteKit</h1>
 <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> <i>(SvelteKit)</i> to read the <b>SvelteKit</b> documentation</p>
\ No newline at end of file