diff --git a/src/lib/components/header.svelte b/src/lib/components/header.svelte
new file mode 100644
index 0000000..17289f5
--- /dev/null
+++ b/src/lib/components/header.svelte
@@ -0,0 +1,3 @@
+<div class="flex w-full h-14 px-2 text-2xl rounded-xl mb-4 bg-[#009FB7] place-items-center">
+    <p>Memento</p>
+</div>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0d8eb03..71980c8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
 	import './layout.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import Header from '$lib/components/header.svelte';
 
 	let { children } = $props();
 </script>
 
 <svelte:head><link rel="icon" href={favicon} /></svelte:head>
+
+<Header />
+
 {@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index cc88df0..e69de29 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,2 +0,0 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
diff --git a/src/routes/layout.css b/src/routes/layout.css
index ffb96a1..1de9649 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,2 +1,20 @@
 @import 'tailwindcss';
 @plugin '@tailwindcss/forms';
+
+/*@import 'quill/dist/quill.core.css';
+@import 'quill/dist/quill.bubble.css';
+@import 'quill/dist/quill.snow.css';*/
+
+html {
+    @apply py-3 px-4;
+    @apply bg-[#252525] text-white
+}
+
+  html body {
+    @apply font-[AmericanTypewriter];
+    /* @apply w-full md:w-[68%] mx-auto h-full; */
+  }
+
+button {
+    @apply py-2 px-3 bg-green-400 rounded-xl;
+}
\ No newline at end of file